ソース
どのようにしてブログのコンテンツ構造を作るか
この記事全体に渡って、Headless CMSを用いて、どのようにブログのようなベーシックなコンテンツ構造を作り、また、どのようにStoryblok APIにアクセスしてそのコンテンツを受け取るかを学びます。あなたはこの記事を通して、コンテンツをAPIからロードし、ポストの詳細や概要を自由自在に作り込むことができるようになります。
新しいSpaceを作る
基本からスタートしましょう: 自分のブログのコンテンツ構造を作るためにはコンテンツ構造を格納出来る場所が必要です。Storyblokでは、そういったコンテンツリポジトリはSpaceと呼ばれています。自分のアカウントを作り New Spaceを選択してください。
既にspaceが存在し、demo spaceでスタートしている場合は、単にStoryblok appの上部左端のサイドバーにあるnew Spaceを作ってください。
Spaceへアクセス
spaceが作られたらHomeコンテンツエントリをクリックするように誘導するポップアップメッセージが出てきます。ここでは、どのようにStoryblok APIへアクセスし、また、他のテクノロジーを併用したランディングページの作成のためにどのようにネストされたブロックを使うかということを学べるでしょう。
postコンテンツタイプを作る
今はポップアップメッセージを無視して、ブログのコンテンツ構造を作りましょう。そこから、基本的なコンテンツデリバリAPIリクエストをあなたのコンテンツで受け取り、実際に見れるようにしていきます。始めは、上部右端にあるNewボタンを押します。そうすると、ページ全体をフォームが覆います。Default Content-Typeの欄にpostというのが入っているのが見えるかと思います。しかし、これはまだ存在しないコンテンツタイプです。Storyblokでは新しいコンテンツタイプを自由に作ることができるので、コンテンツ構造をそのままにしておく必要はありません。postをクリックしてCreate new 'post'オプションを押します。
このチュートリアルがvisual composerにフォーカスしていないので(既に他の別のテクノロジー向けの沢山のチュートリアルがカバーをしています)、フォルダを作る前にvisual composerを無効にしておきます。既にSaveを押してしまった場合、フォルダの横にあるチェックボックスをクリックして設定オプションにアクセスし、無効にしてください。
1つ目のポストを作成
新しく作ったフォルダに移動し、上部右端にあるNewボタンを押して新しいコンテンツエントリを作成します。作成ダイアログ中では、name,slug,content-typeが聞かれ、Content-Typeのところには、あらかじめpostがセットされています。postをデフォルトContent-Typeとして設定したからです。slugはAPIのIDになり、URL構造を設計する際に使えます。
ポストのスキーマを定義
コンテンツエントリを作ったら、下の画像のような画面になると思います。これはStorblokのform-onlyのedit modeで、visual editorをセットアップしていないときや、シンプルなフォームをエディタ上で作りたいだけのときに便利です。常にvisual composerモードとfome-onlyモードを切り替えることが出来るConfigタブが使えます。
スキーマ定義
まだこのコンテンツタイプのスキーマを一つも定義していないのでDefine schemaを押してそのために必要なフィールドを追加しましょう。フィールドを子として持つpostを作っていきます。フィールドにはフィールドを望むだけ自由に追加、削除出来ます。
最初のフィールド: content
私たちが最初に作るフィールドは、タイプ(型)をMarkdownとしたcontentとしましょう。これはtextarea型にフォーマットオプションを追加したものです。Markdownではなく、私たちの作ったTinyMCEプラグインを使う手もあります。Markdownから変更をしたい場合にはフィールドタイプからPluginを選択し、storyblok-tinymceで検索すると検索結果にTinyMCE Pluginが出てきます。
第二のフィールド: image
概要のトップの部分に美しい画像の無いポストなどあり得るでしょうか。それはともかく、imageという名前のimage型のフィールドを追加しましょう。画像のアップロードダイアログが開かれるはずです。
第三のフィールド: title
このチュートリアルでポストに追加する最期のフィールドはtitleと呼ばれるもので、これはフィールドタイプにtextを使い、基本的な入力フィールドとなります。タイトルに専用のフィールドを使う代わりに、コンテンツエントリの名前を使用することも出来ます。
スキーマの保存
最期に、コンテントスキーマが満足の行くものになったら保存します。画面の上部右側にあるSave Schemaを押すだけです。コンテンツスキーマはどの時点でもフィールドの拡張、縮小など必要なように変えることができます。
コンテンツ追加の準備が完了
コンテンツを追加する準備が完了しました。好きなタイトルを付け、イメージをアップロードし、Markdownをサッと書きます。Markdownを知らない場合は私たちが書いておいたlorem ipsum markdown fileを使って下さい。全てのコンテンツを入力すると、保存Saveして公開Publishすることが出来るようになります。 Save ボタンを押すことで、API内でdraftバージョンにアクセスすることができるようになり、 Publish を押すことで、現在のdraftバージョンがAPIのpublishedバージョンからアクセス出来るようになります。
ポスト単位のアクセス
私たちは最初のポストを作り上げ、私たちの定義したフィールド内にコンテンツを埋めました。これから、StoryblokのコンテンツデリバリAPIを使用してコンテンツにアクセスしていこうとおもいます。
draftバージョンへのアクセス
上部右端の Save ボタンを押したことで、APIのdraftバージョンの値からアクセス出来るようになっています。確認しましょう。URLを手書きせずにAPIコールにアクセスできるようしたければ、 Published の隣にあるオプションを使用します。矢印をクリックすると、 Unpublished 、 Draft JSON 、Published JSON というオプションが表示されます。
コンテンツは保存済みですが、 Publish はまだ押していないので、 Draft JSON からアクセスできるはずです。クリックしましょう。
published バージョンへアクセス
Published JSON へアクセスしても、まだ何も公開していないので、404 errorが帰ってきてしまいます。 - Publish を押しましょう。もし既に Published JSON を押し404を受け取った場合、 Publish ボタンを押してからも404が帰ってくるかと思います。これは、コンテンツデリバリAPIがPublishedリクエストをキャッシュしているからです。&cv=1を追加すれば新しいバージョンを受け取れます。キャッシュの無効化については、コンテンツデリバリAPIドキュメントをご覧ください。
第二のポストを作る
コンテンツエントリのリストにアクセスしたいので、二つ目のポストを作りましょう。そのためには、上部左端のStoryblokロゴをクリックするか、ロゴの右下にあるブレッドクラムを使いましょう。ロゴは現在のフォルダへリダイレクトし、ブレッドクラムの家のアイコンはコンテンツディレクトリ全体へ飛び、Postsは先ほど作成したPostsフォルダへ飛びます。フォルダへ戻り New をもう一度押せば二つ目のポストを作ることができます。
これで、コンテンツを追加し保存、公開することができます。また、先ほどのようにdraftバージョン、publishedバージョンにアクセス出来るようになります。これは既に学んだので、ブログの概要を作るのに必要な最終章へ進みます。
コンテンツエントリのリストへアクセス
コンテンツエントリーのリストへアクセスする場合も、ポスト単位でアクセスした時と同じエンドポイントを使いますが、今回は複数のコンテンツエントリに一度でアクセスしたいので、Postsフォルダのslugのpostsと併せてstarts_withパラメータを使います。以前のリクエストを用いて、以下のように編集できます。下の画像をクリックすると、新しいタブでリクエストを投げます。最後に、そのリクエストのアクセストークンを、あなたのpreview_tokenに書き換えることで完了です。
これで、先ほどと同じように、あなたのコンテンツのdraftバージョンのリクエストが返すものを見ることができます。draftをpublishedに変えることで、コンテンツエントリのpublishedのみへアクセスします。
次のステップ
あなたはブログのコンテンツ構造の基本学び、あなた方のコンテンツの編集者はStoryblokにコンテンツを追加することが出来ます。次のステップはここから先へ進みます:
- 好きなテクノロジーを使ってブログを構築する。
- 著者を追加し、コンテンツタイプリレーションシップを学ぶ。
- ブログ概要のサムネイルにStoryblokの画像サービスを使う。
- Storyblok JS ブリッジを追加し、ビジュアルエディットモードを有効化する。
- コンテンツデリバリ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 |