AI活用

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

Replit Agentが生成したフォーム付きHTMLページをそのままReplitのURLで共有すると、フォーム送信が実際のエンドポイントに届いてしまうリスクがある。レビュー用には送信処理をモック化したうえで独立したURLに移植し、フォームのUIと入力フローだけを確認してもらう環境を整えるのが安全だ。

何が共有しづらいのか

Replit AgentはExpressやFastifyのバックエンドと連携したフォームを生成することがある。Replit上ではバックエンドが動いているためフォームが機能するが、HTMLだけをエクスポートして別の場所で公開するとAPIエンドポイントへの通信が失敗し、「送信エラー」が出るか無反応になる。レビュアーがフォームを操作できない状態では意味のあるフィードバックが得られない。

Replit Agentが生成するフォームはhoneypotフィールドやCSRFトークンを含む場合がある。これらはサーバー側で検証する仕組みと組み合わせて機能するため、静的HTMLとして公開するとバリデーションが常に失敗してフォームが送信できなくなる。公開前にサーバー依存のバリデーション処理をフロントエンドのみで完結するシンプルな検証に置き換える必要がある。

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

URL化する前の確認点

ReplitからダウンロードしたフォームのHTMLを開き、form要素のactionとmethodを確認する。actionに絶対URLが指定されていたら、`action="#"`に変更しsubmitイベントでpreventDefault()を呼ぶJSを追加する。送信後に「送信しました(確認用)」のメッセージを表示するだけでレビュアーはフォームフローの確認ができる。

入力フィールドのtype属性がemailやtelになっているか確認する。HTML5のネイティブバリデーションはブラウザが自動で処理するため、JavaScript製のカスタムバリデーションと競合することがある。Chromeでの動作確認に加え、Safariでも同じ動作をするかを確認する。特にtype="date"はSafariで表示が変わるため、デザインレビューに影響する。

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

認証と期限の決め方

フォームページのレビューは操作を伴うため、URLを知っている人全員に開放するより、確認を依頼した相手だけに絞るほうが安全だ。パスワード認証でURLとパスワードをセットで送り、不特定多数のアクセスを防ぐ。特に入力した内容が何らかの形でログに残る実装が含まれているなら、アクセス制限は必須だ。

フォームの種類によってレビュー期間の目安が変わる。問い合わせフォームなら1週間、複数ステップの申し込みフォームなら2週間が目安だ。ステップ数が多いと操作を通しで確認するのに時間がかかるため、余裕を持った期間を設定することでレビューが中途半端に終わる事態を防げる。

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

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

フォームレビューの依頼文には「実際に全フィールドに入力して送信ボタンを押すまでを試してください」と明記することが大切だ。見るだけで終わってしまうと、入力時のラベルの見づらさやエラーメッセージのタイミングについてフィードバックが得られない。「操作後にかかった時間と詰まった箇所を教えてください」と加えると定量的な意見が集まりやすい。

フォームを修正して再アップロードしたあとは、「v2: 必須マークを赤色に変更・住所入力欄を郵便番号自動入力対応に更新」のような具体的な更新内容とともにURLを通知する。同じURLで最新版を提供できると、レビュアーは更新内容の確認だけに集中でき、古いURLを参照するミスが減る。

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

よくある質問

Replitのバックエンドに依存した送信処理をフロントエンドだけで動くように変換するのは難しいですか?

レビュー目的ならsubmitイベントをpreventDefault()で止めてモックメッセージを出すだけで十分で、作業は10行以内のJS追加で完結する。バックエンド処理の完全な再現は不要であり、UIと入力フローの確認に必要な最低限の動作だけを担保すればよい。

フォームに複数ステップ(ウィザード形式)がある場合、URLは1つで足りますか?

ウィザード形式はJSで画面を切り替えるシングルページ実装が多いため、URLは1つで全ステップを確認できることがほとんど。ステップごとに別HTMLを呼び出す構成の場合は、全HTMLをZIPにまとめてアップロードし、index.htmlを起点にリンクを確認する。

レビュアーが誤ってフォームを本当に送信してしまった場合はどうすればよいですか?

送信処理をpreventDefault()で無効化していれば実際の送信は起きない。無効化を忘れた場合、Replitのバックエンドがスリープ状態ならリクエストは失敗するが、起動中なら送信される可能性がある。公開前の無効化確認を必ず実施することが最善の対策だ。

関連記事

「AI活用」の記事をもっと見る →