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

#### ソース

https://www.storyblok.com/tp/how-to-create-a-blog-content-structure

# どのようにしてブログのコンテンツ構造を作るか

この記事全体に渡って、Headless CMSを用いて、どのようにブログのようなベーシックなコンテンツ構造を作り、また、どのようにStoryblok APIにアクセスしてそのコンテンツを受け取るかを学びます。あなたはこの記事を通して、コンテンツをAPIからロードし、ポストの詳細や概要を自由自在に作り込むことができるようになります。

## 新しい`Space`を作る

基本からスタートしましょう: 自分のブログのコンテンツ構造を作るためにはコンテンツ構造を格納出来る場所が必要です。Storyblokでは、そういったコンテンツリポジトリは`Space`と呼ばれています。[自分のアカウントを作り](https://app.storyblok.com/#!/signup) `New Space`を選択してください。


![01-create-new-space.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/3edc3812-9502-0204-25f7-c25f5f6bb3cb.jpeg)


既に`space`が存在し、`demo space`でスタートしている場合は、単にStoryblok appの上部左端のサイドバーにある`new Space`を作ってください。

## Spaceへアクセス

`space`が作られたら`Home`コンテンツエントリをクリックするように誘導するポップアップメッセージが出てきます。ここでは、どのようにStoryblok APIへアクセスし、また、他のテクノロジーを併用したランディングページの作成のためにどのようにネストされたブロックを使うかということを学べるでしょう。

![02-first-visit.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/679075c8-b8c9-28e2-2fed-016c8b9e2405.jpeg)


## `post`コンテンツタイプを作る

今はポップアップメッセージを無視して、ブログのコンテンツ構造を作りましょう。そこから、基本的なコンテンツデリバリAPIリクエストをあなたのコンテンツで受け取り、実際に見れるようにしていきます。始めは、上部右端にある`New`ボタンを押します。そうすると、ページ全体をフォームが覆います。`Default Content-Type`の欄に`post`というのが入っているのが見えるかと思います。しかし、これはまだ存在しないコンテンツタイプです。Storyblokでは新しいコンテンツタイプを自由に作ることができるので、コンテンツ構造をそのままにしておく必要はありません。`post`をクリックして`Create new 'post'`オプションを押します。

![03-folder-creation-dialog.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/43a15361-8191-79a1-5d88-8c5938f25f0a.jpeg)

このチュートリアルがvisual composerにフォーカスしていないので(既に他の別のテクノロジー向けの沢山のチュートリアルがカバーをしています)、フォルダを作る前にvisual composerを無効にしておきます。既に`Save`を押してしまった場合、フォルダの横にあるチェックボックスをクリックして設定オプションにアクセスし、無効にしてください。

![04-disable-visual-editor.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/c01be232-6137-be9f-8470-3e7671f9301a.jpeg)



## 1つ目のポストを作成

新しく作ったフォルダに移動し、上部右端にある**New**ボタンを押して新しいコンテンツエントリを作成します。作成ダイアログ中では、`name`,`slug`,`content-type`が聞かれ、Content-Typeのところには、あらかじめ`post`がセットされています。`post`をデフォルトContent-Typeとして設定したからです。`slug`はAPIのIDになり、URL構造を設計する際に使えます。

![05-new-content-entry.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/18175050-8f4b-58be-c41c-c552f063048a.jpeg)


## ポストのスキーマを定義

コンテンツエントリを作ったら、下の画像のような画面になると思います。これはStorblokのform-onlyのedit modeで、visual editorをセットアップしていないときや、シンプルなフォームをエディタ上で作りたいだけのときに便利です。常にvisual composerモードとfome-onlyモードを切り替えることが出来る*Config*タブが使えます。

![03-first-screen.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/6ad1e59b-063e-a169-0615-c2391297fedb.jpeg)


### スキーマ定義

まだこのコンテンツタイプのスキーマを一つも定義していないので`Define schema`を押してそのために必要なフィールドを追加しましょう。フィールドを子として持つ`post`を作っていきます。フィールドにはフィールドを望むだけ自由に追加、削除出来ます。

![04-define-schmea.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/d5605783-3501-4bd1-99cf-f8f7df3c5410.jpeg)


### 最初のフィールド: `content`

私たちが最初に作るフィールドは、タイプ(型)を`Markdown`とした**content**としましょう。これは`textarea`型にフォーマットオプションを追加したものです。`Markdown`ではなく、私たちの作ったTinyMCEプラグインを使う手もあります。`Markdown`から変更をしたい場合にはフィールドタイプから`Plugin`を選択し、`storyblok-tinymce`で検索すると検索結果に[TinyMCE Plugin](https://github.com/storyblok/fieldtype-tinymce/)が出てきます。

![05-define-schema-key.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/3db4d1c7-ef9b-2b71-2dfe-5e3f59766896.jpeg)


### 第二のフィールド: `image`

概要のトップの部分に美しい画像の無いポストなどあり得るでしょうか。それはともかく、**image**という名前の`image`型のフィールドを追加しましょう。画像のアップロードダイアログが開かれるはずです。

![06-add-image.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/e92c8c43-7840-6563-f7d1-e3706f955d2a.jpeg)


### 第三のフィールド: `title`

このチュートリアルでポストに追加する最期のフィールドは**title**と呼ばれるもので、これはフィールドタイプに`text`を使い、基本的な入力フィールドとなります。タイトルに専用のフィールドを使う代わりに、コンテンツエントリの名前を使用することも出来ます。

![07-add-title.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/ec068895-9268-cf35-a788-f0f6429257d4.jpeg)


### スキーマの保存

最期に、コンテントスキーマが満足の行くものになったら保存します。画面の上部右側にある**Save Schema**を押すだけです。コンテンツスキーマはどの時点でもフィールドの拡張、縮小など必要なように変えることができます。

![08-save-schema.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/65bd3727-1b44-b076-8da7-800bd7f33a2e.jpeg)


## コンテンツ追加の準備が完了

コンテンツを追加する準備が完了しました。好きなタイトルを付け、イメージをアップロードし、Markdownをサッと書きます。Markdownを知らない場合は私たちが書いておいた[lorem ipsum markdown file](https://gist.github.com/DominikAngerer/b4a29b5ec9a69fc09546882586bc2d6b)を使って下さい。全てのコンテンツを入力すると、保存`Save`して公開`Publish`することが出来るようになります。 **Save** ボタンを押すことで、API内で`draft`バージョンにアクセスすることができるようになり、 **Publish** を押すことで、現在の`draft`バージョンがAPIの`published`バージョンからアクセス出来るようになります。

![09-composing-content.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/3781a1bf-2509-2ba6-836e-f7a402d9865a.jpeg)


## ポスト単位のアクセス

私たちは最初のポストを作り上げ、私たちの定義したフィールド内にコンテンツを埋めました。これから、StoryblokのコンテンツデリバリAPIを使用してコンテンツにアクセスしていこうとおもいます。

### `draft`バージョンへのアクセス

上部右端の **Save** ボタンを押したことで、APIの`draft`バージョンの値からアクセス出来るようになっています。確認しましょう。URLを手書きせずにAPIコールにアクセスできるようしたければ、 **Published** の隣にあるオプションを使用します。矢印をクリックすると、 **Unpublished** 、 **Draft JSON** 、**Published JSON** というオプションが表示されます。

![10-draft-mode.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/bb2aea05-1ddf-5b7c-d353-d6a87ba143d4.jpeg)


コンテンツは保存済みですが、 **Publish** はまだ押していないので、 **Draft JSON** からアクセスできるはずです。クリックしましょう。

[![14-draft-version-result.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/ed1e3ec4-61f3-c66e-cca0-847a6fbeda78.jpeg)](https://api.storyblok.com/v1/cdn/stories/posts/my-first-post?version=draft&token=YnofQU5pNYJoIFrrYO3IuAtt)


## `published` バージョンへアクセス

**Published JSON** へアクセスしても、まだ何も公開していないので、404 errorが帰ってきてしまいます。 - **Publish** を押しましょう。もし既に **Published JSON** を押し404を受け取った場合、 **Publish** ボタンを押してからも404が帰ってくるかと思います。これは、コンテンツデリバリAPIがPublishedリクエストをキャッシュしているからです。`&cv=1`を追加すれば新しいバージョンを受け取れます。キャッシュの無効化については、[コンテンツデリバリAPIドキュメント](https://www.storyblok.com/docs/Delivery-Api/get-a-story)をご覧ください。

[![15-published-version-result.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/fc2bd9d2-62eb-fecf-31c0-3d3e7108dcc7.jpeg)](https://api.storyblok.com/v1/cdn/stories/posts/my-first-post?version=published&token=YnofQU5pNYJoIFrrYO3IuAtt)


## 第二のポストを作る

コンテンツエントリのリストにアクセスしたいので、二つ目のポストを作りましょう。そのためには、上部左端のStoryblokロゴをクリックするか、ロゴの右下にあるブレッドクラムを使いましょう。ロゴは現在のフォルダへリダイレクトし、ブレッドクラムの家のアイコンはコンテンツディレクトリ全体へ飛び、Postsは先ほど作成したPostsフォルダへ飛びます。フォルダへ戻り **New** をもう一度押せば二つ目のポストを作ることができます。

![16-second-post.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/fed01adb-b331-e511-38c0-701b8cf08aa0.jpeg)


これで、コンテンツを追加し保存、公開することができます。また、先ほどのように`draft`バージョン、`published`バージョンにアクセス出来るようになります。これは既に学んだので、ブログの概要を作るのに必要な最終章へ進みます。

## コンテンツエントリのリストへアクセス

コンテンツエントリーのリストへアクセスする場合も、ポスト単位でアクセスした時と同じエンドポイントを使いますが、今回は複数のコンテンツエントリに一度でアクセスしたいので、Postsフォルダのslugの`posts`と併せて`starts_with`パラメータを使います。以前のリクエストを用いて、以下のように編集できます。下の画像をクリックすると、新しいタブでリクエストを投げます。最後に、そのリクエストのアクセストークンを、あなたの`preview_token`に書き換えることで完了です。

[![multiple-posts.png](https://qiita-image-store.s3.amazonaws.com/0/157765/3a6f22b2-42a4-837d-c133-1f718e8cb140.png)](https://api.storyblok.com/v1/cdn/stories/?version=draft&token=YnofQU5pNYJoIFrrYO3IuAtt&starts_with=posts)


これで、先ほどと同じように、あなたのコンテンツの`draft`バージョンのリクエストが返すものを見ることができます。`draft`を`published`に変えることで、コンテンツエントリの`published`のみへアクセスします。

## 次のステップ

あなたはブログのコンテンツ構造の基本学び、あなた方のコンテンツの編集者はStoryblokにコンテンツを追加することが出来ます。次のステップはここから先へ進みます:

1. 好きなテクノロジーを使ってブログを構築する。
2. 著者を追加し、[コンテンツタイプリレーションシップ](https://www.storyblok.com/tp/how-to-build-relationships-between-2-content-types)を学ぶ。
3. ブログ概要のサムネイルにStoryblokの[画像サービス](https://www.storyblok.com/docs/image-service)を使う。
4. [Storyblok JS ブリッジ](https://www.storyblok.com/docs/Guides/storyblok-latest-js)を追加し、ビジュアルエディットモードを有効化する。
5. コンテンツデリバリAPIの他のパラメータをチェックする。

私たちは常に、あなたがよりよい体験を得るために、Storyblokをよりよいものにする方法を探っています。フィードバックを頂けると嬉しいです。

| リソース | リンク |
|:--|:--|
| Stroryblok | https://app.storyblok.com |
| コンテンツデリバリAPIドキュメント | https://www.storyblok.com/docs/Delivery-Api/overview |
| ポスト単位のAPIコール | https://api.storyblok.com/v1/cdn/stories/posts/my-first-post?version=draft&token=YnofQU5pNYJoIFrrYO3IuAtt |
| 複数ポストのAPIコール | https://api.storyblok.com/v1/cdn/stories/?version=draft&token=YnofQU5pNYJoIFrrYO3IuAtt&starts_with=posts |
| Storyblokをはじめよう: 概要 | https://www.storyblok.com/getting-started |
| 2つのコンテンツタイプの関係の構築方法 | https://www.storyblok.com/tp/how-to-build-relationships-between-2-content-types |