指差し確認ボタンのCGIを自作する方法と実装の要点

ユーザーがフォームで送信前に内容を確認できる「指差し確認ボタン」は、入力ミスを防ぐ定番の仕組みです。PerlのCGIで自作すれば、ライブラリに依存せず軽量に動作し、サーバー側で確実に検証できます。本記事では、入力から確認、送信完了までを一つのCGIで完結させる構成を想定し、HTML、Perl、バリデーション、セキュリティ対策を順を追って解説します。

小規模なフォームであれば、hiddenフィールドで値を受け渡す方式が最も簡単に始められます。サーバーにセッション機構を持たない環境でも動作するため、レンタルサーバーでも導入しやすいのが利点です。まずは全体像をつかみ、徐々に機能を拡張していく流れで進めましょう。

指差し確認ボタンの基本動作と仕組み

指差し確認ボタンは、入力画面、確認画面、送信完了画面の三段階で構成されます。ユーザーが入力画面で必須項目を埋めて送信ボタンを押すと、確認画面で内容が表示され、「この内容で送信する」ボタンを押して初めて送信が完了します。途中で「戻る」ボタンを押せば入力画面に戻り、修正後に再度確認画面へ進めます。

この仕組みをCGIで実装する場合、hiddenフィールドで値をやり取りするのが最も手軽です。サーバーに状態を持たせないため、単純なスクリプトで完結します。セッション管理が必要な場合は別途機構を追加しますが、まずはhidden方式で全体を理解するのが近道です。

二段階の操作にすることで、ユーザーは送信前に一度立ち止まり内容を点検できます。誤送信や必須項目の漏れを抑え、業務用フォームでのミスを減らす効果が期待できます。

CGI実行環境の準備とPerlの基本設定

CGIを動かすには、WebサーバーがPerlを実行できる環境が必要です。ApacheではScriptAliasやAddHandlerの設定、nginxではFastCGI経由の実行が一般的です。スクリプトは.cgi拡張子にして、実行権限を付与します。先頭にはshebang行（#!/usr/bin/perlなど）を必ず書きましょう。

文字エンコーディングもスクリプトの先頭付近で宣言します。UTF-8で統一する場合はuse utf8;とuse Encode;を宣言し、標準出力への伝播も設定します。エンコーディングを揃えないと確認画面で文字化けが発生し、せっかくの指差し確認が無駄になりかねません。

開発中はローカル環境で動作確認をしておくと、本番公開時のトラブルを抑えられます。LinuxやmacOSではターミナルから直接スクリプトを実行してエラーをチェックできます。WindowsではXAMPPやStrawberry Perlを使うと、ローカルApacheで.cgiを手軽に試せます。

HTMLフォーム側の実装と画面遷移の設計

入力画面のフォームでは、各入力欄に意味のあるname属性を付けます。例えば氏名なら「name」、メールアドレスなら「email」のように決めておくと受け取り側が扱いやすくなります。action属性には確認用CGIのURLを、method属性にはPOSTを指定します。送信ボタンのvalue属性を「確認画面へ」にしておくと、ユーザーの次の動作が明確になります。

CGIスクリプトでは環境変数REQUEST_METHODを参照し、POSTなら確認処理、GETなら入力フォーム表示に分岐させます。一つのスクリプトで複数の役割を兼ねるため、サブルーチン化しておくと見通しが良くなります。print_form、print_confirm、send_mailのように関数化すると、改修時に変更箇所を把握しやすいです。

確認画面ではhiddenフィールドを配置して、入力値をそのまま引き継ぎます。type="hidden"のinput要素にvalueを埋め込み、確認画面で「戻る」ボタンを押したときにも入力値が保持されるよう設計します。ブラウザによっては戻る操作でhidden値が空になる場合もあるため、必ず動作確認をしておきましょう。

CGIスクリプト本体の書き方と入力値の検証

Perlでフォームデータを受け取るには、CGIモジュールを使う方法と、生のSTDINを読む方法があります。CGIモジュールが使える環境ならuse CGI;して$q->param('name')のように値を取り出せます。古いサーバーやモジュール未インストールの環境では、read(STDIN, $buf, $ENV{'CONTENT_LENGTH'})で生データを読み、&でパースします。

受け取った値は必ずサーバー側で検証してから次の画面に送ります。必須項目が空でないか、文字数制限を超えていないか、メールアドレス形式かどうかをチェックします。JavaScriptだけで検証を済ませるのは危険で、JavaScriptを無効にしたユーザーや悪意のある送信に対してはサーバー側の再検証が欠かせません。

値のサニタイズも必須です。HTMLタグや特殊文字が含まれていた場合、確認画面で意図せずスクリプトが実行されないようエスケープ処理を行います。PerlならHTML::Entitiesモジュールを使うか、s/</</g、s/>/>/gのような置換で対応します。サニタイズ用の関数を一つ用意し、表示前に必ず通す運用にすると抜け漏れが少なくなります。

確認画面での内容表示と戻るボタンの処理

確認画面では、入力値をtableタグやdefinition listで整形すると見栄えが良くなります。氏名やメールアドレス、住所といった項目をラベル付きで見せると、ユーザーは自分が何を入力したか直感的に把握できます。長い住所は郵便番号と改行で区切ると、間違いに気づきやすくなります。

「戻る」ボタンはブラウザの戻る機能に依存せず、入力画面への直接リンクとして実装するのが確実です。hiddenフィールドの値でフォーム全体を再現できれば、戻る操作後も入力値が保持されます。修正が無効にならないよう、必ずブラウザ種別を変えてテストしておきます。

送信ボタンを押した後の最終処理では、メール送信やデータベースへの書き込みを行います。メール送信時はメールアドレス形式の再チェックと送信先アドレスの確認を必ず行います。送信ログを残しておくと後から履歴を追跡でき、業務用フォームでは特に有用です。送信完了後はhiddenフィールドをすべてクリアし、ブラウザの戻るボタンで再送信されないよう対策します。

セキュリティ対策とブラウザ互換性の確認

公開環境で運用する場合はXSS（クロスサイトスクリプティング）対策が最重要です。確認画面や送信完了画面で入力値を表示する箇所では、必ずエスケープ処理を行います。HTMLタグだけでなく、JavaScriptのイベントハンドラーやURLのjavascript:スキームも遮断しておくと安心です。

CSRF（クロスサイトリクエストフォージェリ）への対策も欠かせません。確認画面にランダムなトークンをhiddenフィールドで埋め込み、送信時に一致するかを確認します。トークンは乱数生成で都度作成し、有効期限を短く設定しておくと堅牢です。CGI環境ではhiddenフィールドで擬似的にトークンをやり取りすることで、最低限の対策になります。

古いブラウザとの互換性も確認しておきたいポイントです。UTF-8で作成したフォームが文字化けする場合やCSSの解釈が異なる場合があるため、レガシー環境の挙動を把握しておくと安心です。参考までに、過去のブラウザ依存の挙動についてはIE 4.0の表記問題のような資料がまとめられています。最新のブラウザで開発しつつ、旧バージョンでも表示確認しておくと利用者の環境を問わず安心して運用できます。

ここまでの手順を押さえれば、指差し確認ボタンのCGIを自作するために必要な要素はすべて整います。最初は最小構成で動作を確認してから、レイアウトやバリデーションルールを少しずつ拡張していくのが挫折しないコツです。公開後はサーバーログを定期的に確認し、想定外の送信やエラーが発生していないかをチェックする運用も忘れずに。フォームはユーザーとの最初の接点ですから、安心して送信してもらえる確かな仕組みを、地道に育てていきましょう。