システム開発部の長谷川です。
今回はWebflow CMSの機能について解説してみました。
Webflow CMSの機能についてはIntro to Webflow CMSで説明しています。
今回はIntro to Webflow CMSで出てきた3つの要素について簡単に解説してみます。
- CMS Collections
- Collection list
- Collection pages
目次
CMS Collections
CMS Collectionsはデータベースのようにデータを保存できます。
CMS Collectionsに保存されているデータは、
Collection listやCollection pagesから参照できます。
CMS Collectionsを追加するにはメニューから選択していきます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-20.01.38-1-1024x762.png)
CMS Collectionsにはテンプレートの数種類用意してあり、
作りたいコンテンツによって簡単に使い分けることができます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-20.25.14-1024x779.png)
Blog Postsを追加します。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-20.16.50-1024x758.png)
ダミーのデータを20追加してみます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-22.47.40-1-1024x759.png)
CMS Collectionsを追加できました。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-20.30.53-1024x765.png)
Import collection items
CMS Collectionsを作成する場合、
通常はデータ項目を手動で入力する必要があります。
しかし、CSVファイルを使用して、CMS Collectionsのデータ項目を、
一度にインポートすることができます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-19.52.48-1024x756.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-19.52.57-1024x761.png)
さらに、同じWebflowのプロジェクトや別のWebflowのプロジェクトから、
エクスポートしたCMS CollectionsのCSVもインポートすることもできます。
Modify a collection
CMS Collectionsは公開した後でも、
設定やデータ項目の編集ができたり、
CMS Collectionsを削除できたりします。
Collection list
Collection listはCMS Collectionsのデータを一覧で表示できます。
ページにCollection listを追加します。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-20.42.06-1024x759.png)
Collection listで表示したいCMS Collectionsを選択します。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-20.42.16-1024x784.png)
Collection listのレイアウトは5種類が用意されていますので、
好きなレイアウトを選択します。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-20.42.32-1024x759.png)
この状態はCollection listと選択したCMS Collectionsを関連づけをしているだけで、
CMS Collectionsのデータは表示されません。
CMS Collectionsのデータを表示するために、
Collection listに要素を追加します。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-21.02.12-1024x760.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-21.02.32-1024x762.png)
Collection listにCMS Collectionsのデータを表示できました。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-21.02.54-1024x759.png)
Filter Collection lists
Collection listにはフィルター機能があります。
Blog PostsのCMS CollectionsにはFeatured?というSwitch fieldがあり、
フィルター機能でBlog PostsのFeatured?がONのときに表示するとした場合に、
編集中のBlog Postsは表示しないようにできたりします。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-22.11.48-1-1024x759.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-09-22.17.45-1024x759.png)
Paginate Collection lists
Collection listは選択したCMS Collectionsのデータを、
1件から100件しか表示できません。
しかし、ページネーションの設定を追加すると100件以上を表示できます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-16.23.55-1024x758.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-16.27.25-1024x761.png)
Collection pages
Collection pagesはCMS Collectionsのデータ項目をページ毎に表示できる機能です。
Collection pagesのレイアウトやデザインは、
CMS Collectionsのデータ毎に自動的に作成される、
すべてのページに適用されます。
Collection pagesは、ブログ記事、ヘルプ記事、ランディングページなど、
繰り返し使用するコンテンツに役に立つそうです。
Collection pagesは新しいCMS Collectionsを作成すると、
Collection pagesが自動的に作成されます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-17.37.58-1024x759.png)
Collection pagesを選択して、
CMS Collectionsのデータを表示する要素を追加します。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-17.49.35-1024x757.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-17.52.38-1024x761.png)
追加した要素に対して、
CMS Collectionsのデータを表示するように設定していきます。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-18.56.03-1024x765.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-18.56.14-1024x756.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-18.56.29-1024x763.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-18.56.42-1024x760.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-18.56.55-1024x762.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-18.57.07-1024x759.png)
CMS Collectionsのデータを表示することができました。
すでに他のCMS Collectionsのデータ毎のページもできています。
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-19.36.04-1024x760.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-19.40.59-1-1024x760.png)
![](https://nocode-freaks.com/wp-content/uploads/2021/07/スクリーンショット-2021-07-10-19.41.13-1-1024x762.png)
まとめ
Webflow CMS機能について解説してみて思ったことは、
Webflow CMSの大元の機能である、
CMS Collectionsが扱いやすいと感じました。
SQLやDBの構築を知らなくても、
データ項目を簡単に保存や編集ができたり、
CMS Collectionsの連携も簡単にできてしまいます。
みなさんも触ってみてはいかがでしょうか?