Android Studioを入れてFacebookSDKのLogin機能を使うまでの作業記録

Android Studioの導入以降

柄にも無くAndroid Appliの開発に手を染め始めた@yutakikuchi_です。
Android Appliの開発をする為にはEclipseかAndroid Studioを導入すると良いようです。ぐぐってみると断然Eclipseのドキュメントが多いようですが、EclipseはGradleというAndroid Appliをビルドするツールが導入しづらいとの事で、僕はAndroid Studioを選びました。Android Studioの導入はdotinstallに詳しく載っているので、僕と同じ初学者の方は一度参考にする事をお勧めします。Androidアプリ開発入門 (全12回) - プログラミングならドットインストールまたschooでも同じような講義が公開されていますがGradleに対する説明がある冒頭だけ見れば良いと思います。その他はdotinstallでOK。Android StudioではじめるAndroidアプリケーション実践入門 - 無料動画学習｜schoo（スクー）

dotinstallで無料会員で視聴できるのはMyActivity.Java、activity_my.xmlを編集してボタンを押下した時に画面に表示する文言を変更するという所までです。アプリの細かい開発の動画もあるようなんですが有料会員でないと利用できません... Oh...。Javaにビジネスロジック書いて取得したデータをViewに反映したいという欲求を満たす為に今日は自分で試してみた事を記録しておきます。

尚、僕が試している環境は以下の通り。

PC : OSX 10.9.4

Android Studio : Beta 0.8

FacebookSDK : 3.17.1

FacebookSDKの設定

Facebook SDKのImport

Android用Facebook SDKスタートガイド
Getting Started with the Facebook SDK for Android (Android Studio)
Getting Started
目的としてはFacebookのIDでLoginする処理を書く為です。上のURLに流れが書いてありますが、その手順に従って実行してみます。Android StudioのSDK Managerからでは無く手動でzipをDownloadして解凍する必要があるようです。解凍して出来たfacebook-android-sdk-3.17.1/facebookというディレクトリをProject/libraries以下にまるまるコピーすればOKなようですが、Android Studioの「File」⇒ 「Import Module」から解凍したディレクトリを指定すると旨くImportしてくれるようです。SDKのFileは以下からDownloadしましょう。Download FaceBook SDK
Project Restart

ProjectのRestartをしようとすると以下のErrorが出てしまいます。どうやらFacebookSDKに入っていたsampleソースのFriendPickerSampleのANDROID_BUILD_SDK_VERSIONという指定が足りていないようなので追加します。
Error:(8, 0) Could not find property 'ANDROID_BUILD_SDK_VERSION' on project ':FriendPickerSample'.
ANDROID_BUILD_TARGET_SDK_VERSION=19
ANDROID_BUILD_TOOLS_VERSION=20
ANDROID_BUILD_SDK_VERSION=19
ANDROID_BUILD_MIN_SDK_VERSION=15
上の記述をMyApplication直下のgradle.propertiesファイルに記述してtry againすると今度はboltsが存在しませんとAlertされます。これはfacbook/build.gradleファイルのbolts.jarのパスを編集するだけで回避出来ます。修正後にgradleのsyncとrunを実行するとFriendPickerSampleというアプリが問題なくinstallされ、emulator上のアイコンをクリックするとFacebookのLoginページが表示されるようになりました。
Error:(21, 13) パッケージ bolts は存在しません。
//compile files('../libs/bolts.jar')
compile files('libs/bolts.jar')

Facebook Login機能の設定

Facebook Login for Android
※FacebookのLogin機能を実装する為にはFacebookSDKを入れた時にinstallされるFriendPickerやHelloFacebookSampleというプロジェクトのソースに目を通して貰った方が早いと思います。
事前準備のHash値生成

※以下の作業が必須というドキュメントを見かけますが、必要なさそうなので飛ばしても問題無いと思います。
まずはMacのTerminalから~/.android/debug.keystoreというファイルにhash値を作るために以下のコマンドを実行し、生成されたHash値を記録します。passwordを聞かれますが「android」と入力すればOKなようです。このHash値をFacebookのWeb版から登録するフローが後ほど出てくるようです。
$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
//生成されたhash値 fooooo
build.gradleの修正

最初にAndroid StudioのModule直下にあるbuild.gradleのdependenciesにcompile project(':facebook')を追加します。
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    
    compile project(':facebook')
}
strings.xmlの修正

次に「src」 ⇒ 「main」 ⇒ 「res」 ⇒ 「values」配下にある「strings.xml」にappidを記載します。app dashboradページにより設定されたAPP IDを記載します。
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">FacebookLoginTest</string>
    
    <string name="app_id">XXXXXXXXX</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
</resources>
AndroidManifest.xmlの修正

更に「src」 ⇒「main」配下にある「AndroidManifest.xml」に
android.permission.INTTERNETを追加してNETへの接続を有効、com.facebook.LoginActivityというactivityを追加、meta-dataとしてcom.facebook.sdk.ApplicationIdを追加します。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mymodule.app" >
    
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
        <activity android:name="com.facebook.LoginActivity" />
        
        <meta-data android:value="@string/app_id" android:name="com.facebook.sdk.ApplicationId" />
    </application>
</manifest>
activity_main.xmlを修正する

FacebookのLoginをした後に、User名を表示するTextViewを設定します。DefaultではHello world!としておき、Login後にUser名で置き換えるような処理のイメージになります。処理の詳細は最後のJavaソースを見ていただけると分かり易いです。「src」⇒「main」⇒ 「res」⇒ 「layout」配下のactivity_main.xmlに以下を追記します。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

     
    <TextView
        android:text="@string/hello_world"
        android:id="@+id/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
Javaのソースコードを記述する

Android用Facebook SDKスタートガイド
ここの最後に載っているソースコードをコピペすると動かないので注意が必要です。
原因はFacebookSDKのVersionが古い内容で記述されているようで、新しいAPIに書き換える必要があります。以下はFacebookSDK : 3.17.1で挙動を確認している記述になります。「src」=> 「main」⇒ 「java」⇒ 「パッケージ名」⇒ MainActivityに以下の内容を記載します。
package com.example.mymodule.app;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
import android.content.Intent;
import com.facebook.*;
import com.facebook.model.*;
import android.util.Log;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // start Facebook Login
        Session.openActiveSession(this, true, new Session.StatusCallback() {

            // callback when session changes state
            @Override
            public void call(Session session, SessionState state, Exception exception) {
                if (session.isOpened()) {

                    // make request to the /me API
                    Request.newMeRequest(session, 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.hello_world);
                                welcome.setText("Hello " + user.getName() + "!");
                            }
                        }
                    }).executeAsync();
                }
            }
        });
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        Session.getActiveSession().onActivityResult(this, requestCode, resultCode, data);
    }
}
大まかな処理の流れはFacebookのLogin判定をした上で、未Loginの場合はLogin画面を表示、Login済みの場合はUser名を表示させるだけの単純処理になります。user.getName()以外にもGraphUserのAPIを利用すれば他の登録情報も取得できたりします。user.getLocation()等。取得できなかった場合はnullが返ってくるようです。GraphUser

参考URL

Androidアプリ開発入門 (全12回) - プログラミングならドットインストール

Android StudioではじめるAndroidアプリケーション実践入門 - 無料動画学習｜schoo（スクー）

Gradle 日本語ドキュメント

Android用Facebook SDKスタートガイド

Facebook Login for Android

GraphUser