mixi build challenge for android 2011 - tutorial
DESCRIPTION
This is the tutorial document for mixi Build Challenge for Android, held on November 22th, 2011, at mixi, Inc.このドキュメントは、2011年11月22日に株式会社ミクシィにて開催されました、Build Challenge for Androidのチュートリアルです。TRANSCRIPT
2011/11/22
株式会社ミクシィBuild Challenge for Android(TM)
Copyright (C) mixi, Inc. All rights reserved.
2
Step 1 - アプリを動かそう
Copyright (C) mixi, Inc. All rights reserved.
○ 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
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 1. アプリの登録○ mixi Developer Centerからアプリを登録○ URL：http://developer.mixi.co.jp/
4
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 1. アプリの登録○ 入力項目○ アプリの名前○ リダイレクトURL
○ パッケージ署名のハッシュ値○ メールアドレス
5
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 1. アプリの登録○ ハッシュ値の取得手順
1. 「C:\Users\[User Name]\.android」に移動
2. コマンドプロンプトで以下のコマンドを入力● keytool -list -v -keystore debug.keystore -alias androiddebugkey
3. パスワードを「android」と入力4. SHA1のフィンガープリントから「:(コロン)」を取り除く
6
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 1. アプリの登録○ メールアドレスの確認○ 登録したメールアドレスに確認用メールが届く○ 本文のURLからメールアドレスの確認をする
7
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 2. プロジェクトのインポート○ ファイル＞インポート＞一般＞既存プロジェクトをワークスペースへ
8
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 3. プロジェクトの設定○ プロジェクト＞プロパティ＞リソース○ 「テキストファイルのエンコーディング」をUTF-8に設定
9
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 3. プロジェクトの設定○ プロジェクト＞プロパティ＞Javaコンパイラー○ 「コンパイラー準拠レベル」を1.6に設定
10
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 4. Consumer Keyの設定○ MixiAndroidExampleプロジェクトのソースコード○ MixiAndroidExampleActivity.javaの34行目○ 「CLIENT_ID」に、先ほど登録したアプリのConsumer Keyを設定
11
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 5. 実行！○ Androidプロジェクトを実行
○ ログインボタンを押して、タイトルが自分のニックネームになったら成功
12
Copyright (C) mixi, Inc. All rights reserved.
Step 1 - アプリを動かそう
○ 6. Androidアプリの動作の基本○ Activityクラスを使って画面を作る○ MixiAndroidExampleActivityクラス
○ アプリ起動後の動作○ ActivityクラスのonCreate()が呼び出される
● ここで画面を作るための準備をする● サンプルアプリの場合
1. タイトルバーにLoadingアイコンを表示する設定
2. Activityに紐づくレイアウトファイルの設定
3. MixiContainer(mixi Graph APIを利用するためのインタフェース)の初期化
○ アプリ終了時の動作○ ActivityクラスのonDestroy()が呼び出される
● ここでリソースの解放をする
13
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
14
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 0. つぶやきを取得する処理の準備○ つぶやきを表示するまでの手順
1. アプリの認証認可をする
2. APIへリクエストを送信する3. JSON形式の結果を受け取る4. 受け取った結果からデータを取り出す
5. 取り出したデータをもとに表示する処理を書く
15
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 0. つぶやきを取得する処理の準備○ アプリの認証認可をする○ MixiContainer#authorize()
● 認証認可画面を表示する
○ MixiContainer#isAuthorized()● 認証認可が完了しているかどうか判定する
○ サンプルアプリでは…
○ 77行目以降
○ ログインボタンを押すと呼ばれるonLoginClick()で認証認可をしている
16
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 0. つぶやきを取得する処理の準備○ アプリの認証認可をする○ MixiContainer#authorizeCallback()
● 認証認可の結果をMixiContainerに伝える
○ サンプルアプリでは…
○ 65行目以降○ 認証認可画面から戻って来たときに呼ばれるonActivityResult()で、
MixiContainer#authorizeCallback()を呼び、認証認可の結果を通知する
17
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 1. つぶやきを取得する処理○ 認証認可終了後○ 131行目以降○ 認証認可が成功したら呼ばれる
onInitialized()で、APIへアクセス● loadSelfProfile()
● 自分のプロフィールを取得する
● loadVoice()● つぶやき一覧を取得する
18
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 1. つぶやきを取得する処理○ APIへリクエストを送信する○ MixiContainer#send()
● リクエストを送信する
○ サンプルアプリでは…
○ 159行目以降○ ネットワーク通信をするため、非同期で処理をする○ send()の引数に渡すもの
● APIのエンドポイント(文字列)
● リクエストのオプション(java.util.Map)
● リクエストの結果を処理するCallbackListener
19
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 1. つぶやきを取得する処理○ つぶやきの取得の場合○ APIのエンドポイント
● /voice/statuses/friends_timeline○ リクエストのオプション
● keyはオプションのパラメータ名● valueはパラメータの値
○ リクエストの結果を処理するCallbackListener● リクエスト成功→onComplete
● リクエスト失敗→onFatal, onError
● リクエスト中止→onCancel
20
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 1. つぶやきを取得する処理○ JSON形式の結果を受け取る○ CallbackListener#onComplete()
● 引数のBundleオブジェクトに結果が入っています。
○ Bundle#getString()● このメソッドで、結果を取り出します。
○ つぶやきの取得の場合○ 168行目○ values.getString(“response”);で結果の文字列が取り出せる
21
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 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”: {
“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”,
}},{
...},...
]
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 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”: {
“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”: {
“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”,
}},{
...},...
]
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 1. つぶやきを取得する処理○ 受け取った結果からデータを読み取る○ 読み取る手順
1. 結果をJSONArrayオブジェクトに変換
2. JSONArrayからJSONObjectを1つ取り出す
3. JSONObjectから目的の値を取り出す
4. 取り出した値でMixiVoiceオブジェクトを作る
5. MixiVoiceオブジェクトをArrayListに追加する
24
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 2. つぶやきを表示する○ MixiVoiceオブジェクトが入ったArrayListから、つぶやきの一覧を表示する○ 表示するもの
● つぶやいた人のニックネーム● つぶやきの内容
○ 表示する方法● リスト形式で表示する
25
ニックネームつぶやきの本文
・・・
ニックネームつぶやきの本文
ニックネームつぶやきの本文
ListView
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 2. つぶやきを表示する○ ListViewの使い方
1. レイアウトファイルにListViewを書く
2. プログラムでListViewにつぶやきを表示していくAdapterクラスを用意する3. データが入ったArrayListをAdapterに渡す
26
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 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 自分を表示するのに必要な最低限の幅にする
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 2. つぶやきを表示する○ プログラムでListViewにつぶやきを表示していくAdapterクラスを用意する○ MixiAndroidExampleActivity.java
1. ListViewにつぶやきを表示するためのAdapterを定義する
2. addVoicesToListView()を定義する
3. showVoices()していたところをaddVoicesToListView()にする
28
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 2. つぶやきを表示する○ ListViewにつぶやきを表示するためのAdapterを定義する
1. MixiAndroidExampleActivityクラスの中にインナークラスを定義
2. インナークラスの親クラスをArrayAdapterにする
29
public class MixiAndroidExampleActivity extends Activity {...public static class MixiVoiceListAdapter extends ArrayAdapter<MixiVoice> {
...}...
}
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 2. つぶやきを表示する○ ListViewにつぶやきを表示するためのAdapterを定義する○ コンストラクタを定義し、初期化処理をする
30
public class MixiAndroidExampleActivity extends Activity {...public static class MixiVoiceListAdapter extends ArrayAdapter<MixiVoice> {
//コンストラクタpublic MixiVoiceListAdapter(Context context, List<MixiVoice> list) {
//ArrayAdapterのコンストラクタを呼ぶsuper(context, android.R.layout.simple_list_item_2, android.R.id.text1, list);
}...
}...
}
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 2. つぶやきを表示する○ ListViewにつぶやきを表示するためのAdapterを定義する○ getView()をオーバライドして、表示したいものを設定する
31
public class MixiAndroidExampleActivity extends Activity {...public static class MixiVoiceListAdapter extends ArrayAdapter<MixiVoice> {
...@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;}
}...
}
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 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);
}...
}...
}
Copyright (C) mixi, Inc. All rights reserved.
Step 2 - つぶやきを表示しよう
○ 3. 実行！○ showVoices(voices)をaddVoicesToList(voices)にする○ プロジェクトをビルドして動かしてみる○ つぶやきの一覧が表示されたら成功
33
Copyright (C) mixi, Inc. All rights reserved.
34