AIエージェントを使ってQRコード生成ページを作る

はじめに

QRコードが欲しいことがあるのだが、適当な「QRコード無料生成」を謳うウェブサイトに行くと、広告が鬱陶しかったり、ひどいところになると、一度そのサイトに飛んでから目的のページに飛ぶ短縮URLを生成されたりして閉口した。そこで、自分で安心して使えるQRコード生成サイトを作った。作ったサイトは以下の通り。

Web image

で、このサイトを作る時にChatGPTとCodexを使ったので、どのように使ったのかを残しておく。このリポジトリにはCodexに食わせたPLANS.mdがあるので参照されたい。

方針

経験的に、いきなりCodexと対話して作ろうとすると迷走することが多い。まずブラウザ版のChatGPTと対話し、仕様を固めてからPLANS.mdを作って、それに従ってCodexに実装させ、意図と異なるところはPLANS.mdを修正しながら実装していく方針とする。

仕様策定

ChatGPTとの対話

まず、QRコード生成に必要なパラメータを聞いた。

URLを入力してQRコードを生成するWebページを作成します。QRコード作成に必要なパラメータを列挙してください。

すると

QRコード生成Webページで必要・任意になりやすいパラメータは以下です。

と種類、パラメータ、説明の表を作ってきた。その上で

実装上はまず、最小構成として
url
size
errorCorrectionLevel
margin
foregroundColor
backgroundColor
outputFormat
があれば十分です。

と言ってきたので、上記を中心に指定できるUIを作ることにする。

次に

誤り訂正レベルのデフォルト値はどれが推奨ですか？

と聞いたところ、LMQHとあるが、基本的にMが推奨ということなので、プルダウンメニューでLMQHを指定し、Mをデフォルトとすることにした。

サイズについても聞いてみた。

sizeを複数のプリセットから選ぶとしたら、どのようなサイズセットが一般的ですか？

その結果、128,256,512,1024が多いとのことだが、128は削除しても良いということだったので、256,512,1024をプリセットとして、それに加えて「カスタム」を追加することにした。

同様にmarginについても尋ね、0,2,4,8が一般的であると言ってきたので、「なし(0px)」「標準(4px)」「広い(8px)」から選ぶことにした。

さらにGitHub公開用のリポジトリ名をいくつか提案させ、qr-code-generatorを採用した。

PLANS.mdの生成

以上の情報収集のもと、ChatGPTに以下の指示を出した。

以下の仕様を満たすようなページをGitHub Pagesで公開します。そのためにCodexに指示を出すためのPLANS.mdを出力してください。出力の前後に````を出力してください。

以下のパラメータを指定します。
url
size
errorCorrectionLevel
margin
foregroundColor
backgroundColor

errorCorrectionLevelはMが選ばれた状態のプルダウンメニューとします。
出力はPNG固定にします。
sizeは256,512,1024のプリセットと、カスタムから選びます。カスタムを選ぶとピクセル値入力ボックスが有効になります。
marginは「なし(0px)」「標準(4px)」「広い(8)」から選びます。
foregroundColor,backgroundColorは、テキストボックスで#FFFFFFなどのような指定をしますが、隣にカラーピッカーボタンがあり、ボタンを押すとカラーピッカーが表示、カラーを選ぶと対応してテキストボックスの値を書き換えます。
backgroundColorは、それに加えて「透過」が選べるようにします。透過を選ぶと色指定は無効です。

タイトルは「QRコード生成」としてください。また、レスポンシブにします。

生成したPNGを保存するための「名前をつけて保存」ボタンをつけてください。

リポジトリ名はqr-code-generatorを採用します。ページの最後にリポジトリへのリンク
https://github.com/kaityo256/qr-code-generator
をつけてください。

こうして生成されたPLANS.mdをqr-code-generatorディレクトリに配置して、次はCodexとの対話に移る。

Codexとの対話

カレントディレクトリにPLANS.mdがある状態でCodexを起動し、以下の質問をした。

PLANS.mdを読み、実装に必要な情報が揃っているか確認してください

すると、以下のような回答をしてきた。

PLANS.mdを確認しました。実装に必要な情報はほぼ揃っています。静的サイトとして
  docs/ 配下に HTML/CSS/JS/README を置けば、GitHub Pages 用の QR コード生成ペー
  ジは実装できます。

  ただし、実装前に明確にしておくとよい点がいくつかあります。

  - 生成先はdocsディレクトリ とある一方で、最小構成のファイル名が index.html,
    style.css, script.js, README.md とだけ書かれています。実装上は docs/
    index.html, docs/style.css, docs/script.js と解釈するのが自然です。
  - README.md は通常リポジトリ直下に置くことが多いですが、PLANS.mdでは生成先が
    docs とされているため、README.md をルートに置くか docs/README.md に置くかが
    少し曖昧です。実用上はルート README.md がよいです。
  - ライセンス欄は指定されていますが、具体的なライセンス種別が未指定です。仮に未
    定なら 未定 や TBD と書くことになります。
  - QRコード生成ライブラリの指定が「QRCode.js など」となっているため、使うCDNと
    ライブラリは実装側で選定する必要があります。
  - URL入力について、厳密なURL形式バリデーションをするのか、任意文字列をQR化して
    よいのかが少し曖昧です。仕様上は「入力された文字列をQRコード化」とあるので、
    空文字以外は許可でよさそうです。

  結論として、実装は開始できます。上記の曖昧点は、以下の前提で進めれば問題ありま
  せん。

  - ページ本体は docs/ 配下に作成
  - README.md はリポジトリ直下に作成
  - URLは空文字のみエラー、形式の厳密検証はしない
  - ライセンス欄は未指定として記載
  - CDNの軽量QRライブラリを選び、必要ならCanvas経由で透過PNG保存に対応する

上記について内容を確認し、PLANS.mdの修正を指示する。

その前提を採用します。対応するようにPLANS.mdを書き換えてください。

すると、以下のレスポンス。

PLANS.mdを書き換えました。

  反映した内容は以下です。

  - ページ本体は docs/ 配下に作成することを明記
  - README.md はリポジトリ直下に作成することを明記
  - URLは空文字のみエラーとし、形式の厳密検証はしない方針を明記
  - QRコード生成ライブラリは実装時に選定し、CDN版を使う方針を明記
  - 透過PNGは必要に応じてCanvas経由で生成・保存する方針を明記
  - ライセンス未指定時はREADMEのライセンス欄に 未定 と書くことを明記

  確認済みファイル: PLANS.md

あ、ライセンスを指定してなかったな。

ライセンスはMITとします。

ライセンス欄の前提を 未定 から MIT に更新します。関連するREADME要件だけを狭く直します。

PLANS.mdを更新し、READMEのライセンス欄は MIT License と記載する仕様にしました。

  更新ファイル: PLANS.md

最終確認。

このPLANS.mdで実装可能ですか？

はい、この PLANS.md で実装可能です。

  現時点で実装に必要な主要情報は揃っています。

  - 公開形態: GitHub Pages 向け静的サイト
  - 配置: ページ本体は docs/
  - 技術: HTML/CSS/JavaScript、ビルド不要、CDN利用可
  - UI: URL、サイズ、誤り訂正、余白、前景色、背景色、透過
  - 挙動: 入力変更時に再生成、PNGプレビュー、PNG保存
  - バリデーション: 空URL、カスタムサイズ、色指定
  - README: ルート配置、MIT License 記載
  - 完了条件: 動作確認項目が明確

  実装時にこちらで判断すればよい残りの裁量は、QRコード生成ライブラリの具体名と、
  見た目の細部くらいです。どちらも PLANS.md の範囲内で決められるため、追加確認な
  しで実装に進めます。

ゴーサインを出す。

では実装してください。

数分で全て実装完了。

実装しました。

  追加した主なファイルです。

  - docs/index.html: GitHub Pages用のページ本体
  - docs/style.css: レスポンシブ対応のスタイル
  - docs/script.js: QR生成、バリデーション、透過PNG、保存処理
  - README.md: プロジェクト概要、使用方法、MIT License

  実装内容は PLANS.md に沿って、URL入力、サイズプリセットとカスタム、誤り訂正レ
  ベル、余白、前景色・背景色、透過背景、PNG保存に対応しています。QR生成はCDNの
  qrcode-generator を使い、Canvasに描画してPNG保存できるようにしています。

  確認済みです。

  node --check docs/script.js

  構文エラーはありません。静的HTMLなので、ブラウザでは docs/index.html を開けば
  確認できます。

動作確認したところ、「名前をつけて保存」が、ダイアログを出さずにqrcode.pngでデスクトップに保存する仕様になっていたため、修正を指示。

「名前をつけて保存」が、名前をつけることなくqrcode.pngで保存されています。ファイル保存ダイアログを開くようにPLANS.mdを修正し、かつ実装してください

対応しました。

  変更内容:

  - PLANS.md: 保存機能を「ファイル保存ダイアログを開く」仕様に修正
  - docs/script.js: showSaveFilePicker 対応ブラウザでは保存ダイアログを開くよう
    実装
  - README.md: 使用方法の保存説明を更新

  実装上は、File System Access API 対応ブラウザでは qrcode.png を初期ファイル名
  にした保存ダイアログが開きます。非対応ブラウザではブラウザ制約により、従来どお
  り qrcode.png のダウンロードにフォールバックします。

期待通りの動作になったので、コミットさせる。ついでにライセンスがなかったので作成させる。

LICENSEを生成してください。名義はH. Watanabeです。

LICENSE を生成しました。

  内容は MIT License、名義は H. Watanabe、年は 2026 です。

さらにPLANS.mdに反映させる。

LICENSEの追加についてもPLANS.mdに追記してください。

PLANS.md に LICENSE の要件を追記しました。

  追加内容:

  - リポジトリ直下に LICENSE を作成
  - ライセンスは MIT License
  - 著作権表示の名義は H. Watanabe
  - 完了条件にも LICENSE ファイルの存在を追加

  現在の未コミット変更は PLANS.md の更新と、新規 LICENSE です。

READMEにGitHub Pagesへのリンクを指示。

READMEにGitHub Pagesへのリンクをつけてください。また、その指示をPLANS.mdに追加してください。アカウント名はkaityo256です。

対応しました。

  - README.md に公開ページリンクを追加
    https://kaityo256.github.io/qr-code-generator/
  - PLANS.md にREADMEへGitHub Pagesリンクを載せる要件を追加
  - 完了条件にもREADMEの公開ページリンクを追加

  現在の未コミット変更は PLANS.md, README.md, 新規 LICENSE です。

Codexを使うサンプルとしたいので、その情報をREADMEに書くように指示。

このリポジトリにはPLANS.mdがあり、codexを使って実装したこと、また実装に使ったバージョンなどもREADMEに明記してください。

README.md に追記しました。

  追加内容:

  - PLANS.md が実装計画・仕様として存在すること
  - PLANS.md に基づき Codex を使って実装したこと
  - 実装情報として以下を明記
      - 実装支援: Codex
      - QRコード生成ライブラリ: qrcode-generator 1.4.4
      - 実装形式: HTML / CSS / JavaScript
      - ビルド工程: なし

  現在の未コミット変更は PLANS.md, README.md, 新規 LICENSE です。

意図がうまく伝わらなかった。実装に使ったライブラリ等のバージョンではなく、実装に使ったAIエージェントの情報を書きたかったので、それを指示。

実装情報はページの情報ではなくAIエージェントの情報を記載してください。

README.md を修正しました。

  実装情報 セクションを AIエージェント情報 に変更し、ページやライブラリの情報で
  はなく以下を記載しています。

  - 実装支援: Codex
  - ベースモデル: GPT-5
  - 実装対象仕様: PLANS.md
  - 実装時の主な作業: 仕様確認、静的ページ実装、README更新、LICENSE生成

全て期待通りになったので、コミットを指示。GitHub上でベアリポジトリを作ってから、Codexにremote addとpush -uを指示。

最後にGitHub Pagesへのデプロイを手で行って終了。

まとめ

AIエージェントを使ってコードを書くのが一般的になって来ているが、実際にどのように対話して作っているのかの記録があると有用かな、と思ってまとめてみた。いきなりCodexと対話してもなかなかうまくいかないので、まずはブラウザ版のChatGPTと十分に対話して、PLANS.mdをしっかり作ってからCodexとの対話に移るとスムーズな気がする。それでも、実際に作らせてみるといろいろ穴があったり行き違いがあったりする。

今思うと、GitHubまわりもghコマンドを使ってCodexに指示を出せばよかった気もするが、そこも任せるのはまだちょっと不安かな。慣れたらそっちまわりもCodexにやらせるかも。