ブログからコメントを送れるようにしました

昔はブログを書いているとトラックバックで反応がありましたが、 いまどきブログを書いている人はほとんどいないと思うので、 ポストの下にメールフォームを設置してみました。

感想などあれば、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 だとスタイルを設定する方法がいろいろあるため、 最終的にどの設定が効いているのかコードを読んでも良く分からないことがありますが、 開発者向けツールを使うと一目瞭然。 裏で非同期で通信している内容もキャプチャできる。 便利。