App ビューアー
リアルタイムでアプリをプレビューして変更できます。
App ビューアーとは？
AI エージェントがタスクを完了すると、ページ上部に App ビューアーが表示されます。これにより、公開中のアプリをプレビューし、コーディング不要で直接ビジュアル編集を行えます。
始める前に
- エージェントの処理には少し時間がかかる場合があります。しばらくお待ちください。
- 詳細な進行状況は、右側のターミナルパネルで確認してください。ターミナルパネルには、ファイル作成、コード生成、ビルドプロセス中に発生したエラーなど、AI エージェントが実行している内容のリアルタイムログが表示されます。
- いつでも Refresh アイコンをクリックしてプレビューを再読み込みできます。
App ビューアーの使い方
ステップ 1: プレビューの読み込みを待つ
エージェントの処理が完了すると、App ビューアーがメインのプレビューウィンドウにプレビューを読み込みます。
⏱️ 通常は数秒 থেকে 1 分ほどかかります。
2 分以上かかる場合: App ビューアーのツールバーにある Refresh アイコンをクリックしてください。それでも止まったままの場合は、ターミナルパネルでエラーを確認してください（下記のステップ 3 を参照）。
ステップ 2: アプリをプレビューする
読み込みが完了すると、プレビューウィンドウで公開中のアプリを確認できます。
- Desktop / Tablet / Mobile — プレビューウィンドウ上部のデバイスツールバーを使って表示を切り替え、レスポンシブ対応をテストできます。ツールバーには、デスクトップ、タブレット、モバイル端末を表す 3 つのアイコンが表示されます。各アイコンをクリックすると、ページを離れずに異なる画面サイズでアプリがどのように表示されるかを確認できます。
- 新しいタブで開く— プレビューウィンドウ右上の矢印アイコンをクリックすると、別のブラウザタブでプレビューを開けます。埋め込みプレビューが停止したり反応しない場合に特に便利です。
ステップ 3: エラーを確認する（表示がおかしい場合）
アプリが読み込まれない、または表示が崩れている場合は、Console パネルでエラーメッセージを確認してください。
Console パネルは画面右側の、ターミナルタブの下にあります。ここには、ビルドプロセス中に生成されたシステムログとエラーメッセージが表示されます。
赤いエラーメッセージが表示されている場合、通常は次の内容が含まれます。
- 何が問題だったかの説明
- エラーが発生したファイルと行番号
- 根本原因の特定に役立つスタックトレース
エラーを修正するには:（詳細については、こちらを参照してください: 問題の報告）
- "Resolve" をクリックすると、AI が特定されたすべてのバグを自動で分析して修正します。
- 修正が適用されると、プレビューは再読み込みされます。進行状況はターミナルパネルでリアルタイムに確認できます。
"Resolve" ボタンがありませんか？
エージェントの最新メッセージの横にある "..."（その他のオプション）をクリックし、"Feedback" を選択してサポートチームに問題を報告してください。Chat Link とエラーのスクリーンショットを含めてください。
ステップ 4: アプリを変更する
方法 1: クリックして編集する（ビジュアル変更に推奨）
プレビューウィンドウ内の任意の要素を直接クリックしてください。画面左側にビジュアルエディターが表示され、次の項目を調整できます。
- 色 — カラーピッカーで文字色、背景色、または境界線の色を変更
- 余白 — パディング、マージン、要素間のギャップを調整
- タイポグラフィ — フォントサイズ、太さ、フォントファミリーを変更
- レイアウト — 配置、flexbox 設定、または grid プロパティを変更
- テキスト内容 — エディター内でテキストを直接編集
変更を加えると、プレビューは即座に更新され、結果をリアルタイムで確認できます。
ビジュアルエディターには Library タブもあり、アイコン、画像、UI コンポーネントなどの事前構築済みアセットを参照してプロジェクトに追加できます。
方法 2: チャットで説明する
変更したい内容を自然な言葉で AI エージェントに伝えてください。たとえば、次のように入力できます。
- "背景色をもっと暗くして"
- "ヘッダー周りのパディングを減らして"
- "ボタンの色を青に変更して"
AI はリクエストを理解し、アプリに変更を適用します。
クイックリファレンス
- プレビューを更新 – App ビューアーのツールバーにある Refresh アイコンをクリックして、プレビューウィンドウを再読み込みします。
- デバイス表示を切り替え – プレビューツールバーの Desktop、Tablet、または Mobile アイコンを使って、異なる画面サイズでアプリがどのように見えるかをテストします。
- 新しいタブで開く – プレビューウィンドウ右上の矢印アイコンをクリックして、別のブラウザタブでプレビューを開きます。
- エラーログを表示 – 画面右側の Console パネルで、エラーメッセージとシステムログを確認します。
- エラーを自動修正 – 問題の報告通知内の "Resolve" ボタンをクリックして、AI に特定されたすべてのバグを修正させます。
- ビジュアル要素を編集 – プレビューウィンドウ内の任意の要素をクリックして、左側のビジュアルエディターを開きます。
- 問題を報告 – 任意のエージェントメッセージで "..." → "Feedback" をクリックして、サポートチームに問題を報告します。
FAQ
なぜ App ビューアーに読み込み画面が表示されるのですか？
読み込み表示は、Web サイトを読み込み中であることを意味します。App ビューアーは正常に動作しています。プレビューが正しく読み込まれるまで少しお待ちください。2 分以上かかる場合は、Refresh アイコンをクリックするか、Console パネルでエラーを確認してください。
なぜ App ビューアーに赤いエラーメッセージが表示されるのですか？
エージェントはビルドプロセス中に問題に遭遇することがあり、その結果、Web ページでエラーが発生する場合があります。"Resolve" をクリックすると、エージェントがエラーを修復します。修正後は App ビューアーで通常どおりプレビューされるため、赤いエラーメッセージが表示されても心配する必要はありません。
公開済みページから Atoms バッジを削除できないのはなぜですか？
バッジの削除には Pro 以上が必要です。Settings → Plans & Billing からいつでもアップグレードできます。アップグレード後、公開済みページからバッジは自動的に削除されます。
アップグレードするには、右上のアバターをクリックして Settings を選択し、Plans & Billing に移動してください。Pro または Max プランを選び、アップグレード手続きを完了します。アップグレードが完了すると、公開済みページに Atoms バッジは表示されなくなります。
