2012年11月20日火曜日

Facebook SDK for Android v3.0 を試す

Getting Started with the Facebook SDK for Android v3.0

Android用Facebook SDKはFacebookプラットフォームを最も簡単にAndroidアプリに統合することができます。SDKはFacebookのLogin認証、Facebook APIへのread/write、またピッカーUI(pickers)やダイアログのようなUI部品をサポートしています。
Android用Facebook SDKの開発を始めるため、以下のステップに沿って行いましょう。このガイドラインで使用しているスクリーンショットはApple OS X 環境のものですが、Windowsへのインストールのステップも殆ど同じ手順で行うことができます。手順が異なる部分はハイライトされています。

1. 必要なものをインストール(省略)

Eclipse(少なくともAndroidの開発に必要な開発環境はEclipse Classic), Android SDK, ADT Pluginが必要です。
Facebook SDKを使用するために、ここではAndroid 2.2(API 8)のインストールが必要です。

2. Android用のFacebook SDKとFacebook APKのインストール(省略)

Installationパッケージをダウンロードし展開。エミュレータにFacebookアプリをインストール。

Facebookのネイティブアプリ(公式アプリ)がインストールされている場合、Facebook SDKは認証をサポートするのにネイティブアプリを使用します。実機上では、このテストを行うのに、Google Playから無料でこのアプリをインストールすることができます。

インストールされたFacebookアプリのAPKはSDKのbinフォルダーにある、FBAndroid-1.9.9.apkとなっています。

(エミューレータへのインストールは省略)


3. EclipseにFacebook SDKをインポート

サンプルプログラムと一緒に、ワークスペースにlibraryプロジェクトとしてFacebook SDKを追加。
InstallationフォルダはSDKプロジェクトであるfacebookディレクトリに含まれています。サンプルプロジェクトはsamplesフォルダに含まれています。

空のワークスペースに全てのプロジェクトを一気にインポートすることができます。このときワークスペースに古いfacebookプロジェクトがないことを確認してください。もし古いものが存在していると、古いFacebook SDKを参照してしまう可能性があるので、古いものを削除するかワークスペースを変更してください。

新しいFacebook SDKと一緒にSDK Libraryプロジェクトとサンプルをインポートするには、Eclipseの 'File' > 'Import' で 'General' / 'Existing Projects into Workspace'を選択してください。
SDKフォルダのルートであるfacebook-android-ask-3.0.1.bを選択します。全てのサンプルプログラムが表示されるので、'FacebookSDK'が含まれていることを確認してください。
'Copy projects into workspace'オプションを外すことで、隣接するSDKに対し各サンプルプロジェクトは正しい参照を保持します。これはEclipseSDK installationの中にプロジェクトのコピーではなくリンクを張ることを意味します。

(もし将来SKD in-placeをアップデートし、結果的にワークスペースのLibraryプロジェクトをアップデートするときにこのプションが役立ちます。ですが将来SDKサンプルを編集するとなると、オリジナルバージョンに影響しないようにコピーを後に再インポートしなければいけなくなります。)

'Finish' をクリックします。もしサンプルプロジェクトにエラーが表示されたら、Eclipseの 'Project' > 'Clearn' で全てのプロジェクトの状態をリフレッシュしてください。



EclipseコンパイラのレベルがAndroidによって要求されたものに一致しない可能性があります。もし、'Android requires compiler compliance level 5.0 or 6.0'というエラーが出たら、'Java Compiler' のプロジェクトプロパティがv1.6になっているか確認してください。


これでサンプルアプリを動かすことができます。いくつかのサンプルを動かすためにFacebookAndroid key hashを準備する必要があります。手順は次のステップで紹介します。


4. サンプルプログラムを動かす(省略)


サンプルプロジェクトを試し、Facebook プロファイルにAndroid key hashを入力。


各サンプルプロジェクトはSDKの重要な部分とソーシャルアプリの構築のためのテクニックを示しています。

基本サンプル
  • ProfilePictureSample
  • FriendPickerSample
  • PlacePickerSample

機能サンプル
  • SessionLoginSample
  • JustRequestSample
  • BooleanOGSample
  • SwitchUserSample

完成サンプル
  • HelloFacebookSample
  • Scrumptious
  • Hackbook
これらのサンプルは前のステップでインポートしたワークスペースに置きます。各サンプルが隣接する'FacebookSDK'ライブラリを正しく参照している必要があります。

サンプルプロジェクトを選択し、Eclipseの'Run'を実行します。初めて行う際には、以下のダイアログが表示されます。

'Android Application'を選択するとAndroid エミュレータがスタートし、選択したサンプルが表示されます。

ProfilePictureSampleのようなとても単純なアプリは即座に実行されます。もし、認証を含んだサンプルを実行したい場合、更にFacebookにAndroid key hashを提供するための設定を行う必要があります。

簡単に言うと作成した各Androidアプリは署名が必要であり、後に説明しますが、認証のためのセキュリティチェックとしてFacebookに各アプリのkey hashを登録する必要があります。SDKサンプルではこのチェックを回避して簡単に実行するために、Facebook Developerプロファイルにアプリのkey hashを入力することができます。

まずパソコン上でkey hashを生成するために、Javaのkeytool utilityを実行します。(Androidのdebug keysotreではなくコンソールのパスにします。)


OS Xでの実装:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
Windowsでの実装:
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
パスワードを聞かれるので、ここではandroidとします。30文字くらいのkey hashを得ることができます。(もしパスワードを聞かれなかったら何かが間違っているので、debug.keystoreが上記のパスに存在しているか確認してください。)


公開するアプリでは、debug.keystoreではなく自分のアプリの署名に使用したkey hash(xxx.keystore)を使用します。(xxxはaliasを示す) パスワードは自分で設定したxxx.keystoreのパスワードを入力する必要があります。 
keytool -exportcert -alias xxx -keystore /keystoreまでのパス/xxx.keystore | openssl sha1 -binary | openssl base64

最後にFacebook Developer siteに行きます。Loginされているか確認し、画面右上にあるメニューから'Setting'を選択します。


画面左の'Developer Settings'に行きます。もし、developerの登録をしていなければ登録を要求されます。

プロファイルにKey hashを登録し保存します。

 
(複数のパソコンで開発を行っている場合は複数のkey hashを登録することができます。)
これで、問題なくエミュレータで全ての基本的な認証サンプルプログラムを動かすことができるはずです。


5. Facebookアプリを作る


新しいFacebookアプリを作り、そのIDとAndroid key hashの関連づけ。

Facebook Developers サイトのApp Dashboardに戻ります。'Create New App'をクリックし、基本情報としてアプリ名やnamespaceを入力します。


一端作成すると、dasyuboradのトップにアプリのIDが表示されます。後にプロジェクトファイルにこのIDを加える必要があります。




既に存在しているアプリのIDももちろん使えることが出来ます。

いずれにしても、アプリにAndroid key hash を関連づける必要があります。'Edit App'をクリックし、dashboardの下の方にある'Native Android App'セクションを開きます。keytoolアプリで前のステップの最後に手に入れたkey hashを加えます。



変更を保存します。

このdashboradに戻り、アプリのパッケージ名と新しく作成したAndroidプロジェクトのmain activity classを登録する必要があります。

6. Facebook Loginの新しいAndroidプロジェクトを作る




Facebook SDKにリンクした新しいプロジェクトの作成。Facebook Loginとユーザ名の取得のデモ。

この最後のステップで、新しいプロジェクトを作り、Facebook Loginのデモに必要な最低限のコードを加えます。

新しいAndroid project の作成
Eclipseに新しいAndroid アプリのプロジェクトを作成するには、File>New>Project…で'Android Application Project'を選択します。
 
Facebookのアプリを登録したときに、使用したアプリ名とNamespaceを使う必要はありませんが、ここでは統一するために用います。アプリにアイコンを選択することができます。
 
次に、アプリのmain activityを作成します。この例では、基本的なユーザインタフェースを持つシンプルなBlankActivityを選択します。
最後に、Activityの名前を入力します。レイアウト名がactivity_mainとなるデフォルトのMainActicityとして保存します。


Finishをクリックし、新しいプロジェクトがmain activity classと一緒に作られます。


パッケージ名とActicityFacebookに登録
この時点で、Facebook DeveloperサイトのApp Dashboardに戻り、Androidの設定部分Android アプリのパッケージとActivity名を入力します。またFacebook LoginEnabledにします。




SDKプロジェクトのリンクとFacebook アプリIDの設定

Eclipseに戻り、SDK libraryプロジェクトと新しいアプリをリンクさせます。プロジェクトのPropertiesを開きAndroidを選びます。ダイアログの下の方にある'Add'を選択し、FacebookSDKプロジェクトをworkspaceから選択します。

プロジェクトの中にFacebook app IDを加えるには、プロジェクトのres/valuesフォルダのstrings.xmlを開きます。前のステップで手に入れたIDをString型のapp_idに加える必要があります。

(string.xmlファイルを見てみると、ドキュメントの中に
<string name="app_id">497906953566757</string>
という内容が書き込まれているはずです。)

続いてプロジェクトのルーツの中のAndroidManifest.xmlを開きます。android.permission.INTERNET:という'uses permission'を加えます。


また、'Application' タブでは、先ほど設定したstring型app_idを持った com.facebook.sdk.ApplicationIDと呼ばれるmeta-data itemを加える。

最後にアプリにcom.facebook.LoginActivityという名前で新しいActivityを加えます。

(ソースファイルを見てみると、以下のようなXMLに新しいコードが加わっているはずです。)
<uses-permission android:name="android.permission.INTERNET"/> 
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/app_id"/>
<activity android:name="com.facebook.LoginActivity">


最低限実行可能なソーシャルアプリ
最初にこのプロジェクトを作成すると、res/layout にある activity_main.xmlで単純なユーザインタフェースが作成されます。そのファイルを開き、設計画面の真ん中でtext labelを選択し、@+id/welcom のIDを付けます。


レイアウトのソースコードを見ると以下のようになっているはずです。
...
<TextView
    android:id="@+id/welcome"
    android:layout_width="wrap_content"
    ...
この参照によって、ユーザがFacebookにLoginしたときに、ユーザ名を含んだwelcomeテキストがアップデートされるようにします。srcフォルダのMainActivity.javaを最後に開きます。

まず、MainActivityの親クラスをActivityからFacebookActivityに変更し、import android.app.Activitycom.facebook.FacebookActivityに変えます。

import android.app.Activity;
import com.facebook.FacebookActivity;

public class MainActivity extends Activity {
public class MainActivity extends FacebookActivity {
...
次にonCreateメソッドの最後に、Facebook loginを開始するためのthis.openSession()を呼びます。
@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  this.openSession();
}
一端ユーザがLoginすると、activityのonSessionStateChangeメソッドが呼ばれます。 ユーザ名のフェッチやwelcome メッセージのアップデートにはこのメソッドを使うことができます。以下メソッドを加えます。
@Override
protected void onSessionStateChange(SessionState state, Exception exception) {
  // user has either logged in or not ...
}
このコールバックの中で、オープンセッションを作成するためにユーザがLoginしているかチェックし、ユーザの基本情報をフェッチするためのFacebook Graph API の /me endpointのコールを作る必要があります。onCompletedと呼ばれるコールバックを持つRequest.newMeRequest(Session, Callback)でリクエストを作ることによってこれを行います。
この中で、ユーザ名と一緒にTextViewのラベル(先ほどwelcome IDとしたもの)を置き換えます。設定したリクエストを実行することによってこのメソッドを完成させます。

@Override
protected void onSessionStateChange(SessionState state, Exception exception) {
  // user has either logged in or not ...
  if (state.isOpened()) {
    // make request to the /me API
    Request request = Request.newMeRequest(
      this.getSession(),
      new Request.GraphUserCallback() {
        // callback after Graph API response with user object
        @Override
        public void onCompleted(GraphUser user, Response response) {
          if (user != null) {
            TextView welcome = (TextView) findViewById(R.id.welcome);
            welcome.setText("Hello " + user.getName() + "!");
          }
        }
      }
    );
    Request.executeBatchAsync(request);
  }
}
この抜粋はFacebook SDK(TextView widget classを含む)から追加した多くのクラスを使うので追加のimport宣言が必要になります。

import com.facebook.GraphUser;
import com.facebook.Request;
import com.facebook.Response;
import com.facebook.SessionState;
import android.widget.TextView;
全てのファイルを保存して実行します。アプリはすぐにFacebook Login flowを始めます。( もしエミュレータにAPKがインストールされていればFacebook アプリを通して行われます。もしされていなければウェブダイアログを通して行われます。) Loginが成功するとユーザ名が表示されます。






これでソーシャルAndroidアプリを構築することができました。Facebook SDKを更に深く理解し、追求する準備が整いました。
最後にMainActivity.javaの完成コードは以下のとおりです。


package com.firstandroidapp;

import android.os.Bundle;
import android.view.Menu;
import android.widget.TextView;
import com.facebook.FacebookActivity;
import com.facebook.GraphUser;
import com.facebook.Request;
import com.facebook.Response;
import com.facebook.SessionState;

public class MainActivity extends FacebookActivity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      this.openSession();
  }

  @Override
  protected void onSessionStateChange(SessionState state, Exception exception) {
    // user has either logged in or not ...
    if (state.isOpened()) {
    // make request to the /me API
      Request request = Request.newMeRequest(this.getSession(), new Request.GraphUserCallback() {
        // callback after Graph API response with user object
        @Override
        public void onCompleted(GraphUser user, Response response) {
          if (user != null) {
            TextView welcome = (TextView) findViewById(R.id.welcome);
            welcome.setText("Hello " + user.getName() + "!");
          }
        }
      });
      Request.executeBatchAsync(request);
    }
  }

}

0 件のコメント:

コメントを投稿