概要

• Blueskyのコメントセクション を自分のブログに組み込んだ体験談
• 静的サイト でも外部SNSのコメントを簡単に表示できるメリット
• 他の選択肢（Disqus、giscus、Twitter等）との比較と Blueskyの優位性
• 実装手順や使用技術（React、TypeScript、react-query等）のポイント
• 実装をシンプルに保つための設計思想と今後の展望

Blueskyコメントセクションの導入体験

• 自分のブログ にBlueskyのリプライを直接表示するコメントセクションの実装体験談
• 静的生成＋CDNホスティング環境下で コメント欄の実装困難性 に直面
• VPSやクラウドサービスでコメント機能を運用する場合の コスト・運用負担 の問題
• 自分自身が 無償のDevOpsエンジニア になることを避けたいという動機

Bluesky活用のメリット

• Cory Zue氏の Blueskyコメント埋め込み記事 に触発
• Bluesky側で アカウント認証・ホスティング・ストレージ・スパム対策・モデレーション を一括管理
• 公開API があるため、外部サイトへの埋め込みが容易
• 他サービス（Twitter、Disqus、giscus等）との比較で Blueskyのオープン性と将来性 を評価
  • AT Protocol 基盤による分散性・透明性
  • GitHub Discussionsよりも 会話プラットフォーム としての適性

実装方針と工夫

• Cory Zue氏の bluesky-commentsパッケージ ではなく、自作を選択
  • デザインカスタマイズ や将来の機能追加を見据えた判断
  • UIコンポーネント＋API関数で 約200行のシンプルな実装
• 当初はOAuthによる 直接投稿機能 も検討
  • 認証フロー自体は構築済み
  • 投稿・返信UIの実装負担が大きいため断念
  • 結果的に 閲覧専用 とし、実装が大幅に簡素化

技術スタックと具体的な実装

• サイトは React Server Components ＋Parcelで構築
• 記事本文は MDX （Markdown＋JSX）で管理
• 各記事のmetadataに bskyPostId を追加し、Bluesky投稿と紐付け
  • 例：

    export const metadata = {
      title: "I added a Bluesky comment section to my blog",
      description: "How I embedded Bluesky replies directly on my site",
      date: "2026-01-24",
      bskyPostId: <post-id>,
      tags: ["web-dev"],
    };
    

• TypeScript SDK（@bluesky/api） でBluesky APIと連携
• getPostThreadエンドポイント で投稿とリプライ一覧を取得
• API通信・ローディング・エラー管理には Tanstack react-query を採用
  • エラー処理やリトライ、ローディング状態の管理を自動化

UI設計と表示の工夫

• Bluesky投稿の リッチコンテンツ構造 は簡易化し、 テキストのみ抽出 で表示
• スレッド表示 はシンプルにインデント＋左ボーダーで実現
• プロフィール画像や投稿日時 はBlueskyのデザインを参考に配置
• Bluesky本体へのリンク をUIに追加し、会話の継続を促進
• これにより 閲覧専用コメントセクション が完成

公開・再利用性について

• 実装は 自サイト特化 の部分も多いため、パッケージとしての公開は未定
• ソースコードを読めば 他の人でも簡単に実装可能 なシンプル設計
• フィードバックや意見は Bluesky上で受付

今後の展望と雑感

• コメント機能で ブログのエンゲージメント向上 を期待
• 前回記事の反応ゼロという現実にも触れつつ、 今後の発展 に期待