Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
  • 2022.01.05に公開
  • ブログ構築TS
  • 4. Contentfulモデル構築
  • No.5 / 6

今回達成すること

タグモデルを作成します。

今回作成するタグモデルは、blogPostモデルに1対多の関係で関連づけを行います。

最終的なContentfulのモデル間の関係は以下のようになります。

blog myblog-v2 contentful modeling

blogTagモデルを作成する

Content model」メニューから「Add content type」ボタンをクリックします。

下画像参考に、blogTagモデルを作成します。

2022-01-05 16-39-58

作成できたらフィールドを追加します。

imageフィールド(アイコン画像)

タグのアイコン画像を指定するフィールドを作成します。

  • Type

    • Mediaタイプ
  • Settingsタブ

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

    • ☑︎ Accept only specified file types

      指定したファイル形式しか受け付けない

      • ☑︎ image
      • Custom error message => 画像ファイルを指定してください

    2022-01-05 16-53-29

    • ☑︎ Accept only specified image dimensions

      画像サイズを指定する

      • Width => At more 100px(幅、100pxまで許容)
      • Height => At more 100px(高さ、100pxまで許容)
      • Custom error message => width, height 共に100pxまでの画像にしてください

      2022-01-05 17-06-35

      画像読み込み遅延回避のために、小さいサイズの画像をアップロードする制約を設けています。

      他にも、幅・高さが1対1の画像をアップしてもらいたい場合は、Exactlyを指定し、アップロード画像のピクセル値を完全に固定すれば良いでしょう。

  • Appearanceタブ

    • Help text => タグのアイコン画像
    • Show "Create new assets" => Yes
    • Show "Link existing assets" => Yes
  • Confirmで作成完了

titleフォールド(タグ名: Entry title)

タグの表示名を入力するフォールドを作成します。

本来はnameフィールドの方が妥当ですが、モデルに統一性を持たせるためにtitleと名付けしています。

このようにすることで、「モデルの名前を取得するときは全てtitleフィールドを指定する」と認識できるので、Nuxt上で扱いやすくなります。

  • Type

    • Textタイプ
  • Settingsタブ

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

    • ☑︎ This field represents the Entry title
  • Validationタブ

    • ☑︎ Required field

    • ☑︎ Unique field

      タグ名の重複は許容しません。

  • Appearanceタブ

    • Help text => タグ名
  • Confirmで作成完了

slugフィールド(URL)

タグに関連づく記事一覧ページのURLフィールドを作成します。

  • Type

    • Textタイプ
  • Settingsタブ

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

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

    • Slug

    • Help text => タグURL

  • Confirmで作成完了

最終的なblogTagモデル

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

2022-01-05 18-46-42

blogPostモデルからタグを関連づける

作成したタグモデルは、blogPostモデルから1対多の関係で関連付けます。

ヘッダーメニューの「Content model」からモデル一覧を表示し、「blogPost」モデルを開きます。

2022-01-03 23-48-45

Add field」から、Referenceタイプを追加します。

  • Type

    • Referenceタイプ
  • Settingsタブ

    • Name => tags

    • Field ID => tags

    • ◉ Many references

      1対多の関係は、複数形の名称をつけることでコードが読みやすくなります。

      2022-01-05 18-52-18

  • Validation

    • ☑︎ Accept only specified entry type

      指定した値のみを受け入れる

      • ☑︎ blogTag
      • Custom error message => blogTagモデルを指定してください

      2022-01-05 18-57-14

  • Appearanceタブ

    • Entry links lust

    • Help text => 記事に関連づくタグ

    • Use bulk editing => No

      一括編集対象フィールドか

    • Show "Create new entries" => Yes

    • Show "Link existing entries" => Yes

  • Confirmで作成完了

blogPostモデルにtagsフィールドが追加できたら「Save」より保存しましょう。

今回の作業は以上です。

次回は?

これでブログに必要な最低限のモデルは作成できました。

  1. blogCategoryモデルの作成
  2. blogPostモデルの作成
  3. blogTagモデルの作成(今ここ)

次回より作成したモデルにコンテンツを追加していきます。お楽しみに。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築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制作のご依頼は下記メールアドレスまでお送りください。