Blueskyのコメント機能を自分のブログに構築する

• 既存のコメントシステム（Disqus、セルフホスティング、GitHub Issues など）は、速度、トラッキング、保守負荷、ユーザー制限などの問題で採用していない
• Blueskyはインフラ維持が不要、リッチコンテンツ対応、実名ベースのアカウント、クロスプラットフォーム対話が可能で、ブログのコメントに適している
• 実装方法は、ブログ記事を投稿 → Blueskyに共有 → AT URIをブログ投稿のメタデータに追加 → 該当投稿のコメントスレッドを取得して表示する構造
• コンポーネントは、コメント全体の表示、個別コメント+返信の表示、画像・リンクなど埋め込み処理の3つに分離
• 再帰方式で最大5段階の返信表示、画像グリッド・モーダル、リンクカード、未対応の埋め込みは代替文言で処理
• Astro + React統合、client:loadでクライアント側で読み込み、frontmatterにDIDとpostCidを追加して有効化
• 型安定性確保のために@atcute/client TypeScript型を活用し、JavaScript無効時でも本文が正常表示されるプログレッシブ・エンハンスメント構造
• サーバー・DBなしでBluesky APIとCDNを活用してパフォーマンスを確保
• このアプローチは、ソーシャル機能をサイトごとに再実装する代わりに、ユーザーが既に使っているプラットフォームと接続することで拡張性と独立性を確保する

---

Blueskyをコメントシステムとして選んだ理由

• インフラ維持が不要
• 画像・リンク・引用投稿など豊富なコンテンツをサポート
• Blueskyアカウントベースの信頼性と責任性
• ブログとソーシャルメディア間でトラフィックの相互流入が可能
• コンテンツ所有権の分離（ブログ記事は本人、コメントは投稿者所有）

AT Protocolの理解

• DID: 分散型ユーザー識別子
• CID: コンテンツ識別子
• AT URI: at://did:.../app.bsky.feed.post/... 形式のアドレス
• getPostThread API呼び出しでコメントスレッドを取得可能、認証不要

コンポーネント構成

• メインコメントコンポーネント
• 個別コメント+返信レンダリングコンポーネント
• 画像・リンクなど埋め込み処理コンポーネント

ネストコメントの処理

• 再帰レンダリング、最大深度5段階の制限
• 視覚的インデントで階層を表現

リッチコンテンツの処理

• 画像: CDN提供、複数画像グリッド・モーダルビュー
• 外部リンク: サムネイル・説明を含むカードレンダリング
• その他の埋め込み: 代替文言を表示

Astro統合

• Reactコンポーネント + client:load使用
• frontmatterにBluesky DID、postCidを追加してコメントを有効化

開発体験

• TypeScript型サポートで安定性を確保
• Progressive Enhancementにより、API障害時でも本文への影響なし
• サーバー・DBの負荷なしでBlueskyインフラを活用

結論

• 既存のコメントシステムの課題を回避し、ユーザーがすでに使っているプラットフォームと接続
• Blueskyの成長に伴い参加者の増加が期待できる
• ATProtoベースのため、他のAppViewや独自実装への移行も容易