注目のヘッドレスCMS「Storyblok」の基本から応用まで網羅した1冊が登場!
本書では、Storyblokの重要な機能であるビジュアルエディタとブロックライブラリに焦点を当てています。デモページを使いながら、それらの詳細な構造と操作方法について丁寧に解説。ビジュアルエディタのリアルタイムプレビュー機能や、ローカルホストの指定による開発効率の向上など、実践的なテクニックが満載です。
また、ブロックライブラリを活用し、ページの要素をブロック単位で管理する方法を学ぶことで、効率的なページ構成が可能に。多様なプロジェクトの要件に合わせたカスタマイズや拡張にも対応できる、柔軟性の高い技術が身につきます。
さらに、ソースコードを一切触らずにStoryblokだけを使用してページを追加する方法も解説。Storyblokのポテンシャルを最大限に引き出す手法を身につけることができるでしょう。
加えて、StoryblokとNuxt 3の連携方法も詳しく説明されており、最新の技術動向にも対応。ヘッドレスCMSを使いこなしたい開発者必携の1冊です。
【目次】
第1章 ヘッドレスCMSとは
第2章 Storyblok概観
第3章 Storyblokのセットアップ
第4章 構造を理解しよう
第5章 ブロックを表現するソースコード
第6章 ページのカスタマイズ
第7章 Nuxtレイアウトとの棲み分け
第8章 Storyblokのみで実現するページの追加
第9章 まとめと次のステップ
目次プレビュー
- はじめに
- 第1章 ヘッドレスCMSとは
- 第2章 Storyblok概観
-
1.1 CMSとは?
-
1.2 ヘッド「あり」CMSとは
-
1.3 ヘッドレスCMSとは
-
1.4 ヘッドレスCMSのほうが面倒?
-
1.5 既存CMSの限界
-
1.6 ヘッドレスCMSの登場
-
1.7 メリットとデメリット
-
1.8 章のまとめ
-
2.1 Storyblokの特長
-
2.2 なぜStoryblokが選ばれるのか
-
2.3 Storyblokの欠点
-
2.4 向いている場合とそうでない場合
-
2.5 相性のいいフレームワーク
-
2.6 費用
-
2.7 セキュリティ
-
2.8 CDN
-
2.9 Webhook
-
2.10 章のまとめ
-
3.1 アカウントの作成
-
3.2 ビジュアルエディター概観
-
3.3 ダッシュボード概観
-
3.4 Storyblokの構造
-
3.5 スペースの作成
-
3.6 ターミナルでのプロジェクト作成
-
3.7 メッセージの詳細
-
3.8 ビジュアルエディターの設定
-
3.9 mkcertの設定
-
3.10 サーバーの実行
-
3.11 ビジュアルエディターのURL設定
-
3.12 エントリー設定
-
3.13 日本語化の設定
-
3.14 変更してみる
-
3.15 章のまとめ
-
4.1 コンテンツ全体の構造
-
4.2 デモページの構造
-
4.3 Storyblokのブロック
-
4.4 スキーマ
-
4.5 アセット
-
4.6 データソース
-
4.7 タグ
-
4.8 アプリディレクトリー
-
4.9 章のまとめ
-
5.1 Storyの構造
-
5.2 Grid.vue
-
5.3 Feature.vue
-
5.4 Teaser.vue
-
5.5 Page.vue
-
5.6 章のまとめ
-
6.1 Storyの構造
-
6.2 Heroの作成
-
6.3 CallToActionの作成
-
6.4 HeroにCallToActionを追加
-
6.5 Gridを削除
-
6.6 Heroを追加
-
6.7 Heroのフィールドを編集
-
6.8 ブロックの反映
-
6.9 Hero.vueの作成
-
6.10 CallToAction.vueの作成
-
6.11 Teaserの入れ替え
-
6.12 章のまとめ
-
8.1 index.vueの変更
-
8.2 新規ページの作成
-
8.3 キャンペーンの編集
-
8.4 ページの確認
-
8.5 章のまとめ