Parseを使って静的Webサイトからメールを送信する方法

今回は、BaaS（Backend as a Service）／MBaaS（Mobile Backend as a Service）にカテゴライズされるサービス「Parse」を使って静的Webサイトからメールを送信する方法をご紹介します。

はじめに

JekyllやOctpressなどで生成した静的コンテンツをAmazon S3上に配置して静的Webサイトを構築するデザインパターンは、スケーラビリティ、可用性、パフォーマンス、コストなど様々なメリットがあります。しかし、静的Webサイトで利用できるのは、HTML、CSS、クライアントサイドJavaScriptなどに限定されます。

例えば、静的Webサイト上の登録フォームで入力された内容をメールで送信する場合、技術的にはクライアントサイドJavaScriptからSendGridのAPIを直接コールして送信することもできますが、SendGridの認証情報をクライアントサイドに埋め込むことはセキュリティ的にNGです。こういったケースでは、サーバサイドの実装が必要になりますが、そのために実行環境から用意するのはちょっと手間、という場合に重宝するのがBaaS／MBaaSです。この種のサービスは、Webアプリケーションやモバイルアプリケーションを構築する際に必要となる共通的なバックエンド機能を提供します。ここにSendGridのAPIをコールする処理を実装して、クライアントサイドJavaScriptから呼び出すことで安全にコードを実行できます。

準備

サーバサイドの実装

まず、Parse上で動作するサーバサイドの実装から始めます。Parse command line toolsを使って「emailer」という名前の新しいプロジェクトを作成します。コマンドライン上で次のコマンドを入力してください。

$ parse new -a emailer

途中、いくつか入力を求められますので、Parse上で実行するサンプルコード付きの新規プロジェクトを作成してください。

プロジェクトが作成できたら、emailerフォルダ内に移動して、cloudとpublicというフォルダが作成されていることを確認します。

$ cd emailer
$ ls
cloud    public

cloudフォルダ配下のmain.jsファイルの末尾に次のコードを追記します。そして、to、username、password各変数に設定を行います。

Parse.Cloud.define("sendEmail", function(request, response) {
  // 実運用では不正利用を防ぐためにクライアントから渡された
  // ユーザセッション情報のチェックを行う必要があります。
  // 本サンプルでは省略しています。
  var to = "通知先アドレスを設定";
  var username = "SendGridユーザ名で置換";
  var password = "SendGridパスワードで置換";

  var sendgrid = require("sendgrid");
  sendgrid.initialize(username, password);
  var name = request.params.name;
  var email = request.params.email;
  var message = request.params.message;

  sendgrid.sendEmail({
   to: to,
   from: email,
   fromname: name,
   subject: "Webサイトから登録がありました",
   text: "名前: "+name + "nメールアドレス: " + email + "nメッセージ:nn" + message
   }, {
     success: function(httpResponse) {
       console.log(httpResponse);
       response.success("送信完了!");
    },
     error: function(httpResponse) {
       console.error(httpResponse);
       response.error("送信失敗!");
    }
  });
});

編集が終わったら、このコードをParseにデプロイします。

$ parse deploy

静的Webページの作成

次に、静的Webページを作成します。次のような内容のファイルを適当なWebサーバ上に配置します。ファイル名は何でも構いませんがcontact.htmlとしておきます。

<html>
  <head>
    <title>フォーム</title>
    <style type="text/css">
      #response { display:none; padding: 5px;}
      .success { background-color: green;}
      .error { background-color: red;}
    </style>
  </head>
  <body>
    <div id="response"></div>
    <form id="myForm">
      <label>名前</label>
      <input type="text" id="name"><br />
      <label>メールアドレス</label>
      <input type="email" id="email"><br />
      <label>本文</label>
      <input type="text" id="message"><br />
      <button type="submit">送信</button>
    </form>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://www.parsecdn.com/js/parse-1.6.7.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        // Parse Javascript SDKの初期化
        Parse.initialize(
          "ParseのApplication IDを設定します",
          "ParseのJavaScript Keyを設定します"
        );
        // Setup the form to watch for the submit event
        $('#myForm').submit(function(e){
          e.preventDefault();
          // 実運用ではサーバサイドの機能の不正利用を防ぐために
          // ユーザセッションチェックに必要な情報を渡す必要があります。
          // 本サンプルでは省略しています。
          var data = {
            name: $('#name').val(),
            email: $('#email').val(),
            message: $('#message').val()
          }
          // Parseのクラウド側コードにdataを渡して実行
          Parse.Cloud.run("sendEmail", data, {
            success: function(object) {
              $('#response').html('成功!').addClass('success').fadeIn('fast');
            },
            error: function(object, error) {
              console.log(error);
              $('#response').html('失敗!').addClass('error').fadeIn('fast');
            }
          });
        });
      });
    </script>
  </body>
</html>

なお、28〜29行目のParse.initialize()の引数にParseのApplication IDとJavaScript Keyを設定する必要があります。これらの情報はParseのダッシュボードで確認できます。