baserCMSのAPIを使って静的HTMLからメールを送信しよう！

この記事では国産CMSでWordPressに比べて狙われにくいbaserCMSを使って、静的に作ったメールフォームから、baserCMSのAPIを経由してメールを送信するためのサンプルを配布します。セキュリティ向上にお役立てください。

対応ニーズが高まる「CMSの改ざん」対策

AIの発達と共に、ホームページ制作の現場ではこれまで以上にセキュリティ対策に気を使うようになりました。特にWordPressをはじめとするCMSで制作した動的サイトが「改ざんされてしまった」という話が多いようです。

対策として、それこそAIを使ってデザインから静的HTMLまで生成し、ホームページとして公開してしまおうという「CMSを介さない制作方法」も当然ありえますが、公開後の運用・管理のしやすさ、SEO/AIO対策、ページ数の多い場合の対処のしやすさ、加えてMCPを使えばAIによる指示も受け付けられることを考えれば、CMSを使ったホームページ管理のメリットが多いように思います。

CMSで管理されるホームページを静的HTMLに書き出す

CMSの改ざんが発生する理由として、CMSがもともと持っている脆弱性をつかれるケース、CMSの入口（管理画面へのログイン画面など）を突破されてしまうケースが多いように思います。つまり、逆にいえばCMSに触れさせない構造にすることが、CMS改ざん問題の根本対策となり得ます。

そこで、一般的にはホームページのキャッシュを持つCDNサーバーを別で用意して、CMSサーバーへアクセスさせない方法や、CMSで管理されているページを定期的に静的なHTMLへ書き出して、それをCMSとは別の場所へ設置してホームページとして公開する方法などがあります。

（ちなみに当社ではbaserCMS専用の静的HTML書き出しプラグインを無償公開しています）

しかしながら、CMSをつかった多くのホームページでは、一部のページを動的に動かしていることが多々あり、静的HTMLにすることで動作しなくなる部分がでてきてしまいます。その代表的な機能が「メールフォーム」です。メールフォームは入力された内容を受け取って、確認画面を出し、メール送信を行うという動的（プログラムが処理を行って画面を描写する）な機能のため、「ただのHTML」では動かなくなってしまうのです。

baserCMSにはメールフォームのAPIがある

baserCMSにはAPI（外部からbaserCMSの機能を使うための方法）が用意されています。そこでCMSに直接アクセスさせずに、このAPIを使って静的HTML（CMSから切り離された外部のファイル）からメールフォームを送信させることで、静的に書き出しされたHTMLのホームページなのに、CMSで作成したメールフォームを利用できるように出来ます。

APIを使った処理の流れのイメージ

baserCMSのAPIにユーザーから直接アクセスされるのを防ぐため、ホームページが公開されている領域（CMS側ではない方）にエンドポイント（中継地点）を用意して、そこからAPIにアクセスをさせます。

そのうえで、APIを使ったメール送信の流れは以下のようになります。

1. メールフォームの情報をAPIから取得して（入力欄やinputの種類など）描写する。
2. 入力された内容をAPIを使って確認（バリデーションチェック）して、確認画面を描写する。
3. 入力された内容をAPIを使ってCMS側へ保存し、メール送信を行う。
4. 送信完了画面を表示する。

エンドポイント

baserCMSではメールフォームを複数設置できるため、エンドポイントは複数のメールフォームに対応するように作成する必要があります。
また、エンドポイントには直接アクセスできないよう.htaccessなどで制限を掛ける必要があるでしょう。

サンプル（雛型）ダウンロード

今回、レンタルサーバーなどでも使いやすいように、エンドポイントをPHPで作成し、APIから取得した情報をもとにフォームを描写するのはJSで処理をするサンプルをご用意しました。下記からダウンロードできますので、参考にご覧ください。

mailform_sample.zip（サンプル雛型）

使い方

設定ファイル（config.sample.php）

このファイルは添付ファイルの上限やreCAPTCHAの利用設定、フォーム毎の設定情報を持っています。利用する環境に合わせて書き換えてください。なおファイル名は適当にリネームしてお使い頂ければと思いますが、その場合は呼び出しているHTMLやアクセス制限をかけている.htaccessにあるファイル名も変更してください。

メールフォームのHTMLを設定する

サンプルの/public/contact/index.htmlと/public/recruit/index.htmlを参考にしてみてください。（mailform.jsを呼び出しているのを忘れずに！）

特にformタグのdata-mailform="（CMSで作ったメールフォーム名）"とすることが重要です。

その他、README.mdを参考に

README.mdの記述を参考にしてください。当社の静的HTML書き出しプラグインに関連する記述もしてありますので、ぜひ一緒にお使いください。