Facebook APIを活用したサイト構築術
-
Upload
tsutomu-kawamura -
Category
Technology
-
view
1.327 -
download
3
description
Transcript of Facebook APIを活用したサイト構築術
![Page 2: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/2.jpg)
Facebook Creator'sMeet-up #1
API って、なに?
![Page 3: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/3.jpg)
Facebook Creator'sMeet-up #1
API って、なに?Application Programming Interface
あるプラットフォーム(OSやミドルウェア)向けのソフトウェアを開発する際に使用できる命令や関数の集合のこと。また、それらを利用するためのプログラム上の手続きを定めた規約の集合。個々のソフトウェアの開発者がソフトウェアの持つすべての機能をプログラミングするのは困難で無駄が多いため、多くのソフトウェアが共通して利用する機能は、OSやミドルウェアなどの形でまとめて提供されている。個々の開発者は規約に従ってその機能を「呼び出す」だけで、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。
![Page 4: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/4.jpg)
Facebook Creator'sMeet-up #1
イベント情報
掲示板(ウォール)
参加者の情報
![Page 5: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/5.jpg)
Facebook Creator'sMeet-up #1
イベント情報
掲示板(ウォール)
参加者の情報
人間が見れば一目瞭然。でも、このままプログラムで使うのはすごくめんどくさい。
![Page 6: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/6.jpg)
Facebook Creator'sMeet-up #1
そこで、
![Page 7: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/7.jpg)
Facebook Creator'sMeet-up #1
プログラムから使いやすいように
![Page 8: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/8.jpg)
Facebook Creator'sMeet-up #1
いろいろ取り決めたものが「API」
$facebook = new Facebook(a
rray(
'appId'=>”216710185019381”
,
'secret'=>”himitsunobangou
1234”
));
![Page 9: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/9.jpg)
Facebook Creator'sMeet-up #1
APIいろいろ
![Page 10: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/10.jpg)
Facebook Creator'sMeet-up #1
サービスにAPIが用意されている
「呪文」を正しく唱えれば、情報を引き出せる (書込もOK)
=
![Page 11: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/11.jpg)
Facebook Creator'sMeet-up #1
じゃあ、何が取り出せるの?UsersPagesEventsGroupsApplicationsStatus messages
PhotosPhoto albumsProfile picturesVideosNotesCheckins
![Page 12: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/12.jpg)
Facebook Creator'sMeet-up #1
じゃあ、何が取り出せるの?UsersPagesEventsGroupsApplicationsStatus messages
PhotosPhoto albumsProfile picturesVideosNotesCheckins
要するに、Facebookでやり
とりする
情報のほとんど
![Page 13: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/13.jpg)
Facebook Creator'sMeet-up #1
使用例 ❶
![Page 14: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/14.jpg)
Facebook Creator'sMeet-up #1
掲示板(ウォール)
使用例 ❶
![Page 15: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/15.jpg)
Facebook Creator'sMeet-up #1
使用例 ❷
![Page 16: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/16.jpg)
Facebook Creator'sMeet-up #1
写真アルバム
使用例 ❷
![Page 17: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/17.jpg)
Facebook Creator'sMeet-up #1
使用例 ❸
![Page 18: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/18.jpg)
Facebook Creator'sMeet-up #1
イベント参加者
使用例 ❸
![Page 19: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/19.jpg)
Facebook Creator'sMeet-up #1
やってみよう。
![Page 20: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/20.jpg)
Facebook Creator'sMeet-up #1
http://graph.facebook.com/M4chairAPIのレスポンスは、ブラウザでも確認できる。
![Page 21: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/21.jpg)
Facebook Creator'sMeet-up #1
参考資料
ドキュメント API Explorer
![Page 22: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/22.jpg)
Facebook Creator'sMeet-up #1
![Page 23: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/23.jpg)
Facebook Creator'sMeet-up #1
構成
JavaScript
HTML
Ajax通信
<script></script>
データ
表示
![Page 24: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/24.jpg)
Facebook Creator'sMeet-up #1
構成
AppID付きでGraph APIをコール プロクシ(PHP)
JavaScript
HTML
Ajax通信
<script></script>
データ
加工データ
表示
![Page 25: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/25.jpg)
PHP
![Page 26: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/26.jpg)
HTML
![Page 27: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/27.jpg)
CSS
![Page 28: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/28.jpg)
JavaScript
![Page 29: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/29.jpg)
JavaScript
![Page 30: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/30.jpg)
Facebook Creator'sMeet-up #1
![Page 31: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/31.jpg)
Facebook Creator'sMeet-up #1
https://github.com/cognitom/EventWall
http://www.osscafe.net/eventwall/ ?eid=126901887401754&hashtag=fbcmeetup
めんどくさい人は、ここで使えます。
Fork me!
![Page 32: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/32.jpg)
Facebook Creator'sMeet-up #1
8/25発売!
新刊のご案内
![Page 33: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/33.jpg)
毎週水曜 10:00~20:00
9月正式オープン
Facebook Creator'sMeet-up #1
![Page 34: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/34.jpg)
図書室カフェ 放送設備
Facebook Creator'sMeet-up #1
![Page 35: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/35.jpg)
のために。すべては、 と
Facebook Creator'sMeet-up #1
![Page 36: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/36.jpg)
Facebook Creator'sMeet-up #1
仕事する・喋る・話す カフェ電源・コーヒー・大型モニタ
![Page 37: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/37.jpg)
www.osscafe.netwww.facebook.com/shimokitazawa.osscafe
詳しくは、サイトまたはFacebookへ!
Facebook Creator'sMeet-up #1
「オープンコーラ」Jelly!2011/8/31(水)
イベント告知
![Page 38: Facebook APIを活用したサイト構築術](https://reader033.fdocument.pub/reader033/viewer/2022042601/5558482ad8b42acb078b5565/html5/thumbnails/38.jpg)