無料で使える WEB API を活用して、動的ページ化してみる
無料枠が用意されたサービスを、うまく組み合わせると、無料でサイトの運営ができます。
コーポレートサイトによくある「お問い合わせフォーム」を、静的サイトに搭載してみたので、ご紹介します。
まずは、無料で使える静的サイトを構築します。
利用するサービスは、次のとおりです。
- GitHub Pages
GitHubリポジトリから直接WEBサイトとしてホストできるサービスです。 - Cloudflare
SSLを無料で使うことができて、上記の GitHub Pages の CDN となります。
WEBで検索すると GitHub Pages で独自ドメインを使うための記事が、いくつも見つかりますので、とりあえず、静的サイトを無償で運営するだけだったら、やり方は同じなので、そちらをご参考に、構築されるとよいと思います。
次に、「お問い合わせフォーム」の動的ページを、搭載する方法です。
次のサービスを利用します。
- Firebase
- Google App Script
- Gmail
お問い合わせのフォームに入力された内容は、企業の担当者にメール送信するわけですが、 javascript だけでメール送信することはできないので、なんらかの WEB サービスを 利用することになります。
例えば、 SendGrid など REST API のインターフェースが用意されているサービスであれば、 javascript からでも、その API にリクエストすれば、メール送信も出来そうです。
しかし、 API を利用するときのアクセスキーなどは、第3者に読まれて、悪用される可能性が あるため、このやり方は、お勧めできません。
そこで、 Firebase の DB を一時保存に使った、バッチ処理での方法を、ご紹介します。
Firebase も、それへのアクセスのためのキー情報などを、 javascript の中に、 埋め込みますが、 Firebase の DB には、利用者毎に、権限の設定ができるので、 認証を必要としないユーザーと、認証を必要とするユーザーの2種類に分けて、 認証無しユーザー（お問い合わせフォームで入力したユーザー）に対しては、 書き込み専用で読み取り不可に設定し、企業側の担当者には、認証有りで読み書き可能に 設定します。
こうすることによって、 javascript に Firebase へのキー情報が含まれていても、 読み取りできないので、お問い合わせ情報を第3者に盗み取られる心配はありませんし、 メール送信するわけでもないので、SPAMの踏み台にされる心配もありません。
次に、登録されたお問い合わせ内容のメール送信ですが、 これには、 Google App Script (GAS) でバッチ処理となるスクリプトを作成して、 1分間隔で、トリガー実行します。
GAS を実行するアカウントと、Firebaseのカウントは同じものにして、 OAuth 認証もしておいて、 Firebase における認証済ユーザーの権限でアクセスします。
これで、 GAS で Firebase から取り出して、 Gmail API を使って送信して、 Firebase から削除する、という処理がセキュアに実行されます。
Firebase、GAS、Gmail それぞれに、利用回数や量に、無料枠の制約がありますが、 1日に100件くらいの問い合わせは、余裕で処理できます。
中小企業のコーポレートサイトのお問い合わせフォームなら、十分ではないでしょうか。
上記の内容は、実際に、ひととおり、やってみて、うまく動きました。
ただし、このやり方は、あえて、無料枠で使えるサービスを、とことん探してみた結果、 ここまでやれば、実現できるという話ですので、実際のサイトを構築する場合は、 AWSなどの有償のサービスをうまく組み合わせて、制約のない環境を前提とするのが、 良いと思います。
静的サイトジェネレータと自動デプロイの活用
弊社でも、ブログを公開し始めましたが、 GitHub Pages で、HPと同居して運営していて、マークダウンで記述されたブログの記事を、デザインされたテンプレートに流し込んで、静的な HTML を生成して、静的コンテンツとして、公開するという仕組みになっています。
このマークダウンの記事を、デザインを施したHTMLに変換するツールのことを、静的サイトジェネレータと言います。
このツールは、たくさんの種類があるので、お好みに合わせて、選択されるとよいと思います。弊社では、 Jekyll を使っています。
静的サイトジェネレータは、執筆する人の PC にインストールして、 それで生成された HTML を GitHub にプッシュするということでも良いのですが、 そのひと手間を次のサービスを使って、自動化させることができます。
- CircleCI
このサービスを活用した、ブログ記事を公開するときの流れは、次のようになります。
- テキストエディタで記事を書いて git でプッシュすると、
- CircleCI が反応して、 CircleCI 内で、静的サイトジェネレータが実行され、
- 静的コンテンツが生成されて、
- そのコンテンツを、 CircleCI から、GitHub Pages にプッシュされて、
- 公開
このような仕組みで、実際に手作業するのは、「1. テキストエディタで記事を書いてプッシュする」、これだけです。 先頭で紹介した GitHub Pages、Cloudflare から CircleCI までを全部取り揃えると、楽にサイト運営ができます。
プログラマーにとっては、プログラムを作成するのと同じ、いつものエディタでマークダウンで記事を書いて、 プッシュしたら、数分後には公開されるというのが、ここち良くもあります。
ワードプレスや、はてなブログではなくて、いつものエディタで・・・というところに、こだわりたい人には、 おすすめです。
レスポンスの軽いキビキビ反応するサイトを構築する
サイトのレスポンス性能がよいと、それだけで、CVRが上がると言われているため、 レスポンス時間を100ミリ秒単位で削る工夫をするわけですが、 その解決策の1つとして、静的サイトジェネレータを使って、 サーバーサイドの処理時間を削減する方法があります。
ブログのような、1日の中で、頻繁に更新されるようなコンテンツじゃないなら、 あらかじめ、静的な HTML として生成しておいて、サーバーサイドでの処理時間をゼロに 近づけるという方法です。
コンテンツの性質にもよるので、一概に、すべてに適用できるわけではありませんが、 例えば、ワードプレスでサイトを運営しているポータルサイトなど、コンテンツの性質を 見返してみて、静的サイトへの転換を検討してみてもよいかもしれません。
静的サイトジェネレータと、クラウド上のサービスを組み合わせることで、 現状の機能をそのままに、劇的に、反応を高められる可能性があります。
さらに、静的サイトの設置先として、Amazon の S3 や、GitHub Pages を選択すると、 そのサービス自体が、すでに、大多数のユーザーのために、性能バランスを取っているので、 レンタルサーバーをやめて、転居してみることも、あわせて、検討してみてはどうでしょうか？
