作品テンプレートの選別（29種から絞り込む）に使う材料集めを AI に任せたときの記録です。
動機
テンプレートを選別するには、29種を同じ条件で見比べられる材料が要ります。1種ずつ手でプレビューを開いてスクショを撮ると29往復です。これは判断の要らない純作業なので、AI に丸ごと任せた。
撮り方: ウィザードを自動操縦する
テンプレートには種類（コード上は kind と呼んでいる）ごとの固定プレビューURLが無く、実際に描画できる唯一の経路が「作成ウィザードで写真を選ぶ→順番を決める→テンプレートを選ぶ→プレビュー」だった。なので Playwright でウィザードそのものを自動操縦する形になった。どのステップで何を確認させるかは自分で決めて、Playwright のコード自体は AI に書いてもらっている。
- Step1 で綴り済みの写真を全選択
- Step3 でテンプレートカードをクリック——このとき aria-label に出ている表示名が、目的のテンプレート種類のものと一致するかを毎回確認してから押す（隣のカードを誤クリックしたまま29枚撮り続ける事故のガード）
- Step4 のプレビュー部分を、画面に収まらない下の方まで含めて1枚に撮影
- 「戻る」で Step3 へ戻り、次の種類へ。これを29周
もうひとつ先に決めていたガードが「保存ボタンは一度も押さない」。
29周まわす前にこれを決めておいたので、手順の各ステップで迷わずに済んだ。
詰まり①: 独立ポート作戦がCORSで死んだ
最初の計画は「他の作業と衝突しないよう、専用の開発サーバーを別ポート（3210）で立てる」だった。行儀のいい計画に見えたが、実データが読めない。
ダミーの画像と文字で撮れば認証も CORS も要らないが、それだと選別の材料にならない。このあと見つかる表示バグ3種も、実データを流し込んだから見えたものだった。
設定を書き換えれば通るが、材料集めのためにアプリ側のコードを触るのは本末転倒なので、既に動いていたポート3001のコンテナ（アプリ一式を箱に詰めて動かす仕組み）に読み取り専用で相乗りする計画に切り替えた。同じサーバーに複数のブラウザが繋がっても、「どの写真を選んだか」のような画面の状態はタブの中だけで完結しています。同じクラウドのドキュメントを2つのタブで開いてもそれぞれ別の場所をスクロールできるのと同じで、自動操縦のタブが自分の作業画面を巻き込むことはありません。
詰まり②: sudo が無い環境で chromium が起動しない
Playwright が動かすブラウザ（chromium）は、OSに共有ライブラリが足りないと起動できません。通常は playwright install --with-deps というコマンドが足りない分をまとめて入れてくれるが、OS の共通の棚に物を置く作業は管理者権限（sudo）が要ります。この環境には管理者のパスワードが無く、そのコマンドが使えなかった。ここで自分の手は止まった。
AI が出してきた回避策は「共通の棚に置けないなら、自分の手元に置く」だった。足りないライブラリ（libnspr4 など7パッケージ）を apt-get download でダウンロードだけして（＝インストールはしない）、dpkg -x で自分のホームディレクトリに中身を取り出す。あとは LD_LIBRARY_PATH という環境変数で「部品はここも探しに行け」とブラウザに教えてやると、そのまま起動した。
OSの棚に置く（全員に影響する・管理者権限が要る）代わりに、このプロセスにだけ見える場所に部品を置いた形になります。意味を掴んだのは動いた後で、自分でググってこの手順に辿り着けたとは思わない。LD_LIBRARY_PATH が「ライブラリを探す場所の指定」だというところまでは追えたが、なぜその7つで足りたのかは今も分かっていない。
結果
29種すべて撮影成功。写真と綴りが実データで入った全景スクショが29枚並び、選別の判断材料になった。おまけに、このスクショ束から表示バグが3種類見つかった。それぞれ別記事にしています。
- 背景の継ぎ目 → ページの途中で背景の色が切り替わる「帯」が出る — background-attachment: fixed の仕様
- キャプションの下敷き → 重なりのバグは「数字を上げる」前に測る — elementFromPoint で z-index を実測する
- 経過時間の表示 → 「約11年12ヶ月」と表示された — 人間向けの時間表示は繰り上げ漏れでバグる
1種ずつ順に見ていたら「そういうものか」で流していたと思う。同じ写真・同じ綴りで29種を並べたから、他の28種と違う1種が浮いて見えた。
学んだこと
- aria-label を毎回照合してからクリックさせる形にしたら、29周のあいだ一度もカードを取り違えなかった。読み上げのために付けた属性が、そのまま機械の目印として使えます
- 「他の作業と隔離するために別ポートを立てる」は、CORS のオリジン境界に当たると成立しなかった。今回は既に動いていた 3001 に相乗りしたが、これは行儀の悪さを承知で選んだ側で、「保存しない・アプリのコードを変えない」という条件とセットでしか成り立たない
- 権限が無い環境でも「システムに入れる」以外の道があります。
dpkg -x+LD_LIBRARY_PATHは、環境全体を変えずにそのプロセスの見え方だけを変えるやり方で、CORS のときの「アプリ側の設定を書き換えない」判断と同じ形をしています。触る範囲を最小にする方が、後で元に戻す手間も事故も減ります - 材料集めの自動化は、始める前に「絶対に起こさない副作用」を決めます。今回は「保存を押さない」「アプリのコードを変えない」の2つだった
- 選別のための材料集めは、そのまま検査になります。同じ条件で全パターンを並べると、単体で見ていたら気づかない崩れが「他と違う」の形で浮いてきます
この記事は2026年7月時点の自分の理解で書いています。仕様や認識が変わってる可能性があります。