mixi Build Challenge for Android 2011 - Tutorial

2011/11/22

株式会社ミクシィBuild Challenge for Android(TM)

Copyright (C) mixi, Inc. All rights reserved.

2

Step 1 - アプリを動かそう


○ 0. 開発環境とプロジェクトの準備○ Eclipse + ADT Plugin○ Eclipse: http://www.eclipse.org/downloads/

● Eclipse IDE for Java Developersを利用します。

○ ADT Plugin: http://dl-ssl.google.com/android/eclipse/● eclipseの「ヘルプ＞新規ソフトウェアのインストール」で利用します。

○ Android SDK○ http://developer.android.com/sdk/index.html○ 最新のAndroid 4.0対応のものをインストールします。

○ mixi API SDK for Android(TM)○ http://developer.mixi.co.jp/appli/spec/android/download/

○ Mixi Android Example○ https://github.com/mixi-inc/mixi-api-sdk-android-sample

Step 1 - アプリを動かそう3

http://www.eclipse.org/downloads/

http://www.eclipse.org/downloads/

http://developer.android.com/sdk/eclipse-adt.html#installing

http://developer.android.com/sdk/eclipse-adt.html#installing

http://developer.android.com/sdk/index.html

http://developer.android.com/sdk/index.html

http://developer.mixi.co.jp/appli/spec/android/download/

http://developer.mixi.co.jp/appli/spec/android/download/

https://github.com/mixi-inc/mixi-api-sdk-android-sample

https://github.com/mixi-inc/mixi-api-sdk-android-sample



○ 1. アプリの登録○ mixi Developer Centerからアプリを登録○ URL：http://developer.mixi.co.jp/

4

http://developer.mixi.co.jp

http://developer.mixi.co.jp



○ 1. アプリの登録○ 入力項目○ アプリの名前○ リダイレクトURL

○ パッケージ署名のハッシュ値○ メールアドレス

5



○ 1. アプリの登録○ ハッシュ値の取得手順

1. 「C:\Users\[User Name]\.android」に移動

2. コマンドプロンプトで以下のコマンドを入力● keytool -list -v -keystore debug.keystore -alias androiddebugkey

3. パスワードを「android」と入力4. SHA1のフィンガープリントから「:(コロン)」を取り除く

6



○ 1. アプリの登録○ メールアドレスの確認○ 登録したメールアドレスに確認用メールが届く○ 本文のURLからメールアドレスの確認をする

7



○ 2. プロジェクトのインポート○ ファイル＞インポート＞一般＞既存プロジェクトをワークスペースへ

8



○ 3. プロジェクトの設定○ プロジェクト＞プロパティ＞リソース○ 「テキストファイルのエンコーディング」をUTF-8に設定

9



○ 3. プロジェクトの設定○ プロジェクト＞プロパティ＞Javaコンパイラー○ 「コンパイラー準拠レベル」を1.6に設定

10



○ 4. Consumer Keyの設定○ MixiAndroidExampleプロジェクトのソースコード○ MixiAndroidExampleActivity.javaの34行目○ 「CLIENT_ID」に、先ほど登録したアプリのConsumer Keyを設定

11



○ 5. 実行！○ Androidプロジェクトを実行

○ ログインボタンを押して、タイトルが自分のニックネームになったら成功

12



○ 6. Androidアプリの動作の基本○ Activityクラスを使って画面を作る○ MixiAndroidExampleActivityクラス

○ アプリ起動後の動作○ ActivityクラスのonCreate()が呼び出される

● ここで画面を作るための準備をする● サンプルアプリの場合

1. タイトルバーにLoadingアイコンを表示する設定

2. Activityに紐づくレイアウトファイルの設定

3. MixiContainer(mixi Graph APIを利用するためのインタフェース)の初期化

○ アプリ終了時の動作○ ActivityクラスのonDestroy()が呼び出される

● ここでリソースの解放をする

13


Step 2 - つぶやきを表示しよう

14



○ 0. つぶやきを取得する処理の準備○ つぶやきを表示するまでの手順

1. アプリの認証認可をする

2. APIへリクエストを送信する3. JSON形式の結果を受け取る4. 受け取った結果からデータを取り出す

5. 取り出したデータをもとに表示する処理を書く

15



○ 0. つぶやきを取得する処理の準備○ アプリの認証認可をする○ MixiContainer#authorize()

● 認証認可画面を表示する

○ MixiContainer#isAuthorized()● 認証認可が完了しているかどうか判定する

○ サンプルアプリでは…

○ 77行目以降

○ ログインボタンを押すと呼ばれるonLoginClick()で認証認可をしている

16



○ 0. つぶやきを取得する処理の準備○ アプリの認証認可をする○ MixiContainer#authorizeCallback()

● 認証認可の結果をMixiContainerに伝える


○ 65行目以降○ 認証認可画面から戻って来たときに呼ばれるonActivityResult()で、

MixiContainer#authorizeCallback()を呼び、認証認可の結果を通知する

17



○ 1. つぶやきを取得する処理○ 認証認可終了後○ 131行目以降○ 認証認可が成功したら呼ばれる

onInitialized()で、APIへアクセス● loadSelfProfile()

● 自分のプロフィールを取得する

● loadVoice()● つぶやき一覧を取得する

18



○ 1. つぶやきを取得する処理○ APIへリクエストを送信する○ MixiContainer#send()

● リクエストを送信する


○ 159行目以降○ ネットワーク通信をするため、非同期で処理をする○ send()の引数に渡すもの

● APIのエンドポイント(文字列)

● リクエストのオプション(java.util.Map)

● リクエストの結果を処理するCallbackListener

19



○ 1. つぶやきを取得する処理○ つぶやきの取得の場合○ APIのエンドポイント

● /voice/statuses/friends_timeline○ リクエストのオプション

● keyはオプションのパラメータ名● valueはパラメータの値

○ リクエストの結果を処理するCallbackListener● リクエスト成功→onComplete

● リクエスト失敗→onFatal, onError

● リクエスト中止→onCancel

20



○ 1. つぶやきを取得する処理○ JSON形式の結果を受け取る○ CallbackListener#onComplete()

● 引数のBundleオブジェクトに結果が入っています。

○ Bundle#getString()● このメソッドで、結果を取り出します。

○ つぶやきの取得の場合○ 168行目○ values.getString(“response”);で結果の文字列が取り出せる

21



○ 1. つぶやきを取得する処理○ JSON形式の結果を受け取る○ つぶやきのJSON形式の文字列の例

● created_at● つぶやいた日時

● favorite_count● イイネ！の数

● favorited● イイネ！されているかどうか

● id● つぶやきのID

● reply_count● コメントの数

● text● 本文

● user● つぶやいた人

22

[{

“created_at”: “Thu Nov 17 06:29:28 +0000 2011”,“favorite_count”: “0”,“favorited”: false,“id”: “1FZ3P4ACUWBBC-20111117062928”,“reply_count”: “0”,“text”: “Hello World!!”,“user”: {

“id”: “1FZ3P4ACUWBBC”,“profile_image_url”: “http://profile.img.mixi.jp/photo/user/1FZ3P4ACUWBBC_301280930.jpg”,“screen_name”: “Nickname”,“url”: “http://mixi.jp/show_friend.pl?uid=1FZ3P4ACUWBBC”,

}},{

“created_at”: “Thu Nov 17 06:26:00 +0000 2011”,“favorite_count”: “1”,“favorited”: true,“id”: “1FZ3P4ACUWBBC-20111117062600”,“reply_count”: “3”,“text”: “Hello World.”,“user”: {


}},{

...},...

]

http://profile.img.mixi.jp/photo/user/1FZ3P4ACUWBBC_301280930.jpg




http://mixi.jp/show_friend.pl?uid=1FZ3P4ACUWBBC

http://mixi.jp/show_friend.pl?uid=1FZ3P4ACUWBBC



○ 1. つぶやきを取得する処理○ JSON形式の結果を受け取る○ 文字列から欲しいデータを取り出す

● org.json.JSONObject● パラメータと値を対にしてデータを表す

● {...}で囲んで表現している

● org.json.JSONArray● JSONObjectの配列を表す

● [...]で囲んで表現している

23

[{

“created_at”: “Thu Nov 17 06:29:28 +0000 2011”,“favorite_count”: “0”,“favorited”: false,“id”: “1FZ3P4ACUWBBC-20111117062928”,“reply_count”: “0”,“text”: “Hello World!!”,“user”: {


}},{

“created_at”: “Thu Nov 17 06:26:00 +0000 2011”,“favorite_count”: “1”,“favorited”: true,“id”: “1FZ3P4ACUWBBC-20111117062600”,“reply_count”: “3”,“text”: “Hello World.”,“user”: {


}},{

...},...

]



○ 1. つぶやきを取得する処理○ 受け取った結果からデータを読み取る○ 読み取る手順

1. 結果をJSONArrayオブジェクトに変換

2. JSONArrayからJSONObjectを1つ取り出す

3. JSONObjectから目的の値を取り出す

4. 取り出した値でMixiVoiceオブジェクトを作る

5. MixiVoiceオブジェクトをArrayListに追加する

24



○ 2. つぶやきを表示する○ MixiVoiceオブジェクトが入ったArrayListから、つぶやきの一覧を表示する○ 表示するもの

● つぶやいた人のニックネーム● つぶやきの内容

○ 表示する方法● リスト形式で表示する

25

ニックネームつぶやきの本文

・・・



ListView



○ 2. つぶやきを表示する○ ListViewの使い方

1. レイアウトファイルにListViewを書く

2. プログラムでListViewにつぶやきを表示していくAdapterクラスを用意する3. データが入ったArrayListをAdapterに渡す

26



○ 2. つぶやきを表示する○ レイアウトファイルを編集○ MixiAndroidExample＞res＞layout＞main.xml

● レイアウトファイルはXMLで書きます。

○ ListView要素<ListView>

● <Button>要素の下に置く● <ListView>要素に指定する属性

● android:id

• @+id/の後ろにidを設定する

● android:layout_width

• 横幅の指定

● android:layout_height

• 縦幅の指定

● android:layout_weight

• レイアウト時の重み付け

27

<ListViewandroid:id=”@+id/list”android:layout_width=”fill_parent”android:layout_height=”fill_parent”android:layout_weight=”1” />

幅の値意味

fill_parent 親要素の幅に合わせる

wrap_content 自分を表示するのに必要な最低限の幅にする



○ 2. つぶやきを表示する○ プログラムでListViewにつぶやきを表示していくAdapterクラスを用意する○ MixiAndroidExampleActivity.java

1. ListViewにつぶやきを表示するためのAdapterを定義する

2. addVoicesToListView()を定義する

3. showVoices()していたところをaddVoicesToListView()にする

28



○ 2. つぶやきを表示する○ ListViewにつぶやきを表示するためのAdapterを定義する

1. MixiAndroidExampleActivityクラスの中にインナークラスを定義

2. インナークラスの親クラスをArrayAdapterにする

29

public class MixiAndroidExampleActivity extends Activity {...public static class MixiVoiceListAdapter extends ArrayAdapter<MixiVoice> {

...}...

}



○ 2. つぶやきを表示する○ ListViewにつぶやきを表示するためのAdapterを定義する○ コンストラクタを定義し、初期化処理をする

30


//コンストラクタpublic MixiVoiceListAdapter(Context context, List<MixiVoice> list) {

//ArrayAdapterのコンストラクタを呼ぶsuper(context, android.R.layout.simple_list_item_2, android.R.id.text1, list);

}...

}...

}



○ 2. つぶやきを表示する○ ListViewにつぶやきを表示するためのAdapterを定義する○ getView()をオーバライドして、表示したいものを設定する

31


...@Overridepublic View getView(int position, View convertView, ViewGroup parent) {

//ArrayAdapterのgetView()を呼び出すView view = super.getView(position, convertView, parent);

//ニックネーム、つぶやきの本文を表示するために使うTextViewの準備//findViewById()で、レイアウトファイルから指定したIdの要素を取り出すTextView text1 = (TextView)view.findViewById(android.R.id.text1);TextView text2 = (TextView)view.findViewById(android.R.id.text2);

//リストに入れたMixiVoiceを取り出して、TextViewに文字列を当てはめるMixiVoice item = getItem(position);text1.setText(item.screenName);text2.setText(item.text);

return View;}

}...

}



○ 2. つぶやきを表示する○ addVoicesToListView()を定義する

1. 先ほど定義したAdapterのオブジェクトを作る

2. MixiVoiceオブジェクトを持つArrayListを受け取って、Adapterに渡す

32

public class MixiAndroidExampleActivity extends Activity {MixiVoiceListAdapter mListAdapter;...public void addVoicesToList(ArrayList<MixiVoice> voices) {

//R.id.listのlistは、レイアウトファイルにあるListViewのandroid:id属性の値と合わせるListView listView = (ListView)findViewById(R.id.list);

if (mListAdapter == null) {//new MixiVoiceListAdapter()でコンストラクタを呼ぶmListAdapter = new MixiVoiceListAdapter(this, voices);//ListViewに、リストを作るAdapterを設定するlistView.setAdapter(mListAdapter);

}...

}...

}



○ 3. 実行！○ showVoices(voices)をaddVoicesToList(voices)にする○ プロジェクトをビルドして動かしてみる○ つぶやきの一覧が表示されたら成功

33


34

mixi Build Challenge for Android 2011 - Tutorial

Technology

Transcript of mixi Build Challenge for Android 2011 - Tutorial