スタイル設定における AI アシスタント

Matthias Rohmer

スタイル設定にAI アシスタンス パネルを使用すると、ウェブサイトの全体的なレイアウトや特定の要素のスタイルを把握し、AI 生成の CSS バグ修正を取得できます。

試験運用版: [AI アシスタント] パネルは試験運用版で、Chrome Canary 131 以降でご利用いただけます。 始める前に、既知の問題とデータの使用方法をご確認ください。

[AI アシスタンス] パネルを開く

ドロワーに [AI アシスタント] パネルが開きます。

[要素] パネルから

[要素] パネルから AI アシスタントを開くには、DOM ノードを検査するときに、ノードを右クリックして [AI に質問] オプションを選択します。

このように AI アシスタントを開くと、検査した DOM 要素が会話のコンテキスト要素として事前選択されています。

または、ホバーした DOM ノードに付属しているフローティング ボタンをクリックします。

注: 次の方法で AI アシスタントを開く場合は、上記のように [会話コンテキスト] を選択してください。

コマンド メニューから

コマンド メニューから AI アシスタントを開くには、AI と入力して、横に 引き出しバッジがある Show AI assistance コマンドを実行します。

[その他のツール] メニューから

または、右上の設定アイコン [その他のオプション] > [その他のツール] > [AI アシスタント] を選択します。

会話のコンテキスト

AI アシスタントとのチャットは、常に現在調査中の要素（[Elements] パネルの DOM ツリーで最後に選択した要素）に関連します。この要素への参照は、パネルの左下に表示されます。

コンテキストを変更するには、現在の要素の横にある要素選択ツールボタンを使用するか、[要素] パネルの DOM ツリーから選択します。

現在の検査対象要素は会話の基盤となりますが、AI アシスタントはすべてのウェブ API にアクセスして、検査対象のページから詳細情報を収集できます。これには、document.querySelector を使用して他の要素をクエリしたり、計算スタイルを評価したりすることが含まれます。

プロンプト

新しい会話を開始すると、スタイル設定のAI アシスタントから、すぐに作業を開始できるようにプロンプトの例が提示されます。

いずれかのプロンプトをクリックすると、パネルの下部にあるプロンプトの入力フィールドにプロンプトが入力されます。

または、入力フィールドに独自のプロンプトまたは質問を入力します。

プロンプトを送信するには、Enter キーを押すか、入力フィールドの右側にある矢印をクリックします。

ヒント: AI アシスタントの活用方法についてアイデアをお探しですか？AI アシスタントでできること 5 つの投稿をご覧ください。

会話フロー

プロンプトを送信すると、スタイリング エージェントとの会話が開始されます。エージェントは、プロンプトに最適な回答に必要な情報を取得するために、ウェブ API を呼び出す JavaScript を生成して実行します。エージェントの進捗状況はステップで示されます。最初のステップのステータスは Investigating… です。

エージェントが質問を解決するためにより具体的なアクションを実行すると、ステップラベルが更新されます。

エージェントが最終的な回答にたどり着くと、回答が調査手順の下に表示されます。これには、フォローアップ プロンプトの候補も含まれます。

提案されたプロンプトをクリックして、会話を続けます。 をクリックします。

の調査ステップを参照して、AI アシスタントが裏で何をしていたかを詳しく確認してください。

進行状況チップを展開すると、エージェントが実行したコードとその戻り値が表示されます。実行されたコードをコピーして、コンソール パネルで実行するなど、今後使用できるようにします。

試験運用版: 生成コード機能はまだ試験運用中です。生成コード支援に関する Google のポリシーをご覧ください。

一時停止中の会話

AI アシスタントによって、副作用のあるコードが生成される可能性があります。その場合、コードが実行される前に会話が一時停止します。

会話が中断されたら、エージェントが提案したコードを確認します。[play_arrow] 続行をクリックして続行するか、[キャンセル] をクリックして実行を停止します。

注: 会話が一時停止している間は、プロンプトの入力は無効になります。

回答なし

さまざまな理由により、AI アシスタントが回答を提供できない場合があります。

プロンプトがAI アシスタントが対応できる内容と思われる場合は、バグを報告してください。

会話の履歴

会話を開始すると、その後の回答はユーザーと AI との間の以前のやり取りに基づいて行われます。

パネルの左上にあるコントロールを使用して、会話履歴を管理します。

新しく作成

現在選択されている会話コンテキストで新しい会話を開始するには、[追加] ボタンをクリックします。

続行

過去の会話を続けるには、[履歴] ボタンをクリックして、コンテキスト メニューから選択します。

注: 会話コンテキストは、会話が停止してから消失している可能性があるため、自動的に更新されません。

削除

履歴から会話を削除するには、[削除] ボタンをクリックします。

回答を評価してフィードバックを提供する

AI アシスタントは試験運用中の機能です。そのため、回答の質と全体的なエクスペリエンスを改善する方法を把握するため、フィードバックを積極的に募集しています。

回答に投票する

回答の下にある thumb_up 高評価ボタンと thumb_down 低評価ボタンを使用して、回答に評価を付けます。

回答を報告する

不適切なコンテンツを報告するには、投票ボタンの横にある [報告] ボタンをクリックします。