ブログ構築 4. Contentfulのセットアップ #03
2019年10月12日に更新

Contentfulにブログ記事モデルを作成していこう

今回達成すること

今回は、Contantful内でブログ記事のモデルを作成していきます。

モデルとは、プログ記事などのコンテンツを保管する箱のようなものです。

どんな種類のデータが、どこに入るかを設計し、作成していきます。

モデル作成メニューへ移動する

ヘッダーメニューのContent modelからAdd content typeボタンをクリックしてください。

2019-08-28 15-34-09

記事を保管するモデルの作成

ブログ記事を保管するモデルの作成していきます。

  • Name

    コンテンツモデルの名前です。

    「blogPost」と入力しましょう。

  • Api Identifier

    API拡張子です。

    このモデルをAPIで取得する際に必要とする名前です。

    Nameと同じ「blogPost」で OKです。

  • Description

    このモデルの説明ですね。必要であれば入力してください。

    今回は空白でOKです。

入力が完了したらcreateボタンをクリックします。

2019-08-28 15-40-56

モデルのフィールドを作成しよう

モデルの作成が終わったら、次はフィールドの作成です。

どんな種類のデータを入れるかをここで決定します。

ここではブログに最低限必要な次の5つを設定します。

  1. Title … ブログタイトル
  2. Image … アイキャッチ画像
  3. Slug … ブログ記事の個別URL
  4. Body … ブログ内容
  5. Publish Date … 公開日

なお作成日、更新日はデフォルトで用意されていますのでフィールドの作成は行いません。

それでは画面右のAdd fieldボタンから作成していきましょう。

2019-08-28 16-06-43

Field1. ブログタイトル「Title」

最初にブログのタイトルを保存するフィールドを作成します。

Field

  • タイプ

    データの種類を選択します。

    「Text」を選択します。

  • Name

    フィールドの名前です。

    「Title」としましょう。

  • Field ID

    APIを取得する際に識別する名前です。

    小文字で「title」でOKです。

    このField IDは、モデル内での重複が許されません。

    エラーになった場合は違うID名を指定してください。

  • テキストの長さ

    ブログタイトルは255文字以下で十分なので「Short text, exact search」にチェックを入れます。

2019-08-29 18-15-39

設定が完了したらCreate and Configureをクリックして詳細設定に進みましょう。

Settings

  • This field represents the Entry title

    モデルのメイン項目を決めます。

    Contentful内で各データを一覧で表示する際に、ここでチェックした項目が表示されます。

    今回は「Title」フィールドを「blogPost」モデルのメイン項目にするのでチェックを入れてください。

    各モデル、1フィールドのみ選択可能です。

https://www.contentfulcommunity.com/t/controlling-appearance-in-card-view/433

  • Enable localization of this field

    多言語化に対応するかのチェックボックスです。

    Contentfulではすべてのコンテンツを英語に翻訳できます。

    必要であればチェックを入れてください。

2019-08-29 18-22-31

Validations

公開の検証を設定します。

  • Required field

    フィールドを入力必須にするかを選択できます。

    チェックを入れてください。

    必須項目が未入力の場合、エラーとなって公開することができません。

    あまり制約をかけすぎても面倒ですが、最低限の制約をかけることによって、Nuxt側のコードを単純化できます。

  • その他の項目

    以下の画像をご覧ください。

2019-08-28 17-19-15

Appearance

  • Choose how this field should be displayed

    入力形式をどうするか選択できます。

    「Single line」のままでOKです。

  • Help text

    補足説明です。必要であれば入力してください。

さて、すべての項目の設定が完了したらSaveを押して保存しましょう。

2019-08-29 18-26-16

Field2. アイキャッチ画像「Image」

Wordpressでよくあるタイトル下に表示する画像のことですね。

Add fieldボタンで新しいフィールドを追加します。

Field

  • タイプ

    「Media」

  • Name

    「Image」

  • Field ID

    「image」

  • ファイルの数

    「One file」にチェック。

    これは1つのファイルのみ許容するチェックです。

2019-08-29 18-35-46

詳細設定に進みましょう。

Validations

  • Required field

    アイキャッチ画像を必ず添付するブログ設計の場合は、チェックを入れておくと良いでしょう。

  • Accept only specified file types

    指定したファイルのみ受け入れる設定を行います。

    Imageのみアップロード可能としました。

    Image以外のファイルがアップロードされると、「Image以外のファイルはアップロードできません」と言うエラーメッセージが表示されます。

2019-08-29 18-42-22

Saveボタンで保存してください。

Field3. ブログURL「Slug」

続いてブログURLを保存する「slug」フィールドを作成しましょう。

Field

  • タイプ

    「Text」

  • Name

    「Slug」

  • Field ID

    「slug」

  • Short text

    チェックを入れてください。

Validations

  • Required field

    必須とします。チェックを入れてください。

  • Unique field

    ユニーク制約にチェックを入れてください。

    これは、同じURLを許容しないという設定です。

    ブログURLが同じだと、プログラム上でエラーが起こります。

    必ず「Unique field」にはチェックを入れてください。

そのほかの項目はそのままでOKです。

Saveボタンを押して保存しましょう。

Field4. ブログ本文「Body」

次はブログの本文を保存するフィールドです。

Field

  • タイプ

    「Text」

  • Name

    「Body」

  • Field ID

    「body」

  • Long text, full-text search

    Long textにチェックを入れてください。

Validations

  • Required field

    必須とします。チェックしてください。

Appearance

  • Choose how this field should be displayed

    Markdownを選択してください。

Saveボタンで保存しましょう。

Field5. ブログ公開日

最後に公開日を保存するフィールドを作成します。

Field

  • タイプ

    「Date and time」

  • Name

    「PublishDate」

  • Field ID

    「publishDate」

Validations

  • Required field

    チェックを入れてください。

Appearance

  • Format

    Date and time with timezone (タイムゾーン付きの日付と時刻) を選択

  • Time mode

    24 Hour (24時間) を選択

Saveボタンで保存しましょう。

以上でブログ記事モデルが作成できました。

モデルを保存する

フィールドが作成できたらモデルを保存しましょう。

右上のSaveボタンで保存できます。

2019-08-29 19-19-28

(補足)Fieldの操作方法

  1. フィールドはドラッグ&ドロップで並び変えができます。

  2. フィールドタイプは一度決定すると変更ができません。

    間違ったタイプを作成した場合は、各フィールドの「•••」ボタンから「delete」を選択し削除することができます。

    削除した後は必ず右上の「Save」ボタンで変更を保存しましょう。

さて、次回は

これでブログを保存するモデルが作成できました。

次回は、Contentfulにブログを投稿して、Nuxt上に表示していくための設定を行っていきます。

お楽しみに!

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告