認証、API 呼び出し、oEmbed エンドポイントを使用して、Bluesky の「いいね！」した投稿をプログラムで取得して埋め込む方法を学びます。 私は最近 に移行しました。そこには、興味深く、役に立ち、刺激的なコンテンツがたくさんある活気のある技術コミュニティがあることをすでに確認できました。私は新しいユーザーとして幸せです! その結果、私は「Dev roundup」という月刊ニュースレターの投稿に、最もいいね! された Bluesky の投稿を埋め込むことを望んでいました。私の目標は、ソフトウェア開発者向けに特別に調整された Bluesky の投稿の厳選リストを提供することです。 Bluesky 幸いなことに、 完全に無料で使用でき、その中のすべてのコンテンツにプログラムでアクセスできます。このチュートリアルでは、Bluesky の API を使用して、いいねされた投稿を取得して埋め込むプロセスについて説明します。これは、個人のブログ、ポートフォリオ、またはコンテンツ集約プロジェクトに最適です。 Bluesky の API は Bluesky API ワークフローを理解する 私は、Bluesky の投稿を Markdown ブログ投稿に自動的に埋め込むことができるスクリプトを作成しました。このスクリプトで使用されている手順の一部またはすべてが、多くのユースケースで役立つと思います。 「いいね！」した投稿を埋め込むためのワークフローをまとめると、次の主要な手順に従います。 認証されたセッションを作成する 「俳優」の「いいね！」された投稿の URI を取得する これらのURIを使用して を取得します oEmbed埋め込みHTML 埋め込みコードをクリーンアップしてフォーマットする 完全な実装 それぞれの機能とその目的を詳しく見てみましょう。 1. Blueskyセッションの作成 export const createSession = async (): Promise<string | null> => { try { const response = await fetch( "https://bsky.social/xrpc/com.atproto.server.createSession", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ identifier: "your-handle", password: "your-password", }), } ); const responseJson = await response.json(); return responseJson.accessJwt; } catch (e) { console.error("Failed to create session: ", e); return null; } }; 重要な洞察: この機能はBlueskyアカウントを認証します。 注: この例では資格情報の文字列をハードコードしていますが、本番環境での使用ではこれを避ける必要があります。 後続のAPI呼び出しのために JWT（JSON Web Token）を返します。 accessJwt BlueskyのATP（認証転送プロトコル）の エンドポイントを使用します。 createSession エラー処理により、認証が失敗した場合でも正常な失敗が保証されます。 2. いいねされた投稿のURIを取得する export const getBlueskyLikeUris = async (actor: string, limit: number = 40) => { const token = await createSession(); if (!token) { console.error("Failed to get token"); return; } const response = await fetch( "https://bsky.social/xrpc/app.bsky.feed.getActorLikes?actor=${actor}&limit=${limit}", { method: "GET", headers: { Authorization: `Bearer ${token}`, }, } ); const responseJson = await response.json(); const uris = responseJson.feed.map((entry: any) => entry.post.uri); return uris; }; 重要な洞察: 認証されたセッショントークンが必要です エンドポイント 使用していいねされた投稿を取得します getActorLikes getActorLikes 重要 - これは 認証されたリクエストであるため、エンドポイント ドメインは https://bsky.social である必要があります。 いいねされた投稿ごとに一意のURIを抽出します 投稿数は40件まで（設定可能） 3. URI を埋め込み可能な HTML に変換する export const getBlueskyPostEmbedMarkup = async (uri: string) => { try { const response = await fetch(`https://embed.bsky.app/oembed?url=${uri}`); const responseJson = await response.json(); const formattedHTML = prettier.format(responseJson.html, { parser: "html", plugins: [require("prettier/parser-html")], htmlWhitespaceSensitivity: "ignore", printWidth: 1000, }); return formattedHTML.replace(/<script[\s\S]*?<\/script>/g, ""); } catch (e) { console.error("Failed to get Bluesky post embed markup"); return null; } }; 重要な洞察: 投稿 URI とともに使用して、投稿の埋め込み可能な HTML にアクセスします。 Bluesky の oEmbed エンドポイントを オプション: HTML を一貫してフォーマットするために を使用します prettier オプション: セキュリティとクリーンな埋め込みのために タグを削除します <script> その理由は、Bluesky コンテンツを含む投稿ごとに 1 つの Bluesky スクリプトを埋め込んでいるからです。 柔軟なエラー処理 すべてをまとめる: 完全な例 async function embedLikedPosts() { try { // Get liked post URIs const likedPostUris = await getBlueskyLikeUris(); if (!likedPostUris) { console.error("No liked posts found"); return; } // Convert URIs to embed HTML const embedPromises = likedPostUris.map(getBlueskyPostEmbedMarkup); const embedHtmlArray = await Promise.all(embedPromises); // Filter out any failed embeds const validEmbeds = embedHtmlArray.filter(embed => embed !== null); // Return the markup for all liked posts return ` ## Some Fave Posts 🦋 ${validEmbeds.join(`\n\n`)} ` } catch (error) { console.error("Error embedding Bluesky posts:", error); } } 潜在的な機能強化 このソリューションは私にとっては有効です。必要なのは、静的に生成された月次ブログ投稿だけだからです。 改善点としては次のようなものが考えられます。 40 件以上の「いいね！」された投稿を取得するためのページネーション サポートを追加します。 不要なAPI呼び出しを減らすためにキャッシュを実装する より堅牢なエラー処理メカニズムを作成する 長時間実行されるプロセスで使用される場合に トークンを更新するためのメカニズムを作成する accessJwt いいねされた投稿を人気順（いいね数）で並べ替える トラブルシューティングのヒント Blueskyの認証情報が正しいことを確認してください 認証されたリクエストで Bearer トークンが正しく設定されていることを確認します。 使用しているエンドポイント ドメインがすべて有効であることを確認します。 結論 Bluesky の投稿を埋め込むと、ソーシャル メディアでのやり取りを動的に表示できます。API ワークフローを理解し、堅牢なエラー処理を実装することで、魅力的でパーソナライズされた、厳選されたコンテンツ統合を作成できます。 次のステップ コードを試してみる 埋め込みスタイルをカスタマイズする 追加のBluesky APIエンドポイントを調べる 楽しんで、楽しくいじってみてください! 🚀
