この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも、ベルリンオフィスの小西です。
ヘッドレス CMS の Contentful について、そういえば概要説明的な記事は書いたことがなかったなと思い、本記事を執筆してみました。
この記事で Contentful の全体像や使用する際の流れを把握できるようにしているつもりです。
こういう情報が欲しいなどあればお気軽にご連絡ください。
Contentfulについて
Contentful はヘッドレス CMS の一つです。
Contentful では記事やアセット（画像など）の管理を行い、記事の取得や表示などを行う「ビュー（View）」は外部に委ねるため、ヘッドレスと言われます。
Contentful はドイツの会社で、弊社のヨーロッパオフィスと同じベルリンに本社があり、アメリカ・ヨーロッパを中心にグローバルにサービス展開しています。
Contentfulの全体像
Contentful の基本的な構造は、下記の図で説明できます。
- Organization … 主に運営組織単位で切られることが多い。ユーザーアカウントはリソースとして独立しており、複数の Organization に所属できる。
- Space … Webサイトやサービス単位の区切り。ただしヘッドレスのため、複数ドメインのサイトを1スペースで管理することももちろん可能。
- コンテンツモデル（Content model） … 記事フォーマットの定義。詳細は後述します。
- エントリーフィールド（Entry field） … 記事のための各入力フィールドの定義。
- 例: 短文テキスト, 長文テキスト, メディア（画像や動画など）, Boolean（true/false）…
実際に記事を投稿する際は、上記で定義した コンテンツモデルの内部の各エントリーフィールドに対して入力を行なっていきます。
コンテンツモデル（Content model） って何?
ここが Contentful の肝で、Wordpress などの従来のCMSと少し使い勝手の異なる部分かと思います。
コンテンツモデルとは 「記事に何を入力してもらうか」を定義する場所で、記事を投稿する前に行なっておく必要があります。実際には小要素となるエントリーフィールドをまとめる役割です。
例えば一般的なブログ記事を想定すると、まずは [ブログ] というコンテンツモデルを作成し、下記3つのフィールドを定義することが考えられます。
- [記事タイトル] … 短文フィールド
- [記事本文] … 長文フィールド
- [サムネイル] … アセット（画像）フィールド
この場合の記事投稿画面は下記のようになり、3つの入力フィールドが確認できると思います。この入力フィールドを自由に（時には自分でコードを書いて）設定できる、点が重要です。
記事投稿画面で、執筆者に直接関係のないフィールドや情報のノイズを極力排して、かつ API にも不要なデータが含まれないため、ワークフロー全体を最適化できます。
またカスタムロール機能を使うことで、Organization から 各 Entry field のどのレベルにおいても細かな権限設定が可能です。
先で挙げた [ブログ] というコンテンツモデルを例にとり、チームに Editor（各記事をレビューする責任者） と Writer（記事を執筆する人） がいる場合、
- 記事は Editor のみが公開できる（記事の下書きは全員が可能）
- [記事タイトル] フィールドは、Editor のみ編集可能。Writer は表示のみ
- [記事本文], [記事サムネイル] フィールドは Writer, Editor 誰でも編集可能
という制限が実現できます。
なお Editor, Writer というのは一例で、実際はユーザー側で自由に権限を作成/分割可能です。
Contentfulの投稿の流れ
Contentful で記事を投稿してサイト表示するには、大きく次の3つのステップを踏みます。
Contentful ダッシュボードでどのように記事投稿を行うかを説明します。
1. コンテンツモデルの定義
記事投稿に必要な コンテンツモデル を定義します。
ヘッダーの [Content model （コンテンツモデル）] からコンテンツモデル一覧ページに移動し、[Add content type （新規追加）]をクリックします。
コンテンツモデル名、ID、説明文を追加して [Create] します。
- コンテンツモデル名は日本語でも可
- ID は API でモデルを指定する際に利用するため、アルファベットかつユニークである必要がある
[フィールドを追加] をクリックし、作成したモデルに入力用のフォールドを追加していきます。
入力フィールドのタイプを選択します
- Rich text … リッチテキストによる長文入力が可能
- Text … テキスト入力が可能。短文、リスト、もしくはマークダウン形式の長文テキスト
- Number … 数値を選択
- Date and Time … 日時をカレンダーから選択可能
- Location … 地図上から任意の地点を選択
- Media … 画像やファイルなどのアセットをアップロード可能
- Boolean … Yes もしくは No の二択式フィールド
- JSON … JSON形式で自由にデータ入力が可能
- Reference … 他のモデルのエントリーとリンクさせることが可能
例えば短文テキストフィールドを作成する場合を例に取ります。
まずは [Text] を選択します。
任意のフィールド名（日本語可）、フィールドIDを入力し、 type として [Short text, exact search] を選択し、 [Create and configure] に進みます。
[Settings] タブで、
- [This field represents the Entry title] にチェックを入れると Contentful 上においてもそのフィールドが記事タイトルとして扱われるため、検索しやすくなります。1つのコンテンツモデルにつき1つのフィールドのみタイトルとして設定できます。
- [Enable localization of this field] にチェックを入れると、あらかじめ設定した複数の言語（Locale）ごとにフィールド入力ができるようになります。
[Validation] タブからは、フィールド入力時のバリデーションを制御できます。
- フィールドのバリデーションでは下記の設定が可能です。
- 必須 … 入力を必須にしないと記事を保存できない
- ユニーク … 他の記事と値が重複できない
- 文字数制限 … 指定した文字数以内の入力のみ可能にする
- 特定のパターンのみ許可 … 正規表現で特定の入力パターンのみ許可する
- 特定のパターンを禁止 … 特定の文字列の入力などを禁止する
- 特定の値のみ許可 … 特定の値の選択式オプションを利用する
[Default value] タブに移動すると、フィールドに初期値として入力しておきたい値を設定可能です（placeholder）。
[Appearance] タブではフィールドの見た目を設定できます。URL、ドロップダウン、ラジオボタン、スラッグ形式などが選択可能で、自動的に適切なバリデーションも付与してくれるため便利です。
諸々の設定ができたら [Confirm] で設定を完了します。
フィールドが追加されました。同じ要領で、任意のフィールドを追加していきます。
2. 記事の投稿
1で作成したコンテンツモデルに対して記事を投稿します。
ヘッダーの [Content] からコンテンツ一覧ページに移動し、[Add Entry] から先ほど作成したモデル名をクリックします。
記事の投稿画面に遷移します。入力可能なフィールドは1で設定されたフィールドに準拠します（下の例では3つのフィールドが追加されています）。
準備ができたら右上の [Publish] をクリックすると、公開ステータスで記事が保存され、API から記事を取得できるようになります。
3. 記事の表示
ヘッドレス CMS では、記事を表示する「ビュー」側は自分で開発する必要があります。
基本的に API で記事を取得するため、ビュー側をどう開発するか、どの言語を使用するか、サーバーサイドレンダリングを行うか、静的ページ生成を行うかなどは完全に自由です。
Contentful は対応プラットフォームの自由度が高く、公式から多くのライブラリーが公開されています。
→ 詳しくは https://www.contentful.com/developers/docs/platforms/
例えば下記は Jamstack での構成図の例です。
例えば静的サイト生成フレームワークである Gatsby のサイト構築例は下記の記事にまとめてあります。
また最近の、Cloudflare Workers などのエッジサーバーでサーバーサイドレンダリングを行うフレームワーク Remix も既にパッケージが公開されており、技術系のドキュメントやサポートは非常に手厚いといえるかと思います。
弊社クラスメソッドではヘッドレス CMS の実装面などの技術的な相談にも乗ることができますので、お気軽にご相談ください。
Contentful APIについて
本番サイトやプレビュー用など、さまざまな用途で記事を取得するために、Contentful には複数のREST API エンドポイントがあります。詳しくは下記記事にまとめています。
また GraphQL エンドポイントも提供しており、GraphQL Playground というアプリを Contentful にインストールすることで、Contentful上で GraphQL のクエリをテストできて便利です。
Contentful でのアセット管理
Contentfulには画像をはじめとしたアセット管理機能が充実しており、実は Contentful 単体で画像CDN, 配信, 変換ができてしまい、大変優秀です。詳しくは下記記事にまとめています。
Contentfulの便利な機能
以上で Contentful の基本的な説明は以上でカバーできていると思いますが、さらにその他の便利な機能の一部を紹介します。
Workflows（ワークフロー）
これはコンテンツを公開するまでのステップを、管理者側で設定できる機能になります。
イメージとしては、
- まず記事のライターが下書きを書き、
- チェック担当の編集者にレビューを回す
- 編集者がOKであれば、記事を公開する
みたいな一連のステップを、Contentful の UI で完結して設定できます。
またスケジュール機能と合わせ、特定の記事のグループをある日時に公開する、みたいな処理も可能です。
個人レベルであれば無料で使い始められる Contentful ですが、上記のように執筆チームがスケールしていく中でも記事公開フロー管理が柔軟にできる点は強みかと思います。
カスタムアプリ
Contentful をカスタマイズできるアプリを Typescript で構築できます。
雑にいえば WordPress のプラグインに近く、外部で開発したアプリケーションを Contentful にインストールすることできます。
あくまでごく一例ですが、下記のような拡張機能が開発できます。
- あらかじめ設定したルールに則った記事の自動校正
- 独自のWisywigエディターの追加
- 外部サイトのビルド完了通知を Contentful で受けとる
- 対応する記事の Pageviews をダッシュボードに表示する
また、Forma 36 というオープンソースのデザインシステムも Contentful から公開されているため、UI的に違和感のない形で機能拡張が開発できます。 Forma 36 は React コンポーネントと Figma UI で提供されています。
なお、サードパーティのマーケットプレイスから欲しい機能を探すこともできます。
ピュアなヘッドレス CMS でここまで拡張性が高いのも Contentful の特徴です。
権限管理
先述した通り、ユーザーを特定の権限が紐づいたグループに所属させることで、細かな制限が可能になります。
Contentful 上のほぼ全てのリソースが制御対象に含まれ、それぞれの条件で特定のアクションの許可もしくは拒否を強制できます。
- Organization
- Space
- コンテンツモデル
- コンテンツ
- エントリーフィールド
- アセット
アセット保護機能
公開前のアセットを外部からアクセスできないように制限することができます。詳しくは以前↓の記事を書きました。
よくあるご質問
Q. Contentful ダッシュボードは日本語化されていますか？
A. ダッシュボードは英語版のみ提供されていますが、クラスメソッドで日本語化Chromeプラグインを提供しています。
Q. SEOはどのように対策しますか？
A. 基本的にはフロント側でケアする問題ですが、SEOメタ情報の入力フィールドをあらかじめ提供してくれるCompose 機能により、実装手順を簡略化することが可能です。
Q. 他のCMSからデータ移行することはできますか？
Contentful では様々なマイグレーション方法を用意しています。CLI や SDK、JSONによる手動インポートなど、移行元CMSの記事形式に合わせて対応できます。
Q. 無料版と有料版の違いを教えてください。
無料版では API コール数やレコード数などに制限はあるものの、個人レベルの小規模なサービスやチームであればそのまま使い続けられる程度には柔軟です。
クォータの引き上げや一部機能利用のためには有料版が必要です。ご検討中のお客様は一度クラスメソッドにご相談いただければと思います。
最後に
Contentful はヘッドレスCMSの中でも機能が豊富かつアップデートも頻繁にあるため、登場した当初より全体像が掴みにくくなっているかな、と思いこんな記事を書いてみました。
クラスメソッドでは Contentful の契約のご相談、構築支援をしています。 ご興味のある方、またすでに Contentful を使っているけど実装面で困っている方いましたら、ぜひ一度弊社までお問い合わせください。
3
