ビルドとプレビューのトラブルシューティング

ここから開始

エージェントがタスクを完了すると、App ビューアーにアプリが読み込まれます。ターミナルにはタスクのアクティビティとエラーが表示され、App ビューアーのツールバーには、App ビューアーを再読み込みするコントロール、デバイス表示の切り替え、新しいタブでプレビューを開くオプション、および Console があります。

1. 最新の変更を保存し、現在のタスクまたはビルドが完了するまで待ちます。
2. プレビューが古いように見える場合や読み込み画面のままの場合は、Reload App Viewer を1回選択します。
3. 埋め込みの App ビューアーが停止している、または応答しない場合は、新しいタブでプレビューを開きます。
4. Console を開き、最初に表示されているエラーをコピーします。プロジェクトリンクと障害が発生した時刻も控えておいてください。

ビルドが失敗した場合

まず Resolve を試す

Atoms がビルドの問題を検出すると、左下に 問題の報告 通知が表示されます。通知に Resolve が含まれている場合は、別の操作を行う前に、まず1回修復を試してください。

1. Resolve を選択し、現在の試行が完了するまで待ちます。
2. 実行中は Resolve を再度選択しないでください。
3. 試行が完了しない場合は、表示されているステータスを記録し、以下の報告手順に進んでください。別の Resolve 試行は開始しないでください。
4. 試行が完了したら、更新されたプレビューを確認します。更新されていない場合は、ブラウザを1回更新してください。
5. 問題の原因となった操作を繰り返します。問題が解消しない場合は、問題の報告 を展開し、以下の報告手順に進んでください。

ビルドエラーまたは依存関係の不足

Preview パネルにビルドエラー、赤いエラーバナー、または不足しているパッケージに関するメッセージが表示される場合は、その正確なメッセージを使って次の手順を絞り込んでください。

1. Console を開き、そこに表示されている完全なエラーメッセージをコピーします。
2. Resolve が利用可能な場合は、1回使用して試行が完了するまで待ちます。
3. Resolve ボタンがない場合は、正確なエラー内容を Project chat に貼り付け、そのビルドエラーの修正をエージェントに依頼します。
4. 特定の変更の後にエラーが発生し始めた場合は、History を開き、現在のバージョンと最後に正常に動作していたバージョンを比較します。
5. エラーの切り分けが難しい場合は、最後の安定版から リミックス し、変更を段階的に再適用します。

App ビューアー、起動スクリプト、Publish、デプロイ記録、またはサードパーティパッケージの内部ファイルに言及するエラーは、プラットフォームの問題を示している可能性があります。Support に連絡する際は、完全なエラーメッセージを含めてください。

ビルドが進行中のままになる

再試行する前に、ターミナルで現在のタスクのアクティビティを確認してください。タスクまたはビルドがまだ実行中の場合は、完了するまで待ちます。現在の試行が終了した後も進行中のままである場合は、ステータス、タイムスタンプ、プロジェクトリンク、および表示されているエラーの詳細を記録してから、問題を報告してください。

Preview または App ビューアーが読み込まれない場合

読み込み画面のまま、または応答しないプレビュー

まず、影響を受けているのが埋め込みの App ビューアーだけなのか、それとも Preview URL や公開済みサイトにも影響しているのかを確認してください。

1. 現在のタスクまたはビルドがまだ実行中かどうかを確認します。
2. Reload App Viewer を1回選択します。
3. 新しいブラウザタブで Preview を開きます。
4. 同じ URL をシークレットウィンドウでテストします。
5. 最後に正常に動作していたバージョンが読み込まれる場合は、現在の問題を引き起こした最近の変更と比較します。

製品に Cloud & AI 残高不足またはアプリ停止中と明示的に表示されている場合は、Settings → Cloud & AI を開いてそのステータスを確認してください。空白画面だけを根拠にチャージしないでください。

空白または不完全なプレビュー

空白画面の影響がアプリ全体に及んでいるのか、それとも1つのページやコンポーネントだけなのかを確認してください。1つの領域だけが影響を受けている場合は、ページセレクターを使ってそのページを直接開き、そこに到達する最小のユーザージャーニーをもう一度実行します。プレビュー全体が空白の場合は、ビルド結果に戻り、最初のビルドエラーまたはランタイムエラーを解決してから再度テストしてください。

cookies、tokens、または秘密の値を共有せずに、Console または Network のエラーを記録してください。問題が続く場合は、サニタイズしたエラー詳細を報告に含めてください。

Preview に古いバージョンが表示される

Preview と公開済みサイトは別の経路です。プレビューを更新する前に、最新の変更が保存され、最新のビルドが完了していることを確認してください。ビルド完了後に Preview を開き直します。それでも古い内容が表示される場合は、History で現在のバージョンと最後に正常に動作していたバージョンを比較してください。

プレビューの表示がおかしい場合

操作やナビゲーションが機能しない

表示されるページと、実際に機能するページは同じではありません。重要なナビゲーションリンクをすべて開き、主要なボタンを押し、主要なフォームを送信し、メインのユーザージャーニーを最初から最後までたどってください。いずれかの操作が失敗した場合は、期待した結果が止まる正確な操作を記録し、修正のたびにその経路を再度テストしてください。

モバイルレイアウトが崩れている

1. App ビューアーのツールバーにあるデバイス切り替えを使って、モバイル表示に切り替えます。
2. 利用可能な場合は、Design mode で壊れている要素を選択します。
3. 期待するモバイルレイアウトと、変更してはいけない点を説明します。
4. 1つ変更を適用したら、デスクトップ表示とモバイル表示に加えて、読み込み、空状態、ホバー、エラー状態を確認します。

画像やその他のアセットが表示されない

1. Files セクションを開き、参照されているファイルが存在することを確認します。
2. パス、ファイル名、形式が、アプリで使用されている参照と一致していることを確認します。
3. アセットが最近移動または名前変更された場合は、参照を復元するか、意図的に更新します。
4. Reload App Viewer を選択し、影響を受けたページを再度テストします。

エージェントが間違った要素を変更した、または別の領域を壊した

1. History を開き、最後の安定版から リミックス します。
2. 利用可能な場合は、Design mode を使って正確な要素を対象にします。
3. 変更してはいけない点を明示し、1つのプロンプトにつき1つの変更だけを行います。
4. 次の変更に進む前に結果を確認します。

問題を報告する

Resolve が利用できない場合、Resolve の完了後も問題が残る場合、Preview は応答しないが Project chat は引き続き機能する場合、またはエージェントが調査した後も予期しない動作が続く場合は、問題を報告してください。

Project chat から Feedback を開く

1. 影響を受けている Project chat を開き、最新の関連するエージェントメッセージを見つけます。
2. ...（その他のオプション）を選択し、次に Feedback を選択します。
3. サポートメッセンジャーで Send us a message を選択し、既存の会話がある場合はその会話内で報告を送信します。

完全な問題の報告フローについては、問題を報告する を参照してください。

問題を再現するのに十分な詳細を含める

• 問題の概要。 問題を1〜2文で説明します。
• Project または Chat Link。 問題が発生した URL を含めます。
• 日付と時刻。 タイムゾーンも含めます。
• 再現手順。 正確な操作を順番に列挙します。
• 期待した結果と実際の結果。 本来起こるべきことと、実際に起こったことを記載します。
• すでに試したこと。 Resolve が表示されたか、完了後に何が起きたか、更新や Remix で結果が変わったかを記載します。
• ブラウザとデバイス。 ブラウザ、オペレーティングシステム、デバイスタイプを含めます。
• 証拠。 スクリーンショットまたは録画、および関連する表示中の問題の報告または Console の詳細を添付します。

スクリーンショットやログを共有する前に、パスワード、API keys、認証 tokens、cookies、支払い情報、および無関係な個人情報や機密データを削除してください。

問題修正後

メインのユーザージャーニーを最初から最後まで実行してください。デスクトップ表示とモバイル表示の両方で Preview を確認し、ページセレクターから各ページを開き、Console に赤いエラーメッセージがないことを確認します。アプリを公開する準備ができている場合は、プレースホルダーコンテンツを置き換え、App ビューアーで公開前チェックを完了してください。

FAQ

App ビューアーに白い空白画面が表示されるのはなぜですか？

1. 問題が App ビューアーのみに影響しているのか、Preview URL にも影響しているのか、または公開済みサイトにも影響しているのかを確認します。
2. Reload App Viewer を1回選択し、新しいタブで Preview を開いて、シークレットウィンドウでテストします。
3. 現在のタスクまたはビルドがまだ実行中かどうかを確認します。再試行する前に完了するまで待ってください。
4. Cloud & AI 残高不足またはアプリ停止中であることが明示的なメッセージで示されている場合は、Settings → Cloud & AI を開いてその残高を確認してください。空白画面だけを根拠にチャージしないでください。
5. cookies、tokens、または秘密の値を共有せずに、Console または Network のエラーを記録してください。

画面が空白のままの場合は、Chat Link、完全な Viewer URL、時刻とタイムゾーン、影響を受ける環境、スクリーンショット、およびサニタイズしたエラー詳細を添えて Support に連絡してください。