難所の一つだったお問い合わせフォーム
こんばんは、ちまです。
前回の総括編に続いて、今回は焼き鳥屋さん「池下一鳥目」のホームページ制作で、特にてこずったお問い合わせフォームの話です。ただの入力欄かと思いきや、ここは制作全体でも難所の一つでした。苦労して印象に残っているポイントを3つに分けて書いていきます。
そもそもどんなフォームを作ったか
お問い合わせフォームは、最初「入力→内容確認→送信処理・完了表示」の3画面で作っていました。それを途中で、当時相談相手にしていたGeminiというAIから「送信処理と完了画面を分けた方がいい」と提案されて、「入力→内容確認→送信処理→完了表示」の4画面構成に変えました。送信処理と『受け付けました』の表示を分けると、動きが安定するからだそうです。言われるがまま変えましたが、確かにこの方が自然でした。
この頃はまだ、ChatGPTやGeminiといったチャットAIに相談しながらコードを書いていた時期です。
苦労①：そもそもメールが送れない
最初にぶつかったのが、「作ったフォームが本当に動くのか確認できない」問題でした。
私はMacのMAMP（自分のパソコンの中に仮のサーバーを立てる仕組み）で開発していたのですが、この環境ではメール送信がうまく動きません。フォームからメールを送る機能は、実際にインターネット上のサーバーに置かないと確認できませんでした。
でも、当時の私はサーバーもドメイン（ホームページの住所のようなもの）も知識がほぼゼロ。唯一記憶にあったのが、このブログのために契約していたサーバーのことでした。そのサーバーを使って、テスト用のドメインでこっそり公開して、そこで動作確認をすることにしました。
ここでもう一つ問題が。テスト中のサイトが誰でも見られる状態だと困ります。「一部の人だけが見られるようにしたい」と思って調べていくうちに、Basic認証というものにたどり着きました。会員制サイトでたまに出てくる、あのログイン画面のことです。名前すら知らないところからのスタートでしたが、なんとか設定できました。
苦労②：自動返信メールと、深夜の作業
メールが送れるようになったら、次は中身です。
最初は自分（管理者）宛てに「お問い合わせが来ました」という通知が届くだけでした。でも、お客さん側は「本当に送れてるのかな？」と不安になってしまうかも知れません。そこで、「お問い合わせありがとうございます」という自動返信が届いた方が親切だと思い、自動返信メールの機能を追加しました。
あとで制作の記録（git履歴）を見返して笑ってしまったのですが、この自動返信メールを実装したのが深夜2時過ぎ（笑）しかもその6分後にもう一度修正を入れて、同じ日の午後にまた手直ししていました。私は仕事が休みの前日か休日に作業することが多くて、やり始めると切りのいいところまでやりたいタイプなので、気づけば深夜になっていたみたいです。
このとき午後の手直しで直したのが、送信に失敗したときの挙動です。それまでは送信に失敗すると、真っ白な画面に「メールの送信に失敗しました。」とだけ出て終わり、というあまり見栄えが良くない作りでした。でも、お店の雰囲気に合わせたデザインにしているのに、エラー画面だけ統一性がなかったら安っぽく見えちゃうなと思ったので、入力画面に戻して赤い文字でエラーを知らせる形に変えました。
苦労③：セキュリティはAIエージェントに教わった
フォームがひととおり完成に近づいた頃、Claude Codeというツール（AIエージェント）を使い始めていました。そこで、できあがったコードの総評をお願いしてみたんです。
すると、セキュリティ面の指摘が山ほど返ってきました（笑）
一番なるほどと思ったのが、個人情報の扱いです。お問い合わせフォームは、メールアドレスのような個人情報を扱います。それを画面から画面へ、むき出しのまま持ち回すのは危険で、サーバー側の見えない場所（セッション）に保存して処理するべきだ、という話でした。言われて初めて意識しましたが「確かに」と思いました。
ほかにも、同じ人が短時間に何度も送信できないようにするレート制限（30分に3回まで）を入れたり、CSRFやXSSといった攻撃への対策の話が出てきたり。正直、攻撃の名前がいろいろ出てきて、そのときは何がどの話だったか追いつくのに必死でした（笑）それでも、「メールを送れる」ということは「悪意のある人にも入り口を開ける」ことなんだと、このとき肌で理解しました。
フォーム作りは二段階だった
振り返ると、お問い合わせフォームは「動くものを作る」と「安全に運用する」の二段階でした。前半はチャットAIと一緒に形にして、後半はAIエージェントに安全性を鍛えてもらった。ちょうど私のAIの使い方が進化していく流れと、綺麗に重なっていました。
次回は、このサイトを「お店の人が自分で更新できるように」との要望を受けて、WordPressに作り替えた話を書く予定です。完成間近での方針転換、なかなかの大仕事でした。
それでは、また次回〜
コメント