データと CMS

データパネルでは、サイトのコンテンツとデータを管理します。左サイドバーのデータアイコンで開きます。タブは2つあります。

• コンテンツ：サイトのコード内に保存されるコレクションです。どのサイトでも、設定なしで使えます。メニュー、チームメンバー、よくある質問、ブログ記事など、自分で編集するコンテンツに使います。
• データソース：接続したデータベースやスプレッドシートのテーブルです。登録情報、注文、予約、ユーザーアカウントなど、訪問者が送信する情報を保存する場合に使います。接続すると、タブにはソースの名前が表示されます。

ヒント

コンテンツがページに直接書き込まれている場合は、AI にコレクションへの移動を頼んでください。「メニューをコレクションに移して、自分で編集できるようにして」のように伝えます。

コンテンツのコレクション

各コレクションは、サイトの src/data フォルダーにあるファイルです。変更はすぐにプレビューに反映され、公開すると公開中のサイトにも反映されます。

コレクションの作成

パネル上部の + をクリックし、名前を入力して作成をクリックします。ウィンドウには、/src/data/blog.ts のように、作成されるファイルが表示されます。

新しいコレクションは空の状態から始まります。フィールドを追加をクリックして、保存する内容を決めます（フィールドと列を参照）。

名前の変更、複製、削除

コレクションにカーソルを合わせて ⋯ をクリックするか、右クリックし、名前を変更、複製、削除のいずれかを選びます。名前をダブルクリックして変更することもできます。名前を変更すると、そのコレクションを使用するサイト内のすべてのファイルが更新されます。削除は元に戻せません。

コレクションが5個を超えると、一覧の上にコレクションを絞り込むボックスが表示されます。

データソースの接続

サイトで一度に使えるデータソースは1つです。データソースタブをクリックして選びます。

ソース	適した用途
WebTwizz Cloud（推奨）	ログインとファイルストレージを備えたデータベースを追加できます。アカウントは不要です
Supabase	自分の Supabase アカウントでデータベース、ログイン、ファイルストレージを利用
Postgres	Railway、RDS、または運用中の Postgres
MySQL	Railway、RDS、または運用中の MySQL データベース
MongoDB	Atlas クラスター、または稼働中の MongoDB
Google Sheets	メニュー、価格表、スケジュールなど、シートで管理している表

各ソースの接続情報は、設定 > シークレットの接続済みサービスからにシークレットとして保存されます。

Supabase と Google Sheets はコネクタでもあります。接続すると、ほかのプロジェクトでも使えるようにアカウントが保存されます。設定 > コネクタには、プロジェクトのテーブル、ログイン設定、スプレッドシートのタブなどが表示されます。Supabase と Google Sheets を参照してください。

WebTwizz Cloud

WebTwizz Cloud を選び、データベースを追加をクリックします。別のサイトとデータを共有するには、そのサイトが使っているデータベースを一覧から選びます。上限、共有、切り替えについては、WebTwizz Cloud を参照してください。

通常、この操作は必要ありません。サイトで必要になると、AI が WebTwizz Cloud を追加します。

Supabase

1. Supabase を選び、Supabase で接続をクリックします。
2. Supabase にログインし、アクセスを許可します。同じウィンドウに戻ります。
3. 一覧からプロジェクトを選ぶか、+ 新しいプロジェクトを作成を選びます。
4. 接続をクリックします。

• Supabase アカウントがすでに連携されている場合は、そのままプロジェクト一覧に進みます。
• + 新しいプロジェクトを作成では、Supabase の最初の組織に新しいプロジェクトを作成し、接続します。Supabase で接続からのログインが必要です。約2分かかるため、ウィンドウを開いたままにしてください。
• 一時停止中のプロジェクトには接続できません。先に Supabase ダッシュボードで再開してください。
• トークンを使う場合は、代わりにアクセストークンを貼り付けるをクリックします。supabase.com/dashboard/account/tokens でトークンを生成し、貼り付けて次へをクリックします。
• プロジェクト一覧の下にある Supabase アカウントの接続を解除を使うと、Supabase アカウントと WebTwizz の連携が解除され、別のアカウントでログインできます。

Supabase は NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY、SUPABASE_SERVICE_ROLE_KEY、SUPABASE_ACCESS_TOKEN を追加します。

Postgres と MySQL

1. Postgres または MySQL を選びます。
2. 接続文字列を貼り付けます。Postgres は postgres:// または postgresql://、MySQL は mysql:// で始まります。
3. 入力中に WebTwizz が接続を試し、成功すると接続済みを表示します。失敗した場合は理由を表示します。
4. 接続をクリックします。

接続文字列がない場合は、接続文字列がありませんか？ホスト、ユーザー、パスワードを個別に入力をクリックし、ホスト、データベース、ポート、ユーザー、パスワードを入力します。

• Postgres：プロバイダーがプール接続文字列を提供している場合は、それを使ってください。
• MySQL：テーブルの作成と変更ができるユーザーを使ってください。WebTwizz には MySQL 8.0.13 以降が必要です。

接続情報は DATABASE_URL として保存されます。

MongoDB

MongoDB を選び、接続文字列（mongodb:// または mongodb+srv://）を貼り付けます。Postgres と同様、入力中に WebTwizz が接続を試します。接続済みと表示されたら、接続をクリックします。Atlas では、データベース > 接続 > ドライバーに接続文字列があります。

接続文字列には、mongodb+srv://user:pass@cluster.mongodb.net/mydb のようにデータベース名を含める必要があります。MONGODB_URI として保存されます。

Google Sheets

1. Google Sheets を選び、Google で続けるをクリックします。
2. ログインし、アクセスを許可します。
3. スプレッドシートを1つ選びます。

選んだスプレッドシートだけが WebTwizz と共有され、非公開のまま維持されます。各タブがテーブルとして表示され、タブの1行目が列名になります。

チャットからの接続

データを保存する機能を AI に頼むと、WebTwizz Cloud を追加して作成を続けます。サイトですでに別のソースを使っている場合や、プランのデータベース数の上限に達している場合は、代わりにデータソースを接続カードを表示します。カードをクリックすると、チャット内で同じウィンドウが開き、最初に WebTwizz Cloud が表示されます。別のソースを選ぶには、すべてのソースをクリックします。後で接続する場合は、まずサンプルデータで作成（または今はしない）をクリックします。

変更と接続解除

データソースのタブにある ⋯ をクリックするか、タブを右クリックします。メニューには接続中のソースと、データソースを変更、Supabase ダッシュボードを開く（Supabase のみ）、接続を解除が表示されます。

• 別のソースに接続すると、現在のソースが置き換わります。データは元の場所に残りますが、サイトでは使われなくなります。サイトにユーザーがいる場合は、再登録が必要な人数がウィンドウに表示されます。
• 切り替え後、データパネルにこれを使うようにサイトを更新が表示されます。これを使うと、新しいソースを使うようにページを移行するよう AI に依頼できます。
• 接続を解除を選ぶと、確認が表示されます。サイトはそのソースを通じた読み書きを停止します。プロバイダー側のデータは削除されません。
• 再接続ボタンはありません。パスワードの変更などでソースが使えなくなった場合は、接続を解除してから接続し直してください。

テーブル、コレクション、タブ

ソースを接続すると、左側の一覧にテーブルが表示されます。MongoDB ではコレクション、Google Sheets ではタブと呼ばれ、パネルでも同じ呼び方を使います。

• + をクリックして作成します。作成前に、ウィンドウに最終的な名前が表示されます。
• 項目にカーソルを合わせて ⋯ をクリックするか、右クリックすると、名前を変更、複製、削除を選べます。削除すると、ソースからテーブルとその全データが削除されます。元には戻せません。
• Supabase、Postgres、MySQL の名前は小文字とアンダースコアに変換されます。たとえば「Blog posts」は blog_posts になります。MongoDB と Google Sheets では、入力した名前がそのまま使われます。

Supabase または WebTwizz Cloud では、一覧にユーザーも表示されます。サイトのログイン機能から登録した全員が対象です。Supabase では、この画面からは閲覧のみ可能です。WebTwizz Cloud では、パスワードリセットの送信、ユーザーのブロック、削除、一覧のエクスポートもできます。

WebTwizz Cloud では、一覧にファイルも表示されます。サイトでアップロードされたファイルを保存するバケットとフォルダーです。ファイルのアップロード、プレビュー、移動、名前の変更、削除、リンクのコピーができ、バケットやフォルダーも作成できます。ファイルを参照してください。

データへのクエリ

WebTwizz Cloud、Supabase、Postgres、MySQL、MongoDB では、グリッドの上にあるクエリをクリックします。下からパネルが開き、表示中のテーブルに対するクエリが入力された状態になります。

• データについて質問する：「今月 Splash を選んだ保護者」のように質問を入力し、質問をクリックします。AI がクエリを作成して実行し、回答を表示します。クエリは回答の上に表示されます。
• クエリを書く： SQL を入力し、実行をクリックするか、Cmd+Enter を押します。MongoDB では、{"collection": "orders", "filter": {"status": "paid"}} のように JSON で記述します。集計には "pipeline" を使います。
• 10秒以内に最大500件の結果を表示。 下部でページを切り替えるか、エクスポートをクリックして CSV または JSON としてダウンロードできます。自分で書いたクエリのうち、データの読み取りや追加を行うものはすぐに実行されます。行の削除や変更、テーブルの削除、列名の変更を行うものは、実行前に確認が表示されます。質問を使った場合は、AI のクエリで行を追加する前にも確認が表示されます。WebTwizz Cloud では、変更に問題があった場合にデータを復元で元に戻せます。ほかのソースでは元に戻せません。
• 表示領域を調整する： パネル上部のバーをドラッグして高さを変えるか、ダブルクリックして画面いっぱいに広げます。クエリの下の線をドラッグすると、表示行数を増やせます。Esc を押すか、パネルを一番下までドラッグすると閉じます。

グリッドでの操作

どちらのタブも同じグリッドを使います。

• 検索ボックスに入力して行を絞り込みます。
• 列見出しをクリックすると昇順、もう一度クリックすると降順になり、3回目で並べ替えが解除されます。
• 下部のコントロールで、ページや1ページあたりの行数を変更します。
• 行をクリックして編集します。行末の ⋯ をクリックするか、右クリックすると、編集、複製、削除を選べます。
• 新しい項目、または最終行の下の + をクリックして追加します。

データソースのグリッドには更新ボタンもあります。AI がデータを変更すると、グリッドは自動で更新されます。

フィールドと列

コンテンツのフィールド

フィールドを追加をクリックし、フィールド名を入力して種類を選びます。必要に応じて必須にチェックを入れ、デフォルト値を設定し、フィールドを作成をクリックします。

フィールドの種類：テキスト、複数行テキスト、数値、日付、日時、真偽値、色、リンク、メール、電話、画像、音声、動画。

列見出しを右クリックすると、フィールドの編集、複製、削除ができます。フィールドを削除すると、すべての項目からその値が削除されます。

データソースの列

列を追加をクリックし、列名を入力して種類を選びます。必要に応じてデフォルト値を設定し、列を作成をクリックします。

• Supabase、Postgres、MySQL：種類はテキスト、小整数、整数、大整数、数値（小数）、浮動小数点数、日付、時刻、タイムスタンプ、真偽値、UUID、JSON です。値を必須にするには、必須（NOT NULL）にチェックを入れます。名前には小文字、数字、アンダースコアを使い、先頭は英字にします。日付とタイムスタンプの列は、デフォルトとして現在の日付を使うまたは現在の時刻を使うを設定できます。
• Google Sheets：列はタブの1行目にある見出しセルです。種類はテキスト、数値、日付、日時、チェックボックスで、名前にはスペースや大文字を使えます。
• MongoDB：列を追加はありません。ドキュメントごとに異なるフィールドを持つことができ、ドキュメントに追加したフィールドが列として表示されます。

列見出しを右クリックすると、編集（名前の変更）、複製、削除ができます。id 列は変更できません。

行の編集

行、または新しい項目をクリックすると、アイテムを編集または新しい項目パネルが横から開き、各列の入力欄が表示されます。必須フィールドには * が付きます。

• 保存をクリックするか、Enter を押して保存します。保存せずに閉じるには、Escape を押すか、キャンセルをクリックします。
• データソースのテキストフィールドでは、Shift+Enter で改行できます。
• コンテンツのコレクションの画像フィールドでは、エディターのほかの場所と同じ画像選択画面が開きます。
• 行を削除するには、パネル下部の削除をクリックし、確認します。
• データベースが変更を受け付けない場合は、パネルにわかりやすい言葉で理由が表示されます。
• MongoDB：パネル上部のフィールドと生の JSONの2つのアイコンで切り替えると、ドキュメント全体を JSON として編集できます。空のコレクションでは、JSON で書くをクリックして最初のドキュメントを追加します。

データソースで保存した行は、データベースに直接書き込まれます。

複数行の選択と操作

行の横にあるチェックボックスで選択します。見出しのチェックボックスを使うと、そのページの全行を選択できます。ページ全体を選択した状態で、条件に合う行がほかにもある場合は、すべて選択（該当する行数が表示されます）をクリックすると、全ページから選択できます。選択を解除するには、クリアをクリックします。

選択バーには複製と削除ボタンがあります。

• 操作の対象は検索条件に合う行だけです。「latte」で検索してすべて選択し、削除すると、「latte」に一致する行だけが削除されます。確認画面にもその旨が表示されます。
• 検索内容を変えると、選択が解除されます。
• 削除時には必ず確認が表示されます。データソースでは、全行を複製する場合にも確認が表示されます。
• 一部のデータベーステーブルは複製できません。たとえば、ユーザーアカウントのように、id が別のテーブルの行と一致する必要があるテーブルです。この場合、複製は無効になり、カーソルを合わせると理由が表示されます。

エクスポート

グリッドの上にあるエクスポートをクリックし、CSV としてエクスポートまたはJSON としてエクスポートを選ぶと、コレクションやテーブルの全データを最大50,000行までダウンロードできます。すべてのデータソースで使えます。

AI によるデータ操作

データソースを接続すると、AI はそれを使ってサイトを作成し、データの変更も行えます。「名前、メール、日付の列がある予約テーブルを追加して」「この20商品を商品テーブルに追加して」のように、自分の言葉で頼んでください。

変更するたびに、チャットにテーブルを作成しましたやデータを追加しましたなどのカードが表示され、グリッドが更新されます。行やテーブルの削除など、データを完全に削除する操作の前には、AI が停止して確認します。続行するには受け入れる、キャンセルするには拒否をクリックします。

ソースごとの違い

	Supabase	Postgres と MySQL	MongoDB	Google Sheets
一覧での呼び方	テーブル	テーブル	コレクション	タブ
名前	小文字とアンダースコア	小文字とアンダースコア	入力どおり	入力どおり
列の追加	可	可	不可。フィールドはドキュメントから取得	可。見出しセルとして追加
その他の機能	ユーザー、Supabase ダッシュボードを開く		生の JSON の編集
保存先	4つの SUPABASE シークレット	DATABASE_URL	MONGODB_URI	GOOGLE_SHEETS_REFRESH_TOKEN