<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>Mastodon &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/mastodon/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>「マストドンを支える技術」をソーシャルウェブから探る（後編） 〜Mastodon Tech Night#1潜入レポート〜</title>
		<link>/yusuke-naka/23094/</link>
		<pubDate>Tue, 02 May 2017 00:00:30 +0000</pubDate>
		<dc:creator><![CDATA[仲 裕介]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Mastodon]]></category>
		<category><![CDATA[ソーシャルウェブ]]></category>
		<category><![CDATA[マストドン]]></category>

		<guid isPermaLink="false">/?p=23094</guid>
		<description><![CDATA[今回の記事は後編です。前編はこちら 今回は、エンジニア向けニュースアプリTechFeedの運営や当メディアの編集長も務める白石俊平さんが主催する、Mastodon Tech Night#1に潜入してきました（会場は株式会...]]></description>
				<content:encoded><![CDATA[<p><style>
b.speaker {
  font-weight: bold;
}
b.speaker::after {
  content: ": ";
}
.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style></p>

<p><strong>今回の記事は後編です。前編は<a href="https://html5experts.jp/?p=22985" data-wpel-link="internal">こちら</a></strong></p>

<p>今回は、エンジニア向けニュースアプリ<a href="https://techfeed.io/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">TechFeed</a>の運営や当メディアの編集長も務める白石俊平さんが主催する、<a href="https://techfeed.connpass.com/event/55660/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Mastodon Tech Night#1</a>に潜入してきました（会場は<a href="http://www.rich.co.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">株式会社リッチメディアさん</a>）。主催の白石さんと、ソーシャルウェブに詳しく当メディアのエキスパートでもある<a href="https://html5experts.jp/agektmr/" data-wpel-link="internal">えーじ</a>さんお二人がメインスピーカーとして進行し、３名の方のライトニングトークで締めくくるという内容でした。</p>

<p>「マストドンを支える技術をソーシャルウェブから探る」という副題が付けられた当イベント、エンジニア（特にSNSやソーシャルアプリ開発者）であれば垂涎の「濃い」内容でした。では皆様お楽しみください。</p>

<div id="attachment_23022" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/mastodon_event_1-640x480.jpg" alt="株式会社リッチメディア" width="640" height="480" class="size-large wp-image-23022" srcset="/wp-content/uploads/2017/05/mastodon_event_1.jpg 640w, /wp-content/uploads/2017/05/mastodon_event_1-300x225.jpg 300w, /wp-content/uploads/2017/05/mastodon_event_1-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">本イベントの会場となった株式会社リッチメディアさん</p></div>

<p>今回の進行用スライドはこちらです。</p>

<div class="iframe-container">
<iframe src="https://docs.google.com/presentation/d/1AuDdrrPKqRjnNJ3yzGS6vjAy8Vt1-vS4j6C4m49kFTI/embed?start=false&#038;loop=false&#038;delayms=3000" frameborder="0" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>

<p><strong>今回の記事は後編です。前編は<a href="https://html5experts.jp/?p=22985" data-wpel-link="internal">こちら</a></strong></p>

<h2>ソーシャルウェブのプロトコルを探る</h2>

<p><b class="speaker">白石</b>
では次に、マストドン、というかソーシャルウェブを構成するプロトコルのお話に入りましょうか。</p>

<div id="attachment_23042" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/mastodon_event_4-1-640x356.png" alt="Mastodonを構成する３つのレイヤー" width="640" height="356" class="size-large wp-image-23042" srcset="/wp-content/uploads/2017/05/mastodon_event_4-1.png 640w, /wp-content/uploads/2017/05/mastodon_event_4-1-300x167.png 300w, /wp-content/uploads/2017/05/mastodon_event_4-1-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text"><a href="https://docs.google.com/presentation/d/1AuDdrrPKqRjnNJ3yzGS6vjAy8Vt1-vS4j6C4m49kFTI/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.g216742f12f_2_151" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Mastodonを構成する３つのレイヤー（再掲）</a></p></div>

<p><b class="speaker">えーじ</b>
OpenIDについては先ほど説明したので、次はやはり<strong>OAuth</strong>ですね。</p>

<p>サービスをまたいで情報のやり取りを行いたいというニーズに答えるためには、外部サービスのAPI呼び出しを安全に行える必要があります。また、ユーザーが自分に関する情報をどのサービスに、どこまで公開するかと言ったアクセス権を設定したいというニーズも出てきます。
そこで登場したのがOAuthです。OAuthは、Twitterクライアントを作りたいという人たちの間で急速に普及しましたね。</p>

<p>OAuthはもう一般的なので、今はもうそんなことも意識せずに、みなさん利用していますね。「Facebookでログイン」「Twitterでログイン」と言った機能を持つサイトは、みんなOAuthを利用しています。</p>

<p><b class="speaker">白石</b>
そうですね。最初期の頃、TwitterのAPIってBasic認証だったので、みんながTwitterのパスワードを外部のサービスに入力していたという(笑)
牧歌的な時代でしたね。</p>

<p><b class="speaker">えーじ</b>
そうですね(笑)</p>

<p>では次に紹介したいのは<strong>WebFinger</strong>という技術です。
この技術は、端的にいうと、<strong>ユーザーIDが分かれば、そのユーザーに紐付くプロフィールページやWeb APIなどの一覧を取得できる</strong>というものです。
「(API)ディスカバリ」の技術と言えますね。</p>

<p>例えば、以下のURLにアクセスしてみて下さい。</p>

<p><a href="https://don.techfeed.io/.well-known/webfinger?resource=shumpei@don.techfeed.io" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">https://don.techfeed.io/.well-known/webfinger?resource=shumpei@don.techfeed.io</a></p>

<p><small>
※ resource=より後には自分のIDを入力して下さい。ドメインはインスタンスに合わせて変えて下さい
</small></p>

<p><b class="speaker">えーじ</b>
結果はJSONで返ってきますが、色々と情報がここに詰め込まれています。</p>

<div id="attachment_23038" style="width: 650px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_5.png" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_5.png" alt="WebFingerリプライ解析" width="640" height="332" class="size-full wp-image-23038" srcset="/wp-content/uploads/2017/05/mastodon_event_5.png 640w, /wp-content/uploads/2017/05/mastodon_event_5-300x156.png 300w, /wp-content/uploads/2017/05/mastodon_event_5-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">※ここに表示しているのは筆者のアカウント情報です</p></div>

<p><code>links</code>の中身を参照すると、APIのエンドポイントURLや、APIの種別などの情報が詰め込まれています。
ユーザーIDさえわかれば、サービス上でそのユーザーに関する情報にアクセスするための様々なエンドポイントが分かっちゃうんですね。これがWebFingerです。</p>

<p><small>
※筆者注: WebFingerは、様々なホストやホスト上のユーザーの情報を取得できる<a href="https://ja.wikipedia.org/wiki/Fingerプロトコル" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Fingerコマンド</a>になぞらえて命名されたと思われる。
</small></p>

<p><code>links.rel</code>の中に、<code>salmon</code>や<code>ostatus</code>と言った文字列が見え隠れしていますね。
これが、ソーシャルウェブを構成するプロトコルの名称ですね。</p>

<h2>マイクロブログ関連のプロトコルを探る</h2>

<p><b class="speaker">白石</b>
では次は、マイクロブログ関連の各種プロトコルの話に入りましょうか。
以下が、マストドンのドキュメントから引っ張ってきた、プロトコルの一覧です。
マストドンのコードを深く知るには、これらソーシャルウェブの技術に通じておく必要があります。</p>

<div id="attachment_23040" style="width: 650px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_6.png" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_6.png" alt="ソーシャルウェブの構成要素" width="640" height="358" class="size-full wp-image-23040" srcset="/wp-content/uploads/2017/05/mastodon_event_6.png 640w, /wp-content/uploads/2017/05/mastodon_event_6-300x168.png 300w, /wp-content/uploads/2017/05/mastodon_event_6-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text"><a href="https://docs.google.com/presentation/d/1AuDdrrPKqRjnNJ3yzGS6vjAy8Vt1-vS4j6C4m49kFTI/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.g216742f12f_2_160" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">マストドン Tech Night#1進行スライドより</a></p></div>

<p><b class="speaker">白石</b>
それは先程までえーじさんが語っていたソーシャルウェブの世界がその先にあるからなんですね。
そして行き着くところは、マストドンどころか、様々なSNSが自動でディスカバリーし情報連携できる世界。
そんな分散型SNSの世界を実現するための構成要素がこのプロトコルたち、という位置づけです。</p>

<p>じゃあえーじさん、一つ一つを簡単でいいので解説をお願いします。</p>

<h3>Atom、ActivityStreams、Atom Threading</h3>

<p><b class="speaker">えーじ</b>
まずは、<strong><a href="https://tools.ietf.org/html/rfc4287" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Atom</a></strong>ですね。これはご存じの方も沢山いらっしゃると思います。</p>

<p>これはRSSなどと同じく、フィード情報をXMLで表現する技術で、情報を時系列で発信する場合に適切なフォーマットであるといえます。
サイトの更新情報を発信するのによく使われています。</p>

<p><b class="speaker">白石</b>
Atom Publishing Protocolというのもありましたね。
Atom形式で情報をポストしたりできるようにする技術。<a href="http://developer.hatena.ne.jp/ja/documents/blog/apis/atom" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">はてなダイアリーのAPI</a>とかは、AtomPubで構築されていたはずです。</p>

<p><b class="speaker">えーじ</b>
このAtomを拡張して、サービス上のユーザーアクティビティを表せるようにしたものが<strong><a href="http://activitystrea.ms/specs/atom/1.0/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Activity Streams</a></strong>です。
Activity Streamsは、<a href="https://www.w3.org/TR/activitystreams-core/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">JSON</a>版の仕様も用意されていて、JavaScriptとも相性が良いよう設計されています。</p>

<p><b class="speaker">白石</b>
あまり馴染みのない方も多そうですが、SNS上の行動の事を技術的には「アクティビティ」って呼ぶんですよね。
Facebookにも、自分のプロフィールページに「アクティビティログを見る」って機能があります。</p>

<p><b class="speaker">えーじ</b>
そう、なのでActivity Streamsはそのアクティビティをストリーム形式で参照できる仕様ということです。
一般的なAtomが持つ情報に加えて、写真を取りましたとか、物を買いましたとか、何らかのアクションに紐付いた情報発信ができるのがActivity Streamsの特徴です。</p>

<p><b class="speaker">白石</b>
ちなみに、ActivityStreamsといえば、<a href="http://activitystrea.ms/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">activitystrea.ms</a>というドメインだったのを覚えてます。
<strong>こういう風に名前とドメインをかぶせるやつ、昔流行りましたよね</strong>。</p>

<div id="attachment_23081" style="width: 455px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/3aca857fb3d16a117d9e538f30f392c1.png" alt="activitystrea.ms" width="445" height="460" class="size-full wp-image-23081" srcset="/wp-content/uploads/2017/05/3aca857fb3d16a117d9e538f30f392c1.png 445w, /wp-content/uploads/2017/05/3aca857fb3d16a117d9e538f30f392c1-290x300.png 290w, /wp-content/uploads/2017/05/3aca857fb3d16a117d9e538f30f392c1-200x207.png 200w" sizes="(max-width: 445px) 100vw, 445px" /><p class="wp-caption-text">activitystrea.ms</p></div>

<p><b class="speaker">えーじ</b>
Web2.0の時代に流行りましたねー(笑)</p>

<p>次は<strong><a href="https://tools.ietf.org/html/rfc4685" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Atom Threading</a></strong>ですが、これはあまり私も詳しくないです。
想像ですが、誰かがポストした時にそれをスレッド化するものなんじゃないかなと思います（※）。</p>

<p><small>
※<a href="https://tools.ietf.org/html/rfc4685" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">RFC</a>によると、「Atom内でスレッド状のディスカッションを表現するためのメカニズムである」（This memo presents a mechanism that allows feeds publishers to express threaded discussions within the Atom Syndication Format）だそうです。
</small></p>

<h3>OStatus</h3>

<p><b class="speaker">えーじ</b>
次は、<a href="https://www.w3.org/community/ostatus/wiki/images/9/93/OStatus_1.0_Draft_2.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">OStatus</a>です。
例えばメンションやフォロー、リプライと言った機能がTwitterにはありますが、そういった機能を異なるサービス間で行えるようにする仕様です。</p>

<p><b class="speaker">白石</b>
さっきやったように、マストドン上で <code>@ID@ドメイン</code>の形式でメンションとかを行うと、OStatusのプロトコルが動作するというわけですね。</p>

<p><b class="speaker">えーじ</b>
はい、そうです。</p>

<p>他のユーザーに対してメンションを行うと、まず先ほどお話したWebFingerが動作して、他のインスタンスが持つAPIのエンドポイントを取得します。
その後、実際のAPI呼び出しが行われて処理が実行されるわけですね。</p>

<p>例えばこれは、<code>/api/v1/statuses</code>（<a href="https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md#statuses" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ドキュメントへのリンク</a>）というAPIを叩いて、パブリックトゥートの情報を表示したところです。</p>

<div id="attachment_23047" style="width: 650px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_8.png" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_8.png" alt="OStatus解析" width="640" height="251" class="size-full wp-image-23047" srcset="/wp-content/uploads/2017/05/mastodon_event_8.png 640w, /wp-content/uploads/2017/05/mastodon_event_8-300x118.png 300w, /wp-content/uploads/2017/05/mastodon_event_8-207x81.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">※記事では適当なトゥートを題材にしています</p></div>

<p><b class="speaker">えーじ</b>
<code>mentions</code> や <code>inreply_to</code> 等のキー情報がありますよね。メンションやリプライがあるとここに情報が格納されますが、これがOStatusをはじめとする様々な仕様によって付与された情報なんです。
「プロトコル」と言われるとなんだか仰々しいもののように感じてしまうと思いますが、実際にはこういうシンプルな処理を定義しているだけなんですね。</p>

<h3>Salmon</h3>

<p><b class="speaker">えーじ</b>
次は<strong>Salmon</strong>です。Salmonは逆流するという意味合いで使われています。鮭なので川を遡上しますよね。別のインスタンスでコメントが付いた場合に、自分のインスタンス上に「戻ってくる」仕組みを提供しています。
ぼく、これ以上のことは知らないんですが、何かご存知ですか？</p>

<div id="attachment_23083" style="width: 541px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/43d526a7c140e5de6cee4a8c9212b92e.png" alt="Salmon Protocol" width="531" height="329" class="size-full wp-image-23083" srcset="/wp-content/uploads/2017/05/43d526a7c140e5de6cee4a8c9212b92e.png 531w, /wp-content/uploads/2017/05/43d526a7c140e5de6cee4a8c9212b92e-300x186.png 300w, /wp-content/uploads/2017/05/43d526a7c140e5de6cee4a8c9212b92e-207x128.png 207w" sizes="(max-width: 531px) 100vw, 531px" /><p class="wp-caption-text">Salmon Protocol</p></div>

<p><b class="speaker">白石</b>
いやー、知らないですね。
ただ、昔調べたのは覚えてます。2010年くらいに、<a href="http://d.hatena.ne.jp/Syunpei/20100723/1279866702" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">DaVinciPad</a>っていうサービスを一人で作っていたんですが、このプロトコルを使いたかったんですよね。
メモ＋SNSへのマルチポスト機能があって、そのポストへのリプライをツール上でキャッチアップしたかったんですよ。まぁ、だれも知らないことなんですが(笑)</p>

<p><b class="speaker">えーじ</b>
あー、DaVinciPadって作ってらっしゃいましたね。なつかしい。</p>

<p>ちなみに、一つ懸念していることがあるんですが、Salmonをはじめ<strong>こういうプロトコルって基本的に思想が古い</strong>んですよね。
XMLベースの仕様が多いことも含め、今のWebに最適化されていないんです。登場から7年も経っているわけなので、大量のトラフィックを捌いていくには、仕様をアップデートしていく必要があるんじゃないかなと考えています。</p>

<h3>Portable Contacts</h3>

<p><b class="speaker">えーじ</b>
次は<strong><a href="https://web.archive.org/web/20160305010620/http://portablecontacts.net/draft-spec.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Portable Contacts</a></strong>ですね。これはIdentityに関係するものですが、友達リストを交換するためにフォーマットを合わせるための仕様です。
確か、GoogleにはPortable ContactsのAPIがあって、Gmailのアドレス帳のデータもPortable Contactsの形式で取得できます（残念ながら終了済み）。</p>

<p><b class="speaker">白石</b>
なるほど、フォロー／フォロアーのリストとかをやり取りするための汎用的な仕様ですね。
SNSが持つ様々な機能を細切れにして、それぞれ標準化したという感じを受けます。</p>

<p><b class="speaker">えーじ</b>
その解釈は正しいと思いますよ。汎用的になるように、そして一部だけでも利用できるように、あえて細かく仕様を分けていったという感じじゃないでしょうか。
一つ一つの仕様は小さいのですが、まとめて組み合わせると理路整然としている感じです。</p>

<p><b class="speaker">白石</b>
なるほどー。でも、よくこれだけバラバラな、策定している団体や企業も様々な仕様を、うまくつなげることが出来ましたね。
当時、ソーシャルウェブはそれだけのムーブメントだったということですね。</p>

<h3>PubSubHubbub、WebFinger、Link-based Resource Descriptor Discovery</h3>

<p><b class="speaker">えーじ</b>
次は、<strong><a href="https://pubsubhubbub.github.io/PubSubHubbub/pubsubhubbub-core-0.4.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">PubSubHubbub</a></strong>です。
PubSubHubbubはいわゆるリアルタイム通知の仕組みです。サブスクライブしておくと、ハブを介してプッシュ型でメッセージを送ってもらえる。</p>

<p><b class="speaker">白石</b>
ちょっと補足すると、RSSなどのフィードって、基本的にはポーリングで取得します。15分に1回とか、30分に1回とか。
でも、更新がなくて空振りすることも多い。それじゃ効率が悪いということで、PubSubHubbubはサイト側からサブスクライバーに向けてプッシュで更新を通知するという仕組みでした。</p>

<p>こないだ、W3Cが急に標準化を進めて、<strong>「<a href="https://www.w3.org/TR/websub/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebSub</a>」と言う仕様でCandidate Recommendationにした</strong>のはびっくりしました(笑)</p>

<div id="attachment_23085" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/422b10f769ef33c9489e94ffbd358efa-640x395.png" alt="WebSub" width="640" height="395" class="size-large wp-image-23085" srcset="/wp-content/uploads/2017/05/422b10f769ef33c9489e94ffbd358efa.png 640w, /wp-content/uploads/2017/05/422b10f769ef33c9489e94ffbd358efa-300x185.png 300w, /wp-content/uploads/2017/05/422b10f769ef33c9489e94ffbd358efa-207x128.png 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">WebSub</p></div>

<p><b class="speaker">えーじ</b>
残るはWebFingerとLink-based Resource Descriptor Discoveryですが、<a href="https://tools.ietf.org/html/rfc7033" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebFinger</a>は先ほどご説明したように、ユーザーやサービスに関する様々な情報を参照するためのプロトコルです。
<a href="https://tools.ietf.org/html/rfc6415" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Link-based Resource Descriptor Discovery</a>は、サーバ上に置く <code>/.well-known/host-meta</code> というファイルのフォーマットに関する仕様で、WebFingerのURLもこのファイルを参照して取得することができます。</p>

<p><small>
※筆者注: 例えば don.techfeed.ioのhost-metaは <a href="https://don.techfeed.io/.well-known/host-meta" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">https://don.techfeed.io/.well-known/host-meta</a>にアクセスすると参照することができ、その中にWebFingerに関するURLも含まれている。以下がhost-metaファイルの内容。
</small></p>

<p></p><pre class="crayon-plain-tag">&lt;?xml version="1.0"?&gt;
&lt;XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0"&gt;
  &lt;Link rel="lrdd" type="application/xrd+xml" template="https://don.techfeed.io/.well-known/webfinger?resource={uri}"/&gt;
&lt;/XRD&gt;</pre><p></p>

<h2>マストドンはソーシャルウェブの理想を実現するか？</h2>

<p><b class="speaker">白石</b>
ソーシャルウェブのプロトコルに関しても一通り眺めたところで、だいぶソーシャルウェブのスタックや、マストドンに関する理解も深まったように思います。
ではそろそろまとめに入りたいと思うんですが、昨今のマストドンブーム、そしてソーシャルウェブを振り返って、思うところがあればお聞かせください。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_9.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_9.jpg" alt="PubSubHubbubの話" width="640" height="480" class="aligncenter size-full wp-image-23049" srcset="/wp-content/uploads/2017/05/mastodon_event_9.jpg 640w, /wp-content/uploads/2017/05/mastodon_event_9-300x225.jpg 300w, /wp-content/uploads/2017/05/mastodon_event_9-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p><b class="speaker">えーじ</b>
そうですね、まずソーシャルウェブの目指すところは、ウェブ上にアイデンティティのレイヤーを築くということ、その上で、サービスをまたいだコミュニケーションを実現するということにあると思います。
マストドンの流行は、そういう世界の実現を後押しするかもしれないと期待しています。</p>

<p><b class="speaker">白石</b>
なるほど。ソーシャルウェブの時代はまだまだこれからだ、と。</p>

<p><b class="speaker">えーじ</b>
まあでも、ソーシャルウェブの理想が完全に実現するか…っていうと道は遠いだろうなあ、と思っているのが正直なところです。</p>

<p>今はとにかく、<strong>マストドンが流行ると良いなと思っています</strong>。熱狂していた頃から7年も経っているので多少は落ち着いたというか、あんまり純粋に理想を追い求めても、というか…何て言うんだろう。</p>

<p><b class="speaker">白石</b>
<strong>原理主義？</strong></p>

<p><b class="speaker">えーじ</b>
ああ、それだ。ソーシャルウェブ原理主義(笑)
そういう原理主義的な思想は今は少し収まっていて、とりあえずマストドン流行ればいいや、マストドンが流行れば結果的にソーシャルウェブが流行ることに繋がるし…と、そんな風に感じているというのが正直なところです。</p>

<h2>「マストドンの技術を応用して、既存サービスで何ができるか」を考えるのは面白い</h2>

<p><b class="speaker">白石</b>
ほか、「マストドンの技術を応用して、既存サービスで何ができるか」って話もしたいとおっしゃってましたが、こちらはどうですか？</p>

<p><b class="speaker">えーじ</b>
そうそう、ソーシャルウェブの技術って、ウェブをベースに考えられているので、既存のサイトとかに組み込むのは実はそれほど難しくないんですよ。
例えばメディアが吐いてるRSSフィードをAtomベースのActivity Streamsに変えたりするとか、そんなちょっとした変更を加えていくだけで、マストドンとコミュニケーションできるようになるかもしれないんです。</p>

<p><b class="speaker">白石</b>
なるほど。メディアが1マストドンインスタンス、もしくはマストドンユーザーにもなりうるということですね。</p>

<p><b class="speaker">えーじ</b>
そうです。白石さんがやってらっしゃる<a href="https://techfeed.io/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">TechFeed</a>とかも、マストドンの技術を取り込む価値はあるんじゃないかと思いますよ。
この会場にいらっしゃる方々も、すでに何らかのサービス開発に取り組んでいらっしゃる方が多いと思いますが、そこにマストドンやソーシャルウェブを組み合わせるとどういうことになるか、ちょっと想像してみるのは面白いと思います。</p>

<p>ちなみに、前にフランスでもマストドンの流行の波が来ていたみたいなのですが、日本はそれの何倍もの大きな波がきているみたいです。
Twitterとかで、英語でこのことをつぶやくと、みんなその理由を知りたがるという状態です。
このままマストドンの活用でも一歩先んじて、マストドン先進国、もっと言えばソーシャルウェブの先進国になれたらいいな…なんてことを思ったりしています。</p>

<p><b class="speaker">白石</b>
なるほど、すごく夢のある話ですね…！えーじさん、今日はマストドンとソーシャルウェブについて、とことんまで深く付き合っていただき、ありがとうございました！</p>

<h2>ライトニングトーク</h2>

<p>えーじさんと白石さんの対談のあとは、ライトニングトークで締めくくりました。</p>

<h3>Meganedonやってみた。</h3>

<script async class="speakerdeck-embed" data-id="fd14c16c96254f35a02048b5b67858ed" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

<p><a href="http://meganedon.link/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">meganedon</a>という独自インスタンスを立ち上げてみた話でした。運用する上で重要となるティップスが５分間のLTに濃縮されています。</p>

<h3>ソース読む 今日のテーマは Mastodo</h3>

<p>マストドンのソースコードを読むためにFreeBSDでインスタンスを立てた話。マストドンのソースコードを追いかけるためノウハウがわかりやすく解説されました。</p>

<h3>マイ丼 ５分間　クッキング</h3>

<iframe src="//www.slideshare.net/slideshow/embed_code/key/yjXkC7WrHxbpqy" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

<div style="margin-bottom:5px"> <strong> <a href="https://html5experts.jp//www.slideshare.net/dsuket/5-75473306" title="マイ丼5分クッキング" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">マイ丼5分クッキング</a> </strong> from <strong><a target="_blank" href="https://www.slideshare.net/dsuket" data-wpel-link="external" rel="follow external noopener noreferrer">dsuke Takaoka</a></strong> </div>

<p>TechFeedのCTOである、dsukeさんのLTで、AWS上でTechFeedonを立てた話が紹介されました。ソースコードもGithubで公開中とのこと。</p>

<p><a href="https://github.com/techfeed/techfeedon" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">https://github.com/techfeed/techfeedon</a></p>

<h1>最後に</h1>

<p>皆さん、いかがだったでしょうか？
今大人気の分散型SNSマストドンですが、マストドンの裏側に見え隠れしているソーシャルウェブの思想や各種プロトコルについて、垣間見ていただくことは出来たでしょうか？
マストドンは単に流行りのサービス…というわけではないことがご理解いただけたと思います。マストドンに触れる際は、マストドンが実現しようとしている古くて新しいソーシャルウェブの世界観について是非思いを巡らせてみて下さい。</p>

<p><strong>今回の記事は後編です。前編は<a href="https://html5experts.jp/?p=22985" data-wpel-link="internal">こちら</a></strong></p>
]]></content:encoded>
			</item>
		<item>
		<title>「マストドンを支える技術」をソーシャルウェブから探る（前編） 〜Mastodon Tech Night#1潜入レポート〜</title>
		<link>/yusuke-naka/22985/</link>
		<pubDate>Tue, 02 May 2017 00:00:13 +0000</pubDate>
		<dc:creator><![CDATA[仲 裕介]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Mastodon]]></category>
		<category><![CDATA[ソーシャルウェブ]]></category>
		<category><![CDATA[マストドン]]></category>

		<guid isPermaLink="false">/?p=22985</guid>
		<description><![CDATA[今回の記事は前編です。後編はこちら 今回は、エンジニア向けニュースアプリTechFeedの運営や当メディアの編集長も務める白石俊平さんが主催する、Mastodon Tech Night#1に潜入してきました（会場は株式会...]]></description>
				<content:encoded><![CDATA[<p><style>
b.speaker {
  font-weight: bold;
}
b.speaker::after {
  content: ": ";
}
.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style></p>

<p><strong>今回の記事は前編です。後編は<a href="https://html5experts.jp/?p=23094" data-wpel-link="internal">こちら</a></strong></p>

<p>今回は、エンジニア向けニュースアプリ<a href="https://techfeed.io/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">TechFeed</a>の運営や当メディアの編集長も務める白石俊平さんが主催する、<a href="https://techfeed.connpass.com/event/55660/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Mastodon Tech Night#1</a>に潜入してきました（会場は<a href="http://www.rich.co.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">株式会社リッチメディアさん</a>）。主催の白石さんと、ソーシャルウェブに詳しく当メディアのエキスパートでもある<a href="https://html5experts.jp/agektmr/" data-wpel-link="internal">えーじ</a>さんお二人がメインスピーカーとして進行し、３名の方のライトニングトークで締めくくるという内容でした。</p>

<p>「マストドンを支える技術をソーシャルウェブから探る」という副題が付けられた当イベント、エンジニア（特にSNSやソーシャルアプリ開発者）であれば垂涎の「濃い」内容でした。では皆様お楽しみください。</p>

<div id="attachment_23022" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/mastodon_event_1-640x480.jpg" alt="株式会社リッチメディア" width="640" height="480" class="size-large wp-image-23022" srcset="/wp-content/uploads/2017/05/mastodon_event_1.jpg 640w, /wp-content/uploads/2017/05/mastodon_event_1-300x225.jpg 300w, /wp-content/uploads/2017/05/mastodon_event_1-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">本イベントの会場となった株式会社リッチメディアさん</p></div>

<p>今回の進行用スライドはこちらです。</p>

<div class="iframe-container">
<iframe src="https://docs.google.com/presentation/d/1AuDdrrPKqRjnNJ3yzGS6vjAy8Vt1-vS4j6C4m49kFTI/embed?start=false&#038;loop=false&#038;delayms=3000" frameborder="0" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>

<p><strong>今回の記事は前編です。後編は<a href="https://html5experts.jp/?p=23094" data-wpel-link="internal">こちら</a></strong></p>

<h2>マストドンのおさらい</h2>

<p><b class="speaker">白石</b>
皆様こんにちは！本日は「Mastodon Tech Night#1 〜マストドンを支える技術をソーシャルウェブから探る〜」にお越しいただきまして、誠にありがとうございます。</p>

<p>まず最初にお聞きしたいのですが、マストドンのアカウント作った方ってどれくらいいらっしゃいますか？<br />
…ほとんどの方が作ってきてらっしゃいますね。さすが皆さん、予習バッチリですね。</p>

<p>では皆様には「釈迦に説法」になってしまいますが、まだ話題になって間もないサービスでもありますし、マストドンの主要な機能についての軽いおさらいから入りたいと思います。</p>

<div id="attachment_23030" style="width: 650px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_2.png" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_2.png" alt="白石さん" width="640" height="430" class="size-full wp-image-23030" srcset="/wp-content/uploads/2017/05/mastodon_event_2.png 640w, /wp-content/uploads/2017/05/mastodon_event_2-300x202.png 300w, /wp-content/uploads/2017/05/mastodon_event_2-207x139.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">白石さん</p></div>

<p><b class="speaker">白石</b>
まずは、<a href="https://github.com/tootsuite/mastodon/blob/master/README.md" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">マストドンのREADME.md</a>より主要な機能のおさらいです。
開発者自身からすると、マストドンの特徴はこういうところにあるという主張が伺えます。
時間がない中で適当に訳したので、こなれてないのはどうかご容赦ください。</p>

<ul>
<li>GNU socialや、あらゆるOStatusプラットフォームと完全な相互運用性がある（Fully interoperable with GNU social and any OStatus platform）</li>
<li>リアルタイムなタイムライン更新（Real-time timeline updates）</li>
<li>連合したスレッド解決（Federated thread resolving）</li>
<li>画像やWebMなどのメディアを添付可能（Media attachments like images and WebM）</li>
<li>OAuth2と直感的なREST API（OAuth2 and a straightforward REST API）</li>
<li>長時間かかるタスクのバックグランド実行（Background processing for long-running tasks）</li>
<li>Dockerでデプロイ可能（Deployable via Docker）</li>
</ul>

<p>一方、ぼくらユーザーからすると、マストドンの主要な機能って、Twitterと比較するとわかりやすいんじゃないかと思います。
Twitterにも存在する機能としては以下の様なものがありますね。</p>

<ul>
<li>ユーザーフォロー</li>
<li>コミュニケーション（ステータス更新、リプライ、スレッド）</li>
<li>ハッシュタグ</li>
<li>タイムラインのリアルタイム更新</li>
<li>アカウント管理</li>
<li>OAuthプロバイダー</li>
<li>WebAPIを利用可能</li>
<li>&#8230;</li>
</ul>

<p>そして、マストドンならではの機能と言えるのは以下の様なものでしょうか。</p>

<ul>
<li>連合タイムライン</li>
<li>リモートフォロー</li>
<li>&#8230;</li>
</ul>

<p>連合タイムラインは、別のマストドンインスタンスからのタイムラインも合わせて表示するもの。リモートフォローは、他ののマストドンインスタンスのユーザーをフォローする機能です。このあたりは、分散型のSNSであるがゆえの機能ですね。</p>

<h3>マストドンのコードツリーを眺める</h3>

<p><b class="speaker">白石</b>
次に、マストドンの<a href="https://github.com/tootsuite/mastodon" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Githubリポジトリ</a>をざっくり眺めていくとしましょう。</p>

<p>実はぼく、RubyもRailsもほとんど知らないのですが、どうやら色んな人の話を聞く限り、割と素直なRailsアプリになっているみたいです。</p>

<p><div id="attachment_23063" style="width: 350px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/3625fdd9d8a3f82b95389381888d6895.png" alt="マストドンのソースツリー" width="340" height="387" class="size-full wp-image-23063" srcset="/wp-content/uploads/2017/05/3625fdd9d8a3f82b95389381888d6895.png 340w, /wp-content/uploads/2017/05/3625fdd9d8a3f82b95389381888d6895-264x300.png 264w, /wp-content/uploads/2017/05/3625fdd9d8a3f82b95389381888d6895-182x207.png 182w" sizes="(max-width: 340px) 100vw, 340px" /><p class="wp-caption-text">マストドンのソースツリー</p></div>
<a href="https://github.com/tootsuite/mastodon/tree/master/app" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><code>app</code>というディレクトリ</a>の下にWebアプリのコードが格納されていて、その下に、<a href="https://github.com/tootsuite/mastodon/tree/master/app/models" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">DBに対応するモデル</a>、HTTPリクエストを処理する<a href="https://github.com/tootsuite/mastodon/tree/master/app/controllers" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">コントローラー</a>などがあると。で、<a href="https://github.com/tootsuite/mastodon/tree/master/app/controllers/api" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Web API</a>をハンドリングするコントローラーのコードを中心に読み始めると、処理はほとんど<a href="https://github.com/tootsuite/mastodon/tree/master/app/services" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">サービス</a>と呼ばれるクラス群に委譲されているのがわかります。</p>

<p>そこでサービスのコードを読んでみると、すぐに「WebFinger」とか「PubSubHubub」とか、ソーシャルウェブを追いかけていた人にとっては懐かしい単語がたくさん出てくるわけですね。
例えば<a href="https://github.com/tootsuite/mastodon/blob/master/app/services/follow_remote_account_service.rb#L20" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">リモートフォローのコードを読む</a>と、webfingerという単語が出てくる。</p>

<p>どうやら、マストドンはソーシャルウェブと深いつながりがあるようだと。そこでぼく、すぐにえーじさんに連絡して、このイベントの企画を相談したわけです。
では、前置きはここまでにして、ここからはソーシャルウェブの専門家であるえーじさんを交えて、マストドンとソーシャルウェブのつながりを探っていきたいと思います。</p>

<h2>マストドンを構成する3つのレイヤー</h2>

<p><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_3.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_3.jpg" alt="白石さんとえーじさん" width="640" height="480" class="aligncenter size-full wp-image-23033" srcset="/wp-content/uploads/2017/05/mastodon_event_3.jpg 640w, /wp-content/uploads/2017/05/mastodon_event_3-300x225.jpg 300w, /wp-content/uploads/2017/05/mastodon_event_3-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p><b class="speaker">白石</b>
えーじさん、まずは自己紹介からお願いします。</p>

<p><b class="speaker">えーじ</b>
えーじです。8年ぐらい前、前職でOpenSocialをはじめとしたソーシャルウェブ技術全般に関わっていました。Social Web Japanというコミュニティも運営していて、ソーシャルウェブに関する勉強会も活発に開催していました。</p>

<p><b class="speaker">白石</b>
OpenSocial（※）って言葉を知っている方はどのくらいいますか？
この会場だと半分弱くらいですね。</p>

<p><small>
※OpenSocial…SNSのWeb APIを統一しようとする標準化の動き、及びその仕様。日本でもmixiやGREEを始めとした主要なプラットフォームが対応し、ソーシャルゲーム／ソーシャルアプリの流行に大きく寄与した。
</small></p>

<p><b class="speaker">えーじ</b>
マストドンって、実は2010年ぐらいに盛り上がったものがベースになっている面があるので、個人的にはタイムトリップしたような感覚ですね(笑)</p>

<p>まずこの図を見て下さい。私は、マストドンは3つのレイヤーから構成されていると捉えています。</p>

<div id="attachment_23042" style="width: 650px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_4-1.png" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_4-1.png" alt="マストドンを構成する３つのレイヤー" width="640" height="356" class="size-full wp-image-23042" srcset="/wp-content/uploads/2017/05/mastodon_event_4-1.png 640w, /wp-content/uploads/2017/05/mastodon_event_4-1-300x167.png 300w, /wp-content/uploads/2017/05/mastodon_event_4-1-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text"><a href="https://docs.google.com/presentation/d/1AuDdrrPKqRjnNJ3yzGS6vjAy8Vt1-vS4j6C4m49kFTI/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.g216742f12f_2_151" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">マストドン Tech Night#1進行スライドより</a></p></div>

<p>この図には出てきていませんが、一番下にはインターネットのレイヤーが存在します。</p>

<p>その上にIdentityというソーシャルウェブを構成するレイヤが重なり、その上にOStatus等のマイクロブログを構成するプロトコルがある。それらの上にマストドンがあるという図です。
逆に言えば、<strong>マストドンはOStatus、Identityというレイヤを取り除いてしまうと、ただのTwitterクローンになってしまう</strong>と思っています。</p>

<p><b class="speaker">白石</b>
なるほど。ソーシャルウェブの専門家から見ると、マストドンはむしろOStatusやIdentityなどの下位レイヤー、つまり<strong>ソーシャルウェブのスタック上に構成されていることが重要</strong>なわけですね。</p>

<h2>ソーシャルウェブとは何か？</h2>

<p><b class="speaker">白石</b>
じゃあ、その「ソーシャルウェブ」って何かということが大事になるわけですが、簡単にご説明願えますか？</p>

<p><b class="speaker">えーじ</b>
そうですね、じゃあちょっとSNSの歴史も振り返りつつ。</p>

<p>今では、SNSと言えばFacebookやTwitterを思い浮かべると思いますが、2004年くらいから始まった「Web 2.0」と呼ばれていた時代には、Myspaceや、Friendster、mixi、Google buzzなどの様々なサービスが存在していました。
今のような寡占状態じゃなかったんです。</p>

<p>その初期で登場した、当時としては画期的な機能があったんですが、なんだと思いますか？</p>

<p><b class="speaker">白石</b>
なんでしょう？SNSが出始めの頃ですよね…？とりあえずめっちゃ楽しかったですね(笑)</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2017/05/mastodon_event_7.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2017/05/mastodon_event_7.jpg" alt="" width="640" height="480" class="aligncenter size-full wp-image-23045" srcset="/wp-content/uploads/2017/05/mastodon_event_7.jpg 640w, /wp-content/uploads/2017/05/mastodon_event_7-300x225.jpg 300w, /wp-content/uploads/2017/05/mastodon_event_7-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p><b class="speaker">えーじ</b>
それはそうですけども(笑) 画期的だったっていうのは、<strong>招待機能</strong>です。招待機能を使ってリアルの知り合いを招き入れる事ができました。</p>

<p><b class="speaker">白石</b>
ああそういえば、mixiなんかも最初招待じゃないと登録できませんでしたよね。</p>

<p><b class="speaker">えーじ</b>
招待機能っていうのは、リアルな人間同士の関係性をネットに持ち込むってことで、すごく画期的だったんですよね。それはつまり、ネットに人格や人間関係を持ち込むということなんです。</p>

<p>それまでのWebでも、もちろんユーザーはサービスごとにIDを持っていましたが、そのIDは他の人とデータを区別するためのものでしかなかった。SNSではそのIDに、実際のユーザーのプロフィールを紐づけさせた。つまり、リアルワールドの人間とSNS上のアカウントが紐付くことで、<strong>ネット上に人間のアイデンティティ（人格）を持ち込んだ</strong>んですね。</p>

<p><b class="speaker">白石</b>
なるほど。それが先ほどのレイヤー構成図で言うところの「Identity」に相当する部分ですね。</p>

<p><b class="speaker">えーじ</b>
はい、そこの課題意識が、OpenIDなどの認証技術の発展につながりました。ここらへんはあとでまた詳しく述べたいですね。</p>

<p>そして、更にSNSが発展してくると、今度はSNSをまたいで情報をやり取りしたい…というニーズも生まれてきました。
例えば、TwitterからFacebookにつぶやきを送りたいというような。
その象徴的なサービスが<a href="https://en.wikipedia.org/wiki/FriendFeed" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">FriendFeed</a>でした。</p>

<p><img src="https://upload.wikimedia.org/wikipedia/en/f/fb/FriendFeed.png" alt="FriendFeed" width="522" height="485" class="size-full" /></p>

<p><b class="speaker">白石</b>
懐かしいですねー。みなさん、FriendFeed覚えてますか？覚えてる人手を上げてください。
…あれ、ほとんどいない(笑)</p>

<p>FriendFeedは<a href="http://jp.techcrunch.com/2009/08/11/20090810facebook-acquires-friendfeed/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Facebookに買収されて</a>、静かに終わってしまったサービスですね。</p>

<p><b class="speaker">えーじ</b>
はい。これは複数のSNS上での情報を一つにまとめるサービスでした。こういうサービスの登場からもわかる通り、<strong>サービス間で情報をやり取りしたいというニーズは確実にあったし、今もある</strong>。
そこから発展したのが、先ほどのレイヤー図で言うところの下から二番目の層、「OStatus」などのプロトコルから成るレイヤーです。</p>

<p><b class="speaker">白石</b>
なるほど、SNSの発展の歴史とともに、Identityやプロトコルが発展してきて、それがソーシャルウェブと呼ばれるスタックを構成するようになったということですね。
そして、マストドンはそのスタック上に構築されたサービスであると。</p>

<h2>マストドン同士が情報をやり取りする世界は、ソーシャルウェブとしてはまだまだ序の口</h2>

<p><b class="speaker">白石</b>
では、マストドンはソーシャルウェブの一実装だとすると、実は他のサービスとも連携できたりするんでしょうか？</p>

<p><b class="speaker">えーじ</b>
はい、そのとおりです。その証拠に、マストドンは<a href="https://gnu.io/social/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">GNU social</a>とも互換性があるんです。</p>

<p><b class="speaker">白石</b>
あ、それってさっき紹介した<a href="https://github.com/tootsuite/mastodon/blob/master/README.md" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">マストドンのREADME.md</a>にも「GNU socialと相互運用性がある」と記載されていましたね。
<strong>GNU socialってなんなんですか？</strong></p>

<div id="attachment_23066" style="width: 532px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/20a157111e1678e9ef135e8708853f7c.png" alt="GNU social" width="522" height="485" class="size-full wp-image-23066" srcset="/wp-content/uploads/2017/05/20a157111e1678e9ef135e8708853f7c.png 522w, /wp-content/uploads/2017/05/20a157111e1678e9ef135e8708853f7c-300x279.png 300w, /wp-content/uploads/2017/05/20a157111e1678e9ef135e8708853f7c-207x192.png 207w" sizes="(max-width: 522px) 100vw, 522px" /><p class="wp-caption-text">GNU social</p></div>

<p><b class="speaker">えーじ</b>
一言で言うと「ソーシャルウェブ関連仕様の参照実装」ですね。</p>

<p>具体的に言うと、ソーシャルウェブの標準化にあたっては、W3C（※）にある<a href="https://www.w3.org/Social/WG" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Social Web Working Group</a>というグループが中心となって進めています。
最初は、SNS間の相互運用性を議論する目的で、status.netというサイト上で進められていたんですけどね。</p>

<p>そこで策定が進められた様々な仕様の<strong>参照実装 (Reference Implementation)という位置づけのサービス、それがGNU social</strong>なんです。</p>

<p>GNU socialも、マストドンと同じく、自前でインスタンスを立てることもできる。それを使ったインスタンスもいっぱいありました。例えば、<a href="http://quitter.se/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">quitter</a>。
これ、一昔前のTwitterとUIもそっくりだし、やれることもほぼ一緒です。</p>

<div id="attachment_23065" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/d9658c9e3c73539824b87f77a410a8ad-640x467.png" alt="Quitter" width="640" height="467" class="size-large wp-image-23065" srcset="/wp-content/uploads/2017/05/d9658c9e3c73539824b87f77a410a8ad.png 640w, /wp-content/uploads/2017/05/d9658c9e3c73539824b87f77a410a8ad-300x219.png 300w, /wp-content/uploads/2017/05/d9658c9e3c73539824b87f77a410a8ad-207x151.png 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">Quitter</p></div>

<p><small>
※ W3C（World Wide Web）…本誌の読者にはいわずもがなではあるが、ウェブの標準化と発展を促進するための標準化団体。
</small></p>

<p><b class="speaker">白石</b>
おお、こんなのあったんですね。思想的にはほとんどマストドンと変わらないじゃないですか。</p>

<p><b class="speaker">えーじ</b>
そうなんです。ただ、サービスとしては動作が遅くて、使うのはかなりストレスフルでしたけどね。
quitterと比較してマストドンが流行ったのは、誰でも簡単にデプロイできる、そして快適でストレスなく利用できることだと思います。</p>

<p>で、<strong>quitterはGNU socialのインスタンスなので、マストドンとも繋がります</strong>。マストドンのアカウントをフォローしたり、メッセージを送ったりもできるんですよ。</p>

<p><b class="speaker">白石</b>
おお、それはすごい。なるほど、マストドン同士がやり取りできるのは当たり前に思えますが、ほかのソーシャルウェブ実装ともやり取りできるのはすごいですね。</p>

<p><b class="speaker">えーじ</b>
ちなみに、ソーシャルウェブの実装と言えば想い出深いのはGoogle buzzです。Google buzzって覚えていますか？</p>

<p><img src="https://upload.wikimedia.org/wikipedia/en/9/95/Google_Buzz_logo_new.png" alt="FriendFeed" width="522" height="485" class="size-full" /></p>

<p><b class="speaker">白石</b>
ぼくは覚えてますが、皆さんどうでしょう？…7名ぐらいしか手が上がりませんね。みんな忘れちゃったんだなあ。</p>

<p><b class="speaker">えーじ</b>
Google buzzってGmailの一部として登場したし、皆さん一度は目にしたことあると思うんですけどね。
個人的には、Google buzzが出てきたときには大興奮でした。ソーシャルウェブの集大成をGoogleが出した！これはすごい！って。</p>

<p><b class="speaker">白石</b>
えーじさんが興奮してたのは、今でもはっきり覚えてます(笑)</p>

<p><b class="speaker">えーじ</b>
例えば今でもGoogle buzzが存在したなら、buzzからマストドン上の誰かをフォローしたりできていたかもしれないんです。
それだけじゃなくて、ソーシャルウェブのスタックを実装したどんなサービスとも連携できたはずなんです。</p>

<p>そういう世界を実現したいと思っている人は今でもいて、その人たちがW3C Social Web Working Groupを形作っているというわけです。</p>

<p><b class="speaker">白石</b>
じゃあ<strong>、今のマストドン同士が情報をやり取りする世界は、ソーシャルウェブとしてはまだまだ序の口</strong>で、ソーシャルウェブスタックを実装したサービス同士が自在に情報をやり取りできる世界というのが、ソーシャルウェブの目指す最終地点であり、実現したい世界観ということですね。</p>

<h2>アイデンティティ、OpenID、そしてNASCAR問題</h2>

<p><b class="speaker">白石</b>
では、マストドンで実現されているソーシャルウェブスタックについて、具体的なお話を伺っていきたいと思います。
まずは先ほどのスタックでいう一番下、アイデンティティのところからお聞きしたいです。</p>

<div id="attachment_23042" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/mastodon_event_4-1-640x356.png" alt="Mastodonを構成する３つのレイヤー" width="640" height="356" class="size-large wp-image-23042" srcset="/wp-content/uploads/2017/05/mastodon_event_4-1.png 640w, /wp-content/uploads/2017/05/mastodon_event_4-1-300x167.png 300w, /wp-content/uploads/2017/05/mastodon_event_4-1-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text"><a href="https://docs.google.com/presentation/d/1AuDdrrPKqRjnNJ3yzGS6vjAy8Vt1-vS4j6C4m49kFTI/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.g216742f12f_2_151" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Mastodonを構成する３つのレイヤー（再掲）</a></p></div>

<p><b class="speaker">えーじ</b>
まず、ソーシャルウェブでアイデンティティのレイヤーを語るにあたっては、 <strong>OpenID</strong> 抜きには語れません。</p>

<p>SNSの登場により、Web上で人々がアイデンティティを持つようになりましたが、そのアイデンティティがサービスごとに分断されてしまっていることが問題でした。
例えば、今Twitterを使っているとしましょう。「私はえーじです。」とネット上で表したい時、皆さんはどうしますか？</p>

<p><b class="speaker">白石</b>
TwitterのIDをシェアするとか？</p>

<p><b class="speaker">えーじ</b>
そうですね。Twitterの◯◯、Facebookの◯◯、Google+の◯◯です。というように、各サービスに紐付けざるを得ません。</p>

<p><b class="speaker">白石</b>
<strong>サービスに関係なく、「私は私です」ということが言えない</strong>ってことですね。</p>

<p><b class="speaker">えーじ</b>
そうです。<strong>Web上でユニバーサルに「私は私です」と言えない</strong>んです。
また、サービスごとに認証情報を作成しなくてはならないのも問題でした。ユーザーとしては、一つのIDで様々なサービスにログインできるほうが便利です。</p>

<p>そこで<strong>OpenIDは、URLを利用してユーザーを識別できるようにした</strong>んです。そして、そのURLさえ入力すれば、どんなWebサービスにでもログインできるようにするのが、OpenIDの目標でした。</p>

<p><b class="speaker">白石</b>
でもその「URLを入力する」っていうのが、実際にはめんどくさくてあまり流行らなかった印象があります。
ぼくは、OpenIDを利用しているサービスと言えばリクルートさんの「<a href="https://atnd.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ATND</a>」を思い出すのですが、ATNDにアクセスするとOpenID（一部OAuth）に対応したサービスプロバイダの一覧が出てきて、それを押すといろんなサービスのIDでログインできるという仕組みでした。</p>

<div id="attachment_23071" style="width: 650px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/04f17792dfe685b9b56e954b55959765-640x331.png" alt="ATNDのログイン画面（現在のものです）" width="640" height="331" class="size-large wp-image-23071" srcset="/wp-content/uploads/2017/05/04f17792dfe685b9b56e954b55959765.png 640w, /wp-content/uploads/2017/05/04f17792dfe685b9b56e954b55959765-300x155.png 300w, /wp-content/uploads/2017/05/04f17792dfe685b9b56e954b55959765-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">ATNDのログイン画面（現在のものです）</p></div>

<p>あれは、裏ではOpenIDのURLを生成してそこにアクセスしていましたよね。
ATNDにログインした人はたくさんいると思いますので、実際には皆さんOpenIDを使っていたという。</p>

<p><b class="speaker">えーじ</b>
ATNDはOpenIDの普及に貢献しましたね。
でも、ああやってサービスのロゴを並べるのは、OpenIDの思想からすると問題だったんですよね。
それって、<strong>NASCAR問題</strong>って言われていたんです。</p>

<p><b class="speaker">白石</b>
NASCAR（※）？</p>

<p><b class="speaker">えーじ</b>
ああやって企業やサービスのロゴを並べるのって、モータースポーツとかで、スポーツカーにべたべたと企業ロゴが貼られているのに似てるからそういう名前になったんです(笑)
今でもTwitterやFacebookのロゴを並べておくのは普通ですけどね。
ユーザーとしては、OpenIDのURLを入力するよりも便利なのですが、もともとのOpenIDの思想…サービスとアイデンティティの分離、からは後退してしまいました。</p>

<p><small>
※NASCAR…<a href="https://ja.wikipedia.org/wiki/NASCAR" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Wikipedia</a>によれば、「NASCAR（ナスカー、National Association for Stock Car Auto Racing, 全米自動車競争協会）は、アメリカ合衆国で最大のモータースポーツ統括団体であり（本部はノースカロライナ州シャーロット）、同団体が統括するストックカーレースの総称でもある。」とのこと。
</small></p>

<h2>マストドンの画期的なコンセプトの一つは、IDをメアド形式で指せるようにしたこと</h2>

<p><b class="speaker">えーじ</b>
<strong>一方マストドンの素晴らしいところは、IDをメールアドレス形式の <code>username@domain</code> の形にしたところ</strong>だと思います。
この、馴染み深くて簡潔な形式で、あらゆるマストドンインスタンス上のユーザーを指し示せるようにしたことが、サービス全体の使い勝手を大きく向上させている。</p>

<p><b class="speaker">白石</b>
そう言えばマストドンって、その形式のユーザーIDを使って、別のインスタンスのユーザーにメンションってできるんですよね？</p>

<p><b class="speaker">えーじ</b>
できます、できます。ちょっとやってみましょうか。マストドンはテキストボックスに<strong>@id@domain</strong>と入力用とすると候補が出てきます。他のインスタンスのユーザでも出てきますね。ちなみに、このオートコンプリートは、マストドンの機能ですね。こういうところが、マストドンの洗練されているところだと思います。</p>

<div id="attachment_23072" style="width: 285px" class="wp-caption aligncenter"><img src="/wp-content/uploads/2017/05/fdd3a9dc26fff7d0ff9ea248ff5a61c3.png" alt="マストドンでは、リモートフォローしたユーザーのIDも自動補完される" width="275" height="330" class="size-full wp-image-23072" srcset="/wp-content/uploads/2017/05/fdd3a9dc26fff7d0ff9ea248ff5a61c3.png 275w, /wp-content/uploads/2017/05/fdd3a9dc26fff7d0ff9ea248ff5a61c3-250x300.png 250w, /wp-content/uploads/2017/05/fdd3a9dc26fff7d0ff9ea248ff5a61c3-173x207.png 173w" sizes="(max-width: 275px) 100vw, 275px" /><p class="wp-caption-text">マストドンでは、リモートフォローしたユーザーのIDも自動補完される</p></div>

<p><b class="speaker">白石</b>
なるほど。もしこれがOpenIDそのままだとしたらURL直打ちということになっていたかもしれないし、それだとオートコンプリートさせるっていうのもUI的に少し難しそうです。
IDをメアド形式で指せるようにしたことが、マストドンの画期的なコンセプトの一つということですね。</p>

<p><strong><a href="https://html5experts.jp/?p=23094" data-wpel-link="internal">後編</a>に続きます。</strong></p>
]]></content:encoded>
			</item>
	</channel>
</rss>
