WebflowのCMS Collecions(データベース)フィールドの種類まとめ

March 21, 2021

ノーコードツール”Webflow”のCMSコレクション(データベース)におけるフィールドの種類をまとめていく。

WebflowのCMSコレクションとは?

まずは、Webflow独自の用語コレクションについて簡単に解説。

コレクションは、Webflowに用意されているデータベースのようなものです。コレクションによって、ブログ投稿や著者などのデータを保持し、動的なコンテンツを出し分けします。eコマースプロジェクトの場合には、製品管理などでも利用します。

一つのコレクションがMy SQLなどのテーブル的な概念になっていて、任意にカスタマイズできる。

画像は、筆者のWebflowプロジェクトの管理画面。

・著者を管理するAuthorsコレクション(テーブル)

・ブログの投稿を管理するBlog Postsコレクション

などを作成し、管理しています。

CMSコレクションの設定画面

Collection fields(コレクションフィールド)がいわゆる、テーブルの構成要素。必要なデータ型のフィールドを選んでテーブルで保持したいデータ型を決定します。フィールドを追加は、"Add New Field"からおこなう。

コレクションフィールドの種類

Webflowコレクションフィールド一覧

21年の3月時点で、Webflowのコレクションフィールドは、16種類あります。

Plain text

シンプルな単行テキストを保持するためののコレクションフィールド。

電話番号やEmailなど入力値の書式を厳密にする必要のないテキストを扱うのに、向いている。

ブログの”タイトル”データなど単純なテキストを管理する。

文字数制限の設定も可能。

Rich Text

リッチテキストを保持するためのコレクションフィールド。リッチテキストは、長い形式の文章などを保持するのに向いています。

最も使われるシーンは、ブログの本文などのデータ保持する場合など。

見出しや段落、画像や動画の挿入や、エディターとして利用できます。

Image

画像データを保持するためのフィールド。ブログのアイキャッチ画像や、著者のプロフィール画像などで利用することが多い。

Multi-Image

複数の画像を保持するためのフィールド。一つのコレクションアイテムで、複数の画像を保持したい場合に使う。

具体的な使用イメージとしては、例えば、とあるECサイトの商品ページで、その商品のサンプル画像のギャラリーなどを設置したい場合に活用する。

なお、ギャラリーを扱うための要素として、WebflowにはLight Boxが標準で用意されている。

Video Link

動画リンクデータを保持するためのフィールド。Youtubeなどの動画リンクを保存することで、自動的に動画がフォーマットされて表示できる。

サポートされている動画プラットフォームは以下の通り。

  • YouTube (if you want more control over your YouTube video, try using a YouTube video element)
  • Vimeo
  • DailyMotion
  • KickStarter (just paste in the main campaign URL and we'll grab the main campaign video)
  • TED (multilingual support)
  • Wistia
  • Ustream
  • Livestream
  • Twitch
  • Tudou
  • Hulu
  • SproutVideo

Link

URLリンクを保持するためのフィールド。ボタンやテキストリンク、リンクブロック要素に汎用的なURLリンクを付与したいときによく使う。

Email

メールアドレスを保持するためのフィールド。任意のリンク要素にメールアドレスのリンクを追加できる。

Phone

電話番号を保持するためのフィールド。任意のリンク要素に電話番号のリンクを追加できる。

Number

数値を保持するためのデータフィールド。整数、少数を扱える。明確に数字のみのデータしか保持したくない。テキストデータを弾きたい場合に利用。

Date/Time

日時を保持するためのデータフィールド。ブログの公開日など、日付データを保持する。アイテムを日付順で並び替えする場面でよく使う。

Switch

いわゆるBool値を保持するためのフィールド。ON/OFFの切り替えを必要とするスイッチャーとして利用したりする。個人的によく使うケースとしては、例えば、ブログトップにおすすめ表示したいコンテンツをだし分けするためのトリガーとして、”Feature”などの名前でSwitchフィールドを作成する。FeatureがONのときに、おすすめ表示されると行った具合に。

このように、コンテンツのシンプルなだし分けの場合につかえる。

Color

色のデータを保持するためのフィールド。データベース側で、デザインの色を制御したい場合につかる。

Option

いわゆる選択リストのフィールド。事前に定義された値を選択することができる。なお、単一選択式。

File

ファイルを保持するためのフィールド。一般的な用途としては、フォームからPDFなどのファイルをアップロードするなどが考えられる。

サポートされているファイル形式は以下の通り。

画像ファイルの場合。

  • PNG
  • JPEG / JPG
  • GIF
  • BMP
  • SVG

ドキュメントファイルの場合。

  • PDF
  • DOC / DOCX
  • XLS / XLSX
  • PPT / PPTX
  • txt
  • CSV
  • ODT
  • ODS
  • ODP

最大のファイルサイズは、画像が4MBまで。ドキュメントが10MBまでなので注意。

Reference

リファレンス(参照)フィールドは、他のコレクション内のアイテム(データ)と紐づけるための、フィールドです。

例えば、Blog PostsコレクションとAuthorsコレクションの異なる2つのコレクションがあったとして、Blog Postsコレクションでは、ブログの投稿データを保持しており、Authorsコレクションでは、著者の名前などの情報を保持しているとします。

このとき、Blog PostsにReferenceフィールドを追加して、Authorsのアイテム(データ)を選択、保存すれば、Blog Postsコレクションのデータから、先選択したAuthorsコレクションのアイテムとフィールドデータを参照することができるようになります。

この辺り、何をいっているかわからない場合は、データベースの基礎知識、特にリレーショナル(関係)データベースの概念がよくわかってないと思われます。データベースのノリは、下記の冒頭をみればなんとなくイメージ着くと思うので、みてみるとよいかも。

誰でもすぐわかるデータベース基礎の基礎~

Multi-Reference

マルチリファレンスフィールドはリファレンスフィールドよく似ています。何が違うかというと、マルチリファレンスフィールドで、選択したコレクションから複数のアイテムを保持、参照できます。

参考文献

今回の内容は下記から確認できます。

Use Collection fields to build custom Collections | Webflow University

Tags