概要

タイトル通りです。Misskeyのフォークと、Twitter(X)の投稿を取得するためのブリッジサーバーを自作してMisskey側からTwitterのTL2種を見れるようにしてきました。ので、その簡単な記録という感じ。

機能

• Twitter(X)の自分のフォロー中TL/おすすめTLを取得して表示
• 下部ボタンから該当ツイートにいいねを押せる
• 下部ボタンから該当ツイートURLを張り付けたMisskey投稿を作成できる（シェア用）
• デフォルトUIの場合、それぞれのTLの表示を切り替えできる

経緯

興味がなければ飛ばしてください。

メインSNSをMisskeyに移してから結構な時間が経ちましたが、それでもやはりイラストを見たり、今の話題を追ったりするのはTwitterの方が向いていて、なんだかんだTwitterを見る時間はそこそこありました。

で、そういうときに面倒になるのがタブ移動です。スマホで使ってるときはアプリの切り替えですね。あとは、最近のTwitterのリプ欄や検索が実質機能していないこともあり、「TLだけ見れたらな～」みたいなことを考えていました。

そんなとき、フォロワーが複数SNSの自アカウント投稿をまとめて検索/整理できるアーカイブツールみたいなのを作っており、それを見て「俺も複数SNS同時に管理したいな…」となりました。

以前（Twitterだったころ）のAPIの仕様なら恐らく楽にTL取得ってできたんでしょうけど、今どうやってやるのかな～みたいなことをうっすら考えてるときに浮かんできたのが、以前作ったmisskey-x-mirror-botです。

認証はどうにかできるわけだし、TwitterのTL表示をしてる内部APIを叩けばいい感じにできるんじゃないか！？（技術者倫理）と考え、さっそく作ってみました。

技のはなし

全体アーキテクチャは以下みたいな感じ

[Misskeyフロントエンド (ブラウザ)]
         ↓ /api/x/timeline
[Misskeyバックエンド (フォーク)]
         ↓ HTTP (X_BRIDGE_URL)
[misskey-x-homeTL (ブリッジサーバー)]
         ↓ GraphQL API
[X (Twitter)]

今回の実装のキモはmisskey-x-homeTLというブリッジサーバーですね。

misskey本体からXの内部APIを叩いても良かったんですが、正直Misskey内部を必要以上にいじるのは怖かったので、 (メンテが面倒そうだから…) Xの投稿を取得したり投稿をキャッシュしたりするサービスを動かして、そこに対してmisskeyのバックエンドAPI(x/timeline)から通信、さらにそれをフロントエンドから叩いて実際に表示する…というアプローチを取りました。

前述したとおり、Xの認証についてはログイン済みセッションのcookieを使ってどうにかする以前使った方法が使えたので、画像のようにブラウザ版Xが内部で叩いてるAPIを叩けば取得できるはずだ…とやってみました。

てな感じで動いたので、そこから色々やって完成させた…という感じです。

おわり

まあ他にも色々書くことはある気もしますが、技術の話興味ある人はgithubの方見てくださればいいかなと。

github(misskey-x--homeTL)

とりあえずいい感じにTwitterとMisskeyを一画面で観測し続けることができるようになったので満足です。おひとり様サーバー建てていて、フォークをメンテできる人ならやってみてもいいかもしれません。自分でやってきたmisskeyカスタムの中でも結構お気に入りな機能追加で、Twitterよく見る人ならQOL上がること間違いなしかなと思います。

質問等ありましたらコメ残していってください、多分返します！ほんじゃ、また次回👋