デモで理解する Facebook アプリ開発のポイント シグマコンサルティング ( 株 ) 菅原英治

Transcription

1 デモで理解する Facebook アプリ開発のポイント シグマコンサルティング ( 株 ) 菅原英治

2 自己紹介 菅原英治 sugawaraeiji 所属 : - シグマコンサルティング株式会社取締役副社長 - 最新の IT を経営に実践的に役立てるお手伝いをしている会社 Facebook の実績 : - G-CLOUD Magazine 特集 2 Windows Azure 上に Facebook アプリを開発しよう! を執筆 - 現在 Facebook アプリ開発プロジェクトを担当 - Facebookを利用したコミュニケーションアプリ - Facebook 向けのソーシャルゲーム Page 2

3 本日のポイント Page 3

4 デモの前に Facebook アプリについて

5 Facebook アプリの種類 アプリの種類は大きく 3 種類 Facebook.com 上のアプリ Facebook 上 (=PC のブラウザ ) で利用する Web アプリ PHP, Python, Java,C# などで開発 グローバルに公開された Web サーバが必要 携帯アプリ 携帯 Web アプリ スマートフォン向けのアプリ Web サイトのプラグイン 自分の Web サイトへのプラグイン いいね! 機能 ログイン機能などをつける Page 5

6 Facebook アプリの有効活用事例 tripadvisor - 旅行に関する口コミサイト ( ホテルや観光名所などの口コミ ) - Facebook.com 上のアプリとして 自分が行ったことがある 助言できる お気に入り 行く予定ある などの場所を登録できる - 自分の Web サイトのプラグインとして 自サイトにアクセスしてくる Facebook ユーザーを識別 - アプリ側で友達が登録した場所を地図上で閲覧 Page 6

7 Facebook.com 上のアプリの開発方法 ソーシャルグラフにアクセスするための API を利用 Graph API - ソーシャルグラフを利用するためのコアとなる API - が API の URL Page 7 - 基本情報を取得する プロフィール画像を取得する - 基本情報の実行結果 JSON 形式で結果が返る { "id": " ", "name": "Eiji Sugawara", "first_name": "Eiji", "last_name": "Sugawara", "link": " "gender": "male", "locale": "ja_jp" }

8 Facebook.com 上のアプリの開発方法 FQL (Facebook Query Language) - SQL の記述スタイルで定義するソーシャルグラフへの問い合わせ言語 Page 8 - SELECT uid, name, pic_square FROM user WHERE uid = uid, name, pic_square FROM user WHERE uid = 取得結果は XML または JSON を指定できる FQL の実行結果 <?xml version="1.0" encoding="utf-8"?> <fql_query_response xmlns=" xmlns:xsi=" list="true"> <user> <uid> </uid> <name>eiji Sugawara</name> <pic_square>( 略 )</pic_square> </user> </fql_query_response>

9 古くなってしまった API 古くなったため利用しないほうがよい API REST API - 代わりに Graph API の利用が推奨 FBML - 代わりに FBJS(Facebook JavaScript) の利用が推奨 JavaScript API - 代わりに JavaScript SDK の利用が推奨 Page 9

10 SDK とツール SDK JavaScript SDK ios SDK (iphone & ipad) Android SDK PHP SDK C# SDK ツール Developer App :Facebookアプリを管理するためのアプリ Live Status:APIのパフォーマンスなどを確認できる Change Log : チェンジログを確認できる Test Users: アプリのテストユーザーを作ることができる Insights : アプリまたはページに指標を設定しその情報を分析できる JavaScript Test Console :JavaScript SDKの学習 またはデバッグができる URL Linter : ソーシャルグラフを利用したページのデバッグができる Page 10

11 Facebook C# SDK とは Facebook C# SDK -.NET 開発者向けに Facebook アプリを簡単に開発できるようにするためのオープンソースの SDK - Codeplex からダウンロードできる 現在の最新バージョンは 5.0.3beta - 特徴 - API の呼び出しが簡単に実装可能 - Facebook のすべての認証方法に対応 - Cookie, OAuth 2.0, Signed Requests - アプリ開発を簡単にするたくさんのサンプル 5.0.3beta のサンプル Page 11

12 Facebook アプリ開発デモ Facebook C# SDK 編

13 デモの流れ 開発環境 の準備 Visual Studio 2010(Express も OK) Windows Azure Tools 1.3 ASP.NET MVC 3 RTM Facebook C# SDK 5.0.3beta Facebook 環境の準備 Facebook にアカウント登録 Developer( 開発者 ) アプリのインストール Facebook アプリの作成 Facebook アプリの開発 Graph API を利用したアプリの開発 FQL を利用したアプリの開発 Page 13

14 Developer( 開発者 ) アプリ Developer( 開発者 ) アプリ - Facebook アプリを管理するための Facebook アプリ アプリの作成 削除や設定の変更が行える - アプリの設定項目例 - アプリケーション名 - 説明 - 管理者メールアドレス - アプリの URL などなど Page 14

15 デモ :Facebook アプリの作成 作成時のポイント - Web Site タブ - Site URL を設定する ( 開発環境の URL も OK = VS でデバッグできる ) - 例 : - Facebook Integration タブ - Canvas Page を設定する ( 全 Facebook アプリで一意になるように ) Canvas URL を設定する - 例 : - Advanced タブ Page 15 - サンドボックスモードを 有効にする と利用者をこのアプリの開発者のみに制限できる

16 デモ :Graph API を利用したアプリの開発 サンプルをカスタマイズするのが簡単 - このデモでは 次のサンプルソリューションを利用する CSMvc3FacebookApp.sln ポイント - Web.config の facebooksettings セクションを修正する <facebooksettings appid = "{app id}" appsecret = "{app secret}" canvaspage = " this path}" canvasurl = " /> Page 16

17 デモ :Graph API を利用したアプリの開発 コードのポイント - HomeController クラスの About アクション [CanvasAuthorize(Permissions = "user_about_me")] public ActionResult About() { var fbapp = new FacebookClient(this.FacebookSession.AccessToken); dynamic result = fbapp.get("me"); ViewData["Firstname"] = result.first_name; ViewData["Lastname"] = result.last_name; } return View(); Page 17

18 デモ :Graph API を利用したアプリの開発 友達一覧を作成する - HomeController クラスに次のアクションを追加 [CanvasAuthorize] public ActionResult Friends() { var fbapp = new FacebookClient(this.FacebookSession.AccessToken); dynamic result = fbapp.get("me/friends"); ViewBag.Friends = result.data; return View(); } - Friends アクションに View を追加 (var friend in ViewBag.Friends) { <tr><td>@friend.id</td> <td>@friend.name</td></tr> } </table> Page 18

19 デモ :Graph API を利用したアプリの開発 友達一覧を作成する - ID 列をプロファイル画像に変更する - Viewを次のように変更する - <img src=" alt="profile" /> Page 19

20 Graph API の限界 FQL の利用 fbapp.get( me/friends ); では 友達の ID と名前の一覧しかとれない!! - プロフィールの写真は 画像を返す API があったから取得できたが 誕生日を取得したい時はどうしたらよいのか? - 取得した友達数回ループして 誕生日を取得する API を呼ぶ? - 参考 : - Facebook Query Language (FQL) - Page 20

21 デモ :FQL を利用したアプリの開発 誕生日付友達一覧を作成する - HomeController クラスに次のアクションを追加し View も追加する [CanvasAuthorize(Permissions = "friends_birthday")] public ActionResult FriendsByFQL() { var fbapp = new FacebookClient(this.FacebookSession.AccessToken); dynamic result = fbapp.query( "SELECT uid, name, pic_square, birthday FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) ); // 実際には一行 Page 21 } ViewBag.Friends = result; return View(); (var friend in ViewBag.Friends) { <tr><td><img src="@friend.pic_square" alt="profile" /></td> <td>@friend.name</td> <td>@friend.birthday</td></tr> } </table>

22 アプリの許可 (Permissions) について アプリが ソーシャルグラフにアクセスする際 ユーザーに利用する許可を得る必要ある - ただし パブリックな情報は許可が必要ない 許可は大きく次の二つに分かれる - ユーザー自身の情報への許可 - 例 : アプリがユーザー自身の誕生日にアクセスしてよいか - 友達の情報への許可 - 例 : アプリが友達の誕生日にアクセスしてよいか 参考 URL - Permissions Page

23 Facebook アプリ開発デモ Azure 対応編

24 デモ :Azure 対応 さきほどのアプリを Azure にデプロイできるようにする - 時間の都合上 ローカルの development fabric で行う 手順 - 1) ソリューションに Azure プロジェクトを追加する - Web ロールなどテンプレートのプロジェクトは一切追加しない - 2)Azureプロジェクトのロールに 既存のWebプロジェクトを追加する - 3)ServiceDefinition.csdefのSites 要素を削除する - Full IIS で動作する必要がないため - 4)Web.config の canvalurl を変更する - canvasurl = (dev fabric の URL へ ) - 5) 同様に Facebook アプリの設定も dev fabric の URL へ変更する Page 24

25 Facebook アプリ開発デモ Facebook PHP SDK 編

26 Facebook PHP SDK とは Facebook PHP SDK - PHP 開発者向けに Facebook アプリを簡単に開発できるようするためのオープンソースの SDK - GitHub からダウンロードすることができる 特徴 - API の呼び出しをラッピングし簡単に利用できる - Graph API が簡単に呼び出せる $me = $facebook->api('/me'); - ログイン状態の判定も簡単にできる Page 26

27 デモの流れ 実行環境 の準備.NET Framework 3.5 SP1 以上 IIS 7.0 以上 Windows Azure SDK 1.3 SQL Server 2008 Express Edition 開発環境 の準備 JRE 1.6.0_23 Eclipse for PHP Developers (+ Eclipse 日本語化 ) Windows Azure Tools for Eclipse Facebook PHP SDK Facebook 環境の準備 Facebook にアカウント登録 Developer( 開発者 ) アプリのインストール Facebook アプリの作成 Facebook アプリの開発 Graph API を利用したアプリの開発 Page 27

28 デモ :Graph API を利用したアプリの開発 ポイント - SDK の読み込み - require_once 'facebook.php'; - アプリ情報の設定 $facebook = new Facebook(array( 'appid' => {appid}', 'secret' => {secret}', 'cookie' => true, )); - API の呼び出し - $me = $facebook->api('/me'); Page 28

29 まとめ Page 29