LGTM

Looks Good To Me

静的サイトから使える メール通知 API

Postable という誰得すぎるメール通知API をつくりました.

やりたいこと

  • 静的サイトジェネレーターでつくったサイトに, コンタクトフォームを置きたい
  • 静的サイトは "静的" なままにしたい

JekyllMiddleman のような静的サイトジェネレーターはすごく便利です.

ですが, ちょっとしたものを足したいときにすごい悩む. 私の場合は "コンタクトフォームを置きたい" でした.

  • それだけのために, ruby とか python とか php を動かしたくない
  • Google フォームでもいいけど, ちょっと大掛かりすぎる
    • 将来デザインが崩れるかもしれないので, iframe での埋め込みは避けたい

こんな感じで, POST リクエストを受けてメールを送る だけのAPI があればべんりそう!

なので作りました.

つかいかた

1. Dashboard 上でフォームを作る

f:id:codeout:20140406002356p:plain

Bootstrap 臭がしますね.

さて, フォームは field と email がそれぞれ複数ひもづきます.

  • field は <form> 内の<input><textarea> に対応します. いくつかvalidation ルールも設定できます.
  • email は, このフォームがsubmit されたときの通知先です.

2. 静的サイト内の<form> を編集する

フォームを作成すると, API Endpoint (URL) が自動生成されます.

静的サイト内に<form> を置き, action 属性としてAPI Endpoint を設定します. 設定したAPI にはXHR でpost するようにしてください.

HTML

<!-- Replace URL with yours that is displayed in the Dashboard -->
<form action='https://postableapi.herokuapp.com/ca8cdb58-df12-46ed-8f4f-4a135a8315c4' id='query'>
  <input type='text' class='form-control' id='name' name='name'/>
  <input type='email' class='form-control' id='email' name='email'/>
  <textarea class='form-control' id='message' name='message'></textarea>

  <button class='btn btn-lg btn-primary'>Submit</button>
</form>

JavaScript

$(function() {
  $('#query').on('submit', function(event) {
    event.preventDefault();

    $.ajax({
      type: 'POST',
      url:  $(this).attr('action'),
      data: { name: $(this).find('#name').val(),
              email: $(this).find('#email').val(),
              message: $(this).find('#message').val() }
    });
  });
})

以上です. 静的サイト内の<form> をsubmit すれば, 設定した通知先にメールが飛びます.

詳しくは Postable にサインアップ後のドキュメントを見てくださいね.

追加したい機能

  • form の validation 種別を増やす
  • email だけではなく, SMS やtwitter などの通知方法を追加
  • IFTTT のChannel になりたい
  • 裕福になって, domain 取得 (独自domain でのhttps が高い)
  • blog を静的サイトに移行させたい