ブログ構築 7. タグ機能の構築 #01
2019年10月20日に公開

Contentfulにタグモデルを作成し関連付けを行う

今回達成すること

今回は、Contentfulにタグモデルを作成し、blogPostモデルとの関連付けを行います。

そしてトップページに、タグを表示させていきます。

トップページの完成イメージ

2019-10-19 20-47-43

早速、Contentfulにログインしましょう!

タグモデルを作成する

まず初めに、タグモデルを作成します。

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

モデル名を決める

Name、Api Identifier共に「tag」と入力し、「Create」ボタンより保存します。

2019-10-19 18-30-07

Nameフィールドを作成する

右の青い「Add field」ボタンからフィールドを作成します。

フィールドタイプは「Text」を選択し、フィールド名を入力します。

  • Name => 「name」
  • Field ID => 「name」

2019-10-19 18-38-28

入力が完了したら、「Create and configure」ボタンをクリックします。

settings

「This field represents the Entry title」にチェックを入れてください。

2019-10-19 18-44-24

Validations

下記2箇所にチェックを入れてください。

  1. 「Required field」 … 入力必須とする
  2. 「Unique field」 … 重複禁止とする

2019-10-19 18-46-49

チェックが完了したら「Save」ボタンで保存しましょう。

これでNameフィールドは完成です。

Slugフィールドを作成する

続いてslugフィールドを作成します。

Add field」ボタンから「Text」タイプを選択して、下記のように設定してください。

  • Name => 「slug」
  • Field ID => 「slug」

入力が完了したら「Create and configure」より詳細設定に進みましょう。

Validations

Nameと同じく、「入力必須」「重複不可」のバリデーション設定を行います。

「Required field」と「Unique field」にチェックを入れてください。

入力が完了したら「Save」ボタンで保存しましょう。

保存を忘れずに

これでタグモデルは完成です。

2019-10-19 18-59-48

右上の「Save」から保存を忘れずに行ってください。

blogPostモデルとの関連付けを行う

それでは関連付けを行いましょう。

ヘッダーメニューの「Content model」より「blogPost」モデルを選択してください。

Add field」ボタンから、tagsフィールドを追加していきます。

フィールドタイプは「Reference」

フィールドタイプは「Reference」を選択します。

2019-10-19 19-13-23

フィールド名の設定

フィールド名を下記のように選択してください。

  • Name => 「tags」
  • Field ID => 「tags」
  • Many referencesにチェック

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

1対Nとは、1つのblogPostに対して複数のtagが関連付く関係性のことを言います。

2019-10-19 19-20-04

設定が完了したら「Create and configure」ボタンより詳細設定に進みます。

Validationsの設定

バリデーションでコンテンツタイプの指定を行います。

「Accept only specified entry type」をクリックし、「tag」にチェックしてください。

2019-10-19 19-23-57

設定できたら「Save」ボタンで保存しましょう。

完成したblogPostモデル

完成したblogPostモデルはこのようになります。

tagsフィールドはドラッグ&ドロップで並び替えをしています。

2019-10-19 19-28-58

確認が取れたら、右上の「Save」ボタンで保存しましょう。

タグを作ってみよう

それでは、ヘッダーメニューの「Content」から、右の青い「Add entry」ボタンをクリックして、タグを作りましょう。

slugは全小文字で入力し、入力完了後は「Publish」ボタンで公開状態にします。

こんな感じで作ります。

2019-10-19 19-33-12

今回は、5つのタグを作成してみました。

  1. プログラミング
  2. 技術メモ
  3. Ruby
  4. Javascript
  5. Vuetify

2019-10-19 19-49-30

記事とタグを関連付ける

タグの作成が完了したら、記事に関連付けましょう。

どの記事でも良いので、記事を開いてください。

tagsフィールドの「Link existing entries」をクリックします。

2019-10-19 19-58-17

2つくらいタグを選択したら「Publish changes」をクリックし、変更を保存します。

2019-10-19 20-00-58

このようにタグを関連付けした記事を、5つくらい作成しておいてください。

フィールドメニュー右の「歯車アイコン」で表示の切り替えができます。

2019-10-19 20-08-15

トップページにタグを表示する

それではNuxt.jsプロジェクトに移動しましょう。

pages/index.vueを開いて、{{ post.fields.body }}の下にコードを追加してください。

<template>
	...
  <v-list-item three-line style="min-height: unset;">
    <v-list-item-subtitle>
      {{ post.fields.body }}
    </v-list-item-subtitle>
  </v-list-item>
  
  <!-- 追記 -->
  <v-card-text
    style="height: 64px;"
  >
    <template v-if="post.fields.tags">
      <v-chip
        v-for="(tag) in post.fields.tags"
        :key="tag.sys.id"
        to="#"
        small
        label
        outlined
        class="ma-1"
      >
        <v-icon
          left
          size="18"
          color="grey"
        >
          mdi-label
        </v-icon>
        {{ tag.fields.name }}
      </v-chip>
    </template>
  </v-card-text>
  <!-- 追記終了 -->
  
	...
</template>

こんな感じでタグが表示されたら成功です!やったね。

2019-10-19 20-47-43

終わりに

今回はタグモデルを作成して、トップページに表示させるところまでを行いました。

今回はトップページの編集だけなので、Gitへのコミットは行いません。

無事タグは表示できましたか?エラーに悩んでいるようでしたらTwtterよりDMください。

さて、次回は?

さて次回は、タグページを作成して関連付く記事を取得します。

そして、本番環境にPushしてタグページを公開しましょう。

それではまた、お待ちしています✋

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