StoryblokとAstro
Storyblokはブロックと呼ばれる再利用可能なコンポーネントを作成してコンテンツを管理するコンポーネントベースのヘッドレスCMSです。
Astroとの連携
セクションタイトル: Astroとの連携このセクションでは、Storyblok integrationを利用してStoryblokとAstroを接続します。
必須要件
セクションタイトル: 必須要件始めるには、以下の手順を行っている必要があります。
-
Astroプロジェクト - もしAstroプロジェクトをまだ持っていない場合は、自動CLIでAstroをインストールを見ると、すぐに使い始めることができます。
-
Storyblokアカウントとスペース - もしアカウントを持っていない場合は、無料で登録してスペースを作成します。
-
Storyblok APIトークン - Storyblokスペースの設定内のアクセストークンタブからAPIトークンを生成できます。
- Preview token - これは開発中にドラフトもしくは未公開バージョンのコンテンツを取得するために使います。
- Public token - これは製品版でビルド時に公開済みのコンテンツを取得するために使います。
クレデンシャルをセットアップする
セクションタイトル: クレデンシャルをセットアップするAstroへStoryblokのクレデンシャルを追加するために、.env
ファイルをプロジェクトのルートディレクトリに作成して環境変数に追加します。
これで、プロジェクトでこれらの環境変数を利用できます。
ルートディレクトリは以下のように作成したファイル含まれているはずです。
依存関係をインストールする
セクションタイトル: 依存関係をインストールするAstroとStoryblokスペースを接続するために、次の中から好みのパッケージマネージャの1つのコマンドを実行して公式のStoryblok integrationをインストールします。
Storyblokを設定する
セクションタイトル: Storyblokを設定するAstro設定ファイルにStoryblokとの接続が含まれるように以下のように修正します。
Storyblokとの接続には以下のプロパティを持つオブジェクトを必要とします。
-
accessToken
- これは、前述で追加したStoryblok APIトークンへの参照です。この例では開発時はpreview tokenを使い、製品版ではpublic tokenを使います。Astro設定ファイルは環境変数をサポートしないため、環境変数をロードするためにViteの
loadEnv()
関数を使います。 -
components
- Storyblokのコンポーネント名をローカルコンポーネントへのパスへマッピングするオブジェクトです。StoryblokコンポーネントをAstroへ描画するときに必須となります。このコンポネントパスは
src
ディレクトリからの相対パスです。 -
apiOptions
- Storyblok API optionsを含むオブジェクトです。デフォルトのリージョンは
eu
です。もしStoryblokがUSリージョンで作成された場合は、region:us
と設定する必要があります。
ブロックをAstroコンポーネントに接続する
セクションタイトル: ブロックをAstroコンポーネントに接続するブロックをAstroへ接続するために、src
ディレクトリにstoryblok
という名のフォルダーを作成します。このフォルダーには全てのStoryblokのブロックライブラリに対応するAstroコンポネントが含まれます。
例えば、以下のフィールドを持つblogPost
というブロックコンテンツがブロックライブラリにある場合を解説します。
title
- テキストフィールドdescription
- テキストフィールドcontent
- リッチテキストフィールド
目標は、このフィールドを使ってコンテンツに描画するようなAstroコンポーネントを作成する事です。これを実現するために、以下のようにsrc/storyblok
ディレクトリにBlogPost.astro
というファイルを作成します。
blok
プロパティーにはStoryblokから受信するデータがが含まれます。StoryblokのblogPost
ブロックで定義したフィールドの値が含まれます。
コンテンツを描画するためには、インテグレーションは以下のようなユーティリティ関数を提供しています。
storyblokEditable
- Stroyblokでこれらを編集可能にするために、必要に応じて要素へ属性を追加します。renderRichText
- リッチテキストフィールドをHTMLに変換します。
ルートディレクトリは以下のように作成したファイル含まれているはずです。
最後に、blogPost
ブロックをBlogPost
コンポーネントへ接続するために、Astro設定ファイルのコンポーネントオブジェクトにプロパティを追加します。キーはブロック名で、値はコンポーネントへのパスです。
データを取得する
セクションタイトル: データを取得するセットアップしたものをテストするために、blogPost
コンテンツでtest-post
という名前のストーリーをStoryblokで作成します。
Astroでは、以下のコンテンツのtest-post.astro
という名前のページをsrc/pages
に作成します。
データ問い合わせをするために、useStoryblokApi
フックを利用します。これは連携設定を利用して新しいクライアントインスタンスを初期化します。
コンテンツを描画するために、ストーリーのcontent
プロパティをblok
としてStoryblokComponent
へ渡します。このコンポーネントはcontent
プロパティ内で定義されたブロックを描画します。この例では、BlogPostコンポーネントを描画します。
ブログをAstroとStoryblokで作る
セクションタイトル: ブログをAstroとStoryblokで作る連携のセットアップが終われば、AstroとStoryblokを使ったブログを作成できます。
必須要件
セクションタイトル: 必須要件-
Storyblokスペース - 子のチュートリアルでは、新しいスペースを作ることをお勧めします。もしすでにブロックを含むスペースがある場合は、そのまま利用できますが、ブロック名とコンテンツタイプに合わせコードを修正する必要があります。
-
Storyblokと連携したAstroプロジェクト - 連携するためのセットアップ方法を知るにはAstroとの連携を参照ください。
ブロックライブラリを作成する
セクションタイトル: ブロックライブラリを作成するBlokを作成するためには、Storyblokアプリのライブラリをブロックをクリックします。+ 新規ブロックボタンをクリックして以下のブロックを作成します。
-
blogPost
- 以下のフィールドを持つコンテンツタイプブロックです。title
- テキストフィールドdescription
- テキストフィールドcontent
- リッチテキストフィールド
-
blogPostList
- 空のNestable Blokです。 -
page
- 以下のフィールドを持つコンテンツタイプブロックです。body
- ネスト可能なBlokフィールド
コンテンツを作成する
セクションタイトル: コンテンツを作成するコンテンツを追加するために、コンテンツタブをクリックしてコンテンツセクションへ移動します。前のステップで作成したブロックライブラリを使って以下のストーリーを追加します。
-
home
-page
ブロックを使ったコンテンツタイプを持つストーリーです。body
フィールド内にはblogPostList
ブロックを追加します。 -
blog/no-javascript
- ブログフォルダー内のblogPost
コンテンツタイプを持つストーリーです。 -
blog/astro-is-amazing
- ブログフォルダー内のblogPost
コンテンツタイプを持つストーリーです。
これでコンテンツの準備は整いました。Astroプロジェクトに切り替えてブログの構築を始めましょう。
ブロックをコンポーネントへ接続する
セクションタイトル: ブロックをコンポーネントへ接続する新しく作成したブロックをAstroコンポーネントへ接続するには、src
ディレクトリにstoryblok
と呼ばれるフォルダを作成して以下のファイルを追加します。
Page.astro
は、page
ブロックのbody
プロパティ内の全てのブロックを再帰的に描画するネスト可能なBlokコンテンツタイプのコンポーネントです。また、親要素にstoryblokEditable
を追加し、Storyblokでページを編集できるようにします。
BlogPost.astro
はblogPost
ブロックのtitle
とdescription
とcontent
プロパティを描画します。
リッチテキストフィールドプロパティのcontent
をHTMLに変換するためにrenderRichText
関数を利用します。
BlogPostList.astro
はブログ記事のリストプレビューを描画するNestable Blokコンテンツタイプです。
これはuseStoryblokApi
フックを利用してblogPost
のコンテンツタイプのストーリー全てを取得します。クエリパラメータのversion
を利用して、開発モードではストーリーのドラフトを、製品番ビルドの時は公開されたバージョンを取得します。
最後に、astro.config.mjs
ファイルのcomponents
プロパティに作成したコンポーネントを追加します。各キーはStoryblok内のブロック名で、値はsrc
からのコンポーネントの相対パスです。
ページを生成する
セクションタイトル: ページを生成する静的サイトジェネレーター
セクションタイトル: 静的サイトジェネレーターAstroのデフォルト静的モードを利用している場合、動的ルーティングとgetStaticPaths()
関数を使えます。この関数はビルド時に呼ばれて、ページとなるパスのリストをせいせいします。
src/pages
に[…slug].astro
という以下のファイルを作成します。
これはStoryblok APIから取得したスラッグとコンテンツを含む各ストーリーのページを生成します。もしストーリーのスラッグがhome
だった場合、undefinedのスラッグを返し/
ルーティングを生成します。
サーバーサイドレンダリング
セクションタイトル: サーバーサイドレンダリングプロジェクトでSSRを有効にする (EN)場合、Storyblokデータを取得するために動的ルーティングで slug
パラメータが利用されます。
このファイルは動的なslug
パラメータと一致するページデータをStoryblokから取得して描画します。
もし見つからない場合は、404ページへリダイレクトします。
サイトを公開する
セクションタイトル: サイトを公開するウェブサイトをデプロイするために、デプロイガイドへアクセスして好みのホスティングプロバイダーにあわせた説明に従ってください。
Storyblokの変更時に再ビルドする
セクションタイトル: Storyblokの変更時に再ビルドするもしプロジェクトがAstroのデフォルトである静的モードを使っている場合、コンテンツを変更した時に新しいビルドを行うトリガーをするためのWebhookをセットアップする必要があります。もしNetlifyかVercelをホスティングプロバイダーとして使っている場合、コンテンツイベントから新しいビルドをトリガーするためにWebhook機能を使えます。
Netlify
セクションタイトル: NetlifyNetlifyのWebhookをセットアップするためには以下の手順が必要です。
-
ダッシュボードに行き、Build & deployをクリックします。
-
Continuous Deploymentタブから、Build hooks セクションを探しAdd build hookをクリックします。
-
Webhookの名前を指定してビルド時にトリガーされるブランチを選択します。Saveをクリックし生成されたURLをコピーします。
Vercel
セクションタイトル: VercelVercelのWebhookをセットアップするためには以下の手順が必要です。
-
ダッシュボードへ行き、Settingsをクリックします。
-
Gitタブから、Deploy Hooksセクションを見つけます。
-
Webhookの名前を指定してビルド時にトリガーされるブランチを選択します。Addをクリックして生成されたURLをコピーします。
StoryblokにWebhookを追加する
セクションタイトル: StoryblokにWebhookを追加するStoryblokスペースのSettingsから、Webhooksタブをクリックします。Story published & unpublishedボックスにWebhook URLをペーストします。保存を押してWebhookを作成します。
これで、新しいストーリーを公開しても、新しいビルドがトリガーされブログが更新されます。
公式リソース
セクションタイトル: 公式リソース- StoryblokはプロジェクトにStoryblokを追加する Astro Integrationを提供しています。
コミュニティリソース
セクションタイトル: コミュニティリソース- 追加してください!