[最新]AndroidStudioでFacebook連携アプリを作ろう[文字投稿&写真投稿]



AndroidStudio0.8.9を使用し、Facebook連携アプリを開発していきます。
Eclipseの方も、ライブラリの追加以外は参考になると思います。
※現在のAndroidStudio最新バージョンは0.8.13です。


1.FacebookSDKのダウンロード

1.1 https://developers.facebook.com/にアクセス。
















1.2 上部のDocsタブをクリック

1.3  Android Developers にアクセス













1.4 Download the SDK をクリック
しばらくするとダウンロードがはじまるので、任意のフォルダに保存しましょう。












2.AndroidStudio 
新規プロジェクトの作成

2.1AndroidStudioを起動しましょう。

2.2 任意のアプリケーションネームなどを設定してください。














2.3 今回はAPIレベルを14に設定します。
※他のAPIレベルでも問題ありません。














2.4 BlankActivityを選択します。













2.5 任意のクラスネームを設定します。













2.6 全ての操作を終えると、以下の様な画面になります。














3.FacebookSDKの導入
AndroidStudioを使用し、FacebookSDKライブラリの導入を行います。

3.1 File > import Moduleをクリック






















3.2 ダウンロードしたSDKを解凍し、SDKのフォルダディレクトリを指定します。















3.3 いろいろ出てきますが、今回はライブラリのみimportします。














3.4 Finishを押すと、importされますがエラーが起きます。


3.5   パッケージ直下にあるgradle.propertiesを開き、以下のソースを記入してください。記入が終えたら上部右側にある、Try Againをクリック
※バージョンは環境に合わせてください。

ANDROID_BUILD_TARGET_SDK_VERSION=20 ANDROID_BUILD_TOOLS_VERSION=20 ANDROID_BUILD_SDK_VERSION=18 ANDROID_BUILD_MIN_SDK_VERSION=14
3.6  File > Project Structureをクリック



















3.7 app > Dependenciesをクリック















3.8 下部の+をクリックし、Module depencyをクリック















3.9 facebookを選択し、OKをクリック

3.10 build.gradleを開き、compile project(':facebook')が記述されていれば成功

中略
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile project(':facebook')
}
3.11 build.gradleを開いたついでに compile 'com.android.support:support-v4:20.0.0'
を記述。FacebookSDK内部にて使うみたいです。
もし、既に記述されていればそのままで問題ありません。
記述が終えたら、左上のSync Nowをクリック


4 FacebookAppの登録

4.1 https://developers.facebook.com/にアクセス

4.2   Apps より Add a New appをクリック


4.3   Androidをクリック


4.4 任意のアプリケーションネームを入力してください。
※'Facebook'などの名称は使用出来ないので注意してください。

4.5  入力を終えたら、Create New Facebook App IDをクリック
4.6  任意のカテゴリーを選択し、Create App ID を押してください。
4.7  Appの作成完了したら、右上部のSkip Quick Startをクリックしてください。



4.8  AppsのSettingを開いてください。


4.9 Basic タブをクリックし、下部の +Add Platformをクリック

4.10 すると以下のような入力画面がでるはずです、

4.11PackageName と Class NameはAndroidStudioに合わせて入力してください。

4.12 次にKey Hashesですが、こちらはリリース時であれば、
リリース時に使用するKeystoreのKeyHashを使用し、
デバック時はデバック用のKeyHashを使用します。
今回は、デバック用のKeyHashを使用します。

4.13 KeyHashの取得方法
  [Macの場合]ターミナルを起動してください。
keytool -v -list -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android


 [Windowsの場合]コマンドプロンプトを起動してください。
cd C:\Users [enter]
cd xxxxx [enter]
cd .android [enter]
keytool -v -list -alias androiddebugkey -keystore  debug.keystore -storepass android -keypass android [enter]



SHA1: で始まる行を見つけて、SHA1: より後ろの部分をコピーします。


4.14 コピーしたSHA1の文字列を、先程のKeyHashesに入力します。

4.15 Save Changesをクリックし、保存をしてください。
左側にSavedという文字が出れば成功です。


4.16  作成された App ID をどこかにメモしておきましょう。
後ほど使用します。

5 Login機能を作成(実装)

5.1 AndroidManifest.xmlを編集します。
 以下のパーミッションを追加します。
<uses-permission android:name="android.permission.INTERNET" />

<application> 

</application>のタグ内に

以下を記述します。

 <activity
            android:name="com.facebook.LoginActivity"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:label="@string/app_name" />

        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/Facebook_AppId" />

※"@string/facebook_appId" にエラーが起きると思いますが
strings.xmlを編集すればエラーは消えます。

5.2 values配下の strings.xmlに 取得したApp IDを記述 します。
<string name="Facebook_AppId">App ID</string>

5.3 xmlファイルを編集します。ここでは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">

    <com.facebook.widget.LoginButton
        android:id="@+id/authButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

5.4 Javaファイルを編集します。 ここではMainActivity.java

-以下ソース-


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import com.facebook.Request;
import com.facebook.Response;
import com.facebook.Session;
import com.facebook.SessionState;
import com.facebook.UiLifecycleHelper;

public class MainActivity extends Activity {

    private UiLifecycleHelper uiHelper;

    private Session.StatusCallback callback = new Session.StatusCallback() {
        @Override
        public void call(Session session, SessionState state, Exception exception) {
            onSessionStateChange(session, state, exception);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        uiHelper = new UiLifecycleHelper(this, callback);
        uiHelper.onCreate(savedInstanceState);
    }
    private void onSessionStateChange(Session session, SessionState state, Exception exception) {
        if (state.isOpened()) {
            //ログイン
        } else if (state.isClosed()) {
            //ログアウト
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        uiHelper.onResume();
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        uiHelper.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    public void onPause() {
        super.onPause();
        uiHelper.onPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        uiHelper.onDestroy();
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        uiHelper.onSaveInstanceState(outState);
    }
}


ログイン機能の実装は以上となります。デバックして確認してみましょう。
今回はFacebookSDK内部のLoginActivityを使用しているので、素早く
ログイン機能を実装することができました。
ログインパターンは以下の3つがあります。

・Facebook公式アプリがインストールされており、公式アプリでログインしているパターン。
・Facebook公式アプリがインストールされているが、公式アプリでログインしていないパターン。
・Facebook公式アプリがインストールされていないパータン。


6.投稿機能の作成(実装)~文字編~

"Hello"という文字を投稿してみます。

6.1 レイアウトのxmlファイルに投稿ボタンを作成します。ここでは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">

    <com.facebook.widget.LoginButton
        android:id="@+id/authButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:onClick="postActionClick"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Post"
        android:layout_centerInParent="true"/>

</RelativeLayout>


6.2 Javaファイルを編集します。ここではMainActivity.java

  xmlのボタンのタグ内で記述した、onClickは
Javaファイルで、まったく同じ名前でメソッドを定義すると
クリック時のイベントをとってくれます。
ここでは、postActionClickとします。

-以下ソース-

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import com.facebook.Request;
import com.facebook.Response;
import com.facebook.Session;
import com.facebook.SessionState;
import com.facebook.UiLifecycleHelper;


public class MainActivity extends Activity {

    private UiLifecycleHelper uiHelper;

    private Session.StatusCallback callback = new Session.StatusCallback() {
        @Override
        public void call(Session session, SessionState state, Exception exception) {
            onSessionStateChange(session, state, exception);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        uiHelper = new UiLifecycleHelper(this, callback);
        uiHelper.onCreate(savedInstanceState);
    }

    public void postActionClick(View v) {
        Session session = Session.getActiveSession();
        String  sendText = "Hello";
        if (session.isOpened()) {
            Request.newStatusUpdateRequest(session, sendText, new
                    Request.Callback() {
                        @Override
                        public void onCompleted(Response response) {
                            if (response.getError() == null) {
                                //成功
                            } else {
                                //失敗
                            }
                        }
                    }).executeAsync();
        }
    }
    private void onSessionStateChange(Session session, SessionState state, Exception exception) {
        if (state.isOpened()) {
            //ログイン
        } else if (state.isClosed()) {
            //ログアウト
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        uiHelper.onResume();
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        uiHelper.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    public void onPause() {
        super.onPause();
        uiHelper.onPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        uiHelper.onDestroy();
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        uiHelper.onSaveInstanceState(outState);
    }
}


文字投稿の実装は以上となります。デバックして確認してみましょう。
※ログイン処理は必ず終えてください。
自分のタイムラインに"Hello"が投稿されていれば成功です。


7.投稿機能の作成(実装)~文字と写真編~

7.1 Javaファイルのみの編集となります。

drawable配下の画像と文字を投稿します。
文字は、"UploadPhoto"にします。

-以下ソース-

import android.app.Activity;
import android.content.Intent;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import com.facebook.Request;
import com.facebook.Response;
import com.facebook.Session;
import com.facebook.SessionState;
import com.facebook.UiLifecycleHelper;


public class MainActivity extends Activity {

    private UiLifecycleHelper uiHelper;

    private Session.StatusCallback callback = new Session.StatusCallback() {
        @Override
        public void call(Session session, SessionState state, Exception exception) {
            onSessionStateChange(session, state, exception);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        uiHelper = new UiLifecycleHelper(this, callback);
        uiHelper.onCreate(savedInstanceState);
    }

    public void postActionClick(View v) {
        Session session = Session.getActiveSession();
        String  message = "UploadPhoto";
        if (session.isOpened()) {

            Request request = Request.newUploadPhotoRequest(Session.getActiveSession(), BitmapFactory.decodeResource(getResources(), R.drawable.画像名),
                    new Request.Callback() {
                        @Override
                        public void onCompleted(Response response) {
                        }
                    });
            Bundle params = request.getParameters();
            params.putString("message", message);
            request.executeAsync();
        }
    }

    private void onSessionStateChange(Session session, SessionState state, Exception exception) {
        if (state.isOpened()) {
            //ログイン
        } else if (state.isClosed()) {
            //ログアウト
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        uiHelper.onResume();
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        uiHelper.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    public void onPause() {
        super.onPause();
        uiHelper.onPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        uiHelper.onDestroy();
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        uiHelper.onSaveInstanceState(outState);
    }
}

写真&文字投稿の実装は以上となります。デバックして確認してみましょう。
※ログイン処理は必ず終えてください。
自分のタイムラインに"UploadPhoto"という文字と写真が投稿されていれば成功です。

コメント

  1. こんにちは。
    現在こちらの記事を参考にFacebookに投稿する処理を作っているのですが、いざ投稿しようとすると「The user hasn't authorized the application to perform this action」というメッセージが出て投稿できません。Facebook Developersでの設定もできている…はずなのですが、これは何が原因なのでしょうか?

    返信削除
  2. すみません、自己解決できました。Graph API ExplorerのGet Access Tokenボタンを押してpublish_actionsにチェックを入れ、次にDebugボタンを押してAccess Token Info内のApp IDをManifest.xmlのmetaタグのvalueに設定することで解決できました。
    おかげさまでFacebookを使えるようになりました。ありがとうございました。

    返信削除
  3. 松崎様、コメントありがとうございます。
    無事解決出来て何よりです(^^)

    返信削除

コメントを投稿

このブログの人気の投稿

[初心者向け]AndroidStudioで地図アプリを作ってみよう![2015年8月最新]

GeoFencing (サンプルコード)