このプロジェクトでは、既存コンタクトフォームの「メールが送信されない」という致命的な不具合を修正し、将来の運用を見据えたセキュリティ強化と業務効率化を実現しました。
当初、フォームが送信されない問題は、複雑に絡み合ったJavaScriptのロジックが原因でした。そこで、場当たり的な修正ではなく、コード全体を構造から見直すリファクタリングを実施。可読性と保守性の高いコードに書き換えることで、問題を根本から解決し、安定した送信機能を回復させました。
メール送信の仕組みには、セキュリティ上の懸念がありました。以下の多角的なアプローチで、堅牢なシステムを構築しました。
- **通信のプロキシ化:** proxy.phpという中継ファイルを用意し、フロントエンドからの通信を一度PHPで受けるように変更しました。これにより、外部からAPIエンドポイントやリクエスト内容を直接推測されるのを防ぎます。
- **機密情報の保護:** APIキーなどの重要な情報は、サーバーの設定ファイルである.htaccessに記述し、PHPスクリプトからのみ参照できるようにしました。これにより、万が一フロントエンドのコードが閲覧されても、機密情報が漏洩するリスクを大幅に低減させました。
- **ボット対策:** GoogleのreCAPTCHA v3を導入し、人間による正当な操作かどうかを判定。スパムや悪意のあるプログラムによる自動送信を効果的にブロックします。
reCAPTCHA設定画面
クライアントの業務効率を最大化するため、Googleのサービスと連携した自動化機能を実装しました。
- **問い合わせ内容の自動記録:** GASを利用し、フォームから送信された内容がリアルタイムで指定のGoogleスプレッドシートに追記される仕組みを構築。手作業での転記ミスを防ぎ、問い合わせ管理を大幅に簡略化しました。
- **安定したメール送信と自動返信:** メールサーバーの環境に左右されにくいGASのメーラー機能を活用し、問い合わせ内容の通知メールと、ユーザーへの自動返信メールを確実に送信できるようにしました。
- **フロントエンド:** HTML, CSS, JavaScript
- **バックエンド:** PHP, Google Apps Script (GAS)
- **インフラ・その他:** Xserver, Git
これらの改修により、当初の不具合修正に留まらず、セキュリティリスクの低減と、手作業に頼っていた運用業務の完全自動化を実現しました。
最終的には、クライアント自身がスムーズに運用できるよう、機能の使い方をまとめた簡易的なマニュアルを作成し、納品いたしました。