Blueskyの埋め込みタイムライン機能が公式で提供されていない
X(旧Twitter)では埋め込みタイムラインウィジェットが提供されていますが、いつのタイミングからかログインしていない状態ではタイムラインが表示されない仕様になっており、公式サイトなどで日々のお知らせなどを告知する媒体としてはイマイチな状態になってしまいました。
Xと近しいサービスで移住先としてBlueskyがひそかに注目されていましたが、執筆時点でもまだまだ発展途上で整備されていない機能も多く、埋め込みタイムラインウィジェットの提供もない状況であったため、ないなら作るか、ということでAPIを通じてタイムラインを出力するサービスを用意してみることとしました。
BlueskyTimeline はどんなサービス?
本サービスはBlueskyの非公式タイムラインウィジェットの出力サービスです。
以前にWordpress向けプラグインBlueskyTimeline for WordPressをリリースしていましたが、Wordpressユーザ以外にも手軽に利用いただけるようコードを張り付けるだけで表示できるようにしたものです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3851019%2F166f0b72-c8bf-566f-d6d9-3d0f297640ba.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4a7a61f58b620c1729d0c053de129a18)
URL : https://bst.heion.net/jp/
利用方法
タイムラインを取得したいBlueskyのハンドル名を入力いただきプレビューボタンを押すとタイムラインのプレビューと埋め込み用のコードが出力されますので、適宜サイズやテーマカラーを調整いただき、コードをコピーの上、サイト上のタイムラインを表示させたい位置にペーストするだけで利用いただけます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3851019%2F1e42e383-943b-c45e-a942-1f0e167afeda.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=af483414c2ba63f4aec462083bd87d30)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3851019%2Fbe57918f-e2fa-ee95-65fd-50034425c68c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=12f04b13a50dc7eb61eb671f06ad0016)
主な仕様
タイムラインの取得は本サービス用のアカウント経由でリクエストし、出力させています。
cloudflare(CDN)にてキャッシュさせておりAPIに負荷をかけすぎないように30分間隔で更新されるようにしています。
※個人開発で、無料で利用できるようにしておりますので、ひとまずこれが限界ということで何卒。
SPAでの利用
SPA(シングルページアプリケーション)ではXのウィジェットも同様ですが外部JSが実行されないため、ページ遷移後にtimeline_output();
を実行いただければ表示されるようになります。
あとがき
CDNは強力だけどオリジンがしょぼいので利用者が増えてくると結構しんどいかもしれないので、そのうちオリジンサーバの移転も視野に入れるかも。
あと、あくまで非公式サービスなのでAPIのリクエスト数の兼ね合いで万一止められてしまったりすればそれまでなので、そのあたりはご容赦ください。
※というか公式で用意してほしい…!