Storyblokのdocs翻訳チャレンジその7！！！

#### ソース

https://www.storyblok.com/tp/how-to-build-a-content-relationship

## リレーションシップの構築方法:ポストとカテゴリー その2

この記事全体にわたって、ヘッドレスCMSを使ってどのように2つのコンテンツタイプ間のリレーションシップを構築するかを学んでいきます。先ほどの記事は著者とポストを紐付ける方法をカバーしていました。このチュートリアルでは、この構造にカテゴリーを追加します。その他にも、StoryblokのコンテンツデリバリAPIを経由してコンテンツを受け取るために、このリレーションシップをどう使うかについて学びます。

## 要件と目標

最初の記事のブログセットアップが完了していること、もしくはその他あなたがリレーションシップを構築したいコンテンツタイプがStoryblokスペースに含まれていることを確認してください。この記事の目標はポストとカテゴリーのリレーションシップを作ることです。1つの`post`は複数の`categories`を持つことができ、1つのカテゴリは複数の`posts`から参照されます。

![01-goal-description.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/fb36ce16-54a8-9b86-4d62-962cb369d0b8.jpeg)


## コンテンツタイプCategoryを追加

前回の記事と同じく。新しい**Categories**というフォルダをデフォルトコンテンツタイプ`category`で作りたいので、新しいコンテンツタイプを作成してそうします。コンテンツタイプはまだ存在しないので、フォルダ作成時に再び**Create new 'category'**を押し、また、このときにvisual editorを無効化して、シンプルな状態にしておきます。

![02-creating-a-category-folder.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/6bbedf2e-e52e-cca3-2b8c-e6ace339a2f9.jpeg)


## 最初のカテゴリーを作成

現在既に最初のカテゴリーをカテゴリフォルダに追加できる状態です。Categoriesに移動し、新しいコンテンツエントリを作るため、上部右端の**New**ボタンを押しましょう。`name`、`slug`、`content-type`が追加できるようになります。フォルダ設定を弄らずとも、デフォルトコンテンツタイプを`category`としたので、コンテンツタイプには既に`category`が入っています。

![03-creating-first-category.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/992f3bdb-7862-fa2d-af7a-7d2925ee8013.jpeg)


## カテゴリーフィールドを定義

まだ何もコンテンツタイプのスキーマを定義していないので、`Define schema`を押して欲しいフィールドを追加します。以下のフィールドを持つ`category`を作っていきます。フィールドは好きなように追加、削除ができます。

![04-empty-category.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/f5bc6aed-cc31-c0eb-0ef2-1172afb41da6.jpeg)


1. Key: `name`, Type: `Text` カテゴリ名入力用
2. Key: `image`, Type: `Image` カテゴリ画像アップロード用


コンテンツタイプのスキーマキーを追加したら、画面上部右端の**Save Schema**を押し、新しく作ったフォームへのコンテンツの追加へ進みます。

![05-define-category-fields.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/520b468e-c2ef-ea98-71e9-ae1cffe7fb7e.jpeg)


## コンテンツを埋める

下に示すように、ここまでで既に`name`の追加やカテゴリの`image`のアップロードが出来る状態になっているはずです。最初のカテゴリは`Design`と名付け、[unDrawのイラスト](https://undraw.co/illustrations)をアップロードしました。また、同様に**Tech**や**Finance**を作りました。そうすると、上部右端**Draft JSON**オプションを使ってカテゴリにアクセス出来るようになります。**Save**、**Publish**と押し、カテゴリが公開されることも確認して下さい。

![06-filled-category.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/03e595b1-dd01-65de-215d-5e112682b7cd.jpeg)


## APIを使ってカテゴリにアクセス

どのように[slugを用いてエントリ単位でアクセス](https://api.storyblok.com/v1/cdn/stories/categories/design?version=draft&token=ask9soUkv02QqbZgmZdeDAtt)するか、またどのように[フォルダのslugを用いて複数エントリにアクセス](https://api.storyblok.com/v1/cdn/stories/?version=draft&token=ask9soUkv02QqbZgmZdeDAtt&starts_with=categories)するかについては、前回の記事を読んでいれば既にわかっているかと思います。コンテンツエントリのうちの１つを覗いて、もう一度前回と同じようにコンテンツタイプ間のリレーションシップを作るのに使う`uuid`フィールドがあることを確認しましょう。

## ポストをカテゴリフィールドで拡張

[前回の記事](https://www.storyblok.com/tp/how-to-build-relationships-between-2-content-types)の最後の状態は、下の画面のように`title`、`image`、`content`、`author`フィールドが見れる状態であるはずです。

![07-result-of-last-article.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/6ad96abc-a75a-7651-b92d-e3e29f430cf6.jpeg)


### 新しいフィールドを定義

新しいフィールドを定義するため、**Define Schema**ボタンを押し、複数選択を可能にしたいので`Multi-Options`タイプを指定して、`categories`キーを新たに追加します。ソースのタイプとして`Stories`を使いたいので追加します。カテゴリーフォルダにあるコンテンツエントリだけ表示するので、**Path to folder of stories**は`categories`とします。忘れずに上部右端にある**Save Schema**を押してコンテンツタイプスキーマを保存してください。

![08-configuration-of-categories-field.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/b81e9c23-d3d4-63fd-edd3-c7d4f388abdb.jpeg)


## カテゴリーを選ぶ

ここまでで、カテゴリエントリの複数選択が可能になっているはずです。好きなカテゴリを選択して**Save**を押しましょう。

![09-interface-of-multi-options.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/54277efd-5297-3694-9955-06545c424bd2.jpeg)


## ポストのカテゴリフィールドへアクセス

今ポスト単位でアクセスした場合、`categories`フィールドがありその中に先ほど選択したカテゴリの`uuid`の配列があるはずです。下の画像をクリックするとリクエストが発行されます。

[![10-post-with-categories-response.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/8fc69b7d-b39e-9b2e-d268-76efbb9318fa.jpeg)](https://api.storyblok.com/v1/cdn/stories/posts/my-first-post?version=draft&token=ask9soUkv02QqbZgmZdeDAtt)


## ポストの属すカテゴリーを取得

ポストの詳細ベージ上で紐付けられているカテゴリーの詳細な情報を取得したい場合があるでしょう。なので、どうにかしてカテゴリーをポストに書かれている`uuid`でフィルタリングする必要があります。StoryblokのコンテンツデリバリAPIでは正確にフィルタリングをするのに`by_uuids`クエリバラメータが使えます。`uuid`は複数の書くことができ、レスポンスとして複数のカテゴリが返ってきます。画像をクリックするとリクエストが発行されます。

[![11-categories-by-uuids.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/d1d2ec5c-dab2-1c1b-a823-56a15c6f73ac.jpeg)](https://api.storyblok.com/v1/cdn/stories/?version=draft&token=ask9soUkv02QqbZgmZdeDAtt&by_uuids=9aa72a2f-04ae-48df-b71f-25f53044dc97,84550816-245d-4fe6-8ae8-b633d4a328f4)


## カテゴリに属すポストを全て取得

そのカテゴリに属す全てのポストが書かれているカテゴリの詳細ページについて考えましょう。このようなページを作るためには、カテゴリの特殊な`uuid`を使ってポストのリストをフィルタリングしてくる必要があります。この場合、コンテンツデリバリAPIの`filter_query[KEY][OPERATION]`パラメータを使うことができます。**categories**配列が**exists**である場合を知りたいのであれば、このパラメータはこのように、`filter_query[categories][exists]`に値としてカテゴリの`uuid`を添えた形になります。

[![12-posts-by-category.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/b384dc19-0f12-cfa9-1be7-8380eee77a6c.jpeg)](https://api.storyblok.com/v1/cdn/stories/?version=draft&token=ask9soUkv02QqbZgmZdeDAtt&starts_with=posts&filter_query[categories][exists]=9aa72a2f-04ae-48df-b71f-25f53044dc97)


## 次のステップ

これで、コンテンツタイプ間の1対多のリレーションシップを作ることができるようになり、`filter_query`パラメータを使ってリクエストが出来るようになり。コンテンツの編集者は自分たちのポストのカテゴリを管理出来るようになりました。まだ著者を追加していない場合は、[前回のチュートリアル](https://www.storyblok.com/tp/how-to-build-relationships-between-2-content-types)を確認してください。