スマートフォンからバグ修正を指示し、受け入れを確認する：画像リンクの事例

Tactic Remoteの記事内でスクリーンショットは正常に表示されていましたが、元の画像を開くためのリンクがWebページ用のURLとして書き換えられていました。中国語の記事では、共有画像のアドレスに /zh-CN/ が付加されることを意味していました。画像自体は存在していましたが、そのリンクが誤っていたのです。

これはスマートフォンから指示を出すのに手頃なタスク規模です。具体的な事象があり、検査すべき変更が小さく、自分自身で結果を確認できます。また、AI支援作業でよくある失敗、すなわち最初に失敗した具体的な操作を確認する前に「修正完了」を受け入れてしまうリスクも浮き彫りにします。

以下の事例は、本Webサイトに対する実際の修正に基づいています。その修正の前後に、実際のURLヘルパー関数を再実行しました。当時の実装作業とテストはコンピューター上で行われました。以下のメッセージはTactic Remote経由で送信できるサンプルの指示であり、すべての修正をスマートフォン上で行った記録ではありません。iPhoneのスクリーンショットは、回帰チェックで使用された実際の画像リソースです。コードの編集とテストは接続された開発用コンピューター上で実行され、iOS上でローカルに実行されるわけではありません。

1. 操作、期待される結果、境界条件を伝える

「画像を修正して」という指示は、解釈の余地が広すぎます。Agentは正常に動作しているアセットを置き換えたり、記事を書き直したり、すべての言語ルーティングを変更したりしてしまう可能性があります。最初のメッセージとしては、単一の操作と、引き続き機能し続けなければならない要件を記述するのが適切です。

中国語版のiPhoneガイドで、スクリーンショットは表示されますが、元の画像を開く際に誤ったアドレスが使用されています。まずそのリンクの挙動を再現してください。共有画像は既存の /images/ URLで開く必要があり、記事やドキュメントへのリンクは選択された言語に従う必要があります。コードを編集する前に、最小限の修正と回帰チェックを特定してください。記事の本文や無関係な変更には手を加えないでください。

送信する前に、Webサイトのプロジェクトを選択し、会話のディレクトリとブランチを確認してください。Agentが異なるリポジトリを指定した場合は、変更が加えられる前に修正してください。iPhone設定ガイドでは接続方法を解説しています。今回の事例は、ホストと対象プロジェクトが利用可能になった後の段階から始まります。

この報告で有用な区別は、「画像は表示されるが、リンクが変更される」という点です。画像要素はその src を読み込みます。それをクリックすると、囲んでいるリンクの href に遷移します。最初の操作のみを確認すると、2番目の操作を見落とすことになります。

2. パッチを適用する前に失敗する例を求める

影響を受けたリソースは以下のとおりです：

/images/editorial/mobile-guides/iphone-chat-mode.png

従来のヘルパーは、そのファイルアドレスをローカルページのように扱っていました。その出力は以下のとおりでした：

どちらの言語を選んだ場合も、上記の元の画像アドレスを変更せずに返す必要があります。

英語も影響を受けました。ページの正規化処理によって末尾にスラッシュが追加されていたのです。クエリ文字列やフラグメントを含む画像アドレスも、それらの部分が失われていました。共有ファイルは、ページのローカライズ処理を完全にバイパスする必要がありました。

書き換えていない元のファイルアドレスに対するローカルHTTPチェックでは、200, image/png が返されました。無効な /zh-CN/images/...png アドレスは 404 を返しました。これらのリクエストはローカルの候補環境に対して行われたものであり、本番環境で過去に発生した障害や影響を受けた訪問者の数を測定したものではありません。

スマートフォンからの効果的なフォローアップ指示は以下のとおりです：

失敗するケースを1つ取り上げ、入力URL、実際の出力、期待される出力を表示してください。対照用として通常のドキュメントリンクも含めてください。テストを通過させるためだけに期待される結果を変更しないでください。

3. 修正の適用範囲を確認する

本番用のヘルパー関数は、ダウンロード可能なサンプルをすでに除外していました。今回の修正は、同じ早期リターン（early return）に共有画像を追加することでした：

- if (href.startsWith('/examples/')) return href
+ if (href.startsWith('/examples/') || href.startsWith('/images/')) return href

ページリンクは引き続き既存の言語ルーティング関数を使用します。これは、このWebサイトの2つの共有アセットディレクトリに意図的に結び付けられたものであり、ドットを含むすべてのURLがローカライズをバイパスすべきであるという規則ではありません。

変更されたファイルのリストとこの差分（diff）を会話内で提示するようAgentに求め、アプリが提供するファイル/変更ビューで実際の変更を検査してください。表示されているブランチとパスを、選択したプロジェクトと比較します。回答でルーティング全体に及ぶ書き直しが提案された場合は、この不具合を直すためになぜそれが必要なのか、理由を確認してください。

当時の修正は、記事や日付の改善と同じコミットに含まれていました。リンク修正自体は上記の短い条件文のみですが、コミット全体としては1行の変更にとどまりませんでした。ご自身のタスクでは、パッチを受け入れる前に差分全体を確認し、無関係な既存の変更は分けて考慮してください。

4. 「passed」という単語だけでなく、テスト結果を読む

この事例では、Webサイトの8つの言語それぞれに対して6つの期待値を検証しました：

これは合計 48項目のチェック となり、記録された結果は以下のとおりです：

16件の失敗は、8言語にわたる画像関連の2つの期待値に対応しています。16本の壊れた記事、16人のユーザー、あるいは16個の独立したバグを意味するものではありません。合格した対照ケースが重要です。すべてのリンクのローカライズを単に停止するようなパッチは、画像の例を修正する一方で、ドキュメントのナビゲーションを壊してしまいます。

実行可能な再現スクリプトをダウンロードし、内容を確認して開発用コンピューター上で実行してください：

node image-link-regression.mjs

これはNodeの組み込みアサーションを使用し、メモリ上で実行され、ネットワークリクエストやファイルの変更は一切行いません。TypeScriptの型定義を取り除いた上で、修正前後の関連するURLの挙動を再現しています。その結果は、リポジトリの実際の変更履歴に対して個別に実行した結果と一致します。これは焦点を絞った再現用スクリプトであり、プロジェクト全体のビルドや結合テストを代替するものではありません。

スマートフォンから、確認した変更に紐づく証拠を求めてください：

正確なコマンド、ディレクトリ、ブランチまたはコミット、終了ステータス、失敗したアサーションを報告してください。完了したチェックと単に推奨するだけのチェックを明確に区別してください。テスト後にパッチを編集した場合は、そのバージョンで影響を受けるチェックを再実行してください。

この事例の元となったWebサイトの修正では、リポジトリのlint、本番ビルド、SEOチェックにも合格しました。これらの広範なチェックは異なる側面を検証するものであり、それら単体ではユーザーがブラウザで元の画像を実際に開けることを証明するものではありません。

5. ローカルプレビューでユーザーの操作を再現する

ここで、問題が発生した記事に戻ります。インライン画像が引き続き読み込まれることを確認し、元画像を開き、それがエラーページではなく画像であることを確かめた上で、記事に戻ります。通常のドキュメントリンクも確認します。英語と翻訳版の両方で、さらにスマートフォンの狭い画面幅でも同じ操作を繰り返してください。

プレビューがコンピューター上で実行されている場合、実機のiPhoneで開いた 127.0.0.1 というアドレスは、スマートフォン自身を指すことに留意してください。別のデバイスからテストするには、プロジェクトの既存のプレビューアクセス経路を使用してください。デスクトップブラウザをスマートフォンの幅に合わせることはレイアウトの確認には役立ちますが、物理的なiPhoneでのテストの代わりにはなりません。

6. 明確な停止ポイントで結果を受入確認する

今回の事例では、修正したローカルサイトが各チェックに合格し、ローカルプレビューでのレビューを経て受け入れられました。これはWebサイトの候補版に対する受け入れ判断であり、アップデートの公開ではありません。また、当時のタスクをすべてiPhoneから操作したことを示すものでもありません。

同様のタスクにおいて、最後の指示は具体的に伝えることができます：

ローカルプレビューで元画像とドキュメントリンクを確認しました。このパッチとその回帰テストを保持してください。残っている制約事項を要約した上で、公開やさらなる変更を行わずに停止してください。

プレビューを開いていない場合は、残りの作業を正確に伝えてください。「ヘルパーのチェックは合格しましたが、視覚的な受入確認は保留中です。」Agentの待機状態、テストの合格サマリー、そして目に見える結果に対する受入確認は、それぞれ異なる問いに答えるものです。

この事例で再利用可能な要素は一連の手順にあります。失敗した操作を記述し、対照ケースを保持し、正当化できる最小限の変更を検査し、そのバージョンにチェックを紐づけ、次のステップを決定する前にユーザーの操作を繰り返すことです。開発用コンピューターがコード作業を担当する一方で、スマートフォンがそれらの意思決定を担うことができます。途中で会話の応答が途切れた場合は、同じ指示を再度送信する前に接続および配信状態のトラブルシューティングガイドを参照してください。