[最新]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. Unknown2014年11月28日 16:54

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

    返信削除
  2. Unknown2014年11月28日 17:50

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

    返信削除
  3. fish2014年11月28日 17:57

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

    返信削除

コメントを投稿

このブログの人気の投稿

レベルアップに必要なXP一覧　Pokemon GO ポケモンGO

投稿者: -
レベルアップに必要なXPをまとめました。 規則正しく上がると以下のようになるみたいです。 規則正しく上がっていけば・・・。 LEVEL XP Needed  Total XP 1 0 0 2 1,000 1,000 3 2,000 3,000 4 3,000 6,000 5 4,000 10,000 6 5,000 15,000 7 6,000 21,000 8 7,000 28,000 9 8,000 36,000 10 9,000 45,000 11 10,000 55,000 12 10,000 65,000 13 10,000 75,000 14 10,000 85,000 15 15,000 100,000 16 20,000 120,000 17 20,000 140,000 18 20,000 160,000 19 25,000 185,000 20 25,000 210,000 21 50,000 260,000 22 75,000 335,000 23 100,000 435,000 24 125,000 560,000 25 150,000 710,000 26 190,000 900,000 27 200,000 1,100,000 28 250,000 1,350,000 29 300,000 1,650,000 30 350,000 2,000,000 31 500,000 2,500,000 32 500,000
続きを読む

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

投稿者: -
イメージ
これから超簡単に地図アプリを作成する方法を伝授します。 この記事を最後まで通せば、地図を使ったミニゲームが作れるので興味がある人はぜひやってみてください。 小中学生の人は、夏休みの自由研究にしちゃおう！ Androidのアプリケーションを開発するので以下の環境が揃っている前提でお話します。 Google Account Gmailが使えていれば大丈夫です。 Android Studio  インストールしていない人は こちらから ダウンロード！ なぜ地図アプリ？ とても簡単に実装ができる！ 位置情報のプログラミング入門に最適 地図を扱うアプリケーション開発に強くなる！ スマホアプリを開発する人なら地図の表示ぐらい知っておかないとちょっと恥ずかしい。 逆に地図アプリが作れると「この地図アプリ俺作ったんだぜ？」と自慢できる。 以下の流れで開発していきます。 地図アプリのためのプロジェクトを作成 GoogleMapsAPIKeyの取得 GoogleMapsの表示 GoogleMapsの便利機能の紹介 地図の中央にクロスマークを表示 クロスマークの緯度、経度、ズームレベルを表示 GoogleMapsを使ったミニゲームの作成 ※Google Maps Android API v2を使用します。 ではさっそく手を動かしていきましょー！(o(´∀｀)o))ﾜｸﾜｸ 1.地図アプリのためのプロジェクトを作成 AndroidStudioを起動しよう！ こんなマークです。 Welcome to Android Studio というタイトルの画面が出ると思います。 Start a new Android Studio projectという項目を押して次の画面に進んでください。 前回までのプロジェクトが開いた人は現在のプロジェクトを閉じるか、 File> New> New Project... を押してください。 以下のような画面が出てくるので、任意の名前をいれてください。 私の例 Application name : Google Maps Company Doma
続きを読む

自動で良い感じの色を抽出してくれるPalette Library がすごい! Android Support Library

投稿者: -
イメージ
PaletteはBitmapから色を検知し、アプリのUIに合う最適の色を抽出してくれるライブラリです。 Paletteで取得できる色の種類は以下の６つ。 Vibrant Vibrant Dark Vibrant Light Muted Muted Dark Muted Light 準備: build.gradleのdependencies {}の中に以下の記述を書こう。 dependencies { compile 'com.android.support:palette-v7:23.0.0' } あとは以下のPaletteのコードを好きなところに書くだけ。 今回は一番分かりやすいonCreateの中に書きました。 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher); Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { //Vibrant palette.getVibrantColor(Color.WHITE); //Vibrant Dark palette.getDarkVibrantColor(Color.WHITE); //Vibrant Light palette.getLightVibrantCol
続きを読む