静的サイトを動的ページ化する - 無料サービスでどこまでできる?
2016/12/18

無料で使える 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

このサービスを活用した、ブログ記事を公開するときの流れは、次のようになります。

  1. テキストエディタで記事を書いて git でプッシュすると、
  2. CircleCI が反応して、 CircleCI 内で、静的サイトジェネレータが実行され、
  3. 静的コンテンツが生成されて、
  4. そのコンテンツを、 CircleCI から、GitHub Pages にプッシュされて、
  5. 公開

このような仕組みで、実際に手作業するのは、「1. テキストエディタで記事を書いてプッシュする」、これだけです。 先頭で紹介した GitHub Pages、Cloudflare から CircleCI までを全部取り揃えると、楽にサイト運営ができます。

プログラマーにとっては、プログラムを作成するのと同じ、いつものエディタでマークダウンで記事を書いて、 プッシュしたら、数分後には公開されるというのが、ここち良くもあります。
ワードプレスや、はてなブログではなくて、いつものエディタで・・・というところに、こだわりたい人には、 おすすめです。

レスポンスの軽いキビキビ反応するサイトを構築する

サイトのレスポンス性能がよいと、それだけで、CVRが上がると言われているため、 レスポンス時間を100ミリ秒単位で削る工夫をするわけですが、 その解決策の1つとして、静的サイトジェネレータを使って、 サーバーサイドの処理時間を削減する方法があります。

ブログのような、1日の中で、頻繁に更新されるようなコンテンツじゃないなら、 あらかじめ、静的な HTML として生成しておいて、サーバーサイドでの処理時間をゼロに 近づけるという方法です。
コンテンツの性質にもよるので、一概に、すべてに適用できるわけではありませんが、 例えば、ワードプレスでサイトを運営しているポータルサイトなど、コンテンツの性質を 見返してみて、静的サイトへの転換を検討してみてもよいかもしれません。
静的サイトジェネレータと、クラウド上のサービスを組み合わせることで、 現状の機能をそのままに、劇的に、反応を高められる可能性があります。

さらに、静的サイトの設置先として、Amazon の S3 や、GitHub Pages を選択すると、 そのサービス自体が、すでに、大多数のユーザーのために、性能バランスを取っているので、 レンタルサーバーをやめて、転居してみることも、あわせて、検討してみてはどうでしょうか?

\(^▽^*) 私たちと一緒に働いてみませんか? (*^▽^)/

少しでも興味をお持ちいただけたら、お気軽に、お問い合わせください。

採用応募受付へ

(採用応募じゃなく、ただ、会ってみたいという方も、大歓迎です。)