新しい歴史

Bluesky の無料 API は、これまでにないほど私の人気投稿をキュレートするのに役立ちます

に Noah5m2024/12/17

FA-AF

長すぎる; 読むには

認証、API 呼び出し、oEmbed エンドポイントを使用して、Bluesky の「いいね！」した投稿をプログラムで取得して埋め込む方法を学びます。

featured image - Bluesky の無料 API は、これまでにないほど私の人気投稿をキュレートするのに役立ちます

認証、API 呼び出し、oEmbed エンドポイントを使用して、Bluesky の「いいね！」した投稿をプログラムで取得して埋め込む方法を学びます。

私は最近Blueskyに移行しました。そこには、興味深く、役に立ち、刺激的なコンテンツがたくさんある活気のある技術コミュニティがあることをすでに確認できました。私は新しいユーザーとして幸せです! その結果、私は「Dev roundup」という月刊ニュースレターの投稿に、最もいいね! された 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呼び出しのためにaccessJwt JWT（JSON Web Token）を返します。
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; } };

重要な洞察:

Bluesky の oEmbed エンドポイントを投稿 URI とともに使用して、投稿の埋め込み可能な HTML にアクセスします。
オプション: 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); } }