Contentful ブログカテゴリーモデルを作成しよう
  • 2022.01.05に公開
  • ブログ構築TS
  • 4. Contentfulモデル構築
  • No.3 / 6

今回達成すること

ブログ記事のカテゴリーモデルを作成します。

カテゴリーモデルには6つのフィールドを作成します。

フィールドとは、各値を入力するフォームで、テーブルで言うカラムの役割を持ちます。

  • title
  • image
  • description
  • sort
  • slug
  • isMain

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

ログイン後、スペース・ヘッダーメニューの「Content model」へ移動してください。

2022-01-03 14-55-54

blogCategoryモデルを作成する

最初のモデル作成を求められるので、カテゴリーモデルを作成します。

  1. Name(Contentful表示名) => blogCategory

  2. Api Identifier(API取得時の名前) => blogCategory

    NuxtはこのApi Identifierをプロパティ名として扱います。

    ESLintで推奨されているキャメルケースで入力してください。

    Api Identifierは後から変更できないので、タイプミスに気をつけてください。

  3. Description(モデルの説明) => ブログカテゴリー

  4. Createで作成

2022-01-03 14-58-38

モデルの各フィールドを作成する

モデルのフィードの作成は「Add field」をクリックします。

2022-01-03 15-01-23

titleフィールド(カテゴリー名)

カテゴリー名を入力するtitleフィールドを作成します。

Textタイプを選択してください。

2022-01-03 15-02-27

フィールド名

  1. Name => title

    Contentful表示名。

  2. FieldID => title

    Nuxtで扱うプロパティ名。

  3. Short text

    入力フォームが<input type="text">になる。

    ここのチェックボックスは後から変更できません。

  4. Create and configureで詳細設定へ

2022-01-03 15-03-04

Settingsタブ

フィールド名・IDを編集するメニューです。

  1. ☑︎ This field represents the Entry title

    ここにチェックを入れると、Contentful上でカテゴリーを表示する際に、titleフィールドの値が表示されます。

    1モデルにつき、1Entry titleフィールドが選択できます。

    このチェックは、取得先のコードに影響ありません。

2022-01-03 18-01-01

Validationタブ

バリデーションを設定します。

コンテンツは、ここの制約をクリアしないと公開できません。

第3者がコンテンツを作成する場合、アプリ製作者の意図した行動をとるように設定しましょう。

titleフィールドは2つのバリデーションを設定します。

  1. ☑︎ Required field

    入力必須制約。空白を許容しない。

    Required fieldはできるだけチェックを入れましょう。

    このチェックがない場合、Nuxt上でif分岐をしてコンテンツフィールドを表示しなければなりません。

    無駄なif分岐処理を避けるためにも、想定するフィールドにはチェックを入れることをお勧めします。

  2. ☑︎ Unique field

    一意制約。同じフィールドの重複した値を許容しない。

2022-01-03 15-06-35

Appearanceタブ

Contentful入力時の外観を決定します。

第3者がコンテンツを作成する場合、Help textには「何を入力するフォームか」を詳しく書いてください。

  1. Help text => カテゴリー名

    Contentful入力時のフォームの説明。

  2. Confirmで作成

2022-01-03 15-07-33

これでtitleフィールドが作成できました。

imageフィールド(OGP image)

カテゴリーのイメージ画像フィールドを作成します。

この画像は、URLが共有された場合のメタタグ(og:image)に使用します。

Add field」から「Media」を選択してください。

2022-01-03 15-11-08

フィールド名

  1. Name => image

  2. FieldID => image

  3. One file

    1つのファイル(One file)を紐付けるか、複数のファイル(Many file)を紐づけるかを決定します。

  4. Create and configure

2022-01-03 15-43-35

Validationタブ

imageフィールドは、入力必須を設定しません。

カテゴリーのOGPイメージ画像が存在しない場合は、サイトデフォルトのOGPイメージ画像を使用する前提です。

Appearanceタブ

  1. Help text => OGPイメージ画像

  2. Show "Create new assets" => Yes

    image入力フィールドから新規メディア作成画面を表示するか。

    メディアが別の管理者の場合、Noにした方がコンテンツ制作者が迷わずに入力できます。

  3. Show "Link existing assets" => Yes

    image入力フィールドからアップロード済みのメディアリンクを表示するか。

  4. Confirmで作成完了

2022-01-03 15-14-41

descriptionフィールド(OGP description)

カテゴリーの説明を入力するフィールドを作成します。

このフィールドは、サイト上にも表示しますが、メタタグ(og:description)にも使用します。

Textタイプを選択してください。

フィールド名

  1. Name => description
  2. Field ID => description
  3. Long text
  4. Create and configure

2022-01-03 15-46-01

Validationタブ

  1. ☑︎ Required field

  2. ☑︎ Limit character count

    • Not more then(を超えない)

    • 90(文字)

    • 90文字以内にしてください(Contentful上のフィールドに表示するエラーメッセージ)

    文字数制限。

    メタタグのog:descriptionは、80~90文字が良いとされているので、90文字制限を指定します。

2022-01-03 15-26-02

Appearanceタブ

  1. ☑︎ Multiple line
  2. Help text => カテゴリーの説明 && OGP description
  3. Confirmで作成完了

2022-01-03 15-28-47

sortフィールド(並び順)

カテゴリーをヘッダーに表示する際の並び順を決定するフィードを作成します。

Numberタイプを選択してください。

2022-01-03 15-32-38

フィールド名

  1. Name => sort

  2. Field ID => sort

  3. Integer

    小数点以下を使用しない場合はIntegerを選択。

  4. Create and configure

2022-01-03 15-47-27

Validationタブ

  1. ☑︎ Required field

入力必須のみを選択します。

ヘッダー以外にも、フッターやサイドバーに表示するカテゴリーを作成した場合、それぞれの表示位置で並び順を決定します。

そのため、sortフィールドの重複は許容します。

Appearanceタブ

  1. ☑︎ Number editor
  2. Help text => カテゴリー並び順
  3. Confirmで作成完了

2022-01-03 15-39-49

slugフィールド(URL)

カテゴリーのURLを入力するフィードを作成します。

Textタイプを選択してください。

フィールド名

  1. Name => slug
  2. Field ID => slug
  3. Short text
  4. Create and configure

2022-01-03 19-35-18

Validationタブ

  1. ☑︎ Required field

  2. ☑︎ Unique field

    Nuxt上では、現在のURLとslugフィールドが一致しているカテゴリーを取得します。

    必ず一意制約を有効にしてください。

Appearanceタブ

  1. ☑︎ Slug
  2. Help text => カテゴリーURL
  3. Confirmで作成完了

2022-01-03 15-36-36

isMainフィールド(メインフラグ)

ヘッダーに表示するメインカテゴリーか否かを入力するフォームを作成します。

Booleanタイプを選択してください。

2022-01-03 16-04-26

フィールド名

  1. Name => isMain
  2. Field ID => isMain
  3. Create and configure

Validationタブ

  1. ☑︎ Required field

Appearanceタブ

  1. Help text => メインカテゴリー: true, その他: false

  2. True label => trueに書き換え

  3. False label => falseに書き換え

    true, falseを指定することで、Nuxt上でBoolean型で扱うことができます。

2022-01-03 16-00-19

Default valueタブ

フォームの初期値を設定します。

メインカテゴリーが必然的に多くなるのでtrueをデフォルト値とします。

  1. true
  2. Confirmで作成完了

2022-01-03 16-01-24

フィールドを並び替えする

コンテンツを入力しやすいように、imageフィールドを一番上に並び替えしましょう。

フィードの左マークをクリックし、マウス操作で並び替えが可能です。

2022-01-03 15-37-44

blogCategoryモデルを保存する

blogCategoryモデルはこのようなフィールドとなりました。

右上の「Save」より保存しましょう。

2022-01-03 16-02-28

今回の作業は以上です。

次回は?

これでカテゴリーモデルを作成できました。

次回は、このカテゴリーモデルに紐づくblogPostモデルを作成します。

blogPostモデルにはブログ記事を格納するフィールドを作成します。

モデル同士の紐付け以外は今回と同じ要領です。

それではまた次回。

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