記事末にいいね（拍手）を置く (#1949)

[ma91n]

#1949。記事末に「いいね」を置き、押された数を Cloudflare Worker + KV に記録します。

サイト初の JS ではありません — #2565（記事末のリンクのコピー）が PR #2730 で公開済みで、social-button.ejs は既に navigator.clipboard を呼んでいます。これはその2つ目です。

段階	内容	状態
1	Worker + KV	済み
2	ブログ側の見せ方	済み
3	毎日のダンプ取り込みと本番デプロイ	Cloudflare アカウント作成待ち

このままマージしても画面は変わりません。 themes/future/_config.yml の likes_endpoint が空で、li が hidden のままです。段階3で Worker の URL を入れたときに出ます。

方針の変更（issue から）

issue の構成案は GET /count?path=... を読者のブラウザから叩く形でしたが、数の表示はビルド時に焼き込む形に変えました。記事ページの表示ごとに問い合わせると全記事ページに外部への通信が1本増えます。はてブ数も PV も update-cache.yml が毎日取って JSON にコミットしているので、いいねもそこへ乗せれば読み取りはゼロです。JS が走るのは叩いたときだけ。

代償は「他人のいいねは翌日反映」ですが、隣に並ぶはてブ数が同じ遅延なので数の新しさが揃います。

Worker（workers/likes/）

• POST /like/<記事ID>?n=<個数> — 1人3つまで。上限は Worker が持つ

• POST /unlike/<記事ID> — その読者のぶんだけ引いて記録も消す

• GET /dump — Bearer トークンで保護。バッチが毎日叩く

• KV のキーは URL ではなく記事ID（like:20260804a）。alias で URL を付け替えても数が残る

• 数は値と metadata の両方に持つ。 ダンプは list() の metadata から読むので記事数ぶんの get を撃たない（Workers 無料枠は1リクエスト50サブリクエストまで）

• 生の IP は保存しない。 塩を足した SHA-256 を TTL 24時間で置く

• 連打はまとめて1回送る（叩き終わってから 800ms）。1つずつ送ると KV の書き込みを3倍消費する（無料枠は1日1,000）

• 連打と総当たりは Rate Limiting binding で止める。 KV を触らないので書き込み枠を消費しない

• Durable Objects は使わない。 get→put は競合しうるが、いいね数は1件の差が読者の判断を変える数字ではない

見せ方

共有ボタンと同じ行の左端に、56px の錠剤（丸のちょうど2倍）。器・ボタン・数字は共有ボタンと同じ部品（.share-item / .share-btn / .share-count）で、CSS の差は幅と押した後の色だけです。

• マークは拍手。 サムズアップは Facebook の「いいね」と同じ記号で隣に本物が並び、ハートは一覧の ♡（総シェア数）と重なる。拍手はどちらとも当たらない
  • Tabler に拍手が無いので、線画は Phosphor Icons（MIT）、塗りは Font Awesome Free（CC BY 4.0）。Phosphor の fill は後ろの手しか塗らず線画とほぼ同じ絵になるため使えない（描いて確認）
  • 辞書が { viewBox, fillRule, paths } のオブジェクトも取れるようにした
• Medium の拍手と同じで何度でも叩ける。 数が増えるのは3つまでで、上限の後も叩けるが増えるのは見た目だけ
• 取り消しは長押し（1秒）。押し始めて 250ms で「長押しでキャンセルします」（グレーの吹き出し）を出してから実行する。キーボードは長押しできないので、上限の後にもう一度押すと取り消し（click の detail で見分ける）
• 入れた後は絵・数字・枠をクリムゾンにそろえる。 暗い側は絵と枠を crimson-on-dark（3.46）に替え、数字は文字なので 4.5 に届かず赤くしない
• :focus ではなく :focus-visible — .share-btn が :focus で書かれていて、マウスで押した後もフォーカスが残る間ずっと反転したままだった。共有ボタンごと直した

叩いたときに起きること

1. 絵が跳ねる（like-pop）
2. やわらかい光と、上と横へ散る小さな点（like-bloom / like-sparks）。硬い輪は衝撃波に見えたので輪郭を持たせない。下へ飛ぶ点は持たない（ボタンの下の数字に重なるため）
3. 小さな風船が浮かぶ（.like-float）。1つずつ別の要素なので前のが浮いていても消えない。数は段が上がるほど増える
4. 3つ目に届くと +3 の札（クリムゾンのチップ・白文字）。1つだけ、決まった場所に。 散らばると、そのぶん送られたように読めてしまう。出ている間にもう一度叩かれたら小さく揺らすだけ
5. 叩き終わってから「ありがとうございました！」（クリムゾンの吹き出し）を2秒。一度きり

1つ目・2つ目・3つ目で祝いが一段ずつ強くなります。 強さは li の is-level-N が持ち、CSS 変数（--pop-scale / --burst-alpha / --burst-bloom / --burst-spread）で跳ねと光と点にまとめて効かせます。

prefers-reduced-motion: reduce では動きを全部止め、結果だけを出します。

動作確認

Worker（wrangler dev、アカウント無しの Miniflare）

叩いたもの	結果
/like を1→2→3→4回	mine が 1→2→3→3（上限で止まる）
?n=3 でまとめて	一度で likes:3, mine:3
/unlike	likes:0, mine:0。二度目も 0 のまま
Origin 無し / 別オリジン	403
不正な記事ID	400
GET /dump トークン無し / 有り	401 / 200
同一IPから30連打	17回目まで 200、以降 429
1,212件を入れてダンプ	list() 2ページ・18,070 bytes・32ms

ブラウザ側（生成物の inline script を DOM スタブで Node 実行）

場面	数	札	浮かぶ風船	礼
1拍手	1	－	1個	－
2拍手	2	－	3個	－
3拍手	3	+3	6個	－
4拍手	3（増えない）	+3（揺れ）	9個	－
叩き終わり	3	－	－	出る
長押し	0	－	－	出さない
再訪（記録あり）	焼き込み値	－	－	出さない（跳ねも走らない）
通信が届かない / 429	戻る	－	－	出さない

未処理の reject は残りません。一覧ページ（共有ボタン25組）にいいねボタンは0件で、記事ページだけに出ます。make lint-css / make lint-partials / textlint とも通過。

段階3でやること

• themes/future/_config.yml の likes_endpoint に Worker の URL を入れる
• update-cache.yml に GET /dump を足して like_count_cache.json をコミットする。取り込む側で実在する記事IDだけを拾う
• Rate Limiting binding は wrangler では unsafe（実験的）扱い。ローカルでは効いたが本番で確かめる

🤖 Generated with Claude Code