Mastodon へのシェアボタンを追加した
Posted on 水 08 3月 2023 in 運用
Mastodon への記事共有を行うボタンを追加したので、その仕組みについてちょっと解説しとこうかなと思う。是非、利用してみてくれ。一番最後にあるぞ。
先行研究
Mastodon に移ってきてから、記事投稿機能は追加したかったのだが、そもそも分散的な Mastodon の世界において、共有先とはみたいな感じになってあまりとっかかりが見いだせなかった。そんな中で、 マストドンのシェアボタンを自作した(追記あり)(今日から使えます) - Lambdaカクテル と言う記事を見つけた。この記事は、色々先行研究がまとまっていて、その上で改良版が提供されており、めちゃくちゃお世話になった。圧倒的感謝という感じ。ただ、モノは動かなかったので、自分で作ろうと相なった。
まず、僕が共有ボタンに求める要件は以下のようなことだった:
- 日本語対応している
- Mastodon の場合基本共有ボタンのためにワンステップ必要になってくる。つまり、分散的だからこそ、どこに共有すればいいか分からないので、共有先を選択する中継点が必要になる。このブログの読者は基本日本語読者なので (というか、記事は日本語で書かれているので)、この中継点は日本語に対応しておいてほしい。
- 読者が信用しているサービスの他に、共有のために不透明なサービスを通したくない
- 読者にとって、記事共有なんてそれほど大した動機でやるモノではないので、記事共有のためだけになんか共有先以外のアカウント作らなくちゃいけないとか、なんかよく分からないサーバに情報送らないといけないとか、そういうのが必要になるサービスは避けたかった。一番良いのは、コードがオープンになっていて、ブラウザ内で操作が完結するようなもの。
- 何か問題があった時の対応がスムーズ
- Mastodon は結構進化が早いのが特徴だと思っていて、これは良い反面色々壊れやすいという面もあると思う。そうなると自然、共有ボタン側も随時進化が必要になってくる。そういう問題に対しての対処が継続的に行われていく体制があるようなサービスがいいなという感じ。
一応上の記事に載ってるものは一通り試してみたんだけど、この点であまり満足がいくものがなかった。で、記事のシェアボタンのコードを読んだ感じ割と簡単に作れそうなので、どうせなら僕個人の需要に合わせた Web アプリ作ってみるかとなった。実際、基本的なコードは3時間ぐらいで動くものができたので、まあその程度っぽい。
共有ボタンの仕組み
共有ボタンの使い方に関しては、https://mizunashi-mana.github.io/mastodon-front-gateway/add-share-button/ を見てくれって感じ。ボタンの動作としては、
- https://mizunashi-mana.github.io/mastodon-front-gateway/share?text={{text}}&url={{url}} というリンクに飛ぶ
- 共有先の情報を入力する画面が開く
- 共有先の情報入力して共有ボタン押すと、 https://your.mastodon/share?text={{text}}&url={{url}} に飛ぶ
という感じ。 https://mizunashi-mana.github.io/mastodon-front-gateway/share?text={{text}}&url={{url}} は完全にクライアントサイドだけで動くアプリとなっていて、共有ボタンを押すと、
- ユーザIDが URL だったら、そのオリジンを共有先に設定
- ユーザIDが URL じゃなかったら、ドメイン部分をパースして、そのドメインの WebFinger にアクセスしてユーザIDの情報を取得し、プロフィール URL のオリジンを共有先に設定
- 「ブラウザにユーザIDを保存」にチェックついてたら、ブラウザのローカルストレージにユーザID保存。次回、ローカルストレージからユーザID補完
- 共有先のオリジンの /share をクエリパラメータ渡して開く
みたいな挙動になる。これを JavaScript でやってる感じ。自動遷移機能というのもつけていて、これは単にローカルストレージにそういうオプション追加で保存して、次回開いた時ローカルストレージにそういうオプション載ってれば、自動で共有処理が走るだけ。自動遷移は、https://mizunashi-mana.github.io/mastodon-front-gateway/reset/ でリセットすれば解除できる。30日の有効期限もつけてるので、期間空いて解除の仕方分からんくなっても、多分大丈夫。
技術スタックとしては、
- View フレームワークは、 React。これも慣れ。もうこれでいいじゃんってなって抜け出せない。
- 国際化対応フレームは、 i18next。これも慣れ。まあちょっと不便な点はあるが、基本これでいいなって感じ。
- CSS フレームワークは、 Tailwind。なんか慣れた。まあ、正直こんぐらいなら大人しく style 直接書けばいいじゃんと思わなくはない。
- フォントフレームワークは、 FontAwesome。レパートリー豊富だしね。ただ、最近 SVG の書き方覚えたので、簡単なのは自分で書けばいいじゃんってなってる。
- バンドルツールは、 webpack 。これも慣れ。まあ、辛い点はあるが、そこまで大きく困ってることもない。というか、他も辛くて、満足いくものがない。
という感じ。改めて書いてみると慣れがほとんどだな。その内時代に取り残されそう。
コードは、https://github.com/mizunashi-mana/mastodon-front-gateway に公開してて、GitHub Pages へのデプロイ方法まで揃ってるんで、自分で立てたかったらフォークして適当に設定変えてどっかにデプロイして貰えばいいし、https://mizunashi-mana.github.io/mastodon-front-gateway/add-share-button/ をそのまま使ってもらってもいいって感じ。CDN サービス契約して、CI さえなんとかすれば普通にそれだけで立つんで、ま、ご随意にという。
共有ボタン自体は、 a タグでリンクすれば終わり。https://mizunashi-mana.github.io/mastodon-front-gateway/add-share-button/ に一応幾つかサンプル載せてる。サンプルのロゴは公式から引っ張ってきて AGPL なので使いにくいかも。ま、その辺は好きに変えてくれ。というか、AGPL じゃないいい感じの再頒布条件の Mastodon ロゴ募集中です。コピーライトさえ載せてて、免責特記さえあれば、自由に再頒布可能とかだと嬉しい。