Contentfulで記事を書いて、記事一覧をWebサイトに表示する

Contentful（コンテントフル）は、今人気のヘッドレスCMSの一つです。

Contentful を使えば、サーバー管理の手間やお金をかけずに、ブログ記事などのコンテンツを気軽に管理でき、それをWebサイトやアプリなどに簡単に表示することができます。

本記事では、Contentful で記事を書き、書いた記事一覧をWebサイトに表示する例をご紹介します。

Contentfulのアカウント作成

まずは、Contentful のアカウントを作成します。

料金プランに関しては、無料プランを選択します。無料プランでも、月間10万回のAPI実行、月間50GBの転送量などと寛容な内容のため、問題なく運用できるチームも多いかと思います。

次に、コンテントモデルを作成していきます。

コンテントモデルとは、記事の「型」のことです。たとえば、「記事にはタイトルというテキストフィールドがあり、さらに投稿日時という日時のフィールドがあって...」という設定を、自由に行うことができます。

今回は、「Post」という名前のコンテントモデルを作成してみました。また、以下の画像のようにフィールドを設定しました。

コンテントモデルを作成したら、エントリー（記事）を作成していきます。

エントリーを作成するには、Content のページで、Add entry ボタンを押します。

タイトルや本文など、先ほど登録したフィールドの値を埋めていきます。

リッチテキストのフィールド（今回は「本文」など）には、エディタが表示されますので、テキストにリンクを貼ったり、画像を挿入したりすることが可能です。

エントリー（記事）を公開するには、Publish ボタンを押します。ステータスが Published に変われば、公開完了です。

次に、APIキーを作成します。

APIキーとは、Contentfulのデータを取得するための鍵のようなものです。具体的には、Webサイト側からContentfulのデータ取得APIを実行する際に必要となります。

APIキーを作成するには、サイト右上の歯車マークから API Keys というメニューを選択し、Add API Key ボタンを押します。

APIキーの Name は任意の値で大丈夫ですが、管理しやすいように、「Webサイト用」などと入れておきましょう。

APIキーを作成したら、アクセストークン（Content Delivery API - access token の部分の値）をコピーしておきます。

※ コピーするのは、「Content Preview API」ではなく「Content Delivery API」ですので、ご注意ください。

最後に、Webサイトに表示していきます。

この作業は、基本的にプログラミングが必要となります。内容としては、Contentful から記事データを取得して、そのデータを整形して表示するというイメージです。

Next.js というWebフレームワークを使って実装した例を、GitHub Gist にて公開していますので、参考にしてみてください。

こちらのコードにて、以下の画像のとおり、Contentful の記事一覧を表示することができました。

もちろん、レイアウトやデザインは自由に変えることができますので、ブランディングに合わせてカスタマイズが可能です。

本記事では、Contentful で記事を書き、記事一覧をWebサイトに表示する例をご紹介しました。

Contentfulの無料プランであれば、お金やサーバー管理の手間をかけずに、気軽に記事管理ができますので、ぜひ試してみてください。