拍手機能を実装したよ♪ 2002年生まれの「いいね」の先輩(≧∇≦)

お兄ちゃん〜、見て見て！(≧∇≦)

日記の下に新しいボタンがついたの♪

「パチパチ！」って書いてあるやつ？

そう！拍手機能っていうの♪

読んでくれた人が「よかったよ〜」って気持ちを伝えられる機能だよ(´∀`)

「いいね」みたいなもの？

実はね、「いいね」の先輩なの！(ﾟ∀ﾟ)

先輩ってどういうこと？

この「拍手」っていう仕組み、実は2002年6月25日に生まれたの！

Facebookの「いいね」ボタンが2009年だから、7年も先輩なんだよ(≧∇≦)

へぇ、そんなに昔からあったんだ。

うん！「だんでぃ」さんっていう人が、電車の中で思いついたんだって♪

当時の個人サイトって、感想を伝える方法が少なかったの。

• メール → 敷居が高い

• 掲示板 → 書き込むのが面倒

• カウンター → 見てるだけ

そこで「ボタン1つで応援できる」っていう発想が生まれたんだ(´∀`)

シンプルだけど、画期的だったんだね。

そうなの！

最初はボタンを押すと「拍手」って書かれたメールが届くだけだったんだって。

でもそれだけで、サイト運営者はすっごく嬉しかったみたい♪

今どきSNSのシェアボタンとかあるのに、なぜ拍手？

うーん〜、それはね…

このサイトのコンセプトを考えてほしいの(´∪｀)

2000年代の個人サイト風、だよね。

そう！

アクセスカウンター、キリ番、掲示板…そういうあの時代の文化を再現してるの♪

拍手機能も、その時代を象徴する機能なんだよ(≧∇≦)

なるほど、世界観に合ってるってことか。

うん！

それにね、SNSのシェアボタンって外部サービスに依存するでしょ？

拍手なら自分のサイト内で完結するの♪

読者との繋がりを、自分たちの手で作れるんだ(´∀`)

どうやって実装したの？

Cloudflare KVを使ってるよ！

日記のslug（URLの一部）ごとに拍手数を保存してるの♪

アクセスカウンターと同じ仕組み？

そうそう！

このサイトはもともとCloudflare Pagesでホスティングしてて、KVも使ってたから、相性バッチリだったの(≧∇≦)

あと、Zodバリデーションも入れたよ！

セキュリティ対策？

うん！slugに変な文字が入らないようにチェックしてるの♪

const slugSchema = z
  .string()
  .min(1)
  .max(100)
  .regex(/^[\w-]+$/, 'Invalid slug format');

パストラバーサル攻撃とかも防げるんだ(´∀`)

というわけで、日記の下に拍手機能がついたよ！

この日記の下にもあるから、よかったら押してみてね♪(≧∇≦)

何回でも押せるの？

うん、制限はないよ！

気に入ったらいっぱい押してくれて大丈夫(´∀`)

ねつき、拍手されるとすっごく嬉しいの♪

今日のポイント！

1. 拍手機能とは

   • 2002年6月25日誕生

   • 「いいね」の7年先輩

   • ボタン1つで応援を伝える仕組み

2. なぜ実装したか

   • 2000年代個人サイト文化の再現

   • 外部サービスに依存しない

   • 読者との繋がりを自分で作れる

3. 技術的なこと

   • Cloudflare KVで拍手数を保存

   • Zodバリデーションでセキュリティ対策

22年前の発明が、今も現役で使えるってすごいよね！(≧∇≦)

ぜひ下の「パチパチ！」ボタン、押してみてね♪

押しておいたよ。

わぁ〜、ありがとう♪(〃´∪｀〃)

お兄ちゃんの拍手、届いたよ！

これからも日記書くから、よかったら拍手してね♪