Chapter 16

Contentfulの利用方法

ここでは、Contentfulに登録しデータを登録する手順を紹介していきます。

登録

以下のURLより登録を行います。

https://www.contentful.com/sign-up/

登録後に表示されるページで左側の「I create content」を選択します。
contentful-1.png

プロジェクトを作成する、ロード画面になります。
ロード完了後、「Explore the example project」のボタンを押します。
contentful-2.png

スペースの作成

メニュー左のプロジェクトを選択し、「+Create space」を押します。
contentful-3.png

Free Planを選択します。
contentful-5.png

Space nameに「blog」と入力し、「Create an empty space」を選択します。
「Proceed to confirmation」を押します。次のページで「Confirm and create space」を押し、スペースを作成します。
contentful-6.png

コンテンツモデルの作成

ブログの投稿データを「コンテンツモデル」として作成していきます。
作成後、コンテンツモデルを元に投稿を行えるようになります。

メニューより「Content model」を選択します。
contentful-7.png

「Add content type」を押します。
contentful-8.png

「Post」という名前でコンテンツモデルを作成します。
uploadedImage.png

フィールド設定

モデル内にはフィールドを定義します。
ブログを投稿する際に入力する以下の項目をフィールドとして定義します。

  • タイトル
  • カバー画像
  • 本文
  • 説明
  • スラッグ(urlで投稿を特定するための文字列)

タイトル

右側の「+ Add filed」を押します。
contentful-10.png

フィールドのタイプを選べます。まずはタイトルを作成していきます。Textを選びましょう。
contentful-11.png

以下のように設定して、「Create and configure」を押します。
contentful-12.png

ValidationsでRequired fieldにチェックを入れて「Save」を押します。
contentful-22.png

カバー画像

続いて、カバー画像を作成します。「+Add field」->「Media」を選択し、以下のように設定し「Create and configure」を押します。
contentful-13.png

ValidationsでRequired fieldにチェックを入れて「Save」を押します。
contentful-23.png

本文

続いて、本文を作成します。「+Add field」->「Text」を選択肢、以下のように設定し「Create and configure」を押します。
contentful-14.png

ValidationsでRequired fieldにチェックを入れて「Save」を押します。
contentful-21.png

説明

続いて、説明を作成します。「+Add field」->「Text」を選択肢、以下のように設定し「Create and configure」を押します。
contentful-15.png
ValidationsでRequired fieldにチェックを入れます。
contentful-19.png

次にApperanceでMultipe lineを選択し「Save」を押します。
contentful-20.png

スラッグ

続いて、スラッグを作成します。「+Add field」->「Text」を選択肢、以下のように設定し「Create and configure」を押します。
contentful-16.png

Validationsで「Required field」と「Unique field」にチェックを入れます。
contentful-17.png

次にApperanceでslugを選択し「Save」を押します。
contentful-18.png

以上でフィールドの作成は終了です。
右上の「Save」を押しコンテンツモデルの作成を終了します。
contentful-24.png