HeadlessCMS「contentful」を試したみた

ヘッドレスCMSとは、WordPressやMovableTypeなどと違い、テンプレートを表示する部分を持たず、APIでデータを提供することに特化している点が特徴です。一般的なCMSと同様に、コンテンツの投稿や管理画面は用意されていますが、コンテンツを閲覧する機能は用意されておらず、APIでコンテンツを提供します。詳しい説明は、散々と他サイトで紹介されているかと思いますので、省略します。

ヘッドレスCMSはこちらで、沢山紹介されています。

今回はcontentfulとReactJSを使って、サンプルを作って見たいと思います。

料金

https://www.contentful.com/

contentfulは有料のクラウドサービスとなりますが、無料でとりあえずSpaceを2つまで(元から設定してあるexample projectを含む)試すことが出来ます。
Speceとは、コンテンツを管理する単位で、プロジェクト毎に切り替えるイメージです。

個人利用なら、$39/monthの「MICRO SPACE」で十分ですが、以下の条件を超える場合は、$879/monthの「LARGE SPACE」や、別途見積りが必要な「ENTERPRISE-GRADE SPACES」を検討する必要があります。

  • 最大24のコンテンツタイプ(記事、著者…etc)
  • ユーザー権限は1種類
  • 最大2言語まで対応
  • 5,000レコード(記事 + 画像など別途登録するメディア)

contentfilの料金(Flexible pricing for any digital product)

今回は、無料版で、プロジェクトが1つ(※サンプルを削除すれば2つ?)まで利用可能な「MICRO SPACE」でコンテンツを作成します。

Sign Up

まずは、サインアップを完了させて、管理画面の、左上のメニュー「+Create space」をクリックして、Spaceを作成します。すでに「The example project」がサンプルとしてあらかじめ作成されていますので、こちらを参考にすることも可能です。

Speceの作成

Spaceの種類を選択します。今回は無料で使える「Free」を選択します。「Micro」と比べると、Freeは作成できるSpeceが2つまで、ということで、あくまで試用版という位地付けでしょうか。

Speceの詳細(名前)を設定します。

ContentModelの作成

Speceを作成したら、上部のメニューから「Content Model」を選択して、「Add conent type」をクリックして、データの入れ物となるモデルを作成します。

作成するモデルの名称と詳細を設定します。

Fieldの追加

モデルを作成したら、次に「Add field」をクリックして、モデルにフィールドを追加します。

追加するフィールドの種類を選択し、フィールドの詳細を設定します。
利用できるフィールドの種類は以下になります。

  • Rich text
  • Text
  • Number
  • Date and time
  • Location
  • Media
  • Boolean
  • JSON object
  • Reference

フィールドがモデルに追加されました。

「JSON preview」にて、APIから返却されるJSONのサンプルを確認出来ます。

Contentの編集

次に「Content」メニューをクリックして、実際にコンテンツを入力していきます。入力完了したら「Publish」をクリックして記事を公開します。

API keyの取得

「Settings」メニューから、APIkey情報を取得します。

「Spece ID」と「Content Delivery API – access token」の項目を利用します。

まとめ

ということで、今回はここまで。ヘッドレスCMSのcontentfulを使った、コンテンツの準備が出来上がりました。

次回、取得したAPIkeyを元に、APIからコンテンツを取得して、ReactJSにてコンテンツを表示します。