コレクション

Webサイトに、講師とコース、デザイン事務所のポートフォリオ、チェーン店の店舗情報、FAQなど、同じ形式の構造化されたコンテンツが多数ある場合、それらを個別のページ内のテキストボックスに詰め込むと、管理が非常に困難になります。

コレクションは、Webサイト内に組み込まれたスプレッドシートや軽量なデータベースのように機能します。まず、データ用のフィールド（名前、アバター、専門分野、経験年数など）を定義し、次にアイテムを一つずつ入力します。管理と取得は、以下の2つの明確なトラックに分かれています。

• 構造の作成と日常管理（書き込み）: ChatGPT、Claude、CursorなどのAIアシスタントが、MCPを通じてコレクションの構造を構築し、データを一括入力します（エンジニアの場合はREST APIを使用）。また、"データ＆コンテンツ › テーブル"ワークスペースで、セルをダブルクリックしたり、フィルタリングしたり、CSVを直接インポート/エクスポートしたりすることも可能です。
• 公開データの取得（コンテンツ配信API）: 公開されたレコードは、Webサイト専用のエンドポイント（https://{your-site}/api/v1/collections/{key}/items）で自動的に公開されます。カスタムフロントエンド、アプリ、外部ページから、グローバルエッジキャッシュを利用してキーなしでデータを取得できます（技術仕様はを参照）。

このガイドでできること

• AIに依頼して、一文でコレクションを作成し、サンプルデータを入力する
• 「データ＆コンテンツ › テーブル」ワークスペースで、フィルタリング、並べ替え、セルのダブルクリック編集、右側のレコードパネルの表示を行う
• 17種類のフィールドタイプ、JSON形式、ブログシステムコレクションの自動同期メカニズムを理解する
• CSVまたはJSONを使用してデータを一括インポートおよびエクスポートする
• プランごとのレコード上限、アドオンルール、コレクションに適さないコンテンツの種類を学ぶ

ステップ1：AIにコレクションを作成させる

コレクションのフィールド構造（どのフィールドが存在するか、その型、必須かどうか）は、MCPを通じてAIによってのみ作成および変更されます。ダッシュボードには、スキーマを変更するための手動フォームビルダーUIはありません。これは、「何を保存したいか」をAIに平易な言葉で伝える方が、フィールドタイプを一つずつ設定するよりもはるかに速く、AIが自動的に正しい型を選択し、形式の検証を追加するためです。

1. の手順に従い、ChatGPT、Claude、Cursor、またはClaude CodeをKanorioに接続します。

   • 権限に関する注意: コレクションの作成や変更には「コレクションの管理」権限が必要です。を作成する際は、「フル管理」を選択するか（または「カスタム」をクリックして「コンテンツ › コレクションの管理」にチェックを入れる）、ChatGPT/Claude経由で承認する際に権限昇格のプロンプトが表示されたら「許可」をクリックしてください。

2. 以下のプロンプトのいずれかをコピーしてチャットに貼り付けます（ビジネスニーズに合わせて調整してください）。

   例1：講師コレクションを作成する

   私のWebサイト用に「instructors」（キー：teachers）コレクションを作成してください。フィールドは以下の通りです：名前、肩書き、科目（単一選択：数学 / 英語 / 物理）、経験年数（整数）、経歴（長文テキスト）、連絡先メールアドレス、新規生徒の受け入れ（ブール値）。3人の講師のサンプルデータを作成し、公開してください。
   

   例2：コースコレクションを作成し、講師とリンクさせる

   私のWebサイト用に「courses」（キー：courses）コレクションを作成してください。フィールドは以下の通りです：コース名、講師（teachersコレクションへの参照）、レベル（単一選択：初級 / 中級 / 上級）、授業料（数値）、開始日（日付）、タグ（複数選択：オンライン / 週末 / 少人数）、登録リンク（URL）。3つのコースを作成し、先ほど作成した講師とリンクさせてください。
   

3. "データ＆コンテンツ › テーブル"ワークスペースに戻り、新しく作成されたコレクションとレコードを確認します。サイトにまだコレクションがない場合、概要画面の中央にコピー可能な3つのプロンプト（「講師」、「ポートフォリオ」、「店舗」）が表示されます。

コレクションワークスペースの探索

"データ＆コンテンツ › テーブル"をクリックします。インターフェースは、3つのセクションに分かれたプロフェッショナルなデータベースワークスペースレイアウトを採用しています。

1. 左側：コレクションサイドバー

• 「カスタム」（ユーザーやAIが作成したコレクション）と「システム」（ブログ記事、カテゴリ、タグ、著者）に分かれており、各コレクションの名前と現在のレコード数が表示されます。
• 左下には、すべてのカスタムサイトコレクションのレコード使用量プログレスバーと「プラン管理」アドオンボタンが表示されます。

2. 中央：ツールバーと3つのタブ

コレクションを選択すると、上部のツールバーで3つのタブを切り替えられます。フィルタ、並べ替え、ページネーション、開いているレコードはすべてURLに保持されます。URLをコピーして、チームメンバーと正確なビューを共有できます。

• 「データ」タブ:
  • 上部のヘッダー行にはフィールド名と型（例：text、number、ref → teachers）が表示されます。最初の列はタイトルフィールドとして固定されており、水平スクロール中もロックされたままです。右端のグレーのブロックにはシステムフィールド（status、slug、published_at、updated_at、id）が含まれています。
  • 参照の自動表示: 他のコレクションを指す「参照」フィールドは、ターゲットレコードのタイトルを自動的に表示します（ID文字列ではなく「Lin Ya-Ting」のように表示）。null値はNULL、空の文字列はEMPTYと表示されます。
  • フィルタと並べ替え: ツールバーの「フィルタ」をクリックして、最大10個のAND条件を組み合わせることができます（フィールドタイプに基づいて、等しい、含む、以上、値があるなどの演算子を提供）。「並べ替え」または列ヘッダーを直接クリックして、最大3つのフィールドで並べ替えます。「列」をクリックして一時的な列を非表示にし、ヘッダーの端をドラッグして列幅を調整します。
  • キーボード操作: セルをクリックして矢印キーで移動し、Enterを押して右側のレコードパネルを開き、⌘C（WindowsではCtrl+C）を押してセル内容をコピーします。
• 「構造」タブ:
  • すべてのフィールド名、英語識別子（id）、型、必須ステータス、一意性、制約、AIガイダンスヒント（aiHint）を一覧表示します。
  • フィールドの追加/削除やオプションの調整を行うには、ツールバー右上の「AIで構造を変更」をクリックし、サイトIDとコレクション識別子を含む専用プロンプトをコピーしてAIに送信します。近くのコピーボタンでスキーマJSON全体をコピーできます。
• 「API」タブ:
  • このコレクションの3つのコンテンツ配信API読み取りエンドポイントを直接表示します。エンジニアやフロントエンドプロジェクト向けに、コレクションのフィールド名が事前入力されたfetchおよびcurlコードスニペットも用意されています。

3. 右側：ドッキングされたレコードパネル

テーブルの左端の行番号にカーソルを合わせ、展開矢印をクリックする（または行をダブルクリックする）と、右側に完全なレコードパネルがドッキングされます。

• 前後のレコードを上下に移動して、すべてのフィールド（テーブル内で1行プレビューを表示する長いMarkdownテキスト、画像ピッカー、複数参照、JSONを含む）を表示または編集します。
• レコードに「未公開の変更」がある場合、パネル上部のトグルで「ドラフト（現在）」と「公開バージョン」を即座に切り替えられます。
• フッターにはid、slug、公開時間、作成/更新タイムスタンプが表示され、カーソルを合わせると個別にコピーできます。

編集、ドラフト、公開（ステージングされた一括書き込み）

各レコードは、ドラフト（ワークスペースで表示可能）と公開（パブリックAPIで提供）の2つのバージョンを保持しており、ステータスドットで示されます。

• 緑色の実線ドット（公開済み）: ドラフトが公開バージョンと一致しています。
• 灰色の空洞ドット（ドラフト）: 未公開。パブリックAPIからはアクセスできません。
• 琥珀色の実線ドット（未公開の変更）: 以前に公開されましたが、その後ドラフトが変更されました。パブリックAPIは、最後に安定して公開されたバージョンを提供し続けます。

ワークスペースでのデータの変更と追加

1. セルの直接ダブルクリック編集: テキスト、メール、電話、URL、動画URL、数値、ブール値、単一選択、日付の9つのフィールドタイプは、テーブル内のセルをダブルクリックすることでその場で編集できます（Enterで確定、Escでキャンセル）。画像、ギャラリー、ファイル、長文テキスト、複数選択、参照などの複合フィールドは、右側のレコードパネルで編集します。
2. 追加と削除: ツールバー右上の「追加」をクリックすると、テーブルの下部に明るい緑色の行が追加され、右側のパネルが自動的に開きます。レコードパネル右上のゴミ箱アイコンをクリックすると、その行が削除対象としてマークされます。
3. 変更の確認と一括コミット:
   • 変更されたセルには琥珀色の背景と左上のドットが付きます。編集してもオンラインデータにはすぐには反映されません。
   • 画面下部に琥珀色の変更バー（「N個の変更」）が表示され、以下のオプションを選択できます：
     • 「ドラフトとして保存」: パブリックAPIに影響を与えず、ワークスペースのドラフトにのみ書き込みます。
     • 「保存して公開（⌘S）」: 変更を書き込み、パブリックAPIを即座に更新し、エッジキャッシュをクリアします。
     • 「破棄」: 保存されていないすべての編集をワンクリックで元に戻します。
   • フィールドの検証に失敗した場合（必須フィールドが空、または無効なメール形式など）、セルが赤くなり、レコードパネルで理由が説明されます。

AI書き込みのデフォルト動作: AIがMCPまたはREST APIを通じてデータを作成または変更する場合、デフォルトでpublish: trueが設定されます（即座に公開されます）。レビュー用にドラフトとして保存させたい場合は、プロンプトで「ドラフトとして保存」と指示してください。

17種類のフィールドタイプとJSON形式のクイックリファレンス

コレクションでサポートされているすべてのフィールドタイプを以下に示します。AI生成の構造と、JSON/CSVインポートの両方がこの表に従う必要があります：

タイトルフィールド（titleFieldId）: すべてのコレクションは、text、email、またはurlフィールドをタイトルフィールドとして指定します。これはテーブルの最初の列に表示され、他のコレクションから参照される際の表示名として機能し、提供されない場合は自動的にURLスラッグを生成します。

ブログシステムコレクション（自動同期）

Webサイトでを使用している場合、左サイドバーの「システム」グループの下に4つのロックされたシステムコレクションが自動的に表示されます：

• blog（ブログ記事）
• blog_categories（ブログカテゴリ）
• blog_tags（ブログタグ）
• blog_authors（ブログ著者）

運用ルール:

• ブログエディタからの即時同期: バックエンドの「コンテンツ › ブログ」セクションで記事を作成、編集、公開したり、カテゴリ/タグを調整したりすると、システムは同じリクエスト内でこれらの4つのシステムコレクションに変更を自動的に反映します。
• ワークスペースとitems.*は読み取り専用: 記事エディタ、SEO、バージョン履歴全体で一貫性を保つため、システムコレクションはコレクションワークスペース（およびエージェントのitems.*ツール）では読み取り専用です。記事を変更するには、ブログページを使用してください（またはposts_*ツールを使用してAIに依頼してください）。
• カスタムフィールドと共有APIアクセス: collections.updateを使用して、blogにカスタムフィールドを追加するようAIに依頼できます（組み込みの予約フィールドは削除や変更ができません）。外部フロントエンドは、まったく同じエンドポイントを使用して公開された記事をクエリできます：/api/v1/collections/blog/items?expand=authors,categories,tags。
• クォータ消費ゼロ: これらの4つのシステムコレクションは、コレクションのレコード上限にはカウントされません。

CSVおよびJSONのインポート/エクスポート

ワークスペースツールバー右上の「その他（⋯）」ボタンをクリックして、「CSVをエクスポート」、「JSONをエクスポート」、または「インポート」を選択します：

1. まずテンプレートとしてエクスポート: エクスポートされたファイルには、すべてのフィールドの現在のドラフト値に加え、4つのシステム列（id、slug、status、publishedAt）が含まれます。CSV内の複数選択、複数参照、JSONフィールドはJSON文字列として表現されます。
2. ファイル全体の検証、オール・オア・ナッシング: 変更されたCSVまたはJSONファイルをアップロードする場合、システムはまずファイル全体で行形式を検証します。いずれかの行にエラーが含まれている場合、画面は問題の原因となっている「行番号とフィールド名」を明示的に強調表示し、不正なデータを防ぐためにバッチ全体が拒否されます。
3. 挿入または更新: 既存のレコードと一致するidを含む行は更新され、idがない行は挿入されます。「インポート後にすぐに公開」にチェックを入れると、インポート時にレコードがライブ公開されます。

コードによるデータの読み取り（コンテンツ配信APIとCORS）

あなたやエンジニア（またはCursor / Claude Code）がカスタムフロントエンドWebサイト（Next.js、Astro、Vue、React Nativeなど）を構築してコレクションデータを読み取る場合：

1. 読み取りエンドポイントとコードのコピー: コレクションワークスペースの「API」タブに切り替えて、エンドポイントURLと、事前設定されたfetchおよびcurlスニペットを即座にコピーします。
2. クロスオリジンリソース共有（CORS）の登録:
   • フロントエンドが独自のドメイン（例：https://app.example.comやhttps://preview.vercel.app）で実行され、ブラウザから直接APIを呼び出す場合は、ダッシュボードの"Webサイト設定 › 開発者"に移動し、「許可されたオリジン」にURLを入力します（パスやワイルドカードを含まない、https://で始まるドメインに制限され、1サイトあたり最大20個まで）。
   • サイト自身のドメイン、サーバーサイド（SSR / Route Handler）呼び出し、およびローカル開発（任意のポートでのhttp://localhost / 127.0.0.1）は登録不要で直接読み取ることができます。
3. 完全なクエリ構文: filter[field][op]=value、sort=-field、fields=field1,field2、expand=reference_field、カーソルページネーション、および?preview=1ドラフトプレビューをサポートしています。完全な仕様についてはを参照してください。

レコードクォータとアドオンルール

コレクションは、「サイト全体で結合されたすべてのカスタムコレクションの合計レコード数（ドラフトを含む）」のみをカウントします。コレクション数、フィールド数、API読み取りリクエスト数は完全に無料です：

• 容量の追加方法: サイト所有者および管理者（「サブスクリプションプランの管理」権限を持つ）は、ワークスペースの左下隅にある「プラン管理」をクリックして、いつでも月額アドオンティアを調整できます。アップグレードは現在の請求サイクルで即座に有効になり、ダウングレードは次のサイクルで有効になります（結果として得られる容量は、現在のレコード数を収容できる必要があります）。請求および日割り計算ルールはストレージと完全に一致します。を参照してください。
• 自動課金アドオンなし: レコード数はユーザーやAIによって能動的に書き込まれるため、上限に達すると新しい書き込みがブロックされ、アップグレードまたはアドオンの購入を促されます。システムがバックグラウンドでカードに自動的に課金することはなく、既存のデータが削除されることもありません。

コレクションに適さないコンテンツとは？

コレクションは、「頻繁に読み取られ、めったに書き込まれず、サイト所有者やチームによって管理される」構造化コンテンツを対象とした「ヘッドレスCMS」として設計されています。以下のユースケースでは、専用機能や外部サービスを使用してください：

• チェックアウト、在庫引き落とし、財務照合が必要な製品: ダッシュボードの"ストア › 製品"を使用してください（製品の在庫と価格設定には、厳格なチェックアウトトランザクションロックと注文スナップショットが必要であり、汎用コンテンツテーブルでは代替できません）。
• 訪問者が記入するお問い合わせフォームや登録フォーム: "マーケティング › オンラインフォーム"を使用してください（スパム対策、通知メール、添付ファイル処理が組み込まれています）。
• 高頻度のアプリケーションデータ書き込み（メンバーログイン状態、リアルタイムチャットルーム、訪問者のコメント、チェックインログなど）：SupabaseやFirebaseなどのアプリケーションデータベースを統合してください。

関連ドキュメント