趣味のNote

webmention.io

作成:

WebmentionでFediverseからの反応をサイトに表示する

Webmentionははるか昔ブログがトラックバックとかしていたものの現代版的なものらしい。(SNS的なリアクションに対応した)

以下で詳しく解説されています。

リンク先消滅

そんなわけでwebmention.ioのAPIを利用して以下のように投稿の下部にFedicerseからの反応が表示できたので書いておく。

u-photoが自動付与されてるかのテスト
テスト投稿
u-photoが自動付与されてるかのテスト favicon https://ubanis.com/note/ap/2023-1028-1306
u-photoが自動付与されてるかのテスト

ViewTransitionは無効にした

Astro公式ではastro:afterswapなどを利用してTransitionを有効にしたままスクリプトが動作するとあったもののいろいろ試したが動作しないため外した。

正しいやり方があるのかもしれないが今のところはあきらめる。

Webmentionのタグ

まずwebmention.ioへ行きサイトアドレスを入力する

Webmention.io
Webmention.io favicon https://webmention.io

すると以下のようなサイトの<head>内に貼るタグを表示してくれる。

<!-- https://ubanis.com と入力した場合 -->
<link rel="webmention" href="https://webmention.io/ubanis.com/webmention" />
<link rel="pingback" href="https://webmention.io/ubanis.com/xmlrpc" />

これらをサイトの<head>内に貼り付ける。
pingbackは古いプロトコル。昔あったTrackbackはスパム問題で終わったらしい。

webmention.jsの準備

記事ページからwebmention.ioからデータを取得して表示するスクリプトがあるので以下のGithubページからwebmention.min.jsをダウンロードする。

webmention.js/static at main · PlaidWeb/webmention.js
Client-side library for rendering webmentions from webmention.io - PlaidWeb/webmention.js
webmention.js/static at main · PlaidWeb/webmention.js favicon https://github.com/PlaidWeb/webmention.js/tree/main/static
webmention.js/static at main · PlaidWeb/webmention.js

このスクリプトを<script>タグから参照可能であるAstroプロジェクトフォルダのpublic以下に置く。

投稿ページ生成部分の編集

/src/layouts/BlogPost.astroの記事本文の下に以下のなブロックを書く。webmention.min.jsがpublicフォルダ直下にあるものとする。

/src/layouts/BlogPost.astro
---
---
<!-- 省略 -->
<div>
  <script src="/webmention.min.js" data-max-webmentions="60" async></script>
  <div id="webmentions"></div>
</div>

<script>のオプションdata-max-webmentionsは取得する最大通知数でいいねやリプライの合計値になる。これが多すぎると画像も取得するので通信に時間がかかりすぎるためと思われる。(デフォルト値は30)

スタイルシートの設定

Githubページの同じstaticフォルダ内にwebmention.cssというスタイルシートのサンプルがあるのでこれを参考に自分のサイトに合わせてスタイルシート設定を追記する。

#webmentions {
  margin: 2rem 0 0 0;
  line-height: 1.2em;
}


#webmentions .comments {
  font-size: 100%;
}


#webmentions h2 {
  font-size: medium;
  margin: 0;
  padding: 2px;
  background: #ccc;
}


#webmentions .reacts img {
  margin: 3px -1ex 1px 0;
}


#webmentions img.missing {
  background: white;
  border: dashed black 1px;
}


#webmentions ul {
  list-style-type: none;
  margin: 0;
  padding: 4px;
}


#webmentions li {
  text-indent: -1em;
  padding-left: 1em;
}


#webmentions a.reaction {
  position: relative;
  text-decoration: none;
  text-shadow: 0px 0px 3px white;
  margin-right: 0;
  letter-spacing: -1ex;
  margin-right: 1ex;
}


#webmentions a.reaction img {
  max-height: 2em;
  width: auto;
  margin-right: -1ex;
  border-radius: 25%;
}


#webmentions a.reaction sub {
  font-size: 80%;
}


#webmentions .comments li {
  white-space: wrap;
}


#webmentions .comments li .text {
  color: #555;
  text-decoration: none;
}


#webmentions .comments li .name {
  color: #111;
}

リアクション表示の確認

ここまでしたらデプロイした後にFediverse上にある投稿に他のアカウントからいいねなどをして該当ページにリアクションが表示してあれば成功となる。

webmention.ioに通知が届いているかの確認

以下のようにURLを指定してcurlコマンドで通知データが取得できる。配列が空ならばそのURLからの通知は受けていないことになる。

Terminal window
curl "https://webmention.io/api/mentions.jf2?target=https://ubanis.com/note/ap/2023-1028-1306"

気になったところ

自分のAstroでリンクに余計なスラッシュを付ける部分があったため気づいた。(修正済み)webmention.jsの動作もひとつ。

投稿通知のURLの末尾のスラッシュ

URLの末尾のスラッシュの有無がそれぞれ別の投稿扱いになるのに注意。(Bridgy-Fedも別の投稿としてFediverseに投稿する)

以下は実験のためにcurlでスラッシュ付きURLを通知した後にいいねやリプライをしたもの。

u-photoが自動付与されてるかのテスト
テスト投稿
u-photoが自動付与されてるかのテスト favicon https://ubanis.com/note/ap/2023-1028-1306
u-photoが自動付与されてるかのテスト
u-photoが自動付与されてるかのテスト
テスト投稿
u-photoが自動付与されてるかのテスト favicon https://ubanis.com/note/ap/2023-1028-1306/
u-photoが自動付与されてるかのテスト

それについたリアクションもスラッシュがあるページとないページで別扱いになる。

自分のサイトは基本的にGithub Actionsの通知スクリプトはスラッシュがないものを通知しているので意図的にスラッシュのついたURLをcurlで通知しなければ問題はない。

ユーザーがURL末尾にあえてスラッシュを付けて表示するとリアクションなどが表示されないことにはなる。

同じユーザーの二つめのコメントは表示されない

curlで確認するとちゃんとデータはあるがwebmention.jsは表示しないようだった。

最後に

サイトにリアクションが表示されていてもほとんどの人が見ないのでは。 投稿はFediverse上にあるので。

普通のSNSアカウントがいかに便利かがよくわかる。