Notion上にBluesquare製QRコードでBlueskyプロフィールへの導線を作成する #Bluesky #Notion
2024.03.05NotionページはWeb公開にてプロフィールページとして扱うことも可能です。Notionには色々なページを埋め込むことや即修正も可能なため、融通がとても効いて便利です。
ただし、埋め込みにてレイアウトやアクセシビリティが一律優れたものとなるわけでもありません。特にSNSの場合は専用アプリケーションでアクセスできる方が楽だったりします。
Blueskyも公式アプリではURLやIDのタイピングが求められ、代わりにNotion上にタイムライン等を埋め込むとしても一概に見やすいわけではありません。ちょうどいい塩梅がなかったのですが、これの解消となるプロフィールページ用QRコード生成ツールがリリースされました。Notion上への埋め込みも問題なかったため紹介します。
Blueskyのプロフィール用QRコードを作成する
以下のサイトへアクセスし、BlueskyのIDを入力します。DIDでも問題ないようですが、コロン(:)をURLエンコード後の%3Aに置き換える必要があります。
出来上がったURLを埋め込みブロック(/embed)に入力します。ポイントは、パラメータ指定さえ判っていればフォームにアクセスせずとも生成できる点です。
https://bluesquare.deno.dev/{ID}?type=(butterfly|user|cloudButterfly|cloud|none)
ローカルで生成する
ソースコードをcloneして走らせます。denoのインストールが必要となります。denoのバージョン次第ではdeno.lockを解釈出来ずにエラーとなるので、一時削除した後upgrade後に戻しています。
brew install deno git clone [email protected]:kawarimidoll/bluesquare.git cd bluesquare/ rm deno.lock deno upgrade git checkout deno.lock deno task dev > Task dev deno run --allow-read=./index.html --allow-env=DENO_DEPLOYMENT_ID --allow-net=0.0.0.0,cdn.jsdelivr.net,bsky.social,raw.githubusercontent.com,cdn.bsky.app --watch server.ts > Watcher Process started. > Listening on http://localhost:8000/
外部からのアクセスは不可能なため、Notion上で利用する場合にはQRコードをローカルに保存した後画像として貼り付けます。
あとがき
処理はQRコード生成とatproto APIへのアクセスが主体であり、同等の処理が可能であれば、一般公開には向きませんが例えばGAS上で実行することも可能でしょう。
各タイプで生成して何かしらの媒体で使うプロフィール導線用に画像として保存しておくのも手です。なお、画像サンプルにはBluesky運用スタッフのIDを利用しています。Bluesky自体のアップデート等の告知を随時知りたい場合はフォローをおすすめします。
