Astro 統合ガイド

AstroのデフォルトであるゼロJavaScriptの静的およびハイブリッドレンダリングアーキテクチャは、高パフォーマンスなブランドサイトやブログの構築に最適です。Kanorio Content Delivery APIを使用すれば、数行のコードで.astroコンポーネントの先頭から公開済みのコレクションや記事を直接取得できます。

1. 環境変数の設定

Astroプロジェクトの.envファイルに、Kanorioサイトの永続的なシステムURLを追加します。

PUBLIC_KANORIO_SITE_URL="https://s-k4m9x2p7q8w3.kanorio.com"

---

2. プロジェクトやサービスコレクションの取得 (src/pages/projects.astro)

.astroファイルのFrontmatterブロックで/api/v1/collections/{key}/itemsを直接呼び出し、最上位のassetsマップを使用して画像URLを取得します。

---
const SITE_URL = import.meta.env.PUBLIC_KANORIO_SITE_URL;
const res = await fetch(`${SITE_URL}/api/v1/collections/projects/items?sort=-publishedAt&limit=20`);
const { items, assets } = await res.json();
---

<section>
  <h1>プロジェクト</h1>
  <div class="grid">
    {items.map((item) => {
      const cover = assets[item.fieldData.cover];
      return (
        <article>
          {cover && (
            <img
              src={cover.url}
              alt={cover.alt ?? item.fieldData.title}
              width={cover.width ?? undefined}
              height={cover.height ?? undefined}
              loading="lazy"
            />
          )}
          <h2>{item.fieldData.title}</h2>
          <p>{item.fieldData.summary}</p>
        </article>
      );
    })}
  </div>
</section>

---

3. ブログ記事一覧と詳細ページの作成 (src/pages/blog/[slug].astro)

blogコレクションを取得する際は、formats=htmlおよびexpand=authors,categoriesを含めます。その後、item.contentHtmlをAstroのset:htmlに直接渡してレンダリングし、item.tocを使用して目次を生成できます。

---
const SITE_URL = import.meta.env.PUBLIC_KANORIO_SITE_URL;

export async function getStaticPaths() {
  const siteUrl = import.meta.env.PUBLIC_KANORIO_SITE_URL;
  const res = await fetch(`${siteUrl}/api/v1/collections/blog/items?fields=title&limit=100`);
  const { items } = await res.json();
  return items.map((post) => ({ params: { slug: post.slug } }));
}

const { slug } = Astro.params;
const res = await fetch(
  `${SITE_URL}/api/v1/collections/blog/items/${encodeURIComponent(slug!)}?expand=authors,categories,tags&formats=html`
);
if (!res.ok) return Astro.redirect("/404");
const { item, assets } = await res.json();
const coverId = (item.fieldData.cover_image ?? "").replace(/^asset:/, "");
const cover = assets[coverId];
---

<article>
  <h1>{item.fieldData.title}</h1>
  {cover && <img src={cover.url} alt={cover.alt ?? item.fieldData.title} />}

  {item.toc?.length > 0 && (
    <nav aria-label="目次">
      <ul>
        {item.toc.map((h) => (
          <li data-level={h.level}>
            <a href={`#${h.id}`}>{h.label}</a>
          </li>
        ))}
      </ul>
    </nav>
  )}

  <div class="prose" set:html={item.contentHtml} />
</article>

---

4. お問い合わせフォームの接続と更新の自動化

1. お問い合わせフォーム: お問い合わせページにフォームを配置する際は、まずブラウザからGET ${PUBLIC_KANORIO_SITE_URL}/api/v1/forms/{formId}/challengeを呼び出し、送信時に/api/v1/forms/{formId}/submitへPOSTします（詳細は「」を参照してください）。ダッシュボードの「」にある「許可されたオリジン」リストに、本番環境のドメインを追加することを忘れないでください。
2. コンテンツ公開時の自動更新:
   • SSRモード (@astrojs/cloudflare または @astrojs/node): x-kanorio-public-versionおよびX-Kanorio-Cache-Tagsヘッダーをパススルーするか、比較することができます。
   • SSG静的ビルドモード: VercelまたはCloudflare PagesでデプロイフックURLを作成し、Kanorioダッシュボードの「」に追加します。collections.item.published、collections.item.unpublished、collections.item.deleted、collections.items.bulkChangedを購読することで、コンテンツが公開または更新されるたびに自動的な再デプロイをトリガーできます。

関連ドキュメント