ろぼいんブログ
更新：

Mastodonで記事の著者のアカウントを表示可能に　設定方法は？

トレンドニュースに著者のアカウントが表示されているようす

分散型SNSのMastodonに、リンク先の記事の著者のアカウントを表示する機能が追加されました。これにより、簡単に記事の著者をフォローできるようになります。

この記事では、その機能の詳細と設定方法を紹介します。

Mastodonでリンクの著者アカウントを表示する機能が実装

alt text
The Vergeのリンクには著者のアカウントが表示される
画像クレジット： Mastodon Blog

Mastodonの新機能では、リンク先の記事の著者のアカウントを表示し、そのアカウントを簡単にフォローできるようになりました。

この機能により、ライターやジャーナリストを簡単にフォローし、今後の執筆活動を追いかけられるようになります。

たとえば、The VergeやMacStories、MacRumorsといったサイトの記事リンクをMastodonでシェアすると、リンクの下に著者のアカウントが表示されます。

トレンドニュースに著者のアカウントが表示されているようす
トレンドニュースに著者のアカウントが表示されている画像クレジット： Mastodon Blog
Mastodonに投稿されたリンク付きトゥートのスクリーンショット
Mastodonに投稿されたリンク付きトゥート画像クレジット： Mastodon Blog

この機能はMastodonのAPIを利用しているため、他のサードパーティアプリでも同様に利用可能です。

現時点では、The Verge、MacStories、MacRumorsなどの一部のWebサイトのみがサポートされています。また、 TechCrunchも近いうちにサポートされる とのことです。

新機能によって、ジャーナリストやブロガーはひとつの媒体に縛られずに、複数のプラットフォームでの活動を一元管理し、読者との関係を深められるようになります。

たとえば、あるジャーナリストが異なるメディアで執筆活動をする場合でも、Mastodon上でフォロワーが増えることで、そのファン層を逃すことなく新しい記事にアクセスしてもらえます。

また、記事の著者情報が明確に表示されることで、メディア全体の信頼性も向上します。読者は信頼できる著者の情報源に直接アクセスできるため、フェイクニュースや不確実な情報に惑わされることなく、質の高いコンテンツを享受できます。

著者のアカウントを表示するための設定方法

Mastodonでリンクを共有したときに著者のアカウントが表示されるようにするには、OpenGraphタグを追加した上で、サーバーの管理者に問い合わせる必要があります。

OpenGraphタグの追加

まず、自身のWebサイトに指定されたOpenGraphタグを追加する必要があります。これは、ページがMastodonでシェアされた際に表示される情報を指定するタグです。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
<meta name="fediverse:creator" content="@[email protected]" />

このタグにより、リンク先のページに著者のアカウント情報を付与できます。

content属性の@[email protected]は、実際のアカウント名に置き換えてください。example.comはインスタンスのドメイン、@authorAccountはそのドメインにおける著者のハンドル名です。

たとえば、筆者のMisskeyアカウント（misskey.ioインスタンスの@roboin）であれば、次のようになります。

<meta name="fediverse:creator" content="@[email protected]" />

アカウントには、ActivityPubをサポートする任意の分散型SNSのアカウントを指定できます。ActivityPubをサポートするSNSには、MastodonやMisskeyの他に、Threadsなどがあります。

ただし、Blueskyは独自のAT Protocolを使用しているため、現時点ではサポートされていません。

サーバー設定

この機能は現時点では、mastodon.socialを含む最新のMastodonNightlyリリースを使用しているサーバーでサポートされています。

さらに、この機能が有効になるためには、モデレーターによって承認されたWebサイトである必要があります。

ニュース組織の一員であれば、Mastodonの開発チームにメールで連絡して有効化を依頼できます。詳細については、 公式ブログ を参照してください。

この機能を利用するためにモデレーターの承認が必要な理由は、悪意のあるユーザーが偽の著者情報を表示することを防ぐためです。

本人確認プロセスが実装されれば、モデレーターの手動での承認は不要になる見込みです。本ブログのように著者が1人しかいないようなWebサイトを含む、小規模なWebサイトでは、本人確認プロセスが実装されるまで待つ必要があります。

この機能の本人確認機能については、GitHubの Pull Request で議論されています。進捗が気になる場合は、このスレッドの通知をオンにしておくとよいでしょう。

参考

#Mastodon#ニュース#HowTo#Web開発#解説#プログラミング#Fediverse#ActivityPub#HTML

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事