Mandrillを使ってJavaScriptだけでメールを送る

このブログを置いているGitHub Pagesでは PHPとか動かすことが出来ないわけですが、 そんな状況でメールをブログ側から送りたいと思った時、 JavaScriptだけでメールを送る方法があったのでそれについて。

• Mandrill

Mandrill

Transactional Email from MailChimp - Mandrill

Mandrillというサービスがあって、このサービスのAPIを使うと JavaScriptだけでメールを送ることが出来ます。

無料だと、月に12000通まで送ることが出来て、 それ以上使いたい場合には100万通までは1000通毎$0.20、 それ以上で500万通までは$0.15/1000通、 それ以上では$0.10/1000通で増やせるとのこと。

また、一時間当たりの制限というのもありますが、これは使用状況によって 適時変更されるようで、 取り敢えず今最初に登録した時には252通/hでした。 (自分だけではなくて他の人の使用状況にも依るのかもしれません。)

このAPIを利用するために、まずSign Upして、 ログインすると、Settingsという項目で APIのKeyを取得することが出来るので取ってきます。

後は、https://mandrillapp.com/api/1.0/messages/send.json に向かってajaxでpostしてあげるだけでOK。

まず、次のようなJavaScriptを用意します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function sendMail(){
  $.ajax({
    type: "POST",
    url: "https://mandrillapp.com/api/1.0/messages/send.json",
    data: {
      'key': 'YOUR_KEY',
      'message': {
        'from_email': '[email protected]',
        'to': [
          {
            'email': '[email protected]',
            'name': 'YOUR_RECEIVER_NAME',
            'type': 'to'
          }
        ],
        'subject': 'title',
        'html': 'html can be used'
      }
    }
  });
}

送るdataについては Messages API Mandrill を参照。

取り敢えずは最低限上の様な感じでOKだと思います。 from_emailに関しては、[email protected]みたいなメールアドレスとして validな感じだとなんでも送ってくれるみたいでした。

宛先はtoで指定してるところですが、これは配列になってるのが見れるように、 複数の宛先を指定することも可能です。

htmlに値を指定するとhtmlが送れます。 ただのテキストを送りたいときはtextという値に指定してあげます。

次に、これをheadの中などで読み込みます。 jQueryが必要なので忘れずに。

1
2

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./utils.js"></script>

後は、使いたい所でボタンでも作ってそこで上の関数sendMailを 呼ぶようにしてあげれば良いだけです。

1
2
3

<form name="mail">
<input type="button" value="Click!" onClick="sendMail()">
</form>

これだけでGitHub Pagesの様な静的なホストからでもメールを送れるようになります。

Mandrillの自分のページでも、メールの管理も出来るのでちょっと便利。

「こ」「ン」「に」「ち」「は」