ノーコードツール”Webflow”のCMSコレクション(データベース)におけるフィールドの種類をまとめていく。
まずは、Webflow独自の用語コレクションについて簡単に解説。
コレクションは、Webflowに用意されているデータベースのようなものです。コレクションによって、ブログ投稿や著者などのデータを保持し、動的なコンテンツを出し分けします。eコマースプロジェクトの場合には、製品管理などでも利用します。
一つのコレクションがMy SQLなどのテーブル的な概念になっていて、任意にカスタマイズできる。
画像は、筆者のWebflowプロジェクトの管理画面。
・著者を管理するAuthorsコレクション(テーブル)
・ブログの投稿を管理するBlog Postsコレクション
などを作成し、管理しています。
Collection fields(コレクションフィールド)がいわゆる、テーブルの構成要素。必要なデータ型のフィールドを選んでテーブルで保持したいデータ型を決定します。フィールドを追加は、"Add New Field"からおこなう。
21年の3月時点で、Webflowのコレクションフィールドは、16種類あります。
シンプルな単行テキストを保持するためののコレクションフィールド。
電話番号やEmailなど入力値の書式を厳密にする必要のないテキストを扱うのに、向いている。
ブログの”タイトル”データなど単純なテキストを管理する。
文字数制限の設定も可能。
リッチテキストを保持するためのコレクションフィールド。リッチテキストは、長い形式の文章などを保持するのに向いています。
最も使われるシーンは、ブログの本文などのデータ保持する場合など。
見出しや段落、画像や動画の挿入や、エディターとして利用できます。
画像データを保持するためのフィールド。ブログのアイキャッチ画像や、著者のプロフィール画像などで利用することが多い。
複数の画像を保持するためのフィールド。一つのコレクションアイテムで、複数の画像を保持したい場合に使う。
具体的な使用イメージとしては、例えば、とあるECサイトの商品ページで、その商品のサンプル画像のギャラリーなどを設置したい場合に活用する。
なお、ギャラリーを扱うための要素として、WebflowにはLight Boxが標準で用意されている。
動画リンクデータを保持するためのフィールド。Youtubeなどの動画リンクを保存することで、自動的に動画がフォーマットされて表示できる。
サポートされている動画プラットフォームは以下の通り。
URLリンクを保持するためのフィールド。ボタンやテキストリンク、リンクブロック要素に汎用的なURLリンクを付与したいときによく使う。
メールアドレスを保持するためのフィールド。任意のリンク要素にメールアドレスのリンクを追加できる。
電話番号を保持するためのフィールド。任意のリンク要素に電話番号のリンクを追加できる。
数値を保持するためのデータフィールド。整数、少数を扱える。明確に数字のみのデータしか保持したくない。テキストデータを弾きたい場合に利用。
日時を保持するためのデータフィールド。ブログの公開日など、日付データを保持する。アイテムを日付順で並び替えする場面でよく使う。
いわゆるBool値を保持するためのフィールド。ON/OFFの切り替えを必要とするスイッチャーとして利用したりする。個人的によく使うケースとしては、例えば、ブログトップにおすすめ表示したいコンテンツをだし分けするためのトリガーとして、”Feature”などの名前でSwitchフィールドを作成する。FeatureがONのときに、おすすめ表示されると行った具合に。
このように、コンテンツのシンプルなだし分けの場合につかえる。
色のデータを保持するためのフィールド。データベース側で、デザインの色を制御したい場合につかる。
いわゆる選択リストのフィールド。事前に定義された値を選択することができる。なお、単一選択式。
ファイルを保持するためのフィールド。一般的な用途としては、フォームからPDFなどのファイルをアップロードするなどが考えられる。
サポートされているファイル形式は以下の通り。
画像ファイルの場合。
ドキュメントファイルの場合。
最大のファイルサイズは、画像が4MBまで。ドキュメントが10MBまでなので注意。
リファレンス(参照)フィールドは、他のコレクション内のアイテム(データ)と紐づけるための、フィールドです。
例えば、Blog PostsコレクションとAuthorsコレクションの異なる2つのコレクションがあったとして、Blog Postsコレクションでは、ブログの投稿データを保持しており、Authorsコレクションでは、著者の名前などの情報を保持しているとします。
このとき、Blog PostsにReferenceフィールドを追加して、Authorsのアイテム(データ)を選択、保存すれば、Blog Postsコレクションのデータから、先選択したAuthorsコレクションのアイテムとフィールドデータを参照することができるようになります。
この辺り、何をいっているかわからない場合は、データベースの基礎知識、特にリレーショナル(関係)データベースの概念がよくわかってないと思われます。データベースのノリは、下記の冒頭をみればなんとなくイメージ着くと思うので、みてみるとよいかも。
マルチリファレンスフィールドはリファレンスフィールドよく似ています。何が違うかというと、マルチリファレンスフィールドで、選択したコレクションから複数のアイテムを保持、参照できます。
今回の内容は下記から確認できます。
Use Collection fields to build custom Collections | Webflow University