スルッとFediShare

FediverseにWebページを共有するためのブラウザ拡張またはそのインタフェースの規格です。

対応ソフトウェア

ブラウザ拡張

  • Firefox
  • Chrome/Chromium系（未テスト）

共有先Fediverseサーバ

  • Misskey
  • Mastodon（未テスト）

Misskeyの/shareのように、その他のサーバも投稿の共有ページを持っていれば容易に対応できます。

使い方

ユーザ向け

ここでは、サイトにあるこの共有ボタンを使えるようになるまでを説明します。

必要なことは以下の2つです:

  1. 最初にここからブラウザ拡張をインストールします。
  2. ブラウザ拡張の設定を開き（Firefoxの場合はShit+Ctrl+Aでアドオン設定を開き、個別の拡張、ここではfedishareをクリックする）、普段使っているサーバーのURL（例: https://misskey.io、https://fedibird.comなど）を入力し、保存を押します。

サイト運営者向け

ここでは、サイトにこの共有ボタンを設置する方法を説明します。

必要なことは以下の2つです:

  1. scriptタグの作成
  2. body内でfediverse-shareを呼び出す
以上を踏まえると、最小限の構成は以下の通りになります。 

                                    <!DOCTYPE html>
                                    <html>
                                        <head>
                                            <script src="https://eniehack.github.io/thrutto-fedishare-web/thrutto-fedishare.min.js" type="module"></script>
                                        </head>
                                        <body>
                                            <fediverse-share></fediverse-share>
                                        </body>
                                    </html>

仕組み

ここでは、スルッとFediShareがどのように動作するのかについて説明します。主に、開発者を対象とします。

何故ブラウザ拡張が必要かという話ですが、これはブラウザ拡張を導入した際に、Webページを読み込んだときにどのような動きをするのか、特にブラウザ拡張とページ上の共有ボタンの連携に着目して話してみます。

  1. window.fediverseを挿入するスクリプトを拡張機能にあるcontent scriptがページ内に挿入する
  2. 他のスクリプト同様に実行される
  3. スルッとFediShareのボタンをclickした際にはじめてwindow.fediverse.getShareLink()を呼び出す
  4. ブラウザ拡張が共有用リンクを作成し、サイト側のスクリプトに共有用リンクを返却する
  5. 共有用リンクをwindow.openで開く

スルッとFediShareのボタン自体はcustom elementsと、それを利用したJavsScriptのUIフレームワークlitによって作られています。

各種リンク

デモ