Astroビジュアル編集

Page content

Storyblok + Astroの使い方を詳しく解説します！ https://github.com/storyblok/blueprint-core-astro#

Storyblok + Astro 完全セットアップガイド

📋 前提条件

  • Astroプロジェクトが存在すること
  • Storyblokのアカウントとスペースが必要（無料で作成可能）
  • Storyblok PreviewトークンをスペースのAccess Tokensタブで取得しておく

STEP 1: パッケージのインストール

npx astro add @storyblok/astro
# または
npm install @storyblok/astro

STEP 2: 環境変数の設定

プロジェクトルートに .env ファイルを作成：

STORYBLOK_TOKEN=your-preview-token

STEP 3: astro.config.mjs の設定

Storyblokに定義したすべてのコンポーネントを components オブジェクトでグローバル登録する必要があります。キーはStoryblokのBlok名、値はAstroコンポーネントのパスです。

import { defineConfig } from "astro/config";
import storyblok from "@storyblok/astro";

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: import.meta.env.STORYBLOK_TOKEN,
      components: {
        page: "storyblok/Page",
        feature: "storyblok/Feature",
        teaser: "storyblok/Teaser",
      },
    }),
  ],
});

STEP 4: Storyblok側でBlokを作成

Storyblokの管理画面で Block Library → + New blok からコンテンツブロックを作成します。

例えば page というContent TypeブロックにBodyフィールドを追加し、その中に teaser、feature などのネスト可能なブロックを組み合わせます。

STEP 5: Astroコンポーネントの作成

src/storyblok/ ディレクトリにBlokと対応するコンポーネントを作成します。

各コンポーネントは blok プロパティを受け取り、その中にブロックのコンテンツが入ります。storyblokEditable(blok) を使うことでビジュアルエディタが機能するようになります。

---
// src/storyblok/Page.astro
import { storyblokEditable } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
const { blok } = Astro.props;
---

<main {...storyblokEditable(blok)}>
  {blok.body?.map((blok) => <StoryblokComponent blok={blok} />)}
</main>

---
// src/storyblok/Teaser.astro
import { storyblokEditable } from "@storyblok/astro";
const { blok } = Astro.props;
---

<div {...storyblokEditable(blok)}>
  <h1>{blok.headline}</h1>
</div>

STEP 6: ページでデータを取得・表示

useStoryblokApi を使ってStoryblok APIのインスタンスにアクセスできます。

---
// src/pages/index.astro
import { useStoryblokApi } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories/home", {
  version: "draft",
});
const story = data.story;
---

<StoryblokComponent blok={story.content} />

STEP 7: ライブプレビューの有効化（任意）

ライブプレビューを使うにはAstroをSSRモードで動作させる必要があります。astro.config.mjs で livePreview: true を設定し、output: "server" にします。

storyblok({
  accessToken: "...",
  livePreview: true,
}),
// astro config に output: "server" を追加

STEP 8: デプロイ後のWebhook設定

Storyblokでコンテンツを公開した際に自動でデプロイを走らせるには、ホスティングサービス（Netlifyなど）でBuild Hookを作成し、そのURLをStoryblokの Settings → Webhooks に登録します。トリガーは「Story published」と「Story unpublished」を選択します。

🗂️ ディレクトリ構成まとめ

src/
├── pages/
│   └── index.astro       # データ取得・ページ表示
└── storyblok/
    ├── Page.astro         # Content Typeブロック
    ├── Teaser.astro       # ネスト可能ブロック
    └── Feature.astro
.env                       # APIトークン
astro.config.mjs           # Storyblok統合設定

💡 ポイントまとめ

項目 内容
storyblokEditable() ビジュアルエディタを有効にする必須関数
StoryblokComponent ネストされたブロックを自動レンダリング
useStoryblokApi() コンテンツのデータ取得
renderRichText() リッチテキストフィールドをHTMLに変換
ライブプレビュー SSRモード必須（本番はSSGも可）

詳細なチュートリアルやサンプルコードを確認したい場合は、Storyblok公式Astroガイドも参考にしてください！

**Cloudflare + Astro + CMS（ビジュアル編集あり）を“最短で動かす手順”**を、実務レベルで具体的にまとめます。

ここでは一番バランスがいい👇
👉 Astro + Cloudflare + Storyblok 構成でいきます

（※理由：ビジュアル編集・無料枠・安定性が揃ってる）

🧩 全体構成（まず理解）

Storyblok（管理画面）
        ↓ API
Astro（フロント）
        ↓
Cloudflare Pages（公開）

👉 編集はStoryblok
👉 表示はAstro
👉 配信はCloudflare

🚀 手順① Astroプロジェクト作成（2分）

npm create astro@latest

選択👇

  • テンプレ：Minimal

  • TypeScript：Yes

  • install：Yes

cd プロジェクト名
npm run dev

👉 http://localhost:4321 で確認

🚀 手順② Storyblok登録（3分）

  1. Storyblok にアクセス

  2. 無料登録

  3. 「New Space」作成

  4. 「Empty Space」でOK

🚀 手順③ APIキー取得

Storyblok管理画面：

👉 Settings → Access Tokens
👉 Preview Token をコピー

🚀 手順④ AstroにStoryblok SDK導入

npm install @storyblok/astro

🚀 手順⑤ Astro設定（超重要）

astro.config.mjs

import { defineConfig } from 'astro/config';
import storyblok from '@storyblok/astro';

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: 'ここにトークン',
      apiOptions: {
        region: 'ap', // 日本ならこれ
      },
    }),
  ],
});

🚀 手順⑥ ページ作成（CMSデータ表示）

src/pages/index.astro

---
import { useStoryblok } from '@storyblok/astro';

const { story } = await useStoryblok('home', {
  version: 'draft',
});
---

<h1>{story.content.title}</h1>
<p>{story.content.text}</p>

🚀 手順⑦ Storyblokでコンテンツ作成

Storyblok管理画面で👇

  1. 「Content」→ Create Story

  2. 名前：home

  3. フィールド追加：

コンテンツ構造

  • title（Text）

  • text（Textarea）

👉 保存

🚀 手順⑧ リアルタイムプレビュー設定

Storyblok → Settings → Visual Editor

Preview URL：

http://localhost:4321/

👉 これで画面見ながら編集できる

🚀 手順⑨ Cloudflareにデプロイ（5分）

① GitHubにpush

git init
git add .
git commit -m "init"
git remote add origin あなたのrepo
git push -u origin main

② Cloudflare Pages設定

  1. Cloudflareログイン

  2. Pages → Create Project

  3. GitHub連携

  4. リポジトリ選択

設定👇

  • Framework preset：Astro

  • Build command：

npm run build
  • Output directory：
dist

③ 環境変数（重要）

STORYBLOK_TOKEN=さっきのトークン

👉 本番はこれ使う（コード直書きしない）

🚀 手順⑩ 本番プレビューURL設定

Storyblok側：

Preview URLを👇に変更

https://あなたのpagesのURL

🎯 完成！

👉 CMSで編集
👉 即サイト反映（プレビュー）
👉 Cloudflareで爆速配信

💡 よくある詰まりポイント

❌ データが表示されない

→ slug名「home」が一致してない

❌ 本番で見れない

→ env変数未設定

❌ プレビュー動かない

→ URL設定ミス

🔥 応用（ここから強い）

  • コンポーネント化（LP作れる）

  • 多言語対応

  • ブログ機能

  • Cloudflare WorkersでAPI追加

  • 認証（Zero Trust連携）

👍 最短まとめ

👉 10分でやるなら：

  1. Astro作成

  2. Storyblok登録

  3. SDK入れる

  4. Cloudflareにデプロイ

はい、Astroでもビジュアルエディタ（GUIで編集できる仕組み）は普通にあります。
ただし、WordPressのように「標準で内蔵」ではなく、CMSを組み合わせる形になります。

✅ Astroで使えるビジュアルエディタ（代表例）

① 本格ビジュアル編集（ページ上で直接編集）

👉 一番おすすめゾーン

・Storyblok

  • ページを見ながらリアルタイム編集

  • コンポーネントベースでレイアウト構築可能

  • Astro公式パートナー
    👉 マーケサイト・LP向けにかなり強い
    (Storyblok)

・CloudCannon

  • ビジュアルエディタあり（画面上で編集）

  • WYSIWYG + データ編集 + コード編集全部あり

  • Astro公式ドキュメントで紹介されている
    👉 開発者と編集者のバランスが良い
    (Astro Docs)

・ApostropheCMS

  • ページ上で直接編集（インコンテキスト編集）

  • Astroテーマ「Apollo」と組み合わせ可能
    👉 WordPressに一番近い体験
    (Astro)

② ライブプレビュー型（ほぼビジュアル編集）

👉 最近人気

・Zero CMS

  • 実サイトをそのまま見ながら編集

  • Markdown/MDX対応

  • AIエージェント連携あり
    👉 かなり新しくて体験が良い
    (Zero)

③ シンプルなWYSIWYG（ブログ・記事向け）

・Sitepins

  • Git連携 + ビジュアルエディタ

  • MarkdownをGUIで編集
    (Astro Docs)

・Canaveral CMS

  • Astro専用に近いCMS

  • MarkdownをWYSIWYG編集
    (Canaveral CMS)

🧠 結論（用途別おすすめ）

▶ ノーコードに近い編集したい

→ Storyblok / CloudCannon / ApostropheCMS

👉「ページ見ながら編集」できる

▶ 開発寄り + そこそこ編集しやすく

→ Zero CMS

▶ ブログ・記事だけ

→ Sitepins / Canaveral

⚠️ 重要な理解（ここがハマりポイント）

Astroは：

👉 「表示（フロント）」専門フレームワーク
👉 編集機能は外部CMSに任せる設計

つまり
👉 WordPressのように「全部入り」ではない

💡 個人的おすすめ

あなたの用途（Cloudflare + Astroでサイト構築）なら：

👉 最初は
Storyblok or CloudCannon

👉 シンプルに始めたいなら
Zero CMS