0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Blueskyの埋め込みタイムライン出力サービスを作ってみた(BlueskyTimeline)

Last updated at Posted at 2024-08-01

Blueskyの埋め込みタイムライン機能が公式で提供されていない

X(旧Twitter)では埋め込みタイムラインウィジェットが提供されていますが、いつのタイミングからかログインしていない状態ではタイムラインが表示されない仕様になっており、公式サイトなどで日々のお知らせなどを告知する媒体としてはイマイチな状態になってしまいました。

Xと近しいサービスで移住先としてBlueskyがひそかに注目されていましたが、執筆時点でもまだまだ発展途上で整備されていない機能も多く、埋め込みタイムラインウィジェットの提供もない状況であったため、ないなら作るか、ということでAPIを通じてタイムラインを出力するサービスを用意してみることとしました。

BlueskyTimeline はどんなサービス?

本サービスはBlueskyの非公式タイムラインウィジェットの出力サービスです。
以前にWordpress向けプラグイン BlueskyTimeline for WordPress をリリースしていたのですが、Wordpressユーザ以外にも手軽に利用いただけるようコードを張り付けるだけで表示できるようにしたものです。

URL : https://bst.heion.net/jp/

利用方法

タイムラインを取得したいBlueskyのハンドル名を入力いただきプレビューボタンを押すとタイムラインのプレビューと埋め込み用のコードが出力されますので、適宜サイズやテーマカラーを調整いただき、コードをコピーの上、サイト上のタイムラインを表示させたい位置にペーストするだけで利用いただけます。

主な仕様

タイムラインの取得は本サービス用のアカウント経由でリクエストし、出力させています。
cloudflare(CDN)にてキャッシュさせておりAPIに負荷をかけすぎないように30分間隔で更新されるようにしています。
※無料で利用できるようにしておりますので、ひとまずこれが限界ということで何卒。

2024.10.11追記
10分間隔で更新されるように改定しました。
(負荷が高くなった際は戻すかもですが)
2024.10.19追記
リクエストは公開API(public.api.bsky.app)に対して行っている為パスワード認証不要となっています。

Bluesky公式とタイムラインの表示内容の違い

投稿日時
Bluesky公式では、現在からの経過時間を 1時間、2日、6か月… のように表記するのに対して BlueskyTimelineでは24時間以内の記事は経過時間を表示し、それ以上前の投稿は投稿日 MM月DD日 と表記するようにしています。
これは、サイトの更新情報代わりにタイムラインを利用することを想定した場合に、現在からの経過時間の表記では逆にわかりにくくなる可能性があるためあえて表記を変更しています。
Bluesky

BlueskyTimeline
画像の表記サイズ
投稿された画像が1枚の時は極力トリミングせずに表示させるようにしていますが、ウィジェットの高さを超える場合はスクロールで上下させないと全体を見渡せなくなるため、ウィジェットの高さの85%より大きくなる場合はトリミングするようにしています。
リポスト内の動画
自身が投稿した動画はインライン再生できるようにしていますが、 あくまで自身のタイムラインを掲載するサービスと割り切って、負荷をあげないよう引用リポスト内の動画はサムネイル表示となり、引用元をBluesky上で再生いただく形式にしております。

あとがき

CDNは強力だけどオリジンがしょぼいので利用者が増えてくると結構しんどいかもしれないので、そのうちオリジンサーバの移転も視野に入れるかも。

あと、あくまで非公式サービスなのでAPIのリクエスト数の兼ね合いで万一止められてしまったりすればそれまでなので、そのあたりはご容赦ください。
※というか公式で用意してほしい…!

0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?