GraphQL Playground の後継 GraphiQL を試す: Contentfulで最小構成ブログ構築
2025.05.08概要
本記事では、Contentful を初めて使う方向けに、管理画面だけで完結する最小構成の検証を行います。コンテンツモデルの作成からデータの登録、GraphQL API を用いた取得まで、基本的な操作と仕組みを確認します。
より複雑な実装や外部アプリとの統合に進む前のステップとして、Contentful の全体像をコンパクトに把握することを目的としています。
対象読者
- Contentful をこれから使い始めるエンジニアまたはディレクター
- ヘッドレス CMS に関心はあるが、実際に触れたことがない方
- Contentful を業務で使っているが、構造や API を改めて理解したい方
この記事のゴール
- 管理画面上で、ブログ記事を模したコンテンツモデルを作成する
- 作成したモデルに基づいてエントリを登録する
- Contentful の GraphiQL アプリ (GraphQL Playground の後継) を使って JSON 形式でデータを取得する
- UI だけで構造の設計から API 確認まで一通り体験する
想定ユースケース
- 社内ブログやお知らせ記事の管理システムを構築する前の初期検証
- フロントエンドアプリ (例: Next.js) と連携する前提で、コンテンツ構造の事前設計を行いたい場合
- 外部公開せず、構造化された内部データの管理基盤として Contentful を活用したいケース
Contentful の基本構造
Contentful は、従来の CMS (例: WordPress) のように HTML を出力する仕組みではなく、構造化されたコンテンツを API 経由で提供する「ヘッドレス CMS」です。ここでは、Contentful の主要な構成要素を簡潔に整理します。
スペース (Space)
Contentful における「スペース」は、1つのプロジェクト単位です。ブログサイトや製品ページなど、1つのまとまりとして管理したいコンテンツ群を収容する単位です。
コンテンツモデル (Content model)
データベースにおけるテーブルやスキーマに相当するもので、どのような構造のデータを登録するかを定義します。
例えば、ブログ記事用のモデルを作る場合は以下のようなフィールドを含めます。
- title (短いテキスト)
- body (リッチテキスト)
- publishedDate (日付)
このモデルを使って作られた具体的なデータが「エントリ」です。
参考: ContentfulのContent modelとは？デモ環境の構成を確認してみた
エントリ (Entry)
コンテンツモデルに基づいて作成される、実際のコンテンツデータです。
たとえば、title に「初めての記事」、body に本文テキストを入力し、publishedDate を設定すれば、それが 1 件のエントリになります。
環境 (Environment)
環境は、1 つのスペース内における 開発用・ステージング用・本番用などのバージョンを分けて管理する仕組みです。
たとえば、新しいコンテンツ構造を本番に影響なく試したい場合は、master 環境をクローンして新しい Environment を作成し、そこで編集・検証できます。
API (GraphQL / REST)
Contentful では、作成されたコンテンツモデルやエントリを外部から取得するための API を提供しています。API には GraphQL 版と REST 版がありますが、この記事では GraphQL API を使用します。
GraphQL を使うことで、必要なデータだけを指定して取得することができ、複雑なデータ構造も 1 回のクエリで取得可能です。
実践: 管理画面での操作
ここからは、Contentful の管理画面を使って実際にブログ構造を作成していきます。今回は「BlogPost」という名前のコンテンツモデルを新たに作成し、サンプルエントリを登録するところまでを進めます。
スペースの選択
Contentful にログイン後、対象となるスペースを選択します。検証用のスペースをあらかじめ作成しておくと、本番データへの影響を避けられるため安全です。
コンテンツモデルの作成
- 上部メニューから [Content model] を選択し、[Design your content model] をクリックします。
- Create new content type タグの Name に「BlogPost」と入力し、[Create] を選択します。
- 必要なフィールドを追加していきます。以下は今回追加するフィールド例です。
| フィールド名 | 種類 | 説明 |
|---|---|---|
| title | Text > Short text | 記事のタイトル |
| body | Rich text | 記事本文 (装飾あり) |
| publishedDate | Date & time | 公開日時 |
各フィールドの設定では、[Required] (必須) や [Appearance] (表示方法) なども調整可能ですが、今回はデフォルト設定のままで問題ありません。
設定が完了したら [Save] をクリックしてコンテンツモデルを保存します。
エントリの作成
-
上部メニューの [Content] から [Add entry] を選びます。
-
各フィールドに適当な値を入力します。
- title: はじめての記事
- body: Contentful のテスト投稿です。
- publishedDate: 任意の日付
入力が完了したら、右上の [Publish] ボタンを押して公開状態にします。
GraphQL API による取得の確認
ここでは、Contentful に登録したエントリが実際に API 経由で取得できるかどうかを確認します。
GraphiQL アプリの利用方法
Contentful では、ブラウザ上で直接 GraphQL クエリを試すための「GraphiQL」アプリが用意されています。
GraphiQL アプリは GraphQL Playground の後継で、ローカル環境の構築や curl の準備なしに動作確認が可能です。
- 上部メニューの [Apps] をクリックし、 [Marketplace] を選択します。
- 「GraphiQL」アプリを検索し、 [Install] をクリックして設定画面に進みます。
- [Create a new pair of API keys] をクリックし、 API キーを作成後、 Content Preview API - access token をコピーして貼り付けます。
- 左上の [Install] ボタンをクリックしてインストールします。
- インストール後、上部メニューに [Apps > GraphiQL] が追加されます。 [GraphiQL] をクリックすると、 GraphQL エディタが表示されます。
- エディタ上でクエリを入力し、実行ボタンをクリックすることで、API のレスポンスを確認できます。
クエリの記述と実行
以下は、先ほど登録した BlogPost データを取得するための最小限のクエリです。
query {
blogPostCollection {
items {
title
body {
json
}
publishedDate
}
}
}
[▶︎] ボタンを押すと、右側のペインに JSON 形式でレスポンスが表示されます。取得結果は以下のような構造になります。
{
"data": {
"blogPostCollection": {
"items": [
{
"body": {
"json": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Contentful のテスト投稿です。",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
},
"title": "はじめての記事",
"publishedDate": "入力した日付"
}
]
}
}
}
注意点
- body フィールドの中身は Rich Text フォーマットで返ってくるため、プレーンテキストとして表示したい場合には別途整形処理が必要になります。
- クエリ結果には公開済みのエントリしか含まれません。作成直後は [Publish] を忘れないように注意してください。
所感と今後の展望
今回の検証では、Contentful の UI を使って最小構成のブログ構造を構築し、GraphQL API を通じてそのデータを取得するまでの基本操作を確認しました。特にコードを書かずにデータ構造の設計から API レスポンスの確認まで完結できる点は、初学者や非エンジニアにとっても取り組みやすいポイントです。
GraphiQL アプリのおかげで、クエリの試行錯誤が UI 上で完結するのは非常にありがたいポイントです。
特に印象的なのは、Contentful が「API 経由で使われること」を前提に設計されている点です。コンテンツの表示機能をあえて持たず、あらゆるチャネルへの柔軟な出力を想定しているため、Web サイトに限らず、アプリや社内ツール、デジタルサイネージなどにも自然に展開できます。
構造化・再利用・分離の思想が徹底されており、「中身 (コンテンツ) 」と「見せ方 (フロント) 」を完全に切り離すモジュール設計がなされています。これは、従来の CMS では実現が難しかったアプローチです。
以下のような応用可能性も見えてきました。
- 環境 (Environment) の活用:
ステージング環境でテストしてから本番反映するなど、使い分けを意識した設計にすることで、チーム運用時のトラブルを減らせる。 - コンテンツの再利用性:
単一記事だけでなく、カテゴリやタグなどの構造を追加することで、柔軟なフィルタリングや構造化表示が可能になる。
次に試してみたいこと
今回の操作はあくまで「Contentful 単体での構造確認」にとどめましたが、次のような方向で検証を進めていくと、実践的な活用に近づいていきます。
- フロントエンド (例: Next.js) から GraphQL API を叩いてデータを表示する
- Vercel との組み合わせによる静的サイトの自動ビルド
- Webhook を活用した Slack 通知や外部処理のトリガ設定
おわりに
Contentful は「CMS は管理画面だけで完結すべきもの」という従来の認識を良い意味で裏切ってくれるツールです。API ファーストでありながら、導入やプロトタイピングにおいてもスムーズに扱える設計がなされており、フロントエンドや業務アプリの土台として非常に有用です。
今回の記事が、Contentful を触ってみようと思っている方の第一歩になれば幸いです。
