このページの内容は、ホントに自信無いです。
サンプルのソースを補助する程度に読んでください。
毎月2億人以上のユーザがモバイル機器からFacebookへアクセスします。Facebook Platformは、それらのユーザと友達をモバイルアプリへ導くのを助け、よりパーソナライズされたユーザ体験を提供します。
Facebook PlatformはiOS(iPhoneとiPad)とAndroid用のSDKを提供しています。もしモバイルアプリをFacebook SDKなしでブラウザ上で動作させるとしたら、ウェブベースのFacebook Login/Platform Dialogs/Graph APIを直で使えます。
このガイドは、Facebook Platformを利用してモバイルアプリを開発する基礎を解説します。サンプルは、iOSにはObjective-Cを、HTML/JavaScriptベースのモバイルアプリとAndroidにはJavaを使用していますが、明解なので簡単に他の言語へと書き換える事が出来ます。
目次:
Facebook iOS SDKで開発を始める前に、iOS開発ツールとGit(このSDKの管理で使ってるソース管理クライアント)インストールし、最新のSDKをGitHubからリポジトリを取得する必要があります。
具体的には、下記の通りです。
インストールの手順が終わったら、XCodeを開いて新しいiOSプロジェクトを作成します。
iOS Facebook SDKを使うには、SDKプロジェクトのソースファイルはアプリのプロジェクトへ移さなくてはなりません。最も簡単なのはローカルにあるSDKのGitリポジトリ(たとえば ~/facebook-ios-sdk/src)からsrcフォルダをドラッグして、アプリのXCodeプロジェクトへ移す方法です。
SDKのソースをアプリのプロジェクトへ移したら、下記のように#import宣言をヘッダファイルに足して、アプリのソースファイル中からSDKを参照できるようにしなくてはなりません。
#import "FBConnect.h"
このステップが終わると、アプリのXCodeプロジェクトからFacebook SDKがビルトされて使用できるようになります。
Implementing Single-Sign-On (SSO)
iOS SDKの機能の中で魅力的なのはSingle-Sign-On(SSO)です。これを使うとFacebookアカウントでアプリへサインインできるようになります。ユーザが自分のモバイル機器でFacebook iOSアプリへログイン済みだった場合、もうユーザネームとパスワードを入力する必要すらありません。もっと言えば、彼らは自分のFacebookアカウントでログインしているので、プロフィール情報やソーシャルグラフへのアクセスを得ることが出来ます。
SSOをアプリに追加するのは、Facebook SDKを使えばとても簡単です。以下のサンプルを見ると、Xcodeプロジェクトを設定する方法や、この機能を使う為に何を書かなくてはならないのかの概略が書かれています。
まず、インスタンス変数を作ることでAppDelegateヘッダーファイルをセットアップします。
Facebook *facebook;
それから下記のようにFacebookのインスタンスのプロパティをセットします
property (nonatomic, retain) Facebook *facebook;
次に、AppDelegateのメソッドファイルに@synthesizeでfacebookプロパティのセッター/ゲッターを実装します。
@synthesize facebook;
application:didFinishLaunchingWithOptions:関数のボディ部分に、アプリのid(Developer Appで取得します)を使ってFacebookクラスのインスタンスを作成します。
facebook = [[Facebook alloc] initWithAppId:@"YOUR_APP_ID"];
アプリからGraph APIやPlatform Dialogsを使う時と同様に、このインスタンスがSSOを発動させます。
インスタンスが作成されるとauthorize関数が実行され、ユーザをサインインさせた上で、アプリを承認するようユーザに求めます。
[facebook authorize:nil delegate:self];
最後に、application:handleOpenURL:関数をfacebookインスタンスのコールと一緒にAppDelegateに足します。
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {return [facebook handleOpenURL:url];}
この関数は、SSOプロセスの最中にFacebook Appがアプリへとリダイレクトする際、iOSから呼ばれます。Facebook::handleOpenURL:の呼び出しはユーザの認証を扱います。
SSOサポートを有効にするのにあと一つ必要なのは、アプリの設定を扱う.plistファイルの変更です。
このファイルはXcodeによって自動的に作られます。このファイルに対して特定のURLを指定して、アプリをユニークなものにする必要があります。
1つのアイテムだけ保有するURL type、1つの値のみ保有するURL Schemes、fbYOUR_APP_ID(fbという文字列にあなたのアプリのID)を、それぞれ新しく追加します。.plistの中身が下記の図のようになれば大丈夫です。
これでSSOに関しては完了で、残りはアプリの作成とデバッグの作業です。エミュレータでアプリをどうささせれば、以下のようなダイアログが表示されます。
これは認証ダイアログと呼ばれるもので、ユーザがアプリに対して個人情報にアクセスする承認をします。ユーザがAllowを押せばアプリは承認され、facebookインスタンスを通じてユーザのプロフィール情報やソーシャルグラフへアクセスできるようになります。ユーザがDon't Allowを押した場合は、アプリは承認されず、ユーザのデータに対してアクセスする事はできません。
デフォルトでユーザは、Facebook上で一般公開されている基本的な個人情報へのアクセス許可を求められます。アプリの機能がこれらの基本情報以上のものを必要とする場合は、必要に応じてユーザに追加のパーミッションを求めなくてはなりません。authorize関数に対して必要となるパーミッションをNSArrayで渡す事でそれは可能となります。ユーザのメールアドレスとニュースフィードへのアクセスを求める場合の例は以下の通りです。
NSArray* permissions = [[NSArray arrayWithObjects:@"email", @"read_stream", nil] retain];[facebook authorize:permissions delegate:self];
パーミッションの一覧はこちらの一覧ページで見る事が出来ます。求めるパーミッションの数とそれらを承認するユーザ数には、強い反比例の関係があります。多くのパーミッションを求めるほどそれを承認するユーザ数は減ってしまいますので、本当に必要なものだけを選ぶようお勧めします。
Calling the Graph API
iOS SDKには、Graph APIとLegacy REST APIに簡単にアクセスする為の関数が用意されています。
//ユーザの情報を得る場合[facebook requestWithGraphPath:@"me" andDelegate:self];//ユーザの友達情報を得る場合[facebook requestWithGraphPath:@"me/friends" andDelegate:self];//legacy REST APIを叩く場合NSMutableDictionary* params = [NSMutableDictionarydictionaryWithObjectsAndKeys: @"4", @"uids", @"name", @"fields", nil];[facebook requestWithMethodName: @"users.getInfo"andParams: params andHttpMethod: @"GET" andDelegate: self];
これらの関数は非同期で呼ばれ、FBRequestDelegateプロトコルを実装した関数へdelegateされている必要があります。特にリクエストを送る為のrequest:didLoad:とエラーを扱うrequest:didFailWithErrorです。
Displaying Platform Dialogs
アプリ内でPlatform Dialogを表示する為のdialog関数も用意されています。結果を扱うdelefateと一緒にダイアログ名と渡すのみです。delefateはFBDialogDelegateプロトコルを実装している必要があります。
以下の例でFeed Dialogを表示しています。
[facebook dialog:@"feed" andDelegate:self];
Facebook Android SDKで開発を始める前に、Android SDKと開発ツール、それからGit(このSDKの管理で使ってるソース管理クライアント)をインストールして、GitHubから最新のSDKリポジトリを取得する必要があります。具体的には、下記の通りです。
- Android SDKとEclipse Pluginをインストール
- Gitをインストール
- GitHubからリポジトリを取得(git clone git://github.com/facebook/facebook-android-sdk.git)
インストールの手順が終わったら、Eclipseを開いて新しいAndroid Projectを作成します。このプロジェクトはFacebook Android SDKのソース用に使い、それぞれのアプリから参照します。Create project from existing sourceを選択してgitリポジトリのfacebookディレクトリ (~/facebook-android-sdk/facebook)を指定すると参照できます。
SDKプロジェクトが作成されたら、いよいよアプリ開発です。新規にAndroid Projectを作成し(Facebook SDKプロジェクトはEclipse Workspaceに開いたままです)、デフォルト指定で必要なフィールドを埋めます。
アプリ用のプロジェクトが作成されたら、Facebook SDKプロジェクトへの参照を足します。アプリのプロパティウィンドウを開いてリストからAndroidを選択、Library欄のAdd...ボタンを押して、上記で作成したFacebook SDKプロジェクトを選択します。
Facebook SDKが参照されるようになったら、Facebookへのネットワーク通信が許可されるようにアプリのmanifestを変える必要があります。アプリプロジェクト内のAndroidManifest.xmlに以下の内容を追加すればOKです。
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
次に必要なのは、アプリのシグネチャをエクスポートして、そのアプリのみがFacebookと対話しようとしているのを保証する事です。これは、以下の例のようにkeytoolを実行する事で可能です。
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore| openssl sha1 -binary| openssl base64
Developer AppのMobile & Devices欄に登録すべき文字列を生成してくれます。
Installing the Facebook Android App
Androidエミュレータでアプリのデバッグできるように、Adnroid SDKのabsツールを使ってインストールできるFacebook Adnroidのバイナリイメージを提供しています。
adb install ~/facebook-android-sdk/Facebook.apk
このイメージ無しでもアプリは動作しますが、エミュレータ上でアプリを実行するたびにサインインが必要となるFacebook Appを使うよりも、Platform Dialogsをsign-inに使う事を前提にしています。
Single-Sign-On (SSO)
iOS SDKと同様、もっとも魅力的な機能の一つはSingle-Sign-On(SSO)です。SSOを使うとFacebookアカウントでアプリへサインインできるようになります。ユーザが自分の機器からFacebook Androidアプリへログイン済みだった場合、もうユーザネームとパスワードを入力する必要すらありません。もっと言えば、彼らは自分のFacebookアカウントでログインしているので、プロフィール情報やソーシャルグラフへのアクセスを得ることが出来ます。
SSOをアプリに追加するのは、Facebook SDKを使えばとても簡単です。以下のサンプルを見ると、Xcodeプロジェクトを設定する方法や、この機能を使う為に何を書かなくてはならないのかの概略が書かれています。
package com.greatap;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import com.facebook.android.*;import com.facebook.android.Facebook.*;public class MyGreatActivity extends Activity {Facebook facebook = new Facebook("YOUR_APP_ID");@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);facebook.authorize(this, new DialogListener() {@Overridepublic void onComplete(Bundle values) {}@Overridepublic void onFacebookError(FacebookError error) {}@Overridepublic void onError(DialogError e) {}@Overridepublic void onCancel() {}});}@Overridepublic void onActivityResult(int requestCode, int resultCode, Intent data) {super.onActivityResult(requestCode, resultCode, data);facebook.authorizeCallback(requestCode, resultCode, data);}}
上記のActivityがアプリ内部でビルド/実行されると、ユーザの認証ダイアログが表示されます。
このダイアログで、ユーザは自分の個人情報へのアクセスを許可します。Allowが押されればアプリは承認され、facebookインスタンスを通じてユーザのプロフィール情報やソーシャルグラフへアクセスできるようになります。Don't Allowが押された場合はアプリは承認されず、ユーザのデータにはアクセスできません。
デフォルトでユーザは、Facebook上で一般公開されている基本的な個人情報へのアクセス許可を求められます。アプリの機能がこれらの基本情報以上のものを必要とする場合は、必要に応じてユーザに追加のパーミッションを求めなくてはなりません。authorize関数に対して必要となるパーミッションをString[]配列で渡す事でそれは可能となります。ユーザのメールアドレスとニュースフィードへのアクセスを求める場合の例は以下の通りです。
facebook.authorize(this, new String[] { "email", "read_stream" },new DialogListener() {@Overridepublic void onComplete(Bundle values) {}@Overridepublic void onFacebookError(FacebookError error) {}@Overridepublic void onError(DialogError e) {}@Overridepublic void onCancel() {}});
パーミッションの一覧はこちらの一覧ページで見る事が出来ます。求めるパーミッションの数とそれらを承認するユーザ数には、強い反比例の関係があります。多くのパーミッションを求めるほどそれを承認するユーザ数は減ってしまいますので、本当に必要なものだけを選ぶようお勧めします。
Calling the Graph API
Android SDKには、Graph APIとLegacy REST APIに簡単にアクセスする為の関数が用意されています。
//ユーザの情報を得る場合facebook.request("me");//ユーザの友達情報を得る場合facebook.request("me/friends");//legacy REST APIを叩く場合Bundle parameters = new Bundle();parameters.putString("method", "auth.expireSession");String response = request(parameters);
これらの関数は同期処理を行うためにUIが一時的に停止しますので、別個のスレッドで処理した上でUIスレッドへと返す事をお勧めします。Facebook SDKは、この目的に使うAsyncFacebookRunnerというクラスを用意しています。
アプリ内でPlatform Dialogsを表示する為のdialog関数も用意されています。結果を扱うdelegateとダイアログ名を渡すだけで利用できます。以下はFeed Dialogを表示する例です。
facebook.dialog(this,"feed",new DialogListener() {@Overridepublic void onComplete(Bundle values) {}@Overridepublic void onFacebookError(FacebookError error) {}@Overridepublic void onError(DialogError e) {}@Overridepublic void onCancel() {}});
モバイルでのweb利用は成長中で、Facebook Platformにとって重要な分野です。私たちのデスクトップのweb技術の大部分はモバイルにも通用しますので、Facebook for Websites(http://developers.facebook.com/docs/guides/web/)を作るのはスタート地点としては最適です。以下のセクションは、JavaScript SDKとPlatform Dialogsを利用してログインしたりニュースフィードへ投稿する方法を紹介しています。
User Login
モバイル機器のディスプレイの制限のために、ログイン用の特殊なサポートをPlatform Dialogsは提供しています。JavaScript SDKを使っていれば、ユーザの機器にとって最適なダイアログ表示が行われます。
JavaScript SDK を使うには、あなたのサイトをFacebookに登録してApp IDを取得する必要があります。
App IDはあなたのサイトに対して与えられる固有のIDで、ユーザとあなたのサイト間の適切なレベルの安全性を保証するものです。App IDを用いてJavaScript SDKをロードし、XFBMLの<fb:login-button>要素を用いてLogin Buttonを表示する例は以下の通りです。
<html><head><title>My Facebook Login Page</title></head><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true});</script><fb:login-button>Login with Facebook</fb:login-button></body></html>
このページがブラウザにロードされると、ログインボタンが表示されます。このボタンを押すと、以下のようにサイトの認証を求められます。
OAuth Dialogを直で使いたい場合は、displayパラメータを指定する事で、モバイル用の表示を指定できます。displayパラメータに使用できるモバイル用のオプションは2通りです。
- wap feature phoneや、古いタイプのウェブブラウザ
- touch スマートフォンと、フルブラウザが搭載されたタブレット
WAPフレンドリーなOAuth Dialogでユーザを認証し、また個人情報アクセスの承認を受けるには、ユーザを下記URLへとリダイレクトします。
http://www.facebook.com/dialog/oauthclient_id=YOUR_APP_ID&redirect_uri=YOUR_URL&display=wap
iOSやAndroidに最適なtouchビューで表示するには、以下のようにdisplayパラメータを指定します。
http://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&display=touch
News Feed Publishing
Feed Dialogを使ってモバイルのwebアプリからニュースフィードへ書き込みする為のサポートも、Facebook Platformは提供しています。最新版のJavaScript SDKでは、まだユーザの機器を判別して最適なダイアログを表示する機能は提供されていませんが、近い将来実装する予定です。
モバイルフレンドリーなFeed Dialogを表示するには、下記のURLへとユーザをリダイレクトします。
http://www.facebook.com/dialog/feed?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&display=touch
Next Steps
このページでは、Facebook Platformを使ってモバイル用のアプリ/サイトを作成する方法を簡単に紹介しました。アプリ/サイトをよりパーソナライズしたいのなら、Graph APIを読むのが良いでしょう。
ユーザがアプリ/サイトから友達と関われるように他のチャンネルを利用したいのなら、Social Channelを読んでみてください。