ブログ構築 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上に表示していくための設定を行っていきます。

お楽しみに!

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
Udemy
SPA開発
0. 更新情報 #01
ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1. 今回作るアプリケーション #01
Nuxt.jsとContentfulで作るマイブログ
2. 開発環境にNuxt.jsを立ち上げる #01
Nuxt.jsを動かす環境を構築する
2. 開発環境にNuxt.jsを立ち上げる #02
Nuxt.jsのプロジェクトを作成する
2. 開発環境にNuxt.jsを立ち上げる #03
Hello Nuxtを表示する
3. Nuxt.jsアプリを公開する #01
Nuxt.jsをデプロイする前の事前準備を行う
3. Nuxt.jsアプリを公開する #02
Netlifyの初期セットアップとNuxt.jsのデプロイを行う
3. Nuxt.jsアプリを公開する #03
NetlifyにデプロイしたNuxt.jsに独自ドメインを設定する
4. Contentfulのセットアップ #01
【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう
4. Contentfulのセットアップ #02
【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ
4. Contentfulのセットアップ #03
Contentfulにブログ記事モデルを作成していこう
4. Contentfulのセットアップ #04
ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する
5. ブログ記事周りの構築 #01
Nuxt.jsにContentfulのブログ記事を表示する
5. ブログ記事周りの構築 #02
Contentfulから取得した下書き記事を開発環境に表示する
5. ブログ記事周りの構築 #03
Nuxt.jsのgenerateプロパティに動的なルーティングを追加する
5. ブログ記事周りの構築 #04
【Nuxt.js】middlewareを活用しブログ記事取得のパフォーマンスを改善する
6. カテゴリーページの構築 #01
【Contentful】カテゴリーモデルとブログ記事モデルの関連付け
6. カテゴリーページの構築 #02
【Nuxt.js × Contentful】ブログ記事に関連付くカテゴリーを表示する
6. カテゴリーページの構築 #03
【Nuxt.js × Contentful】カテゴリー記事一覧ページを作成する
7. タグ機能の構築 #01
Contentfulにタグモデルを作成し関連付けを行う
7. タグ機能の構築 #02
【Nuxt.js × Contentful】タグに関連付いたブログ記事を表示する
7. タグ機能の構築 #03
Contentfulのincludesを使って関連モデルを取得しタグ一覧ページを作成する
7. タグ機能の構築 #04
Vuetify2のdata-tableの使い方を学んで、タグ一覧ページをレイアウト
9. Nuxt.jsブログカスタマイズ #01
Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】
小ネタ集