#032019年10月30日に公開Contentfulのincludesを使って関連モデルを取得しタグ一覧ページを作成する今回達成すること今回は、タグ一覧ページを作成していきます。同時に、Contentfulのincludesプロパティを使って、記事に関連付いたモデルを取得するよう変更を加えます。この変更により、Contentfulへ一回のリクエストを行うだけで「blogPost」「category」「tag」の3つのモデルを取得できるようになります。作業に取り掛かる前に、タグ取得の要件を整理しておきます。今回タグ一覧ページに表示するタグは、記事が関連付いたタグのみを表示します。どの記事にも関連付いていない、単一で存在するタグは取得しません。記事に関連づいたタグだけを取得するには?Contentfulでは、関連先(tag)から関連元(blogPost)の参照を行うことができません。逆に、関連元(blogPost)からの参照は可能です。下の画像は、store/index.jsのgetPosts()にconsole.logを追加した画像です。赤で囲まれている部分res.includes.EntryにblogPostモデルに関連付いたデータが入っています。ここには、関連先のカテゴリーモデルとタグモデルのデータがごっちゃに入っています。黄色で囲まれている部分res.itemsにはcontent_typeで指定した、ブログ記事モデルのデータが入っています。🙂res.includes.Entryには表示されません。記事に関連づいたタグだけを取得するには?の答え記事に関連付いたタグだけを取得するには、includesプロパティを使うincludesプロパティを使うことによって、記事に関連付いたタグだけを取得することができるタグ取得の実装に取り掛かるそれでは実装に取り掛かりましょう。store/index.jsにタグ取得のコードを書いていきます。(最終的なindex.jsは下にあります)ついでにincludesからカテゴリーも取得しましょう。(currentTag)この算出プロパティは、tagPostsから引数に渡したcurrentTagに関連付くpostの配列を返します。getPosts()からsetLinks()へコミットするようにコードを追加res.includes.Entryには、カテゴリーモデルとタグモデルが混ざっているため、setLinks()で振り分けを行っています。振り分けの基準は、entry.sys.contentType.sys.idに保管されているモデル名です。1Contentfulのincludeプロパティは、関連先の階層を表します。0〜10を指定できます。tagに関連づくモデル(いわゆる孫モデル)までを取得したい場合は「2」を指定します。デフォルトは「1」なので結果は変わりませんが、明示的に指定しています。b.fields.sort)モデルの並び替えは自分で行わなければなりません。カテゴリーモデルはsortの小さい順に並び替えるよう、Javascriptのsortメソッドを使用しています。最終的なstore/index.js下が最終的なstore/index.jsです。操作に詰まったら、コピペしてください。}}続いてmiddleware/getContentful.js内のカテゴリー取得を削除します。store.dispatch('getCategories')}これで、一回のリクエストだけで「blogPost」「category」「tag」の3つのモデルが取得できるようになりました。tags/_slug.vueのタグ取得方法を変更するVuexにタグを保管できるようになったので、pages/tags/_slug.vueのタグの取得方法を変更しましょう。store.getters.associatePosts(tag)先ほどindex.jsに作成したassociatePostsを呼び出しています。タグの個別ページが表示できたらここまでの編集はOKです。タグ一覧ページを編集する続いてpages/tags/index.vueを編集していきます。動作が分かるよう、step順に説明します。【step1】tags/index.vueにタグ一覧を表示するまずはタグの名前とリンクを表示します。}}</script>このように表示されましたか?リンクもうまく機能しているはずです。【step2】タグに関連づく記事数を表示する次は、記事数を表示しましょう。記事数はindex.jsに作成した、associatePostsを使います。tags/index.vueにpostCount()の算出プロパティを追加します。}}</script>タグの記事数が表示されましたね。リンクに飛んで記事数を確認して、ちゃんと一致していれば成功です!【step3】パンくずリストを追加する現状のタグ一覧ページは、一目で「今どこのページにいるか」がわかりません。そこでパンくずリストを追加します。truedisabledプロパティは、リンクを無効化するものです。Vuetifyのデフォルトで用意されています。breadcrumbsおやおや、iconだけ色がついて不格好ですね。breadcrumbsのiconカラーを変更するiconカラーを変更できるように、components/ui/breadcrumbs.vueを編集します。}}</script>iconColor()この算出プロパティは、渡されたitemにiconColorというプロパティが存在すればそのcolorを返します。存在しなければ、デフォルトで指定したprimayが返されます。これで見栄え良くなりましたね。下の画像がタグ一覧ページの完成イメージです。【step4】本番環境でサーバーサイドレタリングを行うセッティングさあ、本番環境のセッティングを行いましょう。generateプロパティへタグの動的ルーティングを追加します。この設定により、タグの個別ページもサーバーサイドレタリングを行うことができます。nuxt.config.jsのgenerateプロパティは、最終的にこのようになります。}}うまく設定できたか確認してみましょう。Nuxt.jsのサーバーをストップしてコマンドを実行します。generateターミナルを確認しましょう。出力されていたら、ちゃんと設定できている証拠です。ここまでの変更をpushするお疲れ様でした。ここまでの変更をpushしましょう。"finish_tag_pages"ブランチを作成している方は、一度masterブランチに戻って、tagブランチをマージしてpushします。push本番環境のURLを確認してみようNetlifyのデプロイ完了したら、本番環境URLで確認してみましょう。「タグ一覧ページ」「タグ個別ページ」「パンくずリスト」はうまく機能していますか?下書きの記事については、記事カウントにも含まれていないはずです。本番環境では「Ruby」の投稿数が2になっている(下書き記事が含まれないため)おわりに今回は、タグ一覧ページを作成していきました。これで、ブログ機能に欠かせない、「記事」「カテゴリー」「タグ」の3本柱が完成しました。骨組みが完成しましたね!次回は?さて、次回はタグ一覧ページをスタイリングしていきます。Vuetify2のdata-tableの使い方を学びながら、タグ一覧ページを見栄え良くします。apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。随時お伝えしてまいります。Universal】Vuetify2.0にバージョンアップしよう#02【画像で説明】Contentfulの使い方。