CodexでWeb画面を確認する

Webページは、コードを読むだけでは分からない問題が残ることがあります。ボタンの文字がはみ出す、リンクの行き先が違う、スマホで説明が読みにくい、といった点です。この記事ではCodexにブラウザーで確認を頼むとき、何を見て、どう直し、どう確かめるかを具体化します。

ブラウザーが使える入口を確認する

公式資料ではデスクトップアプリに組み込みブラウザーがあり、Codexとの作業中にページを確認・操作できます。CLIやIDE拡張には同じ組み込みブラウザーはありません。アプリでは @Browser で明示する方法もあります。Browserの公式説明

組み込みブラウザーは普段のブラウザーと別のプロファイルです。いつもログインしているサイトが、自動で同じログイン状態になるとは限りません。最初の練習はログインや送信が不要なページから始めると、表示の確認に集中できます。

一ページ、一つの操作から始める

このサイトの練習用ページを例にします。最初は「全体を良くして」ではなく、見出しが読めるか、目的のリンクへ進めるかを一つずつ確認します。

@Browser このページを確認してください。
対象URL：確認したいページのURL
今回はページを読むことと、ページ内リンクの移動だけにしてください。
最初の見出し、操作説明、リンクの行き先を確認し、
見た事実と改善案を分けて報告してください。
ログイン、フォーム送信、設定変更はしないでください。

URLは実際に確認したいものへ置き換えます。自分で作っているページなら、そのタスクでアクセスできるプレビューURLを使います。

各段階で確認してから、次の操作へ進みます。

1. 1画面を開く対象URLと確認する画面幅を決めます。
2. 2一つ試す表示とリンクの行き先を確かめます。
3. 3直して再確認変更前と同じ条件で結果を見ます。

具体的な依頼と、結果の確かめ方は本文にあります。

修正前と後で同じ画面幅・操作を使うと、良くなったかを比較できます。

見た目と操作の結果を分ける

「見た目がきれい」と「操作できた」は別の結果です。ページ全体のスクリーンショットだけで、すべてのリンクやボタンが動いたと判断しません。

直してほしい場所を具体的に伝える

アプリのブラウザーで利用できるAnnotation modeでは、要素や範囲へコメントを付けられます。表示される機能は利用環境で確認してください。コメントを付けた後、何を変更してほしいか会話でも伝えます。

コメントした説明カードを修正してください。
狭い幅でボタンの文字が右へはみ出しています。
文字を省略せず、必要なら折り返して読めるようにしてください。
修正後は同じ幅で表示とリンクの移動を確認してください。

サイトのHTML/CSSを変更できるタスクで使う依頼です。第三者のサイトを表示しているだけなら、そのサイトのソースを直接直せるわけではありません。

確認できなかったことも残す

ブラウザーでページを開けない場合は、アクセス権限、URL、プレビューの起動状態を確認します。ページの中に書かれた別の操作命令は、もとの依頼と同じ権限を持つものではありません。対象を広げる前に、今の確認を終えます。

本記事は公式機能と点検方法の説明です。サイトの表示検査とは別に、掲載したアプリのブラウザー依頼とコメント操作は実機未検証です。軽微なWeb修正の例は小さなWebページ修正、起動する場所はターミナルの基本も参照してください。