2020年。Gatsbyなどを使ってブログをゼロから一晩で作れる時代になった。特に投稿を、レポジトリの一部として、Github/Gitlabに保管すると、staticなプロジェクトとしてデプロイもすごく楽。だが、コメント機能を実装したければ、もともと不要だったデータベースが必要になって、一気にめんどくさくなる。自分でDBを管理したくない人は、Disqusのようなthird-partyサービスを使う選択肢もあるけど、有料。そこにWebmentionが登場する！
Webmentionとは
厳密にいえばWebmentionというのはプロトコルの名前である。そして現在は、W3Cの勧告である。
ただ、SNS・チャットによくあるみんなお馴染みの「メンション」のような概念として理解しても良い。Twitter/FB/Instagramと違って、自分のブログを誰が読んで、どこでリンクをシェアしているかは、Googleの分析を見ないとわからないし、ほかの人にも見えないが、Webmentionを導入すれば、その情報を取得できるようになるし、サーバーを所有していればその情報の所有権も自分にある。そして、自分のブログで、SNSと同期して反応した人の返信や「いいね」まで表示できるようになる！
「いいね」も返信も表示されている。
Webmentionの導入
Webmentionを導入するには、最低限、二つの条件が必要：
- メンションしたい側がWebmention用のエンドポイントに、メンションが存在するリンク (
source) と、メンションされているリンク (target) を含めたPOSTリクエストを送る。ここの例を参照
curl -si https://webmention.io/aaronpk/webmention \
-d source=https://aaronpk.com/reply.html \
-d target=https://aaronparecki.com/2018/06/30/11/your-first-webmention
- メンション受けたい側が、Webmention用のエンドポイントを用意する。
ただ、TwitterやFBはWebmentionを自動的に送らないし、シェアしている人にいちいち手動でウェブメンションしてもらうこともない。
そこで、Bridgyのような無料サービスが、登録したSNSのAPIを使って（APIないサービスを定期的にクロールして）、いいねとかリツイートとかのメンションを見つけたら、代わりにWebmention用のエンドポイントを叩く。NetlifyやNowのようなstaticなホスティングを使いたい場合、エンドポイントを用意するのはなかなか難しいと思うけど、代わりにエンドポイントになってくれるサービスもある。Webmention.ioはそのひとつで、僕が現在使っているサービス。ただ、もちろんこの場合メンションの情報はWebmention.ioに保管されることになるので、Webmention.ioが指定しているGETリクエストでそれをまず取得する必要がある。（以下もWebmention.ioを使う前提で書いてある）
このように、OSSでもあるこの二つのサービスを使うことで、Webmentionフローを簡単に導入できる。
最後に、Webmention.ioが正しく機能するように以下のステップが必要：
たとえばツイッターのメンションを受けたい場合は、ツイッターのプロフィールに自分のブログ・ウエブサイトへのリンクを貼る (インスタの場合は、インスタのプロフィールにetc)
自分のウェブサイトのページに、自分のツイッターのプロフィールへのリンクを貼る。これはやり方が二つあって、ひとつは
<head>にrel="me"の<link>を追加する。
<link href="https://twitter.com/maaiiya8" rel="me">
または、すでにページ上にツイッターのプロフィールへのリンク(<a>)があれば、それにrel="me"を追加するだけでもいい
- 自分のウェブサイトのページの
<head>に以下を追加する (phantasiai.devの代わりに自分のドメインを書く）：
<link rel="webmention" href="https://webmention.io/phantasiai.dev/webmention" />
<link rel="pingback" href="https://webmention.io/phantasiai.dev/xmlrpc" />
これでWebmentionの導入は大体完了！
自分のブログのすべてメンションを以下のように取得できる (tokenはWebmention.ioにもらうAPIキー）：
GET https://webmention.io/api/mentions.jf2?domain=phantasiai.dev&token=xxxxx
このような情報が返ってくる：
wm-propertyは表示する際かなり役に立つプロパティである。それを見て、たとえばlike-ofだったらいいねだということがわかる。返信だったらin-reply-toになる。
Webmentionを取得・表示する
上記の情報をどうするかは、あなたの自由でこの投稿の範囲外だが、自分のページに表示したい場合は、主に二つのアプローチがある:
- ビルド時に取得する
- クライアント側で取得する
Gatsbyで作った僕のブログでは、ビルド時に取得している。ただ、新しいメンションがあるのに、まだビルドしていない状況ちょっと嫌だなと思ったときに、Webmention.ioでは通知のたびに実行するWebhooksがあることを発見。僕の場合は、Netlifyを使っているで、ビルドHookへのリンクをWebmention.ioに登録すると、メンションがあるたびにブログが再ビルドされる。これで、完全にstaticでありながらフレッシュな情報を表示できる！
具体的なやりかたはPart 2で書きます。
注意
現在は、BridgyはBrotliに対応していない。つまりあなたのページはBrotliで提供されているなら、Bridgyを使うことができない。それはBridgyが使っているGoogle App Engineのバグのせいであって、将来は修正されるはず。