Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
  • 2022.01.05に公開
  • ブログ構築TS
  • 4. Contentfulモデル構築
  • No.4 / 6

今回はテキスト多めの解説となります。

フィールドメニューがわからない場合は、画像付きで解説している前回の記事をご確認ください。

Contentful ブログカテゴリーモデルを作成しよう

今回達成すること

blogPostモデルを作成し、6つのフィールドを追加します。

  • category
  • image
  • title
  • slug
  • body
  • publishDate

blogCategoryとblogPostの関係性

blogPostは、必ず1つのblogCategoryモデルに関連付きます。

つまり、blogCategoryから見た関係性は1対多となります。

  • blogCategory +ー< blogPost

Contentful上での関連付け

しかしContentful上では、ブログ記事作成時にカテゴリーを選択するため、入力ベースで関連付けを考える必要があります。

つまり、blogPostモデルから見たblogCategoryの関連付けを行います。

blogPostから見たblogCategoryの関係性は1対1となります。

以上を頭に入れて実装に入りましょう。

blogPostモデルを作成する

ヘッダーメニュー > Content model > Add content typeより、blogPostモデルを作成します。

Descriptionは、画像のように関連付けを記述すると見返したときに分かりやすいです。

これは一つの手法なので、自由に設定してOKです。

2022-01-03 22-51-09

categoryフィールド(親カテゴリー)

各カテゴリーに関連付ける設定を行います。

Add fieldよりReferenceタイプを選択します。

2022-01-03 22-55-56

フィールド名

  1. Name => category

  2. Field ID => category

  3. One reference1対1の関係

    One referenceは、1対1の関係を表します。

    blogPostモデルから見て、1つのモデルに関連づく場合に選択します。

    Many referencesは、1対多の関係を表します。

    blogPostモデルから見て、複数の値が関連づく場合に選択します。

    例えば、記事に関連づくタグモデルなどが1対多の関係になります。

Validationタブ

  1. ☑︎ Required field

  2. ☑︎ Accept only specified entry type

    • ☑︎ blogCategory

    指定した値のみを選択可能とする。

    今回はblogCategoryのみを選択可能としています。

2022-01-03 23-03-53

Appearanceタブ

カテゴリーは頻繁に作成するものではないので、

  • Show "Create new entries" => Noとします。

その他画像の通り設定し、Confirmより作成完了してください。

2022-01-03 23-07-14

imageフィールド(アイキャッチ画像)

アイキャッチ画像を設定するimageフィールドを作成します。

  • Type

    • Mediaタイプ
  • Settingsタブ

    • Name => image
    • Field ID => image
    • ◉ One file
  • Validationタブ

    • ☑︎ Required field

      カテゴリーと違って、アイキャッチ画像は入力必須とします。

  • Appearanceタブ

    • Help text => アイキャッチ画像
    • Show "Create new assets" => Yes
    • Show "Link existing assets" => Yes
  • Confirmで作成完了

titleフィールド(タイトル)

ブログ記事のtitleフィールドを作成します。

  • Type

    • Textタイプ
  • Settingsタブ

    • Name => title
    • Field ID => title
    • ◉ Short text
  • Field options

    • ☑︎ This field represents the Entry title

      titleフィールドをblogPostモデルのエントリータイトルとします。

  • Validation

    • ☑︎ Required field
  • Appearanceタブ

    • Single line
    • Help text => 記事タイトル
  • Confirmで作成完了

slugフィールド(URL)

記事のURLフィールドを作成します。

  • Type

    • Textタイプ
  • Settingsタブ

    • Name => slug
    • Field ID => slug
    • ◉ Short text
  • Validation

    • ☑︎ Required field
    • ☑︎ Unique field
  • Appearanceタブ

    • Slug

      パスURLの入力フォームは、専用のSlugを選択してください。

    • Help text => 記事URL

  • Confirmで作成完了

bodyフィールド(本文)

記事本文を入力するbodyフィールドを作成します。

  • Type

    • Textタイプ
  • Settingsタブ

    • Name => body

    • Field ID => body

    • Long text

      bodyフィールドは、文字数制限のないLong textを選択してください。

  • Validation

    • ☑︎ Required field
  • Appearanceタブ

    • Markdown

      本文はMarkdown形式で入力します。

    • Help text => 記事本文(markdown)

  • Confirmで作成完了

publishDateフィールド(公開日)

記事公開日時の入力フィールドを設定します。

  • Type

    • Date and timeタイプ
  • Settingsタブ

    • Name => publishDate
    • Field ID => publishDate
  • Validation

    • ☑︎ Required field
  • Appearanceタブ

    • Help text => 公開日
    • Format => Date and time with timezone(タイムゾーン付日時)
    • Time mode => 24 Hour(24時間表示)
  • Confirmで作成完了

最終的なblogPostモデル

ここまで作成できたら「Save」より保存しましょう。

2022-01-03 23-48-45

更新日フィールドはContentfulプロパティを使用

Contentfulのデフォルトプロパティにも、

  • createdAt ... コンテンツ作成日時
  • updatedAt ... コンテンツ更新日時

が用意されています。

今回は、上記のupdatedAtを更新日として使用するためフィールドは作成しません。

参考: Content Delivery API | Contentful

次回は?

今回で2つのモデルを完成させました。

  • blogCategoryモデル
  • blogPostモデル

次回はblogTagモデルを作成し、blogPostと1対多の関係で関連付けていきます。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。