コメントを再び偉大に

このブログではこれまでコメント機能を使っていませんでしたが、ずっと実装したいと思っていました。 Disqus を試したこともあります。よくできたサービスでしたが、結局のところ私のニーズには合いませんでした。

Disqus について思うこと

Disqus にはブログ記事について議論するためのリッチな UI と機能が揃っていますが、次の点が気になります。

• 匿名コメントができる
• 広告が表示される

匿名コメントについては、ありがたいことにこのブログには読者からのコメントがほとんどありません。しかし最近では、多くの著名人が執拗で攻撃的なコメントを浴びせられ、精神を病んでしまうケースが相次いでいます。この小さな個人ブログで同じことが起きないとは、誰にも言い切れません。

広告が表示されるということは、Disqus がユーザー情報をトラッキングしているということです。読者にセキュリティ面の心配をさせたくありません。

utterances への移行

そこで utterances を使うことにしました。 utterances は GitHub Issue API の上に作られていて、コメントは個々の GitHub Issue に保存されます。

utterances は主な特徴として次の点を挙げています。

Open source. 🙌
No tracking, no ads, always free. 📡🚫
No lock-in. All data stored in GitHub issues. 🔓
Styled with Primer, the css toolkit that powers GitHub. 💅
Dark theme. 🌘
Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

なかなか良さそうだと思いませんか?

コメントするには GitHub での認証が必要ですが¹、これは GitHub Issue がゲストによる書き込みを許可していないためです。

私はこのブログを個人のクラウドでホスティングしていて、コードは GitHub に置いています。コメントを Issue で管理するほうが、私にとっては理にかなっています。

utterances の実装

ここでは Hugo ブログでの実装方法を紹介します。 とはいえ、私の場合は数行を追加するだけで済みました。

config.toml に次の行を追加しただけです。

[params.utterances]
    repo = "junkpiano/yusuke.cloud"
    issueTerm = "pathname"

なお、これはブログのテーマによって異なります。テーマごとに設定方法が違うので、使っているテーマの README を参照してください。

config.toml の記入が終わったら、ブログを起動してみましょう。

hugo serve -D # -D option includes draft posts. Remove it if you don't need it.

すると、記事の下部にコメントフォームが表示されるはずです。

まとめ

これでコメントを受け取れるようになりました。ぜひ下のコメント欄で挨拶していってください!