Facebookアプリ開発で知っておくべき仕様の話（基礎） gumiStudy#11開催しました

こんにちは、gumiの新居です。
遅くなりましたが、昨年12月21日、株式会社マイネット・ジャパン様と共催でgumiStudyを開催致しました。
概要はこちら http://atnd.org/events/22907

今回のテーマはFacebookアプリ勉強会。
弊社からはCTOの堀内、株式会社マイネット・ジャパン様からは伊藤さんと後藤さんに発表して頂きました。
発表資料は本記事下部にシェアさせて頂きます。

ということで、発表して頂いた内容の中から気になったポイントや重要だと思うポイントを初心者目線で簡単にまとめてみました。

具体的な実装方法などには触れていませんが、開発する上で当たり前に知っていないといけない内容だと思います。

1. オブジェクト（Objects）
Facebook上では、ユーザー、写真、アルバム、投稿など全てが「オブジェクト」という概念で扱われる。
全てのオブジェクトはidとtypeを持ち、idは同一のid空間で管理されている。
そして、idさえ分かればどんなオブジェクトにもアクセスすることができる。

伊藤さんの発表で「facebook アプリ開発者が覚えておくべき基本的な8種類のオブジェクトタイプ」として紹介されたものを以下に列挙してみました。

　1. type:user　facebookを利用しているユーザー
　2. type:page　会社、学校、言語など世の中に存在するあらゆる存在
　3. type:status　ユーザーによって投稿された文字だけの近況
　4. type:link　ユーザーによって投稿されたURL
　5. type:photo　ユーザーによって投稿された画像
　6. type:album　ユーザーによって作成されたアルバム
　7. type:event　ユーザーによって作成された行事
　8. type:friendlist　ユーザーが作成した友達のリストなど

以上、伊藤さんの発表資料を参考にざっくり列挙してみました。（詳細は下部の発表資料へ）
これだけ覚えておけば多分大丈夫みたいです！！

2. ソーシャルプラグイン（Social Plugins）
アプリケーションやサイトにFacebookの機能を埋め込む仕組み。

　1. Like Button
　2. Send Button
　3. Subscribe Button
　4. Comments
　5. Activity Feed
　6. Recommendations
　7. Like Box
　8. Login Button
　9. Registration
　10. Facepile
　11. Live Stream

Facebookユーザーなら押したことがあるでしょう「いいね！ボタン（Like Button）」や、自分の特定の友達やグループに対して情報を共有したいときに使える「送信ボタン（Send Button）」など、自分のサイトにFacebookのソーシャル機能を簡単に実装することができます。
実装自体も簡単なHTMLを追加するだけですので、非常にシンプルで簡単に使えるプラグイン達です。

3. グラフAPI（Graph API）
Facebookの核となる機能で、Facebook上のデータ（オブジェクト）にアクセスするためのAPI、または、オブジェクトとオブジェクト間のつながりなどの情報を提供するAPI。
Graph API Explorerを使うことでjson形式の内部データ構造を見ることができ、プログラムを組む前にGraph APIの動作を確認することができる。
Graph API Explorer

また、Facebookは非常にシンプルなURL構造となっており、http://www.facebook.com/xxxの×××をオブジェクト（ユーザー、写真など）のusernameやidにするとそのオブジェクトにアクセスすることができる。

こちらのhttps://graph.facebook.com/xxxの×××をオブジェクトのusernameやidにしてアクセスすると、そのオブジェクトが持っている要素にアクセスすることができる。

サンプル

gumiのfacebookページのusernameはgu3.co.jpですので、これを使ってアクセスしてみると、、、
https://graph.facebook.com/gu3.co.jp

{
"id": "141730815839028",
"name": "gumi Inc",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/187859_141730815839028_1468866018_s.jpg",
"link": "http://www.facebook.com/gu3.co.jp",
"likes": 90,
"category": "Internet/software",
"website": "http://gu3.co.jp/",
"username": "gu3.co.jp",
"founded": "June 13, 2007",
"company_overview": "gumi Inc offers a variety of games on multiple social networks in Japan, including Mixi, Mobage, and GREE. gumi`s game library includes The Kamikaze Detective, Tokyo Night Life WARS, The End of Samurai, Hunters, Tokyo Kawaii Model and Yakuza Wars among others.",
"mission": "Changing the World through Innovations in Entertainment and Technology ",
"products": "Social Gaming Applications",
"location": {
"street": "\u897f\u65b0\u5bbf4-15-7 ",
"city": "Shinjuku-ku",
"country": "Japan",
"zip": "160-0023"
},
"can_post": true,
"talking_about_count": 2
}

このオブジェクト（この場合はFacebookページ）の持つ要素にアクセスすることができました。
グラフAPIについて簡単に紹介してみましたが、当然ながら奥が深いです。
公式サイト→ http://developers.facebook.com/docs/reference/api/

4. オープングラフプロトコル（Open Graph Protocol）
Facebookに対してアプリケーションやサイトの情報を伝えるための仕組み。
もっと詳しく言うと、自分があるサイトのいいね！ボタンをクリックしたときに、このオープングラフプロトコルを実装していないサイトの場合「〇〇さんが×××についていいね！と言っています」という表示になる（×××とは、そのサイトのリンク）。
しかし、このオープングラフプロトコルを実装しているサイトの場合、追加情報としてサムネイルやページタイトル、説明を追加することができる（Facebookを見たときに注意して見てみると理解できると思います）。
「いいね！」されたときや「いいね！」したときに少しでも多くの情報を共有することができるので、開発者にとっても、「いいね！」を押して情報を友達に共有したいユーザーにとってもメリットの多い仕様だと思います。

また、実装方法も簡単で、HTMLにmetaタグを追加するだけで実装できるようです。
HTMLがさわれる人なら誰でも実装できそうですね！！簡単！！

基本形

 <meta property="属性" content="内容"/>

サンプル

前の記事「世界中のエンジニアが目指す企業に向けて」のソースを表示してみるとheadタグの中にありました。

 <head>
    ...
    <meta property="og:type" content="article">
    <meta property="og:title" content="世界中のエンジニアが目指す企業に向けて - gumi Engineer’s Diary">
    <meta property="og:image" content="http://cdn-ak.f.st-hatena.com/images/fotolife/g/gumilab/20111125/20111125183622.jpg">
    <meta property="og:url" content="http://d.hatena.ne.jp/gumilab/20111125/1322219434">
    <meta property="og:description" content="gumiの堀内です！ この度、海外戦略の一環としてPlayfishのエンジニアと開発を行いました。 勿論、彼らはす..">
    <meta property="og:site_name" content="はてなダイアリー">
    ...
  </head>

こうやって見るととても分かりやすいと思います。

Object type

また、使用できるObject typeもたくさん用意されています（Object typeとは meta property="og:×××" の×××の部分）。
中には　cafe（カフェ！？）　とか　locality（場所）　などいろいろあります。
公式サイトへいくといろいろ見れますよ→ http://developers.facebook.com/docs/opengraph/

以上、超導入編みたいなまとめになってしまいました。
シェアさせて頂いた発表資料には、わかりやすいグラフィックや詳しい内容、この記事には書いてないこともありますので、ぜひ発表資料を参考にしてみてください。

最後に、gumiStudyに参加して頂きました皆様、共催させて頂きました株式会社マイネット・ジャパン様、伊藤さん、後藤さん、ありがとうございました。

次回は「gumiStudy#12 x ニューフォリア HTML5勉強会」を開催いたします！！！！
登録はこちら http://atnd.org/events/23875

たくさんの方々のご参加お待ちしております。

20111219 gumistudy#11

View more presentations from Yasuhiro Horiuchi

弊社CTO堀内

今さら聞けないfacebook

View more presentations from 祐策祐策

株式会社マイネット・ジャパン伊藤さん

gumiStudy#11 newsing(fb)

View more presentations from Gotoh Saneyuki