AI活用

Codex CLIで生成したフォーム付きページをレビュー用URLにして共有する方法

Codex CLIでフォーム付きHTMLを生成した直後、そのファイルをそのままSlackに貼っても相手はローカルで開けず、内容を確認してもらえない。ギガサイト便のようなサービスを使えば、ドラッグ&ドロップ数秒でURLを発行し、パスワードや期限も同時に設定できる。フォーム特有の送信先・外部スクリプトの安全確認から始め、適切な認証を選んで共有するまでの手順を整理する。

何が共有しづらいのか

Codex CLIが出力するフォーム付きHTMLは、`<form action>`にローカルホストのエンドポイントや仮のAPIパスが書かれていることが多い。そのまま相手に渡しても送信ボタンを押した瞬間にエラーになり、フォームの動作イメージが伝わらない。レビュー前に送信先を明示的にdisabledにするか、action属性を空文字にして見た目だけ確認できる状態にしておくと誤解が減る。

Codex CLIは生成時に外部CDNのスクリプトタグを自動挿入することがある。共有先のネットワーク環境によってはCDNへの通信がブロックされ、フォームのバリデーションライブラリが読み込まれずスタイルが崩れる。`<script src>`をすべて確認し、オフラインでも動作するかブラウザの開発者ツールのNetworkタブで検証してからURLを発行するのが安全だ。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

URL化する前の確認点

フォームの`action`属性と`method`属性を必ず目視確認する。`method="POST"`かつ外部ドメインのURLが指定されていると、レビュアーが誤って送信した場合に実際のエンドポイントへリクエストが飛ぶ。レビュー専用として公開するなら`action="#"`と書き換え、`onsubmit="return false"`を追加して送信を完全に止めるのが最も確実な対策だ。

インラインスクリプトや外部JSファイルにAPIキーが埋め込まれていないかをgrepで確認する。Codex CLIはプロンプトに含めた認証情報をそのままコードに出力する場合があり、HTMLをブラウザで開けば誰でも開発者ツールから読めてしまう。`grep -rn 'sk-\|Bearer\|apiKey' ./output.html`のようなコマンドで素早くスクリーニングできる。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

認証と期限の決め方

フォームのUIレビューを社外のデザイナーに依頼する場合、URL共有だけでは不特定多数がアクセスできる状態になる。ギガサイト便のパスワード認証を使うと、SlackやメールでURLとパスワードをセットで渡すだけで済み、追加のアカウント登録を求めずに済むためレビュアーの負担が低い。

「今週中にデザイン確認」のような短期レビューには、URLの有効期限を7日に設定するのが目安だ。期限切れ後は自動でアクセス不可になるため、古いプロトタイプのURLが検索キャッシュに残るリスクを防げる。レビューが延期になった場合は期限を延長するだけでよく、再アップロードは不要だ。

  • 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
  • 特定の相手だけ: パスワードまたはメール認証を使う
  • 会社内だけ: 会社ドメイン認証を検討する
  • 短期レビュー: 期限を設定して古いURLを残さない

共有後のフィードバック回収

フォームのレビュー依頼を送るときは「入力欄の並び順」「エラーメッセージのわかりやすさ」「送信ボタンの視認性」など確認ポイントを3つ程度に絞って伝える。確認範囲を絞らないと「全体的にどうですか?」という曖昧な返答しか得られず、修正箇所の特定に余計な往復が発生する。

修正を加えたHTMLを再アップロードすると新しいURLが生成される場合、フィードバックスレッドに新URLを追記し「v2に差し替えました」と明記する。古いURLのまま議論が続くと、最終版と途中版のどちらを見ているのかが混乱する原因になる。ギガサイト便では同一スロットへの上書きアップロードでURLを維持できるため、スレッドの整理が楽になる。

  • 確認してほしい観点を3つ以内に絞る
  • 期限と返信先を明記する
  • 修正後も同じURLで見られるか伝える
  • 最終版と途中版が混ざらないようタイトルを付ける

よくある質問

フォームの送信ボタンを押せない状態でレビューしてもらう方法は?

HTMLの`<form>`タグに`onsubmit="return false"`を追加し、action属性を`"#"`に変更してからアップロードする。これでボタンを押しても実際の送信は発生せず、UIの確認に専念できる。

Codex CLIが出力したHTMLにAPIキーが含まれていないか手早く確認するには?

ターミナルで`grep -n 'key\|token\|secret\|Bearer' output.html`を実行する。ヒットした行を確認し、実際のキー文字列が含まれていれば`XXXX`などのプレースホルダに置き換えてからURL発行する。

レビューURLを発行した後に一部テキストだけ修正したい場合はどうすればよいか?

ローカルのHTMLファイルを編集し、ギガサイト便の同一スロットに上書きアップロードすることで同じURLのまま最新版を反映できる。修正した旨をレビュアーに連絡し、ブラウザのキャッシュをクリアして確認してもらうよう伝えるとよい。

関連記事

AI活用

Gemini CLIで生成したLP案をレビュー用URLにして共有する方法

Gemini CLIで生成したLP案をクライアントや社内担当者にレビューさせたいウェブ担当者向け。公開前の安全チェックから認証方式・フィードバック依頼のポイントまで、LP特有の注意点を踏まえて判断できるようにまとめた記事です。

4分で読める
「AI活用」の記事をもっと見る →