JavaScriptを使用してBlueskyに埋め込みカード付きのリンクを投稿する方法

Bluesky の人気が高まるにつれて、Bluesky を中心としたツールがさらに開発されています。最も人気のあるアプリケーションの 1 つは、ポスト スケジューリングと自動化です。

ただし、Bluesky の API は現在、OpenGraph カードにリンクを投稿する直接的な方法を提供していません。これは、魅力的なプレビュー付きのリンクを共有したいユーザーにとっては課題となる可能性があります。

このチュートリアルでは、JavaScript を使用して、埋め込みカードを使用して Bluesky にリンクを投稿する方法を説明します。この方法は API の制限を回避し、リンクをより効果的に共有できるようにします。

始めましょう!

JavaScript APIを使用してBlueskyに投稿する

Bluesky API の操作は非常に簡単です。ドキュメントはかなり良いです。まず、NPM から @atproto/api パッケージをインストールする必要があります:

npm install @atproto/api

次に、Bluesky Agent のインスタンスを作成し、Bluesky 認証情報を使用してログインします。

メインのパスワードを使用するのではなく、Bluesky アカウント用の新しいアプリ パスワードを作成することをお勧めします。これにより、必要に応じてアクセスを取り消し、メイン アカウントを安全に保つことが簡単になります。また、プロジェクトに環境変数BLUESKY_USERNAMEとBLUESKY_PASSWORDを必ず設定してください。

import { AtpAgent } from "@atproto/api"

const getBlueskyAgent = async () => {
  const agent = new AtpAgent({
    service: "https://bsky.social",
  })

  await agent.login({
    identifier: process.env.BLUESKY_USERNAME!,
    password: process.env.BLUESKY_PASSWORD!,
  })

  return agent
}

エージェントを取得したら、それを使用して Bluesky に投稿することができます。これは非常に簡単です。

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string, url?: string) => {
  const agent = await getBlueskyAgent()

  await agent.post({ text })
}

これで、Bluesky に投稿が送信されました。残念ながら、投稿のテキストにリンクを含めたとしても、それは自動的にアンカー リンクに変換されません。それはすぐに修正します。

Bluesky 上のファセット リンクを自動的に検出する

Bluesky の投稿テキストにリンクを含めても、それは自動的にアンカー リンクに変わりません。代わりに、プレーンテキストとして表示されます。

これを修正するには、リンクを検出し、ファセット リンクに変換する必要があります。

これを実現するには手動の方法もありますが、幸いなことに、ATProto はリンクを自動的に検出してファセット リンクに変換できる RichText クラスを提供します。

import { RichText } from "@atproto/api"

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string) => {
  const agent = await getBlueskyAgent()
  const rt = new RichText({ text })
  await rt.detectFacets(agent)

  await agent.post({
    text: rt.text,
    facets: rt.facets,
  })
}

それは素晴らしいことですが、投稿に埋め込みカードを追加する必要があります。次はそれをやってみましょう。

Bluesky での埋め込みカードの作成

投稿にリンクを含めることは素晴らしいことですが、埋め込みカードを追加できればさらに良いです。

これを実現するには、Bluesky の Web サイト カード埋め込み機能を使用する必要があります。基本的に、少なくとも URL、タイトル、説明を含む埋め込みキーを投稿に追加します。

必要なデータを取得するにはいくつかの方法があります。投稿時にわかっている場合は、ハードコードするだけで済みます。それ以外の場合は、URL をスクレイピングしてタイトル、説明、画像を収集できます。

ただし、最も簡単な方法は、Dub.co Metatags API を使用して URL メタデータを取得し、そこから埋め込みカードを作成することだと思います。それがどのように機能するかを見てみましょう。

npm install @atproto/api

URL メタデータをフェッチし、そのデータをクリアな形式で返す単純な関数を作成しました。

次に、メタデータを使用して画像を Bluesky にアップロードし、埋め込みカードを作成する関数を作成しましょう。

import { AtpAgent } from "@atproto/api"

const getBlueskyAgent = async () => {
  const agent = new AtpAgent({
    service: "https://bsky.social",
  })

  await agent.login({
    identifier: process.env.BLUESKY_USERNAME!,
    password: process.env.BLUESKY_PASSWORD!,
  })

  return agent
}

埋め込みカードを取得したら、投稿に追加できます。

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string, url?: string) => {
  const agent = await getBlueskyAgent()

  await agent.post({ text })
}

埋め込みカードを使用して Bluesky に投稿を送信する機能が追加されました。

完全な例

ここまで進めていただければ、もう完全なコードが完成しているはずです。そうでない場合は、ここにある完全なコードをコピーしてプロジェクトに貼り付けることができます。それ:

• Bluesky エージェントを作成します
• URL メタデータを取得します
• 埋め込みカードを作成します
• 埋め込みカードを使用して投稿を Bluesky に送信し、ファセット リンクを自動的に検出します

import { RichText } from "@atproto/api"

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string) => {
  const agent = await getBlueskyAgent()
  const rt = new RichText({ text })
  await rt.detectFacets(agent)

  await agent.post({
    text: rt.text,
    facets: rt.facets,
  })
}

このチュートリアルがお役に立ち、ご自身のプロジェクトでの使用を検討していただければ幸いです。

投稿おめでとうございます!

以上がJavaScriptを使用してBlueskyに埋め込みカード付きのリンクを投稿する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。