Bluesky に投稿するよくんを作ったよ
Bluesky に投稿できる「Blueksy に投稿するよ」というページを ruby.wasm で作った。
「ねとらぼ」みたいなシフトJISのページの URL を貼るとカード情報が文字化けしたり、旧Twitter の URL を貼ってもカード情報が表示されないみたいなのを解決したかったので作ってみた。
自分しか使わないからスタイルシートとか使ってないし UI はテキトー。
Bluesky の API を使うと、普通の Bluesky のウェブからは投稿できないようなメッセージを作ることができる。
URL をテキストのままにしたり、リンクのテキストを URL ではないものにしたり、リンクカードのテキストとイメージを指定できたり。
ruby.wasm で作ったので基本的にブラウザと Blusky との間でデータがやりとりされる。余計なサーバーを介さないので良い。ただし後述のカード情報取得を除く。
ログイン
ユーザー名とパスワードを入れてログインする。
Bluesky は非公式アプリから使うための API キーを発行できなくてイマイチだなぁ…と思ってたけど、実は App Password というのを発行できることを知った。
アプリごとに App Password を発行すれば、アプリが不審な動作をしてもパスワードを取り消せばそのアプリから使えなくなるので、今回のような「Bluesky に投稿するよ」みたいな信用できないアプリを使うときにはアプリパスワードを使おう。
試してみたら App Password を削除してもすぐに使えなくなるわけではなく最大２時間は使えるっぽい。
投稿する
メッセージ欄にテキストを書いて「投稿」ボタンを押すと投稿できる。
URL を書いても通常のテキストになる。
てすと
https://tmtms.net/bluesky/
< と > で括ればリンクになる。
てすと
<https://tmtms.net/bluesky/>
Markdown 風に []() で書くと URL とは異なるテキストのリンクにできる。
てすと
[てすと](https://tmtms.net/bluesky/)
てすと
この場合は Bluesky でリンクをクリックするとこのようなダイアログが表示される。
画像
投稿に画像を追加できる。最大４枚。１枚あたりサイズに1MBの上限あり。
カード情報
Card 欄に URL, Title, Description を入力することでカードを追加できる。画像も１つ追加できる。
なので、リンク先と関係ないテキストや画像を指定することもできる。
本文にカードの URL を含んでなくてもいい。
なのでこんな投稿もできる。
まあでもいちいち入力するのも面倒なんで、URL の横の「Fetch」ボタンを押すと Title とか Description とかをテキトーに取り出すようにした。
が、CORS の制約があるので、これだけはどうしても ruby.wasm(JavaScript) で作れなかった。無念…。
なので、これだけはサーバーに Ruby スクリプトを置いた。なつかしの CGI！ CGI 便利！
ねとらぼの記事を普通に Bluesky で投稿するとこんな感じになるんだけど、
「Bluesky に投稿するよ」だと
文字化けしない。
旧Twitter だとこんな感じ
↓
おわり
CORS さえなんとかなれば全部ブラウザサイドでできるんだけどなー。まあ仕方ない。
Discussion