AIエージェントをDev Containerで動かしても、画像の書き出しは別に検証する

画像プレビューの修正をエージェントに頼むなら、自分は最初に「保存した画像をもう一度開く」と決めておきたい。画面では縦長に見えても、ダウンロードしたファイルは元の横長のまま、という実装は作れてしまう。型チェックも通る。

VS Code 1.138では、ローカルのDev Container内でagent sessionを動かす機能が案内されている。プロジェクトのツールや依存関係を使えるのはありがたい。ただし、開発環境が揃うことと、画像UIの出力が正しいことは別の話だ。この記事は製品の実測レポートではなく、React/TypeScriptの小さな画像UIでその境界を確かめるための手順である。

先に画像の合格条件を置く

題材は、ローカル画像を読み込み、fitとcropを切り替えて4:5の枠に表示し、PNGをダウンロードする画面。以下は読者のリポジトリで試すための仮想課題で、実在のアプリの検証結果ではない。

• 横長と縦長のテスト画像を1枚ずつ用意する。端に色や文字を置くと、どこが切れたか分かりやすい。顧客画像は使わない。
• 出力サイズは、この課題では1080 × 1350ピクセルと決める。公開先に応じたサイズ選択は別工程にする。
• fitでは画像全体を残す。縦横比が違えば余白ができてよい。
• cropでは枠を埋める。縦横比が違えば端が切れてよいが、画像を引き伸ばさない。
• プレビューだけでなく、保存されたPNGも同じ構図と指定サイズにする。外部への画像送信や依存追加は、この課題では許可しない。

「いい感じにリサイズして」だけだと、CSSでプレビューを整えた時点で作業が終わりかねない。PNGまで見る、と先に決めておく。

Dev Containerは使えたら使う、使えなければ記録する

まずリポジトリの.devcontainer/devcontainer.jsonとpackage.jsonを確認する。Dockerが動くかも確かめる。基準コミットと使うツールの版を控えてから、エージェントに変更を渡す。

# 既存の作業ツリーで実行する前に、未コミットの変更がないか確認
git status --short
git rev-parse HEAD
node --version
# package managerと検証用scriptはpackage.jsonを見て特定する

VS Code側で利用できる場合は、Agents windowでchat.agentHost.devContainer.enabledを確認し、対象フォルダのUse Dev Containerからsessionを開始する。公式案内では、対応するDev Container設定とDockerが必要で、機能は段階的に提供されている。項目が表示されない環境で「コンテナで動かした」とは書かない。通常の環境でも、以下の合格条件と検証手順は使える。

依頼文も短く、実行と合格判定を分ける。

React/TypeScriptの画像プレビューにfit/crop切替とPNGダウンロードを実装する。
横長・縦長のローカル画像を使い、1080×1350の出力を確認できるようにする。
依存追加と画像の外部送信はしない。
変更前に対象ファイルと、リポジトリに存在する検証scriptを示す。
変更後は実行した検証と未確認の項目を分けて報告する。

Dev Containerでエージェントを動かしても、人間が見るブラウザまで自動的にその環境になるわけではない。どのサーバーへ接続して画面を開いたかも控える。

object-fitはプレビューの答えであって、書き出しの答えではない

画面側の最小例はこんな形になる。fitをcontain、cropをcoverに対応させる。

// 画像ファイルのobject URLは呼び出し側で作成・破棄する想定
function ImagePreview({ src, mode }: { src: string; mode: "fit" | "crop" }) {
  return (
    <div style={{ width: 216, aspectRatio: "4 / 5", background: "#eee" }}>
      <img
        src={src}
        alt="出力イメージのプレビュー"
        style={{ width: "100%", height: "100%", objectFit: mode === "fit" ? "contain" : "cover" }}
      />
    </div>
  )
}

object-fitが調整するのはimg要素の枠内での見え方だ。元ファイルのピクセルや、別途ダウンロードされるBlobの内容は変えない。エクスポート処理が元のFileをそのまま保存していたら、このプレビューが正しくても出力は不合格。書き出し側ではCanvasなどで、選んだモードに合わせて描画した結果をPNGにする必要がある。

保存後のピクセル寸法だけなら、ブラウザでダウンロードしたファイルを選んで次のように確認できる。createImageBitmapで開いた画像は最後に閉じる。

async function checkExport(file: File) {
  const image = await createImageBitmap(file)
  try {
    console.log({ width: image.width, height: image.height })
    return image.width === 1080 && image.height === 1350
  } finally {
    image.close()
  }
}

// 例: <input type="file" accept="image/png" /> で選んだ保存済みPNGを渡す

寸法が合っていても、fitの余白やcropの切れ方は分からない。保存したPNGを実際に開き、プレビューと横に並べて見る。横長・縦長の両方で試すと、片側だけ偶然うまくいった実装も見つけやすい。

差分、画面、ファイルを別々に確認する

エージェントが「完了」と言ったら、まず差分を見る。

git status --short    # 変更・未追跡ファイルを確認
git diff --check     # 差分の空白エラーを確認
# package.jsonに存在するtypecheck / test等だけを実行する

その後でブラウザを開き、モードを切り替えて結果を記録する。数字は実行前に埋めない。

入力とモード	プレビューで見ること	保存したPNGで見ること	判定
横長 / fit	全体と余白、枠の安定性	1080 × 1350、全体と余白	未確認
横長 / crop	枠が埋まり、端が切れること	1080 × 1350、切れた位置	未確認
縦長 / fit	全体と余白、枠の安定性	1080 × 1350、全体と余白	未確認
縦長 / crop	枠が埋まり、端が切れること	1080 × 1350、切れた位置	未確認

テスト用scriptが無ければ「通過」ではなく「未実行」と書く。Dev Containerの設定が使えなければ、その欄は「未利用」。失敗を隠さないほうが、後で原因を追える。

アプリの出力をInstagram向けに仕上げる別工程なら、ブラウザ内でサイズやfit/fillを調整してPNGを保存できるResize Image for Instagramのようなツールも使える。ただし、そこで整えた画像はアプリ自身のエクスポート処理が正しかった証拠にはならない。受け入れ試験に使うのは、必ずアプリから直接保存したファイルだ。

Dev Containerで環境を揃えたあとも、保存ファイルを開くところまでは省けない。型チェックが緑でも、出力の端が切れていたら画像UIの変更はまだ終わっていない。

参考資料

• Visual Studio Code 1.138 release notes — Dev Container内のagent session、前提条件と段階的提供
• MDN: object-fit — containとcoverの表示挙動