2011-12-21 gumi×マイネット勉強会 ＠gumi株式会社

1. 今さら聞けない
facebook
2011-12-21
株式会社マイネット・ジャパン
伊藤 祐策

2. 今日のテーマ

3. facebook
the Social Networking Service

4. 今回は
アプリ開発編
使い方編
の2本でお送りいたします

5. <アプリ開発編>

6. このセクションでは
facebookの実装の世界
についてご紹介します

7. facebook
アプリ開発
といえば

8. facebook
Graph API

9. まずは
Graph APIを使うための
基礎
についてご紹介

10. 題して

11. ここが凄いよ
facebook

12. 何が凄いのか？

13. facebook実装のここが凄い
1.データ構造がシンプル
2.URL構造がシンプル
3.APIがシンプル

14. simple is best!

15. １.データ構造がシンプ
ル

16. facebookの中では
全てが「オブジェク
ト」

17. これらが全部「オブジェクト」
• ユーザー
• Facebookページ
– 場所（例：「東京都」）
– 趣味（例：「野球」）
– 言語設定の言語（例：「日本語」）
• ウォールへの投稿
• 共有した写真
• etc

18. オブジェクトは共通して
id と type という属性を持
つ

19. 基本オブジェクト
Object
id
type

20. しかもidは全て
同じID空間で管理されている

21. Object
status
User link
Photo
Page

22. 例
for example

23. 私のObjectIDは
11億6310万2843
です

24. Facebookユーザーオブジェクト
User < Object
id:1163102843
type:user
name:伊藤 祐策
username:ito.yusaku

26. こんな感じで、
IDさえわかれば
あらゆるオブジェクトを
特定することができる
仕組みになっている

27. ちなみに

28. facebookアプリ開発者が
絶対に使いこなしておくべ
きたった一つのfacebookア
プリ

29. facebook公式アプリ
Graph API Explorer

31. これさえあればfacebookの
内部データ構造がまるわか
り！

32. オブジェクトの話に戻って

33. facebookアプリ開発者が覚えておく
べき
基本的な8種類のオブジェクトタ
イプ

34. 1.Facebookユーザー
User < Object
type:user
facebookを利用しているユー
ザー

35. 2.Facebookページ
Page < Object
type:page
会社、学校、言語、宗教、場
所、音楽、映画等、世の中に
存在するあらゆる存在。

36. 3.ユーザーによる投稿
Status < Object
type:status
ユーザーによって投稿された文
字だけの近況

37. 4.リンクのシェア
Link < Object
type:link
ユーザーによって投稿されたURL
※URLを含んだ近況を投稿すると
linkになる

38. 5.写真
Photo < Object
type:photo
ユーザーによって投稿された画
像
※facebookアプリからもよく自
動生成される

39. 6.アルバム
Album < Object
type:album
ユーザーによって作成された写
真アルバム
※facebookアプリからもよく自
動生成される

40. 7.イベント（行事予定）
Event < Object
type:event
ユーザーによって企画された行
事予定。

41. 8.友達リスト
FriendList < Object
type:friendlist
ユーザーが任意に作成した友達
のリスト。または所属先によっ
て自動的に生成された友達リス
ト。
※後述

42. 以上8種類
これだけ覚えておけば多分大丈夫

43. 2.URL構造がシンプル

44. 例
for example

46. http://www.facebook.com/ito.yusaku

47. 名前空間のトップレベルから
ユーザーにあげちゃうなんて
超太っ腹！

48. もうひとつ
例
for example

49. ユーザーの友達リストのURL

50. http://www.facebook.com/ito.yusaku/friends

51. 超シンプル！
わかりやすい！

52. 実はGraph APIでも
ほとんどURL構造が同
じ

53. https://graph.facebook.com/ito.yusaku/friends

54. このURLでユーザーの
友達情報をjsonで取得でき
る！

55. あれ、もしかして

56. Graph API Explorerで
https://graph.facebook.com/1163102843
って打ったら自分のユーザー情報引っ張れたよ
ね？

57. じゃあさ、

58. http://www.facebook.com/1163102843
って打ったらどうなるのっ
と・・・

60. 表示された！
（リダイレクトされます）

61. 誰が得するのか
分からないけど
なんか凄い！

62. 3.APIがシンプル

63. 例
for example

64. status(近況投稿)の
GETで取得できる
データ構造

65. {
"id": "1163102843_2861493774125",
"from": {
"name": "伊藤 祐策",
"id": "1163102843"
},
"message": "ぽっぽっぽ～♪ぬるぽっぽ～♪データが欲しいかもうないぞ～♪",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/1163102843/posts/2861493774125"
},
{
"name": "Like",
"link": "http://www.facebook.com/1163102843/posts/2861493774125"
}
],
"privacy": {
"description": "Only Me",
"value": "SELF"
},
"type": "status",
"created_time": "2011-12-19T09:49:16+0000",
"updated_time": "2011-12-19T09:49:16+0000",

66. じゃあ近況をGraph APIから
投稿したいときは
どんなデータ構造にすればいい
の？

67. {
"id": "1163102843_2861493774125",
"from": {
"name": "伊藤 祐策",
"id": "1163102843"
},
"message": "ぽっぽっぽ～♪ぬるぽっぽ～♪データが欲しいかもうないぞ～♪",
"actions": [
{
"name": "Comment",
"link": "http://www.facebook.com/1163102843/posts/2861493774125"
},
{
"name": "Like",
"link": "http://www.facebook.com/1163102843/posts/2861493774125"
}
],
"privacy": {
"description": "Only Me",
"value": "SELF"
},
"type": "status",
"created_time": "2011-12-19T09:49:16+0000",
"updated_time": "2011-12-19T09:49:16+0000",

68. {
"message": "ぽっぽっぽ～♪ぬるぽっぽ～♪データが欲しいかもうないぞ～♪",
"privacy": {
"value": "SELF"
},
},
投稿に必要そうな属性だけ抜き出して、
同じデータ構造でPOSTしてあげればいいだけ！

69. これでOK

71. 超簡単！

72. 簡単すぎて
技術仕様書要ら
ず！

73. これで今日から君
も
facebookアプリ
開発者だ！

74. </アプリ開発編
>

75. <使い方編>

76. このセクションでは
facebookの機能仕様
について紹介します

77. しかもお題はなんと

78. 「動作仕様がよくわからない機
能」

79. 10人中8人くらいは
ちゃんと理解して使って
いないだろうと思われる
機能を３つ紹介

80. その１
友達の親密度設定

81. トモダチ

82. facebookには
3種類の
友達レベルがあるの
を
ご存知でしたか？

83. 1.普通の友達
2.親密な友達
3.知り合い

85. 親密度設定をすると
一体どうなるのか？

86. デフォルト設定では・・・
※この状態に特に名前はついていないので、
便宜上「普通の友達」と言うことにします
• フィードの表示対象が「ほとんどのアッ
プデート」になる。
• あとはfacebookの表示対象選定エンジン任
せ

87. 「親密な友達」に設定する
と・・・
• フィードの表示対象が「すべてのアップ
デート」になる。
• その人が何か投稿するたびに左上の通知
領域に通知が表示されるようになる。

89. 主な利用用途
ネットストーキング

90. 「知り合い」に設定する
と・・・
• フィードの表示対象が「重要なアップ
デートのみ」になる。
• いわゆる「友達以下」に分類される人用
• 近況に興味がない友達の設定としてオス
スメ
• 転職したり、結婚した時に「おめでと
う！」と言っておしまい程度の関係

91. おまけ1：「フィードの購読をやめ
る」
• 友達申請を受理したものの、正直近況を
見たくない人用
• これを設定すると、その名の通りフィー
ドが一切表示されなくなる
• 先方からは察知されないので安心

92. おまけ2：「アプリからの投稿を非表示にす
る」
• やたらむやみにPOSTしてくるアプリをつ
かっている人におすすめ
• 「アプリ」単位で非表示設定ができる
• 「個人×アプリ」単位では非表示設定はで
きない
• これを行使されたアプリ開発者は深く反
省すべき

93. ちなみに

94. これらの親密度設定は
Graph API からは
一切取得できません

95. こんなの
他人にバレたら
大変ですもんね

96. それ以上に
自分がハブられてることを
知ってしまうことのほうが
辛いかもしれませんが

97. その２
友達リスト

98. 友達リストとは
• 増えすぎた友達をグループ化して管理す
る機能
• あまりにも使われなかったせいか、
facebookのアップデートが進むにつれ隅に
追いやられてしまった不遇な存在
• でも「情報の共有範囲」に神経質な人に
とっては非常に便利な機能

99. 使い方

101. マウスオーバー
しないとでてこない！

103. 友達リストの活用例
• 「あれ、こいつ誰だっけ？」を防ぐ
– 「X年Y月Z日の合コンで知り合った人」
– 「○○株式会社」
– 「ナントカ勉強会で会った人」
• 投稿の共有範囲の設定に使う
– 「同僚」
– 「取引先」
– 「大学の友人」

106. この投稿を
「同僚」ではない人
or
「上原仁」
が閲覧しようとすると

108. もちろんフィードにも
表示されることはありません

109. 閲覧可能な人の図
公開対象者を足し算してから非表示対象者を引
き算
公開対象者 非表示対象者

110. 友達リストの登録方法
その２

112. その３
「いいね！」ボタン

113. facebookには
2種類の
「いいね！」がある
のを
ご存知でしたか？

114. 1.ユーザー投稿に対する「いい
ね！」
2.facebookページに対する「いい
ね！」

115. 1.ユーザー投稿に対する「いいね！」
• 友達の投稿を見ておもしろかったら押す
もの
• 投稿者が喜ぶので気軽にやるべし
• 「投稿を読んだよ」というメッセージの
代わりでもよい

116. 2.facebookページに対する「いいね！」
• そのページに書かれているものに対
して「ファンになることを宣言」す
ることを意味する
• そのページの所有者による投稿が自
分のフィードに表示されるようにな
る
※facebookページには所有者が存在している

117. 例
for example

119. 押したら最後
あなたは「イ」という番
組の
ファンとみなされます

120. facebookページ所有者からみた「いいね！」
• 大抵のfacebookページ作成者は、プロモー
ション目的でページの作成を行う
• 「いいね！」の数はそのままメディア力
となる
• だからページ所有者達は「いいね！」数
を稼ぐことに必死

121. facebookページあるある
「いいね！」をクリッ
クして
診断スタート！

122. facebookページあるある
「いいね！」をクリッ
クして
キャンペーンに応募！

123. facebookページあるある
みんなもう「いい
ね！」を
クリックしましたよ！

124. 知られざる「いいね！」の仕様
• 「いいね！」は取り消すことができる
※ページ所有者が最も恐れている行為
• 取り消さなくても、ページからの投稿を
非表示にすることができる
• 「いいね！」をつけれるページの数は1
ユーザーあたり500ページまで

125. </使い方編>

126. まとめ
• 開発編
– facebookの実装仕様はとってもシンプル
– Graph API Explorerを使いこなそう
– 基本を押さえるだけで技術仕様書要らず
• 使い方編
– 知らなかったで済まされる機能は結構沢山あ
る
– facebookページへの「いいね！」は重い

127. おしまい