Notion上にBluesquare製QRコードでBlueskyプロフィールへの導線を作成する #Bluesky #Notion

Blueskyのプロフィールアクセス用QRコード生成ツールがサードパーティからリリースされました。Notionへの埋め込みも問題なく出来たので、手軽な導線を検討している場合にはおすすめです。

#Notion

haoyayoi

2024.03.05

Notionページは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 git@github.com: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/