Scc2015 SNS Tech

ソーシャルネットワークの連携技術を正しく理解する

2015/07/11 サッポロクリエイティブキャンプ2015

Jun Futakawa

!

• FaceBook:: Jun Futakawaで検索

• twitter :: J2kawa

• ActionScript, PHP, MySQL,JS etc.

•音極道の中の人

•勤務遍歴：富士通 クリプトンフューチャメディア インフィニットループ　etc.

•株式会社アトラクト　代表取締役

•クラウドソーシング大手のクラウドワークスよりエンジニア・オブ・ザイヤー2014に選出

自己紹介

アジェンダ

1.OAuth ～APIアクセス認可の新標準

2. Open Graph ～人とモノの関係を可視化

3. Open Social ～ソーシャルアプリ開発の標準規約

OAuth ～APIアクセス認可の新標準

OAuthの概要

・「オーオース」と読む 。 ・2006年、当時Twitter社のリード プログラマーだった 　Blaine Cook が中心となって開発開始。2007年12月に最初の 　草案となるOAuth Core 1.0　がリリースされた。 ・WEBサービス(Facebook/Twitter等)が、第三者アプリケー 　ションに対し、WEB APIへのアクセスを安全に認可 (Authorization)する仕組み。 ・OAuth1.0 とOAuth2.0の２つのバージョンがあり、互換性は無い。

OAuthが使われている場面

例1:Facebookアカウントで他サイトにログイン 例2: InstagramでShareした画像がFacebookにも投稿

※Googleアカウント等、OpenIDを採用している場合もあります

OAuthの先ほどの説明をもう一度…

WEBサービス(Facebook/Twitter等)が、第三者アプリケー 　ションに対し、WEB APIへのアクセスを安全に認可 (Authorization)する仕組み。

OAuthを正しく理解する為には

(WEB) API とは何かを正しく理解する必要がある！

API とは何か

アプリケーションプログラミングインタフェース (API、英: Application Programming Interface) とは、ソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様である。

～wikipedia より抜粋～

APIを正しく理解する為には

インタフェースとは何かを正しく理解する必要がある！

インタフェース とは何か

インタフェース（英: interface）は、ものごとの境界となる部分と、その境界でのプロトコルを 指す。I/Fと略される。主に情報技術関連で用いられる用語で、「ハードウェアインタフェース」、 「ソフトウェアインタフェース」、「ユーザインタフェース」の三つに大別される。 他分野で定着している界面という訳語を用いる人もいる。

～wikipediaより抜粋～

インターフェースとは、接点、境界面、接触面、接合面、仲立ち、橋渡しなどの意味を持つ英単語。 IT関連では、二つのものが接続・接触する箇所や、両者の間で情報や信号などをやりとりするため の手順や規約を定めたものを意味する。 「ハードウェアインターフェース」「ソフトウェアインターフェース」「ユーザインターフェース」 の三つに大別できる。

～IT用語辞典 e-WORDS より抜粋～

どちらも的外れな解説ではないですし、上記説明だけで十分理解できるという人もいるでしょう。 しかし、なんとなくは理解できてもモヤっとした部分が残る人が多いのではないでしょうか。 それには理由があります。どちらの解説にも、ある大切な前提条件が省略されているのです。

『インタフェース』 を完璧に理解する(1)インタフェースという言葉の裏に 必ずある（暗黙の）前提条件

1. どちらか一方が、固有の『機能』を持ち、もう一方は、その機能を利用する（したい）、という関係にある場合にのみ「インタフェース」という概念が成り立つ。逆に言うと、そのような関係にある２者間には必ず「インタフェース」が存在する。

2. インタフェースの取り決め（インタフェース仕様）を最終的に決定するのは、機能の「提供側」である。

『インタフェース』 を完璧に理解する(2)

---「飲食店」におけるインタフェースの考察 ---「インタフェース」の本質を理解するために、身近な例をあげて考察してみます。 一般的に、「飲食店」では美味しい（と思われる）料理、飲料等を提供する　という機能を有します。 　そして、その機能を利用したい（食したい）と思う人が客として店を訪れます。

●飲食店-お客間インタフェースの例

食券方式 店員オーダー方式 セルフ方式

インタフェースを理解しないと食事にありつけない！

『インタフェース』 を完璧に理解する(3)

---「飲食店」におけるインタフェースの考察その２ ---

もう一度、飲食店とお客の関係を整理しましょう。 機能提供側＝飲食店：提供機能＝（美味しい）料理等の提供 機能利用側＝お客：　提供された料理等を食す です。 そして前頁では、食券方式、店員オーダー方式、セルフ方式などの例をあげました。実はそれらとは全くタイプの異なるインタフェースがあります。それは直接店舗を訪れずとも機能を利用できる（食せる）タイプのものです。 店舗外インタフェースで最も原始的なものは出前でしょう。食材によってはもっと新しいインタフェース、通信販売やネット販売などもあります。 本来は店舗でしか食せない料理を冷凍してネット販売するサービスなどもあります。これらも全て間違いなく飲食店-お客間「インタフェース」です。 　そして、例えば出前などでは、「必ず２人前以上ご注文ください」みたいな条件がある場合があります。このような細かな取り決めが「インタフェース仕様」になります。

あらためてインタフェース とは何か

インタフェース（英: interface）は、特定の機能を提供する側と利用する側が 接続・接触する箇所、両者の間で情報や信号などをやりとりするための手順や 規約を定めたものを意味する。 「ハードウェアインターフェース」「ソフトウェアインターフェース」 「ユーザインターフェース」の三つに大別できる。

インタフェースの暗黙の前提、飲食店の考察をふまえて、あらためて インタフェースを定義してみる。

このように、インタフェースを挟んで、機能の提供者と利用者が常に存在 することを明確にイメージするだけで、理解の深さが大きく違ってきます。

あらためて API とは何か

アプリケーションプログラミングインタフェース (API、英: Application Programming Interface) とは、特定の機能を持つソフトウェアコンポーネントに対し、アプリケーション プログラムからそれらの機能を利用する為のインタフェースである。

インタフェースの再定義をふまえて、あらためてAPIを定義してみます。

ちょっとした違いなんですが、ものすごくシンプルになったと思いませんか。 そして重要な補足ですが、APIは機能提供側が実装して初めて実現します。 飲食店での出前を思い出してください。出前をしていない飲食店に出前の 注文をしても、料理を食すことはできません。

OAuthの最初の説明をいま一度…

WEBサービス(Facebook/Twitter等)が、第三者アプリケー 　ションに対し、WEB APIへのアクセスを安全に認可 (Authorization)する仕組み。

OAuthを正しく理解する為には

「認可」と「認証」の違いを正しく理解する必要がある！

「認可」と「認証」の違い認可(Authorization) ユーザやアプリケーション対して何らかの権利、権限を与える（許可する）事。

認証(Authentication) ユーザが、間違いなくユーザ本人であることを確認する事。

上記のように、「認証」と「認可」言葉は似ていますが、元々の意味はかなり違います。 OAuthは第三者アプリへのAPIアクセス「認可」のプロトコルですが、対してログインとは「認証」のための手続きです。 OAuthを用いて（Facebookアカウント等での）ログインの代替とするのは、厳密に言えば本来の目的から外れた利用方法であり、そのことを理解した上で実装しないと、アカウント乗っ取りなどのセキュリティホールを生み出してしまう可能性が指摘されています。

OAuthの挙動

OAuth2.0のシーケンス図 WEB+DB Press vol.63(技術評論社刊) 101Pより抜粋

OAuth挙動のポイント(1)プログラマであれば、OAuthのシーケンスや仕様は詳細に理解する必要がありますが、そうでなければ、ポイントだけを押さえれば良いでしょう。 OAuthは第三者アプリケーションにAPIアクセスの認可を与えるものだと再三説明してきました。 では、そもそもアクセスの認可を与えるのは「誰」なんでしょうか？ それは「ユーザ（あなた）自身」です。 前頁のシーケンスで言うと、「認可ページURLにリダイレクト」という部分です。認可ページとは、サービスプロバイダ（I/Fでの「機能提供側」）サイト上でユーザ本人の手で、認可するか否かを判断し、決定するためのページです。 認可ページの例を次頁にてお見せします。（みなさんにはなじみのある画面だと思います。）

OAuthの認可画面

例1.写真共有サービスPinterestに Facebook APIへのアクセス権限 を付与する為の認可画面

例2.ツイートのログ保存サービス、 twilogにTwitter APIへのアクセス権限 を付与する為の認可画面

『OK』『Authorize app』をクリックすると、権限が付与されてしまう。 権限付与先が不明な場合などに、不用意にクリックしないこと！

OAuth挙動のポイント(2)

先に示したOAuth2.0シーケンス図でいうと、②アクセストークン要求とそのレスポンス、アクセストークン取得　という部分です。 OAuthはID/Passwordを渡さずに（安全に）権限委譲する仕組みですが、その仕組みを実現するまさに中心的存在です。 アクセス権限を証明する「特別パス」みたいなものだと理解してください。

このアクセストークンを手にいれてしまえば、堂々と委譲されたアクションや情報を見ることができるので、このアクセストークンをだまし取ろうとする　いわゆるOAuthスパム　というものも横行しているので注意が必要です。

アクセス権限委譲の証明書＝アクセストークン

OAuthスパムの報告記事http://www.itmedia.co.jp/news/articles/0908/10/news015.html

http://mtokusryx.seesaa.net/article/388026563.html

Open Graph ～人とモノの関係を可視化

Open Graph の概要・Facebook が提唱する　Social Graph の拡張概念。 ・Social Graphは「人と人とのつながり」を扱う概念であると言える 　のに対し、Open Graphは「人と物とのつながり」を扱う概念で 　あると言うことができる。 ・「音楽を聴く」「ニュース記事を読む」 　「商品をいいね！ボタンで評価する」などの行為が、オープン 　グラフによって、意味のあるつながりとして構築される。 ・Facebookが公開する「オープングラフプロトコル」「グラフAPI」および「ソーシャルプラグイン」を利用することで、外部のサービスでFacebookのプラットフォームが活用可能になる。

OGP(Open Graph Protocol)

・よくある一般的な説明は、 　「FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページ 　のタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに 　正しく表示させる仕組み」というもの。 ・このような説明でも概ね間違ってはいないと思いますが、大切な補足とし 　て、Open Graphの壮大なコンセプトを実現する為に、 　FaceBook外部のサイトにFaceBook内オブジェクト 　（投稿、FaceBookページ等）と同等の付加情報を定義可能とする仕組み　 　である、ということが言えます。

OGPの実装・OGPは設定したいHTMLページのメタデータとして<head>タグ内に定義 　する。 ・必須属性 　　(1) og: title オブジェクトのタイトル。ソーシャルグラフの中で表示される 　　(2) og: type オブジェクトのタイプ。 　　(3) og: image オブジェクトのサムネイル画像URL。

　　(4) og: url オブジェクトの正式なURL (canonical URL)。

　　(5) og: site_name 正式なサイト名。 !・推奨属性 　　(6) fb: admins or fb:app_id 管理者のFacebook ユーザID もしくは　Facebook Platform aアプリケ 　　　　ーションIDのリスト。カンマで区切り複数定義できる。

　　(7) og: description オブジェクトの概要。 !　　　この他にも位置情報や問い合わせ先情報など、オブジェクト属性によって様々な情報を定義できます。 　　仕様詳細は、Open Graph Protocol公式サイト参照。 !

Graph API(1) ・FaceBookのソーシャルグラフを読み書きする為の主要な手段。 　複数のバージョンがあるが2015年7月8日にリリースされた、 Ver.2.4が最新バージョン。 Ver.1.0の有効期限は2015/4/30とされている(すでに使用不可)。

ver. リリース日 利用期限 アクセスパスv1.0 2010/4/21 2015/4/30 /{object}

v2.0 2014/4/30 2016/8/7 /v2.0/{object}

v2.1 2014/8/7 2016/10/30 /v2.1/{object}

v2.2 2014/10/30 !

2017/3/25 /v2.2/{object}

v2.3 2015/3/25 2017/7/8 /v2.3/{object}

v2.4 2015/7/8 最短2017/7/8 /v2.4/{object}

Graph APIを使用したアプリを開発する場合、アプリIDを取得した時点の最新バージョン 及び、その後のアップデートバージョンしか使用できない

Graph API(2)

アプリケーションプログラミングインタフェース (API、英: Application Programming Interface) とは、特定の機能を持つソフトウェアコンポーネントに対し、アプリケーション プログラムからそれらの機能を利用する為のインタフェースである。

ここで先ほど再定義したAPIを思い出しましょう(再掲)

上記定義に沿ってGraph APIとは何かを説明すると

任意のアプリケーションプログラムからFacebookオブジェクト (Facebook上のさまざまな情報)にアクセス可能にするためのインタフェース

***主なFacebookオブジェクト***

オブジェクト名 概要User ユーザの(プロフィール)情報Page Facebookページ

Friend List （特定ユーザの）友達リストPost 投稿記事

Object Likes (任意のオブジェクトについた)いいね！

ソーシャルプラグイン

・Open Graphコンセプトに基づき、外部サイトにソーシャル機能を提供す

　るプラグイン。以下の機能が提供されている。

1. 「いいね！」ボタン 2. シェアボタン 3. 埋め込まれた投稿 4. コメント 5. 「送る」ボタン 6. 「フォロー」ボタン

7. アクティビティフィード 8. おすすめフィード 9. Facebookページプラグイン 10.フェイスパイル

Open Graphが目指すもの

1. FaceBookの内と外をシームレスにつなぎ、「WEB全体をFaceBook化」する

2. 「いいね!」によるFacebookエコシステムを汎用的に拡張

いいね！を超える拡散力、「Open Graph」とは？ 明日、Facebookのタイムラインとリアルタイムフィードは、買い物や旅行のアプリで埋め尽くされる

初めてFacebookに『いいね!(Like)』ボタンが登場した時、それがWEB全体にどのようなインパクトを与えるのか、即座に理解できた人はほとんどいませんでした。 しかし、いまや『いいね!』は、SEOや広告ターゲティングなどにおいて、そのページの価値を変える重要な要素になっています。 　Open Graph がもたらすインパクトも最初はピンとこないかもしれませんが、ユーザの行為(アクション)を自由に定義できるという意味では、『いいね!』の汎用的拡張と言えます。 　そのポテンシャル感じ取るのに、以下の２つの記事は参考になると思います。

Open Social ～ソーシャルアプリ開発の標準規約

Open Socialの概要

・2007年11月、Googleがリリース ・WEBベースのソーシャルアプリケーションのための共通API群 ・Open Social API準拠のアプリケーションであれば、Open Social 　採用のプラットフォーム上においては相互運用性がある。

Open Social登場の背景に、Facebook への対抗という意味合いがあったが、そういう意味ではあまりインパクトを与えられていない。 　しかし、日本においては　モバゲー、Gree、『艦隊これくしょん』で大幅にユーザを増やしたDMM、mixiなどが　Open Socialを採用しており、WEBベースの国内ソーシャルゲーム界隈においては、重要な仕様になっている。