プレビュー機能の使い方
プレビュー機能は、ビルドが完了したアプリケーションを実際に動作確認できる機能です。「プロンプト」タブで設計・ビルドを行った後、「プレビュー」タブに切り替えることで、生成されたアプリを確認できます。画面構成
プレビュー画面は、以下の要素で構成されています。| エリア | 説明 |
|---|---|
| 上部ツールバー | デスクトップ/モバイル切替、データベースアイコン、全画面表示などの操作ボタン |
| ナビゲーションバー | 戻る/進むボタン、再読み込みボタンなど、ブラウザライクな操作が可能 |
| プレビューエリア | ビルドされたアプリケーションが表示される領域。実際にアプリを操作できます |
プレビューの使い方
プレビュータブを開く
画面右上の「プレビュー」ボタンをクリックすると、プレビュータブが開きます。
ビルドが完了していない場合、プレビューは表示されません。「プロンプト」タブに戻り、ビルドが完了しているか確認してください。
ツールバーの機能
プレビュー画面上部のツールバーには、以下の機能があります。| アイコン/ボタン | 説明 |
|---|---|
| デスクトップアイコン | アプリプレビュー画面を表示します（デフォルト） |
| モバイルアイコン | スマートフォンサイズでプレビューを表示します |
| データベースアイコン | データベース管理画面（Supabase Studio）を開きます |
| 全画面アイコン | プレビューを全画面表示に切り替えます |
| 閉じるボタン（×） | プレビュータブを閉じます |
| 戻る/進むボタン | アプリ内でのページ遷移履歴を戻る/進むことができます |
| 再読み込みボタン | プレビュー中のアプリを再読み込みします |
デスクトップ/モバイル切り替え
生成されるアプリはレスポンシブデザインに対応しています。ツールバーでデスクトップ/モバイルを切り替えて、各デバイスでの表示を確認しましょう。デスクトップ表示
PC画面サイズでの表示を確認できます。管理画面やダッシュボードの確認に最適です。
モバイル表示
スマートフォンサイズでの表示を確認できます。外出先での利用を想定する場合に重要です。
データベース管理画面（Supabase Studio）
プレビュー画面上部のデータベースアイコン（円筒形のアイコン）をクリックすると、Supabase Studioが開きます。Supabase Studioでできること
テーブル構造の確認
テーブル構造の確認
生成されたデータモデルがどのようにテーブル化されているか確認できます。各テーブルの項目名やデータ型を確認しましょう。
テストデータの投入・編集
テストデータの投入・編集
動作確認のためのテストデータを直接入力できます。プレビューアプリからデータを登録するよりも効率的にテストできます。活用例：
- 大量のサンプルデータを一括登録
- 特定の条件を持つデータを作成してテスト
- 登録済みデータの修正・削除
マスタデータの管理
マスタデータの管理
カテゴリやステータスなどのマスタデータを設定できます。プレビューアプリで選択肢として表示されるデータを準備しましょう。例：
- 商品カテゴリ
- 顧客ステータス（見込み、商談中、成約など）
- 都道府県リスト
SQLクエリの実行
SQLクエリの実行
より高度な操作が必要な場合は、SQLクエリを直接実行できます。
トラブルシューティング
プレビューが表示されない
プレビューが表示されない
原因と対処法：
- ビルドが完了していない → 「プロンプト」タブに戻り、ビルド状況を確認
- ビルドでエラーが発生した → エラーメッセージを確認し、仕様書を修正して再ビルド
- ネットワークの問題 → ページを再読み込みするか、しばらく待ってから再度アクセス
動作が遅い
動作が遅い
考えられる原因：
- 初回起動時はアプリの初期化に時間がかかります
- 大量のデータを表示している場合
- ネットワーク環境による影響
- しばらく待ってから操作してください
- データ量を減らしてテストしてください
意図と異なる動作をする
意図と異なる動作をする
プレビューで問題を発見した場合は、以下の手順で修正できます：
- 「プロンプト」タブに戻る
- AIに修正を依頼（例：「顧客一覧の検索機能が動作しない。修正して」）
- 仕様書が更新されたら再ビルド
- プレビューで動作確認