昔はブログを書いているとトラックバックで反応がありましたが、 いまどきブログを書いている人はほとんどいないと思うので、 ポストの下にメールフォームを設置してみました。
感想などあれば、Twitter で反応するぐらいのノリで気軽に送ってください。 なお送ったコメントは私にメールで届くだけで、 ブログ上には表示されません。
実現方法
バックエンドには getform の無料プラン(50通/月まで)を、 スパム対策として Google の reCaptcha と組み合わせて使っています。
getform は基本的にはフォームを設置して、 送信先を getform にするだけで使えます(変更内容)。 getform 側でメール転送先をしておけばポストされた内容がメールで届きますし、 Zapier と連携させると Slack など他のサービスに通知を送ることも可能です。
上の変更内容には javascript コードも含まれていますが、 これは「コメントを送る」ボタンがクリックされたタイミングで reCaptcha の API を呼び出して、 ボット判定しているためです。 getform が標準で提供している SPAM フィルタで十分ならば、 一行もコードを書く必要はありません。
裏話
サイトジェネレーターとして先日まで jekyll を使っていましたが、 jekyll は少しコードが入り組んでいて追いにくいのと、 個人的に jekyll を実装するのに使われているプログラミング言語 Ruby より Go 言語のほうが慣れているので、 Go 言語で書かれた hugo に切り替えました。
私は Web フロントエンド開発は仕事で関わったことがないので、
javascript や CSS まわりの最近の事情はよく分かっていないです。
とはいえ、
さすがに今どき document.onload = function() {...}
などとベタ書きするのもどうかと思ったので、
少し jQuery を調べて使ってみました。
リファレンス読んでいくつか小さなコードを書いただけですが、
Javascript を書くときに面倒な部分が、
かなり簡略化されます。
これは良い。
あとスタイルファイルは A Day in the Life の記事 を参考にしました。 リファレンスを読みつつ、 Chrome の開発者向けツールを使って CSS プロパティを変更して、 影響を逐次理解。 Web だとスタイルを設定する方法がいろいろあるため、 最終的にどの設定が効いているのかコードを読んでも良く分からないことがありますが、 開発者向けツールを使うと一目瞭然。 裏で非同期で通信している内容もキャプチャできる。 便利。