NEXTSCAPE blog

株式会社ネクストスケープの社員による会社公式ブログです。ネスケラボでは、社員が日頃どのようなことに興味をもっているのか、仕事を通してどのような面白いことに取り組んでいるのかなど、会社や技術に関する情報をマイペースに紹介しています。

MENU

ヘッドレスCMS「Contentful」によるコンテンツ管理及び配信

はじめに

株式会社ネクストスケープ、ソリューションビジネス部に所属している小野塚です。
前回の記事ではヘッドレスCMS「Contentful」について説明しました。

blog.nextscape.net

前回はタイトルに「触ってみた」と書いておきながらほぼ概要説明で終わってしまいました。スミマセン。。今回こそ本当に「触ってみた」記事となります。
まずはContentfulに対するコンテンツの登録と、その登録したコンテンツを配信用のAPIでどのように取得するかを簡単に説明します。

スペースの作成

まずは「スペース」を作成します。
スペースとはサイトやスマホアプリで扱いたいコンテンツのまとまり、といったところでしょうか。

例えばチェーン店を持つコーヒーを扱う会社のスペースであればそのサイトやスマホアプリで使われるコンテンツ、各店舗の情報やそこで売られるコーヒー豆、コーヒーを入れる道具の説明文や画像等をそのスペース内に作ることになります。

スマホアプリやWebサイト等、様々なプラットフォームでコンテンツを利用するにもかかわらず、「とあるWebサイトで使用するコンテンツ群」というくくりでスペースを作成してしまうとその情報をスマホアプリで使用する場合に不都合が生じてしまうかもしれません。ヘッドレスCMSはあくまでコンテンツ中心の考えとなりますので注意が必要です。

まずはContentfulの管理画面において画面上部のタブから「Spaces」を選び、以下の画面の右上、「Add new space」ボタンを押します。

以下のようにスペース名を入力する画面になるので適当な名前を入力します。
今回はブログサイトを作成するという例で「王様のブログ」というスペース名にします。

コンテンツモデル作成

次にコンテンツモデルを作成します。
コンテンツを特定の意味、グループでまとめたものがコンテンツモデルとなります。

例えば引き続きブログサイトを例にするとブログ自体は極力最小の構成を考えた場合に「タイトル」、「本文」、そして「発行日時」で1つの記事とするのが一般的かと思います。
つまり、「タイトル」、「本文」、そして「発行日時」の3つで1つのコンテンツモデルとしてコンテンツを扱います。

まずはContentfulの管理画面、上部タブで「Content model」を選び、以下のような画面になりますので、「Design your content model」ボタンを押下します。

すると以下のようにコンテンツモデルに関する名前や説明を入力する画面になるのでそれぞれ入力を行います。

次にこのコンテンツモデルを構成する項目、ここでは「field」(フィールド)と呼んでいますが、このフィールドを作成していきます。
繰り返しになりますが、今回は「タイトル」、「本文」、そして「発行日時」の3つで構成されているのでそれぞれについてフィールドを用意します。

まずは以下の画面で「Add field」ボタンを押下します。

次にフィールドの「型」を選びます。
まずはタイトルなので「Text」でよいかと思います。

更に以下の画面でそのフィールドの必要事項を入力します。
ここで1点注意点があります。
Nameを英語で入力すればField IDもNameに従って自動的に入力されますが、日本語の場合は別途英語で入力する必要があります。

次に「本文」のフィールドを追加します。

そして「発行日時」フィールドを作成します。

これで以下のように3つ、フィールドが作成できました。

コンテンツの登録

ここまでで「スペース」、そしてスペースの中に存在する「コンテンツモデル」を作成しましたが、コンテンツモデルはあくまでコンテンツを格納する「型」であったり、「枠組み」であったりなのでそこに実際のコンテンツを入力しなければいけません。

Contentfulではこの具体的なコンテンツをentry(エントリー)と呼びます。
Contentful管理画面の上部タブで「Content」を選び、「Add entry」ボタンを押下します。

以下のように今回作成した3つのフィールドが表示されますので、その中にコンテンツを入力します。

以下のように1つ、エントリーが入力されました。「State」「Published」といった単語が気になるかもしれませんが、こちらはまた別途説明したいと思いますので今回は次に進みます。

 

APIによる配信(コンテンツ取得)

ここまででコンテンツの登録はできました。しかしながら登録しただけでは意味がありません。
これをWebサイトやスマホアプリで取得するためにAPIでコンテンツを取得できるようにする必要があります。

では早速APIでコンテンツを取得してみましょう
まず、管理画面の右上、「Settings」で表示されるプルダウンメニューから「API Keys」を選択します。

APIキーについては一般に使われるAPIキーと同じですのでここでは説明を割愛します。

以下の画面に遷移するので右上の「Add API key」ボタンを押下します。

以下のような画面に遷移します。
ここにはAPIキーも含め、API呼び出しに必要な情報が表示されています。

まずはコンテンツ タイプを取得してみます。
以下のURLを参考にAPIを作成し、Postman等で作成したAPIを叩いてみましょう。

 Content Delivery API The Content Delivery API (CDA), is a read-only API for delive www.contentful.com  

すると以下のように今回作成したコンテンツモデル、タイトルや本文の情報を取得できます。

次にエントリを取得してみましょう。
エントリの一覧から取得したいエントリの三点リーダーを選び、「Copy entry ID」をクリックします。

これでエントリを取得するためのAPIが作成できるので、Postmanで実行してみると以下のようにコンテンツ、エントリーが取得できることがわかります。

以上でコンテンツの登録とそのコンテンツを取得するためのAPIの呼び出しまでを説明しました。

ここまでの流れで改めてお分かりになられたかもしれませんが、Contentfulの管理画面で操作するのはあくまで「コンテンツ」であり、このコンテンツを表示するための器や見た目、つまりWebサイトやスマホアプリのコンテンツの表示部分についてはヘッドレスCMSではスコープ外となりますのでContentfulでは扱いません。

つまりコンテンツを表示する側、つまり見た目の部分はまた別の担当の分野となりますので、コンテンツを管理する側はとにかくコンテンツの内容に集中すればよいわけです。

処理スコープが本当の意味で「コンテンツ」の管理に限定されているため、非常にわかりやすく、担当者の人たちは文章や画像、動画といった「コンテンツ」の質の向上に集中することができます。

実際の会社・組織においてもコンテンツを管理する人・部署と、見た目・デザインの部分といったフロントエンド側を管理する人・部署は大きな会社ほど別々になるかと思いますのでヘッドレスCMSにおけるこの処理の分け方はあるべき姿であるとも言えます。

また機会があればContentfulの機能について色々と説明したいと思いますのでよろしくお願いします。

 

Webサイト構築や現在のCMSからの入れ替え等ご検討の場合は是非弊社ホームページからお気軽にお問い合わせください。

www.nextscape.net