独自のフロントエンドを構築する際、すべての公開コンテンツは、サイトのURL https://{your-site}/api/v1/*（またはシステム標準のURL https://s-xxx.kanorio.com/api/v1/*）からキーなしで直接取得できます。
エンドポイントとパラメータの完全仕様（SSOT）: すべてのクエリパラメータ、フィールド型、フィルタ演算子、JSONレスポンスの例は、Content Delivery APIリファレンスページのOpenAPI仕様からリアルタイムで生成されます。本ガイドでは、フロントエンド統合のためのアーキテクチャ上の判断と一般的なパターンに焦点を当てます。
expand）を使用したカスタムコレクションのクエリ、およびぼかしプレースホルダー（placeholder）付きのassets画像の解析。formats）、構造化セグメント（segments）、自動生成された目次（toc）を備えたブログ記事の読み込み。/api/v1/search）。npx @kanorio/cli types）。外部フロントエンドでKanorioダッシュボードで設定したナビゲーションメニュー、フッターリンク、ページSEO設定を使用する必要がある場合は、共有レイアウト内でこれらを取得できます：
GET /api/v1/site): サイト名、デフォルト言語、タイムゾーン、通貨、現在の公開コンテンツバージョン publicVersion を取得します。GET /api/v1/globals/headers/primary, GET /api/v1/globals/footer): ナビゲーションツリー、CTAボタン、ソーシャルリンク、ロゴ（トップレベルの assets メディアマップ付き）を取得します。GET /api/v1/pages, GET /api/v1/pages/{slug}): ページの階層、パンくずリスト、SEOフィールド（title、description、ogImage、canonicalUrl、noindex）、ページモジュールデータを取得します。ホームページを取得するには /api/v1/pages/home を呼び出します。GET /api/v1/redirects): ダッシュボードで設定したリダイレクトに加え、ページ名変更時に自動生成される301リダイレクトリストを取得します。これらをNext.jsのミドルウェアやエッジルートに追加することで、SEOを維持できます。/api/v1/collections/{key}/items)コレクションで作成したカスタムコレクション（例：teachers、courses）であれ、システム同期されたブログコレクション（blog、blog_categories、blog_tags、blog_authors）であれ、クエリ構文は共通です：
const res = await fetch( "https://s-k4m9x2p7q8w3.kanorio.com/api/v1/collections/courses/items?filter[level]=beginner&sort=-publishedAt&expand=teacher&limit=20" ); const { items, nextCursor, assets } = await res.json();
expand を使用して参照を解決する:
コレクションに reference や multi_reference フィールド（例：コースの teacher、ブログの authors,categories,tags）がある場合、?expand=teacher を追加すると、各アイテムに item.expanded.teacher（完全な fieldData を含む）が添付されます。展開されたアイテムの画像もトップレベルの assets マップに含まれるため、二度目のリクエストは不要です。has_slug / eq_slug を使用する:
カテゴリページ（例：/blog/category/recipes）を構築する際、事前にカテゴリIDを取得する必要はありません。?filter[categories][has_slug]=recipes と記述するだけで（単一選択の参照には eq_slug を使用）、サーバー側で単一のクエリでマッチングが行われます。assets[id].placeholder を画像コンポーネントに渡す:
トップレベルの assets マップには、すべてのビットマップ画像に対する url、width、height、alt、および placeholder（16px WebP Base64データURL）が含まれています。Next.jsの <Image placeholder="blur" blurDataURL={asset.placeholder} /> で直接使用することで、追加のリクエストなしでスムーズなプログレッシブローディングを実現できます。fields を使用してペイロードサイズを削減する:
コンテンツ全体が不要なリストページでは、?fields=title,excerpt,cover_image,published_at を追加して、サーバーから指定したフィールドのみを返させるようにします。/api/v1/collections/blog/items へのクエリや、/api/v1/collections/blog/items/{slug} を介した単一アイテムの取得時に、?formats= を使用してコンテンツ形式を制御できます：
formatsなし）: fieldData.content はクリーンなMarkdownを返し、アイテムのトップレベルには構造化された segments 配列と toc 配列（H2/H3の id、text、level）が提供されます。?formats=html,plaintext（または markdown,html,plaintext）を追加すると、fieldData に contentHtml と contentPlaintext が含まれます。segments 配列は記事を { type: "markdown", markdown } オブジェクトと { type: "cta", presetId, title, description, buttonText, buttonUrl } オブジェクトに分割します。これにより、独自のReact/Astroコンポーネントを使用してプロモーションカードをレンダリングできます。/api/v1/search)フロントエンドにサイト全体を対象とした検索ボックスを追加するには、ブラウザまたはサーバーから直接以下を呼び出します：
const res = await fetch( `https://s-k4m9x2p7q8w3.kanorio.com/api/v1/search?q=${encodeURIComponent(keyword)}&kind=post,page,product&limit=10` ); const { results } = await res.json();
kind は page、post、product、または category（カンマ区切り）でフィルタリングします。title、snippet、url、タイプが含まれており、リアルタイムのドロップダウン検索メニューやCommand-K検索パネルに最適です。kanorio types)コレクションフィールドのTypeScript interface 定義を手動で記述する必要はありません。プロジェクトのルートで以下を実行してください：
npx @kanorio/cli types --site https://s-k4m9x2p7q8w3.kanorio.com --out src/kanorio.d.ts
CLIは公開されている /api/v1/collections の自己記述構造（segments、toc、counts などの仮想フィールドを含む）を読み取り、完全な FieldData、Expanded、Item 型に加え、/pages、/globals、/site の定義を生成します。また、collections.schema.changed Webhook を購読することで、フィールド変更時に型を自動的に更新することも可能です。
OpenAPIによって生成された Content Delivery APIリファレンスページ を参照してください。各エンドポイントには、完全なパラメータテーブルとワンクリックで実行可能な curl コマンドが含まれています。