ハウツー

フォームを無効化して共有するためのチェックリスト

フォームが含まれるHTMLを共有する前に「フォームを無効化したか」という確認は一行で済むが、その周辺にある「コピーを使っているか」「全フォームが対象か」「本番と混在していないか」を合わせて確認しないと事故が起きる。チェックリストでこれらを網羅する方法を解説する。

準備するもの

チェックリストの「ファイル管理」フェーズには、①元ファイルのコピーを作成したか、②コピーファイルのファイル名に「_review」など区別できる文字列を付けたか、③コピーがデプロイ対象フォルダの外に保存されているかの3項目を必ず含める。この3つが揃っていれば、本番ファイルへの誤影響を構造的に防げる。

「フォーム調査」フェーズでは①ページ内の<form>タグの個数、②各フォームのaction属性の送信先URLのリスト、③JavaScriptで独自のsubmitハンドラが実装されているかを調査して記録する。特に③はフレームワーク(Vue・React・Angular)製のフォームで見落としやすく、HTMLのaction属性だけ削除しても送信が止まらないケースがある。

「テスト環境」フェーズにはブラウザ2種類(ChromeとSafariなど)でのテスト予定と、テスト用のダミー入力データを準備する欄を設ける。実際に入力して送信を試みるテストを省くと、コードの記述ミスによる「実は無効化されていなかった」という問題を見落とす。

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

実際の手順

チェックリストの「ファイル管理」フェーズを完了させてからコードを1行も書かずに保存し、その時点のファイルを元ファイルとしてバックアップする。次に「フォーム調査」フェーズを完了させてから無効化コードを追記する。この順序を守ることで、調査漏れのまま無効化を進める事故を防げる。

無効化コードを追記したら「テスト」フェーズに移り、チェックリストに記載したブラウザ全てで送信ボタンを実際に押してテストする。全ての<form>タグの数だけ「送信をブロックしたことを確認」チェックを入れる。漏れがある場合はコードを修正して再テストする。

全テストが完了したらギガサイト便にアップロードして「URL発行」チェックを入れ、認証設定を完了させて「認証設定」チェックを入れる。URLと付随情報をレビュアーに送付したら「送付完了」チェックを入れ、レビュー完了後に「URL失効処理」と「コピーファイル削除」の2つを最後に確認する。

失敗しやすい点

チェックリストを「埋めること」が目的になり、実際の確認作業をせずにチェックを入れてしまうパターンがある。特にテストフェーズは「動くだろう」という思い込みでスキップされやすい。「ブラウザで実際に送信ボタンを押した」という事実確認の記録として、テスト実施日時も書く欄を設けると抑止力になる。

コピーファイル削除を忘れるのはチェックリストを完了させた後に起きる失敗だ。「レビュー完了=チェックリスト記入完了」と思い込んで、後片付けが漏れる。チェックリストの最後2行を「コピーファイル削除」「URLの失効確認」にして、これが完了するまでプロジェクトが終わらない設計にする。

同じプロジェクトで複数フォームページがある場合に、チェックリストを1ページ分しか作らず他のページへの適用を忘れるケースがある。ページごとにチェックリストをコピーして使い、プロジェクトフォルダにチェックリストファイルを一覧で保存しておくと管理しやすい。

テンプレ文面

〇〇フォームページのレビューをお願いします。フォームは無効化済みですので誤送信の心配はありません。確認いただきたい点:①各入力欄のラベルテキストの表現 ②必須マークの位置と視認性 ③送信ボタンの色とCTAテキスト。URL:[プレビューURL](パスワード:別途共有)

レビュー依頼の文面でフォームに関する確認ポイントを具体的に3つ挙げているのがポイントだ。「フォームを見てください」と漠然と依頼するより、ラベル・必須マーク・ボタンのように要素を分解して依頼するとフィードバックの精度が上がる。

よくある質問

チェックリストはどのページ粒度で1枚用意すればいいですか?

フォームが含まれるHTMLページ1枚につき1枚のチェックリストが基本です。1ページに複数フォームがある場合は同じシートにフォームの行を追加して管理します。

チェックリストのフォーマットはどこで作るのがいいですか?

Googleスプレッドシートがチーム共有・リアルタイム更新・チェックボックス機能の観点から最も使いやすいです。Notionのデータベースもバージョン管理や絞り込み機能が使えて便利です。

レビュー後にコピーファイルを削除するのが怖いです。バックアップはどこに取ればいいですか?

Gitリポジトリに入っているなら変更履歴から復元できるため削除しても安全です。Gitを使っていない場合は「archive/」フォルダにレビュー完了日付を付けて移動する方法が現実的です。

関連記事

ハウツー

フォームを無効化して共有する方法

HTMLのレビュー共有でフォーム誤送信が心配なWeb制作者に向けて、submitイベントの無効化・action属性の削除・CSSによる操作禁止の3手法を比較し、認証付きURLと組み合わせた安全な共有方法を解説する記事。

4分で読める
ハウツー

フォームを無効化して共有するときの手順と注意点

フォーム付きHTMLのレビュー共有で誤送信を防ぎたいWeb担当者に向けて、フォーム無効化の具体的な手順・コードの書き方・本番ファイルへの影響を防ぐ注意点を実務的に解説する記事。

5分で読める
「ハウツー」の記事をもっと見る →