自分のブログにBlueskyコメント欄を追加した

 (micahcantor.com)
4 ポイント 投稿者 GN⁺ 2026-01-25 | 1件のコメント | WhatsAppで共有
  • 静的サイトでも Bluesky API を使ってコメントを表示できるようにした実装事例
  • Bluesky が アカウント認証、スパム管理、ストレージ、モデレーション を処理するため、別途サーバーを維持する必要がない
  • 実装は約 200行のTypeScriptコード で構成され、@bluesky/api と Tanstack react-query を活用
  • コメントは 読み取り専用 の形式で表示され、各ブログ記事のメタデータにBluesky投稿IDを関連付けて自動読み込み
  • オープンなソーシャルプラットフォームと静的ブログの結合可能性 を示す実験的な実装

Blueskyコメント欄実装の背景

  • 静的生成サイトではコメント機能を自前でホスティングしにくいことが出発点
    • CDNに配信された静的コンテンツは動的データを保存できない
    • 別途VPSやクラウドサービスを運用すると、コストと管理負担が大きい
  • Bluesky は 公開APIとATプロトコルベースのオープンプラットフォーム であり、コメント管理に必要な機能をすでに提供している
    • アカウント認証、スパムフィルタリング、ストレージ、モデレーションをBlueskyが処理
    • ブログ側では単にAPIを呼び出してコメントを表示すればよい

他の代替案とBlueskyを選んだ理由

  • Twitter、Disqus、giscus（GitHub Discussionsベース）などの代替案も検討
  • Bluesky は 分散型のATプロトコル の上に構築されており、特定企業の統制リスクが低い
  • GitHubベースよりも 会話中心のプラットフォーム として、コメントのホスティングに適している

実装方法

  • Cory Zue が公開した bluesky-commentsパッケージ を参考にしたが、独自実装を選択
    • サイトのスタイルに合わせたカスタマイズと将来の拡張性のため、自前でコードを作成
    • 実装全体はUIコンポーネントとAPI関数を含めて約200行規模
  • 当初はOAuthによる 直接投稿機能 も検討したが、UIの複雑さと時間的制約から見送った
    • 結果として 読み取り専用のコメント表示機能 のみを実装

技術構成

  • サイトは React Server Components と Parcel を使って構築
    • コンテンツは MDX で書かれており、JavaScript/JSX を直接含められる
    • 各記事の metadata オブジェクトに bskyPostId を含めてBluesky投稿と関連付け
  • Bluesky TypeScript SDK（@bluesky/api）を使い、getPostThreadエンドポイント からコメントスレッドデータを取得
  • APIリクエストは Tanstack react-query で管理
    • エラー、ローディング、再試行の状態を自動処理

UI設計

  • Bluesky の応答から テキストコンテンツのみを抽出 してシンプルなコメントUIとして表示
  • スレッド構造 はインデントと左側の境界線で区別
    • プロフィール画像と投稿日付はBlueskyのデザインを参考にした
  • 上部には元のBluesky投稿へ移動するリンクを追加し、会話への参加を促す
  • コメント投稿機能はなく、ユーザーはBluesky上で直接返信する

今後の可能性

  • 必要に応じて、この実装を 独立したパッケージとして公開 できる
    • ただし現在のコードは個人サイト向けに調整されている
    • シンプルな構造なので、他の開発者もソースコードを参考に容易に実装できる
  • Blueskyコメント連携がブログの エンゲージメント向上 に役立つかどうかは、まだ不明

Blueskyユーザーの反応

  • 複数のBlueskyユーザーがコメントで 「良いアイデア」「反応速度が速い」「Disqusの代替として適している」 などの前向きな反応を残した
  • 一部では スパム管理、ネストコメントの処理、添付ファイル対応 などについて質問が出た
  • 著者は、Bluesky の 個人モデレーション機能 によって特定のコメントを非表示にできると説明

関連記事

1件のコメント

 
GN⁺ 2026-01-25
Hacker Newsの意見

  • ブログやウェブサイトを**静的サイトジェネレーター(static site generator)**でレンダリングしているなら、コメントをコンテンツファイルとして取り込み、ビルド工程に含める方法を提案している

    1. メール、CGIスクリプト、サーバープログラムなどでコメントを収集し
    2. 手動で確認してスパムを削除したあと
    3. コメントを.mdや.htmlファイルとして保存し
    4. サイトのビルド時に一緒にレンダリングする方式
      この過程は手間がかかるが、スパム防止とデータの完全な所有権という利点がある
    • 私も似たシステムをメールベースで実装した。詳しくは私のブログ記事にまとめている
    • 小さなウェブサイトなら1日に数件しかコメントを管理しなくて済むので、手動レビューでも十分可能。また、Markdownファイルの自動更新で簡単に自動化することもできる
    • 「私はファックスでしかコメントを受け付けない ;)」という冗談も
    • 「ひどく聞こえる」と言って非効率だと反応する人もいる

  • Reactを使いたくないなら、私が作ったBlueskyコメント用Webコンポーネントを参考にできる
    GitHubリポジトリとテーマプレイグラウンドで確認できる。
    テーマのカスタマイズがとても簡単

  • 元記事のアイデアを参考にして、Mastodonベースのコメントシステムとして実装した
    詳しくは私のブログ記事で見られる

    • 実際、このようなFediverseコメント統合は以前からMastodonやBlueskyで試みられてきた
      参考: 関連ブログ記事

  • EUのヘイトスピーチ関連法のせいで、サイト運営者がコメントをフィルタリングしないと処罰されるという話があるが、実際どうなのか気になる
    それで私はコメント機能を完全にオフにした

    • 法律の専門家ではないが、こうしたリスクは政治的意図で誇張されることが多い。EU法はサイトの規模と目的を考慮する。小さな個人サイトが処罰された事例は聞いたことがない
    • Blueskyのmoderation labelerを活用すれば事前フィルタリングが可能。EU基準に合わせたものはないが、自分でlabelerを作って問題のあるコメントだけを弾くこともできる
    • 法律以前に、自分の名前が載っているサイトにヘイトスピーチが投稿されるのは望まない

  • 私のブログは完全な静的構成で、50行のCloudflare Workerスクリプトでコメントを受け取り、Markdownにそのまま追加している。
    コメント機能を埋め込まなくても実装できる

    • コメントをPull Requestとして自動コミットする形にして、PRをコメントレビューの道具として使うと面白そう
    • 「それが本当にColdFusionならもっとすごそう」という冗談もある
    • 「リンクや実装の詳細を共有してくれないか」と尋ねる人もいる

  • Bluesky APIを活用して、特定のブログリンクを含む最初の投稿を自動で見つけ、コメントに接続する形で自動化することもできる

  • Blueskyの成長にも役立ちそうなので、テスト用にアカウントを作った。かなり面白いグロースハックのアイデアだと思う

    • ただし、営利目的のSNSはいずれTwitterのようになると思う。
      理想的にはセルフホスティングやFediverseベースのコメントシステムのほうが持続可能
    • 「私たちはあの別のプラットフォームではない」というメッセージだけでは成功は難しいという意見もある

  • 私のブログはそれほど人気ではないが、以前スパムとヘイトコメント地獄を経験したことがある
    そのため、もう二度と個人ブログでコメント機能を開くつもりはない

  • Blueskyベースのシステムでも、独自にlabelerを追加して特定ラベルが付いたコメントをフィルタリングする形で自己検閲ができる

  • 私も似たアイデアで、自分のブログ以外にcartes.appでOSMの場所ごとのコメント機能を追加した
    ATprotoアカウントでレビューを残せて、データはユーザー所有のJSON形式でPDSに保存される

    • 「本当にすごい。そのデータはどう集めているのか、もしかしてBluesky firehoseを聴いているのか？」と尋ねるコメントが付いている