記事の下に「お便り」欄を置いた ― コメント欄をやめてメールで受け取る形にした

この記事の一番下に「この記事にお便りを送る」という折りたたみが出ているはずだ。開くと、名前と本文の入力欄がある。

送信ボタンを押すと、内容はブログを書いている自分あてにメールで届く。ページ上には何も表示されないし、他の読者にも見えない。

今日、記事下のコメント欄をこの形に入れ替えた。

お便りをお待ちしています

先に用件から書きます。記事を読んで何か思うことがあったら、記事の下のフォームからお便りを送ってください。

このブログには写真日記が1600本以上あって、猫の写真と町田の飲食店と Forza Horizon とAIツールの話が同じ場所に並んでいます。書いている側からは、どれがどう読まれているのかアクセス数でしか分かりません。

「この猫は何歳ですか」でも「この店まだやってますか」でも「その設定、間違ってますよ」でもかまいません。お名前はニックネームで結構です。

返信は約束できませんが、全部読みます。お便りお待ちしています。

以下は、そのお便り欄をどう作ったかの話です。

公開コメント欄ではなく「お便り」にした

これまで置いてあった giscus は、コメントを書く側に GitHub アカウントを求める。猫の写真と伊豆の海鮮丼を見に来た人にログインしてもらうのは無理がある。結局一度も有効にしないまま、今日削除した。

代わりに置いたのは、送信内容がこちらのメールに届くだけのフォームだ。届いたものを自分が読んで、載せてよいと判断したものだけを手で記事に書き写し、そのとき返事も添える。時間差のあるコメント欄だと思ってもらえばいい。

こうしておけば、荒らしやスパムがそのまま表に出ることはない。承認制のコメント欄と考え方は同じで、承認待ちのデータを溜めておく場所も要らない。

返事は任意で、書かなければ返信欄そのものが出ない。

仕組み

このブログは Hugo で作った静的サイトを Cloudflare Pages に置いているだけで、サーバー側で動くプログラムがない。フォームの送信を受け取る先は、外に用意する必要がある。

受け口は Web3Forms

送信先には Web3Forms を使った。フォームの内容をメールに転送するサービスで、無料枠が月250件ある。

<form> の action にサービスの URL を書き、発行されたアクセスキーを hidden で埋める。それだけで動く。

1
2
3
4
5
6
<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="be783874-...">
  <input type="hidden" name="subject" value="[お便り] 記事タイトル">
  <input type="hidden" name="記事" value="https://hide10.com/post/xxxx/">
  ...
</form>

アクセスキーは HTML に書き出される公開値で、隠す前提のものではない。漏れたところでできるのは「そのフォームから送信する」ことだけで、受け取り先のメールアドレスは表に出ない。

件名と記事 URL も hidden で一緒に送る。届いたメールを見れば、どの記事宛てのお便りかがすぐ分かる。

記事ごとにフォームを作り分ける必要はなく、Hugo のテンプレート側で .Title と .Permalink を差し込んでいる。

Cloudflare Workers は使わなかった

自前で受けるなら Cloudflare Workers を1本書けば済む。ただしこのブログは Workers Paid プランのアカウントで動いていて、静的ファイルの配信は無料でも、スクリプトの実行には従量課金がかかる。

お便りを受けるためだけに、実行回数で課金される部品を増やしたくなかった。外部サービスの無料枠に任せれば、サイト側は静的なままで済む。

掲載データは Hugo の data ファイル

届いたお便りのうち、載せるものは site/data/letters.yaml に手で書き写す。

1
2
3
4
5
6
7
8
diary-20260704:
  - name: "ねこすき"
    date: "2026-07-26"
    body: |
      伊豆の海鮮丼、おいしそうですね。
      今度行ってみます。
    reply: |
      ありがとうございます。吉丸は混むので早めがおすすめです。

キーは記事のディレクトリ名。テンプレート側は .File.ContentBaseName で自分の記事名を取り、この YAML から該当分を引いて並べる。

本文と返信は Markdown として解釈されるので、リンクや強調がそのまま使える。送信者のメールアドレスは、このファイルには書かない。

あとは通常どおりビルドしてデプロイすれば記事に出る。データベースは要らず、ページの表示時に外部へ問い合わせも行かない。

スパム対策

フォームには honeypot を仕込んだ。 display:none で人の目には見えないチェックボックスで、自動でフォームを埋めるプログラムだけがここにチェックを入れる。埋まっている送信は Web3Forms 側ではじかれる。

入力欄には文字数の上限も付けた。名前が40文字、本文が2000文字。

メールアドレスの入力は任意。返信が要る場合だけ書いてもらえばよく、公開はしない。

これで全記事の下にお便り欄が付いた。この記事の下にもある。

参考

Web3Forms ― フォーム送信をメールに転送するサービス
giscus ― GitHub Discussions をコメント欄として使うツール
Data sources | Hugo ― data/ 配下の YAML をテンプレートから読む仕組み

この記事は Claude Opus 5 が執筆しました。