役務: わずか数KB数十行の最小のMastodon/Misskey共有ボタンMaMiShare

概要

前回: HTMLの目次生成サービスGenerateTOC | GNU social JP Web、役務: 20のサービスに対応したWordPressの有名シェアプラグインHubbubのThreads対応 | GNU social JP Web。

自社製品紹介です。Mastodon/Misskeyへの共有ボタンMaMiShareを作ったのでお知らせします。「gnusocialjp/MaMiShare- NotABug.org: Free code hosting」がリポジトリ―です。使い方などの詳細はこちらのリポジトリ―に記載しています。この記事では経緯などを記載します。

2024-02-23 FriまではWordPressテーマCocoonで用意されている以下のようなソーシャルボタンを記事末尾に設置していました。

2024-02-24 Satにこれを以下に置換しました。

対応できていなかったThreads/Mastodon/Misskeyへの共有に対応しました。ついでに、ほとんど共有のなかったPocket/LINEを廃止しました。

左側のテキストボックスに自分のサーバーのドメインを入力してMaMiShareを選ぶと、[QP 記事タイトル URL] が入力された状態の投稿画面が開かれます。入力支援にリストボックスで、よくリファラーのアクセスのあるサーバーの一覧を用意しています。localStorageでホスト名を保存しているので、サーバーの記入は初回だけです。

経緯

今回の開発経緯は以下の投稿群です。

2024-02-24T00:13:20.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

起きて2時間で記事3個。上々です。この勢いで先月から作ろうと思っていた年報。これを午前中に集中して片付けますかね。年1回しかやりません。これができたら午後から確定申告か、その前にサイトにSNSへの共有ボタンの設置検討ですかね。

2024-02-24T01:36:33.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

年報書きました。明日朝公開です。労力をかけようと思えばいくらでもかけられますけど、見る人もあまりいないのでできるだけ労力をかけない形で作りました。 ちょっと早いですけど、お昼ご飯にして、共有ボタン設置を検討します。 FacebookとかBlueskyからもわずかなんですけどアクセスあって、アカウントを作って投稿連携する意味はあるようです。

2024-02-24T04:44:16.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

共有ボタン。検討しています。やることって、せいぜい初回に投稿元のサーバーを選択するだけ。サーバー選択だけ、localStorageに保存する形にして、それを参照するだけ。javascriptでやるとしても100行いかないと思うのですよね。2時間くらい集中して作ってみますか。

2024-02-24T04:59:04.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

うーん。JavaScriptでやろうかと思いましたけど、入力したドメインの記憶と、その削除がけっこう面倒くさいなと思ってしまいました。ドメインの入力欄を表示しっぱなしで、ブラウザーのオートコンプリートで記憶させる方式にしますかね。これだとJavaScriptすらいらなくて完璧です。

2024-02-24T09:55:56.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

基本はブラウザーのオートコンプリートでドメインを入力する想定ですけど、datalistの入力候補もあってもいいと思ってサイトのリファラーを眺めています。 私のサイト、ほとんどmisskeyのサーバーからのアクセスです。mastodonからのアクセスほぼないです。私って何なんですかね…

2024-02-24T13:45:16.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

記事の末尾のSNSの共有ボタン。自作しました。結局午後からほぼ1日かかった感じです。 ThreadsとMastodon/Misskeyに対応して満足です。後は告知。明日にしましょうかね。 [役務: X/TwitterのMastodonコミュニティー「マストドン案内所」 | GNU social JP Web](https://web.gnusocial.jp/post/2024/02/24/10285/)

2024-02-24T13:53:56.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

いや。やっぱり、localStorageを使う形でやったほうがいいですかね。オートコンプリートの保存もわかりにくいので…

2024-02-24T14:33:16.000Z

ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp

localStorage対応した。これで完璧です。満足。寝ます！

「役務:Misskey愛好家運営の新しい分散SNSのブログサイトfedimagazine.tokyo | GNU social JP Web」でfedimagazine.tokyoを紹介したその直後あたりに、あちらのサイトで共有ボタンの設定を見かけて、このあたりからやってもいいかなと考えていました。

私個人としては別にいらないかなと思いましたが、先日「告知: Bluesky/Nostr/Facebook/Instagramアカウントの稼働開始 | GNU social JP Web」で他のSNSでの投稿を開始したところ、Bluesky/Facebookでわずかなアクセスがありました。一度やれば以後ほぼ労力かからないので、わずかでも効果があるならやってもいいかなと思いました。他に、最近Threadsの共有ボタンが可能になりましたが、これは自作しないと設置がちょっと難しいと思ったのもあります。

今回たまたま少し朝早く起きれてやる気になったので一日集中して取り組んで作りました。

実装

過去に以下の投稿群で共有ボタンについてサイト内で紹介してきました。

• 役務:20のサービスに対応したWordPressの有名シェアプラグインHubbubのThreads対応 | GNU social JP Web
• 機能:Threadsのテキスト共有用Web Intent URLの対応 | GNU social JP Web
• 役務:多数の実装に対応した分散SNS向けシェアボタンFedibuzzer | GNU social JP Web
• Misskeyへの共有ボタン設置サービスMisskey Share | GNU social JP Web

サイト内で紹介していないだけで、他にも多数のMastodon/Misskeyのシェアボタンの試みがあるのは知っていました。既存のものでうまくできないか調査し「Service- GNU social JP Wiki」にメモしました。

調査の結果、自分の満足できるものはないことが判明したため、自作しました。具体的には以下がポイントです。

• 外部サーバー依存。
• モーダルなどの余計な画面遷移。
• ファイルサイズ。
• 無駄に長くて複雑な実装。

まず大半の実装は外部サーバーを前提とします。そもそも必要なものは自分のサーバーの情報だけなのに、そこにどうでもいい仲介用のサーバーが入るのがうざいので嫌だったので選択肢がこの時点でかなり絞られます。

「マストドンのシェアボタンを自作した(追記あり)(今日から使えます) – Lambdaカクテル」のmastodon-share-button-scalajsが理想に近かったのですが、モーダルの余計な画面遷移があり、なによりもこの程度の処理のために1 MB以上のJavaScriptが必要になります。

せいぜい100行数KB以内程度でできる想定なのに500倍程度にデータが膨れ上がるのはいくらなんでも大袈裟ですし、頭悪いと思います。

そういう経緯で自作しました。やることはボタン押下時にhost/share?text=のURLを開いて記事タイトルとURLが入力された状態の投稿画面を開くだけです。単にURLを開くだけなので、やること自体は簡単です。

実装の話では、サーバーの選択・記憶がポイントでした。個人的にはlocalStorageで余計なデータ保存が嫌だったので、イレギュラーですが、Webブラウザーのオートコンプリートを試しました。が、これはこれでわかりにくいので、結局localStorageになりました。ここの調査・調整が時間の大半でした。

結論

MaMiShareでした。2017年のMastodonブーム当初からそれなりに需要がありそうな機能の割に、自分の納得のいくものはなく、結局自作しました。ASDの変なこだわりなんでしょう。納得いくものができて満足です。

ただやっていることは実にシンプルです。他の既存の実装は無駄に複雑で冗長な実装になっています。基本は自分で作るのがいいです。

シンプルなら改変も応用も効きます。今後はBluesky/Nostrの対応を考えています。他に、GNU socialでのWeb Intent URL対応も検討したいです。