ブログ構築 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してタグページを公開しましょう。

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

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
Udemy
SPA開発
0. 更新情報 #01
ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
0. 更新情報 #02
Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法
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の使い方を学んで、タグ一覧ページをレイアウト
99. Nuxt.jsブログカスタマイズ #01
Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】
99. Nuxt.jsブログカスタマイズ #02
Contentfulの全文検索を使ったNuxt.jsブログ内検索の実装
小ネタ集