Zenn
🕊️

BlueskyのユーザーをTwitterのフォローリストから検索し、簡単にフォローできるツールを作った

2023/05/23に公開
Twitter
TypeScript
Bluesky
AT Protocol
tech

使ってみてください〜！

🕊️ 作ったもの

Twitterのフォロワーリストの情報をもとに、Blueskyのユーザーを検索し、その場でフォローできるChrome拡張を作りました。
Blueskyを新しく始めたものの知り合いを探すのが大変だったという経験が開発のきっかけです。同じような思いを持った人に使ってもらえると嬉しいです。

  • 🌐 Chrome 版

https://www.youtube.com/watch?v=pVqoDv-1uac

  • 🦊 Firefox 版

https://www.youtube.com/watch?v=XcRcWjStIMc

ツールのコードはすべてGitHubで公開しています！スターかレビューをもらえると泣いて喜びます。

https://github.com/kawamataryo/sky-follower-bridge

🚀 使い方

Chrome Web Storeからイントールできます。

https://chrome.google.com/webstore/detail/sky-follower-bridge/behhbpbpmailcnfbjagknjngnfdojpko

あとは以下手順で、TwitterのフォロワーリストからBlueskyのユーザーを検索し、フォローできます。

    1. Twitterのフォロワーリストを開く（ https://twitter.com/following ）
    1. Sky Follower Bridgeのアイコンをクリック
    1. BlueskyのIDとAppPasswordを入力
    1. Find Bluesky Users ボタンをクリック
    1. TwitterのフォロワーリストにBlueskyのユーザーが表示される
    1. フォローしたいユーザーの"Follow"ボタンをクリック

🛠️ 実装のポイント

実装時の工夫を紹介します。

Twitterのフォロワーリストを取得する

TwitterのフォロワーページのDOMを解析し、ユーザーのハンドル名とディスプレイ名を取得しています。そして、それをもとにBlueskyのユーザーを検索しています。

📌 フォロワーのセル取得
https://github.com/kawamataryo/sky-follower-bridge/blob/main/src/lib/domHelpers.ts#L3-L16

📌️ ハンドル名とディスプレイ名の取得
https://github.com/kawamataryo/sky-follower-bridge/blob/main/src/lib/domHelpers.ts#L43-L48

Blueskyのユーザー情報表示とFollow/Unfollowボタンの実装

Blueskyのユーザー情報の埋め込みは、insertAdjacentHTMLを使っています。
また、Follow/Unfollowボタンのハンドリングは素のEventListnerを使って、クラスの付け替えで実行するメソッドを切り替えています。

React/Vueの仮装DOMに慣れた身として、素のDOM操作は懐かしかったです。フレームワークのありがたさを改めて感じましたw

📌 Blueskyのユーザー情報表示DOMの挿入
https://github.com/kawamataryo/sky-follower-bridge/blob/main/src/lib/domHelpers.ts#L49-L128

フォロワーリストのVirtual Scrollingに対応する

これがなかなか困ったポイントです。Twitterのフォロワーリストは、パフォーマンスの問題を回避するためにVirtual Scrollingが適応されています。そのため、たとえフォロワーが1万人いようとも、初期描画時に画面に表示されるユーザー情報は、20件ほどです（画面サイズにより変動します）。

なので、DOMからフォロワーの情報を取得するときには、Virtual Scrollingの仕組みを考慮する必要があります。このツールでは、画面に表示されているユーザーのみを対象に検索を行い、検索結果の最後にリロードボタンを追加して追加検索を行えるようにすることで対応しています。

Image from Gyazo

📌 Reloadボタンの挿入
https://github.com/kawamataryo/sky-follower-bridge/blob/main/src/lib/domHelpers.ts#L18-L26

Blueskyの類似ユーザーを検索する

Blueskyのユーザー検索は、Twitterのハンドル名とディスプレイ名をもとに、ATProtocolのSearchActorのAPIを実行し、取得結果を検証することで実現しています。

同ユーザーかどうかの判定はTwitterのハンドル名かディスプレイ名のどちらかが、Blueskyのハンドル名、ディスプレイ名に一致するか、またはBlueskyのbioに含まれるかどうかで行っています。

📌 ユーザー検索
https://github.com/kawamataryo/sky-follower-bridge/blob/main/src/lib/bskyClient.ts#L22-L34

📌 類似判定
https://github.com/kawamataryo/sky-follower-bridge/blob/main/src/lib/bskyHelpers.ts#L3-L17

🎬 おわりに

Blueskyはまだまだ発展途上ですが、APIが公開されていて、開発者フレンドリーなのでツール作りが楽しいですね。

育児の合間に頑張って作ったので、使ってもらえると嬉しいです！（あとよければレビューを〜🙏）

https://chrome.google.com/webstore/detail/sky-follower-bridge/behhbpbpmailcnfbjagknjngnfdojpko

自分のBlueskyのアカウント
https://bsky.app/profile/kawamataryo.bsky.social

Discussion