静的サイトから使える メール通知 API
Postable という誰得すぎるメール通知API をつくりました.
やりたいこと
- 静的サイトジェネレーターでつくったサイトに, コンタクトフォームを置きたい
- 静的サイトは “静的” なままにしたい
Jekyll や Middleman のような静的サイトジェネレーターはすごく便利です.
ですが, ちょっとしたものを足したいときにすごい悩む. 私の場合は “コンタクトフォームを置きたい” でした.
- それだけのために, ruby とか python とか php を動かしたくない
- Google フォームでもいいけど, ちょっと大掛かりすぎる
- 将来デザインが崩れるかもしれないので, iframe での埋め込みは避けたい
こんな感じで, POST リクエストを受けてメールを送る だけのAPI があればべんりそう!
なので作りました.
つかいかた
1. Dashboard 上でフォームを作る
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 を静的サイトに移行させたい
- コメント管理機能をPostable に実装
- これで ブログやサイトのJekyllへの移行 ができる