Help us understand the problem. What is going on with this article?

Mastodon向け簡易シェアボタン

More than 1 year has passed since last update.

背景

Twitter等のSNSは多くの場合、Webサイト構築者向けに「シェアボタン」や「フォローボタン」用のURLを用意している。

例えば、Twitterの場合はWebサイトに

https://twitter.com/intent/tweet?text=(内容)

という形式のリンクを貼れば、それが簡易的なシェアボタン(ツイートボタン)として機能する(詳細)。

例:

<a href="https://twitter.com/intent/tweet?text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E4%B8%96%E7%95%8C" target="_blank">「こんにちは世界」とツイートする</a>

「こんにちは世界」とツイートする

Mastodon向けにもこのようなシェアボタンを設置できれば良いが、MastodonはインスタンスごとにURLが異なるため、普通にやると特定のインスタンス用のシェアボタンになってしまう。(例えば、PixivにはPawoo専用のシェアボタンが設置されている)

一方、 Mastoshareマストポータル 等のサービスは「任意のインスタンス向けのシェアボタン」を提供しているが、トゥートするには

  • シェアボタン提供者が用意している「メジャーなインスタンスのリスト」から選ぶか、
  • インスタンスのURLを手打ちする

必要があり、マイナーなインスタンスの利用者にとっては敷居が高い。

しかし、Mastodon v1.6.0以降では、プロトコルハンドラーを使うことにより

  • 任意のインスタンス向けのシェアボタンを
  • インスタンスのURLを手打ちさせることなく

実現できる。(ただし欠点として、2018年現在では対応ブラウザーが限定される。そのため記事のタイトルを「簡易」とした)

(Webベースの)プロトコルハンドラー

(Webベースの)プロトコルハンドラーとは、 mailto:webcal: のような http(s): 以外のプロトコルをWebアプリケーションが処理できるようにするためのWeb APIである。詳しくはMDNを参照:

現時点でChromeとFirefoxは対応しているが、SafariとEdgeは未対応のようだ。

このプロトコルハンドラーを使うと、「任意のインスタンス向けの」シェアボタンを次のような流れで実現できる:

  1. Mastodonの各インスタンスは、JavaScriptで navigator.registerProtocolHandler() を呼び出すことにより、 web+mastodon: プロトコルを自身のURL(https://example.com/intent?uri=%s)に紐つける。 この処理は、典型的にはそのインスタンスを最初に開いた際に行われる。ブラウザーによってはユーザーの明示的な操作を必要とする。
  2. Webサイト構築者は、シェアボタンを web+mastodon: プロトコルのリンクとして設置する。 例:<a href="web+mastodon://share?text=...">Share with Mastodon</a>
  3. 閲覧者が web+mastodon: プロトコルのリンクをクリックする。 ブラウザーは(必要なら選択のためのUIを表示して)登録済みのプロトコルハンドラーを呼び出す。 閲覧者が複数のインスタンスを利用している場合、この段階でどのインスタンスにシェアするのかが決まる。
  4. 1. で紐つけられたURL(https://example.com/intent?uri=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D...)が開かれる。後は、各インスタンスが、トゥートしたりフォローしたりするためのUIを提供する。

web+mastodon: プロトコル

2018年8月現在の最新版(v2.4.3)で確認する限り、実装されているURLの形式は次の通りである:

web+mastodon://share?text=(内容)
web+mastodon://follow?uri=(ユーザー名とドメイン)

text= および uri= 以下の引数は当然URLエンコードしておく。

なお、 (ユーザー名とドメイン)acct: から始まる場合、acct:は無視される。

URLの例:

web+mastodon://share?text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E4%B8%96%E7%95%8C
web+mastodon://follow?uri=mod_poppo%40mstdn.jp

ボタンの例とデモ

ただのハイパーリンクだと味気ないので、適当にCSSで見た目を整えよう。また、プロトコルハンドラーに非対応のブラウザーでボタンを表示しても仕方がないので、その場合はボタンを非表示とすると良いかもしれない。

例:

<style type="text/css">
.mastodon-share-button {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  color: white;
  background-color: #49a0de;
  border-radius: 3px;
  text-decoration: none;
  font-size: 11px;
  padding: 0 8px 0 8px;
}
body.no-protocol-handlers .mastodon-share-button {
  display: none;
}
</style>
<a class="mastodon-share-button"
   target="_blank"
   rel="noopener noreferrer"
   href="web+mastodon://share?text=Mastodon%E5%90%91%E3%81%91%E7%B0%A1%E6%98%93%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%20-%20Qiita%20https%3A%2F%2Fqiita.com%2Fmod_poppo%2Fitems%2Fd80ff225b4cc93318ee8"
   >トゥート</a>
<a class="mastodon-share-button"
   target="_blank"
   rel="noopener noreferrer"
   href="web+mastodon://follow?uri=mod_poppo%40mstdn.jp"
   >@mod_poppo@mstdn.jpをフォローする</a>
<script>
if (!navigator.registerProtocolHandler) {
  document.body.classList.add("no-protocol-handlers");
}
</script>

見た目:

スクリーンショット 0030-08-17 0.02.11.png

デモ:Mastodon向け簡易シェアボタン デモページ

関連リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした