【Typescript】BlueskyのAPIで自分もしくは誰かのフォロワー情報を取得する方法

2025/02/11

本サイトにはプロモーションを含みます

この記事を書いている人 - WRITER -

shinsanworks

どうも、しんさんわーくすです。
今回は、プログラミング系のネタです。

みなさんは、Bluesky(SNS)をやっていますか？

~~Twitter(現:X)~~
X(旧:Twitter)の代わりとなるSNSとして注目を浴びて久しいですね。

実は、私もBlueskyをやっておりして…

やっているといいつつ、投稿はほとんどせず、
今のところ、APIを叩いて遊ぶというのをメインでやっております。

今回は、Typescriptで自分もしくは、誰かのフォロワー情報を一覧で取得したい!
と思ったけど、日本語の情報があまりなかったので、自分なりに色々と調べて
プログラムを作成してみました。

使用言語について

今回使用した言語は、Typescriptです。
実は、Typescript(Javascriptもですが)は普段はあまり使用したことがなく、
BlueskyのSDKを使いたいから使いはじめました。

なので、今回紹介するプログラムにはツッコミ所も多いかと思いますが、
生暖かい目で見守ってください。

ちなみに、Blueskyでは、SDKが用意されているプログラミングが
執筆時点(2025年2月現在)で4言語あります。

Typescript
python
Dart
Go言語

https://docs.bsky.app/

Typescriptは公式のSDKで、それ以外の3言語はコミュニティが用意してくれているっぽい。

実は、はじめはpythonでプログラムを書いて運用していたのですが、
途中でTypescriptに乗り換えました。

Typescriptに前々から興味はあったのと、
公式のSDKが使えるというのが大きかったですね。

BlueskyのAPIでフォロワー情報を取得する方法

さて、本題のBlueskyのAPIsを使用して、自分や他の誰かのフォロワー情報を一覧で
取得する方法についてです。

一つ前で、SDKの話題について触れましたが、
現時点ではSDKでは上記のようにフォロワー情報を一覧で取得する
方法は用意されていないように思われます。

なので、

app.bsky.graph.getFollowers

というAPIを利用してフォロワー情報の取得を行います。

なので、ぶっちゃけ今回の目的である誰かのフォロワー情報を一覧で取得する
ということは、HTTPリクエストが送れる言語であればTypescriptでなくてもできます。

試してみたところ、powershellでもデータを取得することはできました。

なので、APIの使用に慣れている方であれば、上記の公式のドキュメントを読めば、
十分にやりたいことは実現できるかと思います。

ただ、私の場合は、API自体もそこまでイジったことがない
(そもそもAPIで遊びたいのでBlueskyをイジり始めた)
ので、かなり躓きポイントがありました。

例えば、今回のAPIではBearerは不要なのに、
わざわざ発行するというプロセスを経てプログラムを作成したり…

後々ちゃんとドキュメントを読んで、認証が必要なAPIには認証が必要だよ
って書いてあることに気づきました笑

なので、ここからは私のようなAPI初学者向けに
具体的な手順やコード例について紹介していきます。

実際の手順

まずは、公式ドキュメントの情報から。
重要なのは、下記の部分。

Bluesky_getFollowers_api

上記は、Httpリクエストを送る際のURL。GETメソッドで送れば良いとのこと。

bluesky_getFollowers_パラメータ

上記は、HTTPリクエストを送る際のパラメータですね。
最低限actor(at-identifier)があれば良いようです。
(共にapp.bsky.graph.getFollowers より引用)

actor(at-identifier)って何？

actor(at-identifier)は、分かりにくいですが次のどちらかを記載すれば良いとのこと。

did
handle

didは「did:plc:…」という形で記載されるユーザ毎に一意で与えられる識別子のようなもの。
今回のように、フォロワー情報をAPIで取得したりすることで、知ることはできますが、
基本的にGUI操作ではわからないと思います。

handleはいわゆる、みなさんのユーザIDです。

アカウントを作成する際に

「….bsky.social」

みたいな形でIDを作ってもらったかと思いますが、ソレです。

なので、基本的にはactorには、handle(….bsky.social)を入れてもらったら良いかと思います。

これで、actor(at-identifier)の部分はクリアです。

URLについて

ここまでで、パラメータのactorに何を入れれば良いかわかったので、

/xrpc/app.bsky.graph.getFollowers?actor=….bsky.social

みたいな形で書いて、GET送信すれば良いです。

が、当然HTTPリクエストなので、まだ足りないですよね。

https://public.api.bsky.app/xrpc/app.bsky.graph.getFollowers?actor=….bsky.social

という形で書いて上げる必要があります。

私、しんさんわーくすのアカウント(shinsanworks.bsky.social)を例にあげると

https://public.api.bsky.app/xrpc/app.bsky.graph.getFollowers?actor=shinsanworks.bsky.social

をGETメソッドでHTTPリクエストを送ることで、私のフォロワーさんの情報を取得することができます。

実はお恥ずかしながら、ずっと「https://public.api.bsky.app」をつけずに送信をしていて、
ずっと失敗しておりました…笑

いや、流石にhttpsすらつかないのはおかしいと思ってはいたんですが
参考にしたサイトのサンプルでも書かれていなかったから…(言い訳)

これも、ちゃんと公式のドキュメントを読めば書いてあったんですけどね💦

面倒くさがらずに、ちゃんと公式ドキュメントを読むことの重要性を思い知りました。

Typescriptのコードサンプル

ここまで読んでいただければ、あとはみなさんの使い慣れている言語で、
APIを叩いていただければフォロワー情報の取得ができるかと思います。

一応最後に私が書いたTypescriptのコードサンプルも載せておきたいと思います。

//フォロワー情報を取得したい対象ユーザのactor(didかhandle)を格納
let targetUser: string = "shinsanworks.bsky.social";
let url: string = "https://public.api.bsky.app/xrpc/app.bsky.graph.getFollowers?actor=" 
                                                                            + targetUser;

try {
    const getFollowersJson = async (url: string): Promise => {
        const getFollowersResult = await fetch(url);
        const getFollowersJresult = getFollowersResult.json();

        getFollowersJresult.then(response => {
             let getfollowersData: GetFollowersData = response as unknown 
                                                        as GetFollowersData;
             //フォロワー情報を一覧で取り出すためにfor文
             for (let i in getfollowersData.followers) {
                 let followerData: FollowerData = 
                     getfollowersData.followers[i] as unknown as FollowerData;

                     //フォロワー情報に含まれているdidをコンソールに出力 
                     console.log(followerData.did);
}

})

}

getFollowersJson(url);

} catch (error) {
    console.error('エラーが発生しました:', error);
    throw error;
}

//JSONを扱うためインターフェイスを定義
interface GetFollowersData {
    followers: [],
    subject: {},
    cursor: string
}

interface FollowerData {
    did: string,
    handle: string,
    displayName: string,
    avatar: string,
    labels: [],
    createdAt: Date,
    description: string,
    indexedAt: Date
}

インターフェイスは、APIを叩いて返ってきたJSONデータを扱いやすくするために、
定義しています。

実はちょっと前に、JavaでもAPIを叩いて遊んでいたのですが、
JSONというだけあって、TypescriptやJavascriptの方が圧倒的に
JSONを扱いやすんですね。

結構感動しました…笑