Androidアプリケーション応用 WebAPI開発

トレーニングの目的
Android で WebAPI を利用し、アプリケーション開発に必要な知識
を身につける。
WebAPI にアクセスをする方法
非同期による表示方法
レスポンスデータの解析方法
JSON
XML

サービスを使う
演習を通して、上記事項が必要な理由を体験する
演習で習得した一連の技術を全て使った動画ダウンローダアプリケーシ
ョンを作成する

This material is licensed under the Creative
Commons License BY-NC-SA 4.0.

ⅰ-2

トレーニングスケジュール
1日目
1章トレーニング概要
2章 WebAPI開発知識
3章チュートリアル
4章 ListViewの応用
5章非同期処理

2日目
6章
7章
8章
9章
10章

Webサービスに接続する
JSON,XMLの解析
サービス
動画ダウンローダを作る
トレーニングのまとめ


ⅰ-3

受講に必要なスキル
本セミナーを受講するにあたり、以下のスキルが必須となる。
Java 言語の経験があること
演習では、実際に Java でプログラミングを行う。
基本的な Java の言語仕様について理解していれば問題ない。

Eclipse を使用した経験があること
演習では、Eclipse を使用してプログラミングを実施する。
基本的な Eclipse の使用方法について理解していれば問題ない。

OESF公認Androidアプリケーション開発入門コースを受講済ないし同
等のスキルを有する。
Androidアプリケーションの基礎的なスキルを有する
複数画面からなる簡単なアプリケーション作成ができる


ⅰ-4

概要
演習で用いる開発環境
演習で用いるアプリケーション
演習概要


ⅰ-6

開発環境
開発環境の説明
本トレーニングでは下記の開発ツールを用いる
トレーニング用マシンは既に開発環境は構築済みです
SDK付属のToolsに環境変数のパスが通っている
エミュレータ
演習で使用するエミュレータは、特段の指定がない限りWVGA800を用いる
こと
100M程度のSDカード領域を用意しておくこと
ソフトウェア

バージョン

Eclipse

Eclipse IDE with built-in ADT

Java SDK

JDK 1.6

Android Platform SDK

Android 2.3.3(API 10)

Android Plug-in

Android Development Tools (ADT) Ver.22.X.X


ⅰ-7

演習概要
開発環境の説明
ディレクトリ構成
トレーニングに必要なファイルは全てandroid_traing_webapiに用意してあり
ます。
以下はandroid_traing_webapiのディレクトリ構成になります
パス（c:¥android_trainig_webapi以下）

内容

adt-bundle-windows-x86-[日付]¥sdk

AndroidSDK

adt-bundle-windows-x86-[日付]¥eclipse

eclipse

workspace

eclipseのワークスペース

gae_setup

GAEサーバ環境構築ツール

server¥webapi_server

WebAPIサーバ

datas

サンプル動画

answer_docs/html

実習の解答ドキュメント


ⅰ-8

演習で用いるアプリケーション（１
）
演習では、動画ダウンロードアプリケーションを作成します。
動画ダウンローダの機能
画面遷移
WebAPIを使ったHTTP通信
バックグラウンドで動く処理
• Threadを使った描画
• サービスを使ったダウンロード機能
ListViewの応用技術
JSON、XMLの解析


ⅰ-9

演習で用いるアプリケーション（２
）
動画ダウンローダーの画面構成

画面パーツ

サムネイル

サムネイル

動画のサムネイル画像を表示する

タイトル

動画に付けられているタイトルを表示
する

説明

タイトル

説明

動画の説明を表示する

説明


ⅰ - 10

演習で用いるアプリケーション（３
）
明示的Intentに
よる画面遷移

WebAPIへの
接続

WebAPIサーバから検
索結果を取得する

SD Card
動画をSD Card
に保存
検索キーワード
を入力し、
「Serarch」ボタ
ンで遷移する

JSON・XMLの
解析処理

行をクリックして動
画をダウンロード

リストビュー
をカスタマイ
ズ

行をクリッ
クして再生

サービスを使っ
てダウンロード

ⅰ - 11

演習の進め方（１）
プロジェクトの共通設定
演習で作成するプロジェクトは特に指定のない限り以下の設定になりま
す。
項目

設定値

Project name

演習毎に指定

Build Target

※講師の指示に従う

Application name

Project nameと同じ

Package name

jp.oesf.xxx
※xxxはプロジェクト名小文字が入
る

Create Activity

Project name + Activity

Min SDK Version

Build Targetと同じ


ⅰ - 12

演習の進め方（２）
実習用プロジェクトをダウンロードする方法
各章ごとに完成プロジェクトとスケルトンプロジェクトを含んだプロジ
ェクトファイルがzip形式で用意しています
手順
「answer_docs/html/index.html」を開く
ファイルをダウンロードする（※キャプチャ参考）
例）解答 ListViewの応用
必要な実習プロジェクトは
各章の解答ページにありま
す。

「プロジェクトファイルのダウン
ロード」のダウンロードを選んで
ⅰ - 13
下さい

演習の進め方（３）
実習用スケルトンプロジェクトをEclipseにインポートする方法
トレーング実習ではあらかじめ用意してある、スケルトンプロジェクト
を使って実習をすることがあります。
例） HTTP通信のスケルトンプロジェクトをインポートする
ファイル名：HttpSample_skeleton01

「 File 」から「イン
ポート」を選し、「イ
ンポート」ダイアログ
を表示

「 General 」を選択し
「 Existing Projects into
Workspace 」を選択し
て「Next」をクリック


Browse」ボタンより
「HttpSample_skeleton01
」フォルダを選択

「Finish」をク
リック

ⅰ - 14

演習の進め方（４）
タスクビューの表示方法
スケルトンプロジェクトを使った実習では、修正箇所をタスクに登録し
ています
メニューの
「Window」から
「ShowView」の
「Tasks」を選択しま
す
「Tasks」を選択すると
Eclipseの下部にタス
クリストが表示されま
す


ⅰ - 15

動画サーバ概要
サーバの概要
演習で使用する動画サーバは「Google App Engine Python（以下 GAEと
略称）」を使用しています
GAEはローカルでも起動することができ、GAEアカウントを持っていれ
ば誰でも簡単にデプロイすることができます。
GAE Pythonのセットアップに必要なもの
GAEセットアップツールフォルダ：「c:android_training_webapigae_setup」
• Python 2.5.X
• PIL（※必須ではないがイメージを扱う場合は必要になる）
• Google App Engine SDK for Python


ⅰ - 16

動画サーバ構築手順（１）
構築手順
Python 2.5.4のインストール
python-2.5.4.msiを起動する
画面の指示に従い、「Next」をクリックして進める
※全ての画面でデフォルトの設定を適用します
最後に「Finish」をクリックして完了

PILのインストール
PIL-1.1.7.win32-py2.5.exeを起動する
画面の指示に従い、「次へ」をクリックして進める
最後に「完了」をクリックして完了


ⅰ - 17

動画サーバ構築手順（２）
Google App Engine SDK for Pythonのインストール
1. GoogleAppEngine-1.6.1msiを起動する
2. 「I accept the terms in License Agreement」にチェックをいれ「Next」
をクリック


ⅰ - 18

動画サーバ構築手順（３）
3. 画面の指示に従い、「Next」をクリックする

4. 以下の画面になったら「Install」をクリックする


ⅰ - 19

動画サーバ構築手順（４）
5. 以下の画面になったら「Finish」を押して完了


ⅰ - 20

GAEサーバを起動する（１）
起動手順
コマンドプロンプトを起動し、以下のコマンドを入力する
cd c:android_training_webapiserver
dev_appserver.py --address xx.xx.xx.xx webapi_server
※xx.xx.xx.xxは自分のIPアドレス


ⅰ - 21

GAEサーバを起動する（２）
以下の画面になった場合は「y」を入力しEnterする
※表示されないこともあります


ⅰ - 22

GAEサーバを起動する（３）
以下の画面になれば起動完了


ⅰ - 23

GAEサーバを起動する（４）
ブラウザを起動しURL：「http://xx.xx.xx.xx:8080」を指定する
動画サーバ画面が表示される


ⅰ - 24

概要
WebAPI とは ?
非同期による画面表示の必要性
レスポンデータの解析
サービスの使いどころ


ⅰ - 26

WebAPI とは ?
Web Application Programing Interface
Web 上にあるアプリケーションプログラムインタフェースのこと
基本的にはリクエストにパラメータを付与して、JSON・XML データの
やりとりを行う
代表的な物として、Yahoo API、 Google API、 Youtube API などがあ
る

Get/Post で送信

JSON・XML で送
信


ⅰ - 27

非同期による画面表示の必要性
非同期処理の利点
表示処理に時間がかかる画面の場合、なかなか画面が表示されないと、
ユーザにストレスを感じさせてしまう
テキストと画像を表示する場合は、処理が分割できるので、最初にテキ
ストだけを表示させ、後から画像を表示することにより、ユーザのスト
レスを多少軽減させられる

非同期（別スレッ
ド）


ⅰ - 28

WebAPIを使って通信を行うとレスポンデータが通常JSON,XMLなどの
形式で返ってくる
クライアント側では取得したデータを解析しなくてはいけない
そのため、AndroidでJSON,XMLの解析手段を知っておく必要がある

サービスの一例


ⅰ - 29

レスポンデータの解析（JSON）
JSONとは
軽量のデータ記述言語
マークアップ言語ではないので、XMLの解析より高速に処理することが
可能
キー/バリューペアの集まりでデータ構造を記述している
文字コードは基本的にUTF-8のみ
AndroidではJSONの解析にorg.jsonを用いることができる


ⅰ - 30

レスポンデータの解析（XML）
XMLとは
データをタグで囲んで、意味付けを行うフォーマット
タグの中に属性を持たせることができる
Androidでは以下の解析方法を用いることが可能
DOM
SAX
XMLPullparser


ⅰ - 31

レスポンデータの解析（XML：DOM
）
DOM（ツリー構造型）
DOM ツリーとしてヒープに持つ。
パース時に XML の内容をすべてメモリ上に保持し、パース後にどの要
素にもいつでもアクセスできる。
すべてをメモリ上に保持するために、多くのメモリを消費するので、
Android が稼働するモバイル機器では問題がある。
XML 文書が小さい場合は DOM を使用すれば簡単に実装できる。

おそ～い

DO
M
消費メモリが多い


ⅰ - 32

レスポンデータの解析（XML：SAX
）
SAX（イベント駆動型）
パーサがパースをしているアプリケーションを呼び出すようなイメージ
。
XML ドキュメントを頭から読んでいき、タグの開始や終了などにぶつ
かると、決められたアプリケーション側のコールバックルーチンをコー
ルする。
アプリケーション側では DOMのようにXML ドキュメントの読み込みの
制御を行うことができない。
メモリの消費量は DOM よりも少ない。
Android には、従来の方法での SAX の使い方と、SAX の上にラップさ
れたラッパーを使う方法が用意されている。
すげーはえー♪
！！！！！

ボクのほうが
扱いやすいもん･･･

SAX

DOM


ⅰ - 33

レスポンデータの解析（XML：
XMLPullParser）
XMLPullParser（Pull 型）
JAVA でいうところの StAX と同じ機能を持つもの。
Android は StAX をサポートしていないので同じ機能を持
つ XMLPullParser が用意されている。
SAX と同じように XML ドキュメントを頭から読みこむが、読み込みの
制御をアプリケーション側で行い、必要に応じてパーサから情報を取得
することができる。
アプリケーション側から制御が行えるため、早い段階で構文解析を停止
させることができるので、構文解析に要する時間を大幅に短縮できる。
途中で止まれな
い！

いつでも止まれる♪

ボクも速い！

SAX


ⅰ - 34

レスポンデータの解析（XMLまとめ
）
まとめ
ＤＯＭ

ＳＡＸ

XML
PullParser

パーサの
性質

ツリー構造

イベント駆動型
（制御不可）

イベント駆動型
（制御可能）

要素への
アクセス

ランダム

シーケンシャル

シーケンシャル

要素の取得

DOMツリーへの
アクセス

コールバック
ルーチン

イテレート時に
取得

XML書き出し

可能

不可能

可能

消費メモリ

多い

一番少ない

少ない

扱い易さ

扱いやすい

扱いにくい

扱いやすい


ⅰ - 35

サービスを使う利点
サービスとは、ひと言で言えば常駐プログラムである
サービスの持つ機能の多くはスレッドでも実現可能だが、サービスでし
か出来なことも多い
スレッドとの違い
スレッドのような単発な機能だけでなく、一つのアプリケーションとしての役割を果たすケー
スが多い
全てのアプリケーションは同じサービスにアクセスすることができる
Activityとは別プロセスで実行することも可能で、プロセス間通信も行うことができる
Activity終了後に再起動しても同じサービスにアクセスすることもできる。
サービ
スレッ
ス
ド


ⅰ - 36

スレッドとサービスの違いを意識し、サービスの使いどころを考える必
要がある
スレッドの使いどころ
Activityが消滅してしまうとアクセスすることが出来ないため主にUIに関わる処理
で使用する
• 画面に依存するI/O処理などで使用するケースが多い
ライフサイクルを意識し、適切なタイミングでキャンセルできるようにする必要
がある
例）
• 画面表示用の画像のダウンロード
• プログレスバーの表示
• DBやSDカードのアクセス

Activityのライフサイクルには依存しないため、完全に独立した処理で使用する
例）
• アラーム、タイマー
• ダウンロード
• 音楽再生


ⅰ - 37

表示画面間でパラメータの受け渡し
アクティビティ間でパラメータを受け渡すには
仕組み
アクティビティ間でパラメータを受け渡すには、画面遷移の際に作成する
Intentオブジェクトに受け渡したいパラメータを設定する
パラメータはキー、値の組み合わせで作成する
遷移先画面は、アクティビティのメソッドを使用して送付されたIntentオブジ
ェクトを取得し、起動元画面がパラメータを設定する際に使用したキーを使
用して、Intentオブジェクトから値を取得する
アクティビティA

インテントにパラメータ
（キーと値）を詰める

アクティビティB

インテン
ト

インテン
ト

Android

• インテントからパラ
メータを取得する
• パラメータのキーを指
定して値を取り出す
ⅰ - 39

表示画面間でパラメータを渡す
インテントを使用してパラメータを渡す方法
起動元アクティビティ
1. 起動元アクティビティでIntentオブジェクトを生成する
2. IntentオブジェクトにIntent#putExtraメソッドを使用してパラメータを追加
する
• パラメータは「キー、値」のセットで設定する
3. Activity#startActivityメソッドを使用して、起動先アクティビティを呼び出す
サンプルコード（起動元アクティビティ）

public class SampleListActivity extends ListActivity {
・・・・・・・・
@Override
protected void onListItemClick(ListView listView, View view, int position,
long id) {
Intent intent = new Intent(this, NextActivity.class); ・・・１
intent.putExtra(“message”, “Android”);
・・・２
startActivity(intent);
・・・

３
}
}


ⅰ - 40

表示画面間でパラメータを受け取る
インテントからパラメーターを受け取る方法
1. 起動されたアクティビティで、Activity#getIntentメソッドを使用して、イン
テントオブジェクトを取得する
2. データの型に応じたIntent#getExtraメソッドを使用して、Intentオブジェクト
に格納されているパラメータを取得する
• Integer型・・・ getIntegerExtra
• Long型・・・ getLongExtra
• String型・・・ getStringExtra

起動されたサンプルコード（onCreateでパラメータを取得する例）
public class NextActivity extends Activity {
・・・・・・・・
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_next);
Intent intent = getIntent();
String message = intent.getStringExtra(”message”);

・・・１
・・・２

}
}


ⅰ - 41

画面遷移アプリケーションの作成
（１）
実習1 （15分）
簡単な画面遷移アプリケーションを作成します


ⅰ - 42

（２）
アプリケーション概要
＜プロジェクト設定＞
項目

設定値

Project name

ActivitySample

Build Target

※トレーニングで指定したバージョン

Application name

ActivitySample

Package name

jp.oesf.activitysample

Create Activity

MainActivity


ⅰ - 43

画面遷移アプリケーションの作成（
３）
手順
1. MainActivityの画面デザインを変更する
2. 遷移画面のレイアウトを作成
ファイル名：activity_next.xml

3. 遷移画面のActivityを作成
ファイル名：NextActivity.java

4. MainActivityにIntentにデータを格納する処理の追加
5. NextActivityにIntentからデータを取得する処理の追加
6. AndroidManifest.xmlにNextActivityを追加する


ⅰ - 44

（４）
リソースファイルの設定
＜activity_main.xml＞
ビュー
LinearLayout

階層構造
<LinearLaｙout>
<EditText />
<Button />
</LinearLaｙout>

プロパティ
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“vertical”

EditText

android:layout_height="wrap_content"
android:layout_width="match_parent”
android:id="@+id/edit_message"

Button

android:id=“@+id/Button01”
android:layout_width =“match_parent”
android:layout_height=“wrap_content”
android:text=“@string/next”
android:onClick=“onClickNextButton”


ⅰ - 45

（５）
＜activity_next.xml＞
ビュー

プロパティ

LinearLayout

階層構造

android:layout_height=“match_parent”
android:orientation=“vertical”

TextView

<LinearLaｙout>
<TextView />
<Button />
</LinearLaｙout>

android:text="@string/next_activity"
android:id="@+id/text_title"
android:layout_width="wrap_content"

Button

android:id=“@+id/Button01”
android:layout_width =“match_parent”
android:layout_height=“wrap_content”
android:text=“@string/finish”
android:onClick=“onClickFinishButton”


ⅰ - 46

（６）
＜string.xml＞
項目

設定値

next

Next

finish

Fnish

main_activity

MainActivity

next_activity

NextActivity


ⅰ - 47

（７）
Main画面からNext画面へデータを渡す
MainActivity
public void onClickNextButton(View v){
EditText editMessage = (EditText)findViewById(R.id.edit_message);
Intent intent = new Intent(this, NextActivity.class);
intent.putExtra("message", editMessage.getText().toString());
}

Intentからデータ取得
NextActivity
String message = intent.getStringExtra(“message");
TextView textView = (TextView)findViewById(R.id.text_title);
textView.setText(message);


ⅰ - 48

（確認）
確認
以下のように画面遷移することを確認する


ⅰ - 49

（解答１）
解答
MainActivity.java
package jp.oesf.activitysample;
import
import
import
import
import

android.os.Bundle;
android.view.View;
android.widget.EditText;
android.app.Activity;
android.content.Intent;

public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
setContentView(R.layout.activity_main);
}
public void onClickNextButton(View v) {
EditText editMessage = (EditText) findViewById(R.id.edit_message);
Intent intent = new Intent(this, NextActivity.class);
intent.putExtra("message", editMessage.getText().toString());
}
}


ⅰ - 50

画面遷移アプリケーションの作成（解答
２）
解答（続き）
NextActivity.java
package jp.oesf.activitysample;
import
import
import
import
import

android.os.Bundle;
android.view.View;
android.widget.TextView;
android.app.Activity;
android.content.Intent;

public class NextActivity extends Activity {
@Override
setContentView(R.layout.activity_next);
String message = intent.getStringExtra("message");
TextView textView = (TextView)findViewById(R.id.text_title);
textView.setText(message);
}
public void onClickFinishButton(View v){
finish();
}
}

ⅰ - 51

（解答３）
解答（続き）
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit_message"
android:layout_height="wrap_content" >
</EditText>
<Button
android:id="@+id/button1"
android:onClick="onClickNextButton"
android:text="@string/next" />
</LinearLayout>

ⅰ - 52

（解答４）
解答（続き）
activity_next.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".NextActivity" >
<TextView
android:layout_height="wrap_content" />

<Button
android:onClick="onClickFinishButton"
android:text="@string/finish" />
</LinearLayout>


ⅰ - 53

（解答５）
解答（続き）
string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string
<string
<string
<string
<string
<string
<string
<string

name="app_name">ActivitySample</string>
name="hello_world">Hello world!</string>
name="menu_settings">Settings</string>
name="title_activity_next">NextActivity</string>
name="finish">Finish</string>
name="next">Next</string>
name="main_activity">MainActivity</string>
name="next_activity">NextActivity</string>

</resources>


ⅰ - 54

（解答６）
解答（続き）
AndroidManifest.xml
〜略〜
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="jp.oesf.activitysample.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="jp.oesf.activitysample.NextActivity“ >
</activity>
</application>
</manifest>


ⅰ - 55

概要
ListViewの使い方
ListViewにデータを表示する
ListViewを使ったサンプルアプリケーション
ListViewをカスタマイズする

This material is licensed under the Creative Commons License BY-NC-SA 4.0.

ⅰ - 57

ListViewとは
ListViewはデータをリスト形式で表示するためのビューグループです
ListViewを使用するときは画面デザインと行デザインの2つのリソースフ
ァイルが必要
リスト形式で表示

画面デザイン

行デザイン

ⅰ - 58


ListViewはアイテム内のレイアウトを変更することも可能です

ⅰ - 59


ListViewにデータを表示する
Adapterとは
ListViewなどのデータを一覧形式で表示するViewGroupのインタフェー
スとしてAdapterクラスが用意されています
Adapterによってデータ１件分を表示するViewを組み立てる役割を担当
しています
データとViewの繋
ぎ役をします

Adapter

データ

表示するViewを組み立てます
ⅰ - 60


Adapterの役割
Viewの組み立ての仕組み
Adapterはデータとビューの連携を担っており、表示すべきビューをデー
タから組み立てるのが役割です
データ１件分をどのようなView構造で表示するかを決定するのが
getViewメソッドです
getViewメソッド
getViewメソッドは、新しいデータが表示されるタイミングで呼び出されます
ListViewの場合、画面をスクロールして、画面外から新しいデータが表示さ
れるタイミングで呼び出されます
戻り値

メソッド名

View

getView (int position, View contentView, ViewGroup parent)

ⅰ - 61


ArrayAdapter
ArrayAdapter
Androidにはデータの管理方法に適したAdapterクラスが複数用意されて
います
ArrayAdapterクラスは配列やListなどのデータ形式を管理するのに適した
Adapterです
ArrayAdapter<T>( Context context,
int textViewResourceId,
T[] objects)

ArrayAdapterのコンストラクタ
引数

説明

Context context

クラスのオブジェクトを指定します。

int textViewResourceId

行レイアウトのリソースIDを指定します。

T[] objects

表示データ配列のオブジェクトを指定

ⅰ - 62


ListViewのサンプルアプリケーシ
ョン 1 （１）
実習1
ListViewを使ったサンプルアプリケーションを作成する


ⅰ - 63

ョン 1 （２）
プロジェクトの概要
項目

設定値

Project name

ListSample

Build Target


Application name

ListSample

Package name

jp.oesf.listsample

Create Activity

ListSampleActivity


ⅰ - 64

ョン 1 （３）
手順
1. レイアウトファイルを修正する
ListViewを定義した画面デザインのレイアウトファイルを作成
ファイル名：activity_list_sample.xml

2. 行用のレイアウトファイルを作成する
ListView内で使用する、行デザインのレイアウトファイルを作成する
ファイル名：list_row.xml

3. 一覧表示のActivityを作成する
継承元をListActvitiyに変更する
ListActivityとAdapterを使用してデータをリストとして表示する


ⅰ - 65

ョン 1 （４）
1. レイアウトファイルを修正する
ListViewを定義した画面デザインのレイアウトファイルを作成
ファイル名：activity_list_sample.xml
View

Property

LinearLayout


ListView

android:id="@android:id/list" ※

※ListActivityを使用する場合は必ずこのidにする


ⅰ - 66

ョン 1 （５）
2. 行用のレイアウトファイルを作成する
ListView内で使用する、行デザインのレイアウトファイルを作成する
ファイル名:list_row.xml
View

Property

TextView

xmlns:android="http://schemas.android.com/apk/res/android"
android:textAppearance="?android:attr/textAppearanceMedium"

※list_row.xmlではTextViewしか使用しません


ⅰ - 67

ョン 1 （６）
3. 一覧表示のActivityを作成する
ListSampleActivityクラスの継承元をListActvitiyに変更する
ListActivityとAdapterを使用してデータをリストとして表示する
ArrayAdapterをセットする
public class ListSampleActivity extends ListActivity {
・・・
public static final String[] ITEMS = { "柴犬", "北海道犬", "甲斐犬", "紀州犬", "土佐犬",
①
"四国犬", "秋田犬", "縄文犬", "琉球犬", "川上犬", "薩摩犬", "美濃柴", "山陰柴", "まめしば" };
@Override
setContentView(R.layout.activity_list_sample);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.list_row, ITEMS);
setListAdapter(adapter);
・・・
}

・・・
②

③

}


ⅰ - 68

ョン 1 （７）
実行結果
以下のようになることを確認


ⅰ - 69

ョン 1 （解答）
解答
解答ドキュメントを参照


ⅰ - 70

１行選択を認識する
ListViewを選択する
ListViewの一行をタッチで選択するためには、
ListActivity#onListItemClickメソッドを実装します。
onListItemClickの定義
引数

意味

ListView listView

クリックされたListView

View view

クリックされたView

int position

リスト内の位置

long id

クリックされたアイテム
ID

サンプル
public class ListSampleActivity extends ListActivity {
・・・・・・・・
@Override
protected void onListItemClick(ListView l, View v, int position, long id){
Log.v("ListSample", "position = " + position);
}
}


ⅰ - 71

ョン 2 （１）
実習2
前項で作成したプログラムを修正し、一覧形式で表示したデータを選択
すると
ログを出力するプログラムを作成する。


ⅰ - 72

ョン 2 （２）
手順
ListActivity#onListItemClickの実装
onListItemClickメソッド内にログ出力
• tag ：「ListSample」
• message ：「position = [選択番号]」


ⅰ - 73

ョン 2 （３）
確認
リストの一行をタッチしたときにログが出力されることを確認する


ⅰ - 74

ョン 2 （解答）
解答


ⅰ - 75

実習3
ListViewのカスタマイズ
ListViewをカスタマイズして、使いやすいユーザーインタフェースを作成す
る。
• <完成図>
サムネイル
タイトル

説明


ⅰ - 76

手順
1. 行レイアウトの作成
サムネイル、タイトル、説明の要素を追加する

2. カスタムAdapterの作成
RowModelの定義 <実装済>
TableAdapterクラスの作成
string-arrayの定義 <実装済>
※スケルトンプロジェクトを使用しても
よい
• 「ListSample_03_skeleton」


ⅰ - 77

手順 1 行レイアウトの作成（１）
1. 行レイアウトの作成
１行に、「サムネイル」「タイトル」「説明」の３つの要素を表示できるよ
うにする
レイアウトファイルlist_row.xmlを編集する
• サムネイル=>ImageView
• タイトル、説明=>TextView
上記をLinearLayoutを駆使して以下のような並びになるようにする


ⅰ - 78

手順 1 行レイアウトの作成（２
）
設定情報

View

Property

ImageView

android:id="@+id/image_thumbnail"

LinearLayout(内側)


TextView(タイトル)

android:textAppearance="?android:attr/textAppearanceMedi
um"

TextView(詳細)

android:id="@+id/text_summary"
android:text="default"
android:textAppearance="?android:attr/textAppearanceSmall
"

※外側のLinearLayoutは省略


ⅰ - 79

手順 2. カスタムAdapterを作成す
る（１）
2. カスタムAdapterを作成する
1. 作成手順
＜実装済＞
1. データクラスRowModelを作成する
– メンバーに「サムネイル・タイトル・説明」を保持する

＜未実装＞
2. ArrayAdapterを継承してTableAdapterクラスを作成する
– getView()をオーバーライドし、必要な処理を実装する
– convertViewのnullチェック対応は必須
– 各項目のビューへ値を設定する

3. setListAdapterしているAdapterを変更する


ⅰ - 80

る（２）
1. RowModelを作成する
「src」フォルダ配下にパッケージ [jp.oesf.listsample.model]を作成する
RowModelクラスを作成する
「サムネイルタイトル説明」を保持するメンバ変数を定義する
各変数のgetter,setterメソッドを用意
public class RowModel {
private String title;
private Drawable thumbnailImage;
private String summary;
「

各変数のgetter setter を記載」

}


ⅰ - 81

る（３）
2. ArrayAdapterを継承したTableAdapterクラスを作成する
ListSample.javaファイルにArrayAdapterを継承したTableAdapterクラスを作
成ジェネリックにRowModelを指定する
getViewをオーバーライドしたメソッドを作成

※内部クラスとして定義す
る
class TableAdapter extends ArrayAdapter<RowModel> {
public TableAdapter(Context context) {
super(context, R.layout.list_row);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
RowModel item = getItem(position);
if (convertView == null) {
// Viewを作成する
LayoutInflater inflater = getLayoutInflater();
convertView = inflater.inflate(R.layout.list_row, null);
}


ⅰ - 82

る（４）
2. ArrayAdapterを継承したTableAdapterクラスを作成する<続き>
nullチェックを行い、Viewの生成と取得したItemをセットする
if (item != null) {
// Image
ImageView imageView = (ImageView) convertView.findViewById(R.id.image_thumbnail);
if (imageView != null) {
imageView.setImageDrawable(item.getThumbnailImage());
}
// Title
TextView textTitle = (TextView) convertView.findViewById(R.id.text_title);
if (textTitle != null) {
textTitle.setText(item.getTitle());
}
// summary
TextView textSummary = (TextView) convertView.findViewById(R.id.text_summary);
if (textSummary != null) {
textSummary.setText(item.getSummary());
}
}
return convertView;
}


ⅰ - 83

る（５）
3. Adapterと値のセット
MainActivityのonCreateメソッドでsetListAdapterでTableAdapterをセット
リソースからテキスト配列を取得する
TableAdapter adapter= new TableAdapter(this);
setListAdapter(adapter);
//RowModelの作成
String[] titles = getResources().getStringArray(R.array.titles);
String[] summaries =
getResources().getStringArray(R.array.summaries);
Drawable image =
getResources().getDrawable(R.drawable.ic_launcher);
int num = titles.length;


ⅰ - 84

る（６）
3. Adapterと値のセット＜続き＞
取得した配列からRowModelの値をセット
RowModelをAdapterにセットする
for(int i = 0; i < num; i++){
RowModel row = new RowModel();
row.setTitle(titles[i]);
row.setSummary(summaries[i]);
row.setThumbnailImage(image);

adapter.add(row);
}


ⅰ - 85

文字列配列リソース（１）
string-arrayタグ
xmlファイルにデータを記載することで、アプリケーションから文字列
配列のデータを取得できるようになります。
構文
<resources>
<string-array name="string_array_name">
<item>text_string</item>
<item>text_string</item>
</string-array>
</resources>

string-arrayの定義名を記載します。
リソースIDとして使用されます。

String-arrayの中に格納される
データを記載します。

◆値の取得方法
getStringArray（”定義名”）を使用することで<item></item>内の値を取得できます
String titles[] = getResources().getStringArray(R.array.string_array_name);


ⅰ - 86

文字列配列リソース（２）
strings.xml
<resources>
<string name="app_name">ListSample</string>
<string-array name="titles">
<item>柴犬</item>
<item>北海道犬</item>
<item>甲斐犬</item>
<item>紀州犬</item>
<item>土佐犬</item>
<item>四国犬</item>
<item>秋田犬</item>
<item>縄文犬</item>
<item>琉球犬</item>
<item>川上犬</item>
<item>薩摩犬</item>
<item>美濃柴</item>
<item>山陰柴</item>
<item>まめしば</item>
</string-array>


ⅰ - 87

文字列配列リソース（３）
strings.xml(続き)
<string-array name="summaries">
<item>日本人の心。日本犬の中で唯一の小型犬。</item>
<item>別名アイヌ犬。純粋和犬とは別種とする考え方も</item>
<item>虎毛カコイー！中型と小型のあいだの大きさ</item>
<item>白が多い。巻尾より差し尾が多い</item>
<item>土佐闘犬。マスティフやブルドッグ、グレート・デーンなどを配し作られた犬
</item>
<item>ニホンオオカミと間違われることも！</item>
<item>日本犬唯一の大型犬。、「秋田マタギ」、マタギ犬。ハチー！</item>
<item>土着の日本犬</item>
<item>縄文時代以来の古い犬の形質を残すとされる</item>
<item>長野県の天然記念物</item>
<item>西郷隆盛の愛犬</item>
<item>美濃犬、飛騨柴とも</item>
<item>因幡犬がベース。差し尾、晩成型。飼えば飼うほど形が変わる？！</item>
<item>小型の柴犬の愛称。JKCや日本犬保存会には「豆柴」という血統書は存在しない
</item>
</string-array>
</resources>

リソースとして取得するコード

// getting resource array data
String titles[] = getResources().getStringArray(R.array.titles);
String summaries[] = getResources().getStringArray(R.array.summaries);

ⅰ - 88

ListViewのカスタマイズ（確認）
実行結果
以下のようになることを確認


ⅰ - 89

ListViewのカスタマイズ（解答）
解答


ⅰ - 90

概要
非同期について
Threadを使う
AsyncTaskの概要
実習


ⅰ - 92

非同期による画面表示（１）
画面表示
表示処理に時間がかかる画面の場合、なかなか画面が表示されないと、
ユーザにストレスを感じさせてしまう。
テキストと画像を表示する場合は、処理が分割できるので最初にテキス
トだけを表示させ、後から画像を表示することにより、ユーザのストレ
スを多少軽減させられる。
非同期（別スレッド）


ⅰ - 93

非同期による画面表示（２）
演習
まずは実行してみて、同期の状態を体感する。
プロジェクト：ListSample_async_skeleton

何も表示されない状態が続く

すべてのデータの読み込みが
終了すると画面が表示される94
ⅰ-


非同期による画面表示（３）
非同期で処理した場合
画像等のダウンロードに時間がかかる処理は、後から表示するようにな
り、
使用者のストレスを軽減させることができる。

すぐにローディン
グ
アイコンが表示さ
れる

完了

徐々にアイコン
が
表示される


ⅰ - 95

Threadを使う
Thread
Threadはフォアグランドでは行いたくない時間のかかる処理を実行する
ときに良く使われます。
フォアグランドで時間のかかる処理を実行すると、画面UIの操作ができなく
なるため、Threadを使ったほうがよい。

Androidではフォアグランドで動いているThreadをメインスレッドまた
は、UIスレッドと呼びます。
AndroidでもThreadを使用することができますが、UIスレッド以外のス
レッドからは直接UIを操作できないという制限があります。
UIスレッド以外のスレッドからUIを操作する場合はHandlerクラスを使用
します。


ⅰ - 96

ThreadからUIを変更する
Handler
HandlerクラスはスレッドからのUIの操作を可能にします。
UIスレッド以外のスレッドからUIを変更しようとするとランタイムエラーが
発生し、アプリケーションが強制終了します。そのため、UIスレッド以外か
らUIの操作を実現するためにHandlerクラスというものが用意されています。


ⅰ - 97

Handlerの使い方（１）
Handlerの使い方
スレッドからUIを操作する際はHandler#postメソッドを呼び出します。
引数にRunnableの実装クラスを指定します。
HandlerインスタンスはUIスレッドで定義する必要があります。

実装例
※サンプルソースでは時間のかかる処理は行っていませんが、実際には時間
のかかる処理のあとにTextViewの表示文字列を操作を仮定したサンプルです

悪い例
Handlerを使っていない
class BadThread extends Thread{
@Override
public void run() {
// ・・・時間のかかる処理・・・
TextView tv = (TextView)findViewById(R.id.textView1);
tv.setText("Hello Thread");
}
}

ⅰ - 98

Handlerの使い方（２）
悪い例２
HandlerインスタンスをUIスレッド以外で生成している
class BadThread2 extends Thread{
@Override
public void run() {
//Threadで使用するのでfinal指定をする
final TextView tv = (TextView)findViewById(R.id.textView1);
//Handlerの定義
Handler handler = new Handler();
//Handler#postメソッドを呼び出すとrunメソッドの処理がUIスレッド上で実行される
handler.post(new Runnable() {
@Override
public void run() {
}
});
}
}


ⅰ - 99

Handlerの使い方（３）
良い例
HandlerインスタンスをUIスレッドで定義し、postメソッド内でUIを操作して
いる
public class HandlerSample extends Activity {
// Handlerの定義
Handler mHandler = new Handler();
public void onClickThreadStart(View v) {
new GoodThread().start();
}
class GoodThread extends Thread {
@Override
public void run() {
// Threadで使用するのでfinalで指定する
final TextView tv = (TextView) findViewById(R.id.textView1);
// Handler#postメソッドを呼び出すとrunメソッドの処理がUIスレッドで実行される
mHandler.post(new Runnable() {
@Override
public void run() {
}
});
}
}
}

ⅰ - 100

ThreadからUIを変更する（１）
実習1
Handlerクラスを使って、UIをThreadから操作できることを確認する
HelloThreadという文字をThreadから表示する

クリック


ⅰ - 101

ThreadからUIを変更する（２）
プロジェクト概要
項目

設定値

Project name

HandlerSample

Build Target


Application name

HandlerSample

Package name

jp.oesf.handler

Create Activity

HandlerSample


ⅰ - 102

ThreadからUIを変更する（３）
手順
1. レイアウトの修正
2. Threadを継承したクラスの作成
3. Button押下時の処理


ⅰ - 103

ThreadからUIを変更する（４）
strings.xmlにButtonラベルを追加する
name

value

string_thread_start

Thread Start

activity_handler_sample.xmlにTextViewとButtonを追加する
階層構造

<Linear
Layout
>

View

Property

TextView

android:id="@+id/textView1"

Button

android:text="@string/string_thread_start"
android:onClick="onClickThreadStart"


ⅰ - 104

ThreadからUIを変更する（５）
2. Threadを継承したクラスの作成
Threadを継承したクラスを作成し、runメソッドをオーバライドします。
runメソッド内でTextViewの値を“Hello Thread”に設定します。
// Handlerの定義
~略~
@Override
public void run() {
// Handler#postメソッドを呼び出すとrunメソッドの処理がUIスレッドで実
行される
@Override
public void run() {
}
ⅰ - 105
});

ThreadからUIを変更する（６）
3. Button押下時の処理
Button押下時にThreadを継承したクラスを実行します。

public void onClickThreadStart(View v){
}


ⅰ - 106

ThreadからUIを変更する（確認
）
確認
Button押下時にTextViewに“Hello Thread”と表示されること


ⅰ - 107

ThreadからUIを変更する（解答
）
解答
// Handlerの定義
@Override
setContentView(R.layout.activity_handler_sample);
}
public void onClickThreadStart(View v) {
}
@Override
public void run() {
// Handler#postメソッドを呼び出すとrunメソッドの処理がUIスレッドで実行される

@Override
public void run() {
}
});
}
}
}


ⅰ - 108

AsyncTask
AsyncTaskとは
Android は他のスレッドから UI スレッドにアクセスするための手段とし
てHandler以外にAsyncTaskというユーティリティクラスを提供していま
す。
ThreadでHandlerを使うことは、コードが冗長的になり、読みづらくな
ります。そのため、Androidで頻繁にUIを操作する場合はAsyncTaskを使
用します。


ⅰ - 109

AsyncTaskの使用例
AsyncTaskの使用例
Threadを使っていた処理をAsyncTaskに置き換えると以下のようになり
ます。
doInBackgroundで時間のかかる処理をおこない、onPostExecuteで
TextViewの表示文字列をHandlerを使わずに変更しています。

class MyAsyncTask extends AsyncTask<Void, Void, Void>{
@Override
protected Void doInBackground(Void... params) {
return null;
}

@Override
protected void onPostExecute(Void result) {
TextView tv = (TextView)findViewById(R.id.textView1);
}

}


ⅰ - 110

AsyncTaskの使い方
AsyncTaskを使う
AsyncTaskクラスを継承したクラスを定義します
AsyncTask のサブクラスでは、扱う型を指定する必要がある。
実行時引数（Params）
進捗単位（Progress）
処理結果（Result）
ジェネリック

説明

Params

doInBackgroundメソッドの引数

Progress

onProgressUpdateメソッドの引数

Result

onPostExecuteメソッドの引数
doInBackgroundメソッドの戻り値と一致
している必要がある


ⅰ - 111

AsyncTaskを定義する
AsyncTaskを定義する

各メソッドの引数に対応し
た型を指定する

class MyAsyncTask extends AsyncTask<Params, Progress, Result>{
@Override
protected Result doInBackground(Params... params) {
return null;
}

}

doInBackgroundは
オーバライド必須

戻り値

メソッド名

説明

abstract Result

doInBackground(Params... params)

バックグラウンド実行処理

void

onPreExecute()

バックグラウンド実行を行う直前の処
理

void

onPostExecute(Result result)

バックグラウンド実行完了時の処理

void

onProgressUpdate(Progress... values)

バックグラウンド処理の進捗状況の更
新

void

onCancelled()

バックグラウンド処理のキャンセル

※ doInBackgroundとonProgressUpdateは可変長引数のため、配列以外で渡したときもparam[0]で参照する必要がある

ⅰ - 112

AsyncTaskの実行
AsyncTaskを実行する
AsyncTaskのサブクラスのインスタンスを生成して実行する一般的な方
法
AsyncTaskを実行中にキャンセルすることができる
//AsyncTaskのインスタンスを取得する
MyAsyncTask task = new MyAsyncTask();
//AsyncTaskを実行する
task.execute("MyAsyncTask execute");

AsyncTaskのサブクラスのインスタンス生成時に実行する
実装コードが短いので非同期処理のキャンセルを行う必要がない場合などに
使われる
インスタンス
//AsyncTaskのインスタンス生成時に実行する
new MyAsyncTask().execute("args as doInBackground");


ⅰ - 113

AsyncTaskのサンプル（１）
使用例
AsyncTaskで10秒カウントするプログラム。
カウント中は画面右上にインジケータアイコンを表示する

起動直後にカウント開始

インジケータアイコンを表示

カウント中

十秒後に終了
インジケータアイコンは消え


ⅰ - 114

AsyncTaskのサンプル（２）
サンプルプログラム
public class AsyncSample extends Activity {
private TextView text;
@Override
//タイトルバーにインジケータを表示させる
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRES
S); ・・・①

setContentView(R.layout.activity_async_sample);
this.text = (TextView)findViewById(R.id.textView1);
this.text.setText("" + 0);
new MyAsyncTask().execute("args as
doInBackground");
・・・②

}


ⅰ - 115

AsyncTaskのサンプル（３）
class MyAsyncTask extends AsyncTask<String, Integer, Boolean>{
@Override
protected void onPreExecute()
{
・・・④
//onPreExecuteではHandlerを使わずにUIを変更できる
//インジケータを表示する
setProgressBarIndeterminateVisibility(true);
}
@Override
protected Boolean doInBackground(String... params) {
Log.v("MyAsyncTask", "param:" + params[0]);
for( int i = 0; i <= 10; i++){
try {
//進捗状況の更新通知
publishProgress(i);
・・・⑥ −１
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();under the Creative Commons License BY-NC-SA 4.0.
This material is licensed

・・・③

・・・⑤

ⅰ - 116

AsyncTaskのサンプル（４）
@Override
protected void onPostExecute(Boolean result) {
・・・⑧-1
//onPostExecuteではHandlerを使わずにUIを変更できる
if( result ){
text.setText("完了");
}else{
text.setText("失敗");
}
//インジケータを非表示する
setProgressBarIndeterminateVisibility(false);
・・・⑧-2
}
@Override
protected void onProgressUpdate(Integer... values) { ・・・⑥−2
//onProgressUpdateではHandlerを使わずにUIを変更できる
text.setText("" + values[0]);
}

}
}

ⅰ - 117

サンプルプログラムの解説（１）
サンプルプログラムの解説
1. タイトルバーにインジケータを表示させる
Activity.requestWindowFeatureメソッドを使い画面タスクバーの状態を定義
する
インジケータアイコンを表示する場合は引数に
“Window.FEATURE_INDETERMINATE_PROGRESS”を指定します
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS)
;
・・・①

2. AsyncTaskを実行する
AsyncTaskを実行するにはexecuteメソッドを呼び出す
executeメソッドの引数にはdoInBackgroundの引数の型と一致している必要
がある
new MyAsyncTask().execute("args as doInBackground");
・・・②
}


ⅰ - 118

サンプルプログラムの解説（２）
3. MyAsyncTaskクラスの作成
AsyncTask クラスのサブクラス“ MyAsyncTask “を定義し、ジェネリクスには
以下の型を指定する
• 実行時の引数の型 String
– AsyncTask実行時に出力するログメッセージを指定するため、引数
の型はStringで指定
• 進捗時の引数の型 Integer
– 現在のカウント状態を画面に表示するため引数の型はIntegerを指定
• 実行結果時の引数の型 Boolean
– 実行結果の成否を判定するため、引数の型はBooleanを指定



・・・③

ⅰ - 119

サンプルプログラムの解説（３）
4. バックグラウンド実行直前の処理を行う
onPreExecuteメソッドでバックグラウンド実行直前の処理を記述する
このメソッドはAsyncTask#executeを実行した直後に呼び出される
ここでは、タスクバーにインジケータアイコンを表示している
• インジケータアイコンの表示・非表示は
setProgressBarIndeterminateVisibilityメソッドの引数で設定する

@Override
protected void onPreExecute() {
//onPreExecuteではHandlerを使わずにUIを変更できる
・・・④
}


ⅰ - 120

サンプルプログラムの解説（４）
5. バックグラウンドの処理を行う
doInBackgroundメソッドでバックグラウンドの処理を実装する
引数はAsyncTask#executeの引数で指定した値が入る
引数の型が可変長引数（Param… param）になっているため、参照する際は
必ず配列の要素番号を指定する
• (例） String s = param[0];
ここでは引数にAsyncTask開始時に出力するメッセージが入っていますので
、要素番号0を指定し、Logに出力している
@Override

・・・⑤


ⅰ - 121

サンプルプログラムの解説（５）
6. 進捗状況の更新通知
進捗毎の更新処理はAsyncTask#onProgressUpdateで行う
進捗状況を更新したいタイミングで publishProgressメソッドを呼び出すと、
AsyncTask#onProgressUpdateがコールバックされる
ここでは、ループ毎に、 publishProgress（ソース⑥-1の箇所)を呼び出し、
現在のカウント値を引数に指定する
onProgressUpdateメソッド(ソース⑥-2の箇所)では受けっ取ったカウント値
をTextViewにセットしている
通常メインスレッド以外でUIの設定を変更する場合はHandlerを使用し、明示
的にメインスレッドで実行指定するが、onProgressUpdateメソッド内ではUI
の変更にHandlerを使う必要はない

@Override
protected void onProgressUpdate(Integer... values) { ・・・⑥−2
//onProgressUpdateではHandlerを使わずにUIを変更できる
text.setText("" + values[0]);
}

ⅰ - 122

サンプルプログラムの解説（６）
7. 実行結果を返す
バックグラウンドの処理で正常終了したときは”true”を返し、例外が発生した
ときは“false”を返す
返した値は、 onPostExecuteの引数で渡される
@Override
for( int i = 0; i <= 10; i++){
try {
//進捗状況の更新通知
publishProgress(i);
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
return false;
・・・⑦−１
}
}
return true;
・・・⑦−２
}

ⅰ - 123

サンプルプログラムの解説（７）
8. バックグラウンド処理完了時の処理
バックグラウンドの処理結果を引数で受け取り、TextViewに結果を表示する
（ソース⑧-1）
setProgressBarIndeterminateVisibilityメソッドでfalseを指定しインジケータ
アイコンを非表示にする（ソース⑧-2）
@Override
protected void onPostExecute(Boolean result) {
・・・⑧
//onPostExecuteではHandlerを使わずにUIを変更できる
if( result ){
text.setText("完了");
}else{
text.setText("失敗");
}
setProgressBarIndeterminateVisibility(false); ・・・⑧
}


ⅰ - 124

AsyncTaskの作成（１）
実習2
説明に使ったサンプルプログラムを作成する
プロジェクト概要
項目

設定値

Project name

AsyncSample

Build Target


Application name

AsyncSample

Package name

jp.oesf.async.count

Create Activity

AsyncSample


ⅰ - 125

AsyncTaskの作成（２）
確認
AsyncTaskで10秒カウント中に画面右上のインジケータアイコンが表示
されることを確認
カウントが完了した時、画面右上のインジケータアイコンが表示されな
くなることを確認

起動直後にカウント開始

インジケータアイコンを表示

カウント中

十秒後に終了
インジケータアイコンは消え
ⅰ - 126


AsyncTaskの作成（解答）
解答
※実習が終わったら、次のAsyncTaskの中断処理を確認する。


ⅰ - 127

AsyncTaskの中断
AsyncTaskの中断
AsyncTask#cancelメソッドを実行することでタスクを中断することがで
きる
このメソッドを実行するとisCancelメソッドはtrueを返す
onPostExecuteは呼び出されず、代わりにonCancelledメソッドが呼び出
される
cancelが実行されてもdoInBackground内の処理は中断されない
そのためdoInBackgroundなどでタスクが中断されているがどうかを常に
判定しなくてはいけない


ⅰ - 128

AsyncTaskの中断の仕方
AsyncTaskを中断する方法
手順
1. AsyncTask#cancelメソッドを実行する
2. AsyncTask#onCancelledメソッドに中断時の処理を実装する
3. AsyncTask#doInBackgroundなどで中断処理を実装する
• キャンセル判定にはisCancelメソッドを使用する

キャンセルで扱うメソッド

戻り値

メソッド名

説明

boolean

cancel(boolean )

AsyncTaskを実行をキャンセルする
引数
boolean:実行しているスレッドに割り込む必要がある場合は、引数に
trueを指定する

戻り値
boolean：タスクの中断に失敗した場合はfalse、成功した場合はtrue
を返す

boolean

isCancel()

キャンセル判定

void

onCancelled()

キャンセルした時の処理を実装する


ⅰ - 129

AsyncTaskを中断する
1. AsyncTask#cancelメソッドを実行する
cancelメソッドを実行するにはAsyncTaskのインスタンスを用意しておく必
要がある。
//AsyncTaskのインスタンスを取得する
MyAsyncTask task = new MyAsyncTask();
task.execute("MyAsyncTask execute");
//AsyncTaskをキャンセルする
task.cancel(true);


ⅰ - 130

AsyncTaskが中断されたときの処理
2. AsyncTask#onCancelledメソッドに中断時の処理を実装する
@Override
protected void onCancelled() {
//インジケータを非表示にする
//TextViewに中止を設定
text.setText("中止");
}
}

3. AsyncTask#doInBackgroundに中断判定処理を実装する
@Override
protected Void doInBackground(RowModel... arg0) {
if(isCancelled()){
//キャンセルした時の処理
}
}

}


ⅰ - 131

AsyncTaskの中断（１）
実習３
実習2で作成したサンプルプログラムにキャンセル処理を追加する
1. CancelButtonをクリックす
る

③

2. インジケータが表示されなくなる
3. カウント表示のTextViewに「中止」が表示され
る

②

①
①


ⅰ - 132

AsyncTaskの中断（２）
手順
1.
2.
3.
4.

レイアウトの修正
AsyncTaskのサブクラスのインスタンスを生成して実行するように修正
Button押下時の処理にAsyncTask#cancel処理を実装
AsyncTaskのサブクラス内にAsyncTask#onCancelledメソッド内に中止
した時の処理を実装


ⅰ - 133

AsyncTaskの中断（３）
activity_async_sample.xmlにButtonを追加する
階層構造

View

Property

Button

android:text="Cancel"
android:onClick="onClickCancelButton"

<LinearLayout>
<TextView />
2. AsyncTaskのサブクラスのインスタンスを生成して実行するように修正
<Button />
</LinearLayout>
private MyAsyncTask task;

@Override
……… 省略 ………
task = new MyAsyncTask();
task.execute("args as doInBackground");
}


ⅰ - 134

AsyncTaskの中断（４）
3. Button押下時の処理にAsyncTask#cancel処理を実装
……… 省略 ………
public void onClickCancelButton(View view){
task.cancel(true);
}
}

4. AsyncTaskのサブクラス内にAsyncTask#onCancelledメソッド内に中止
した時の処理を実装
onCancelledメソッドの実装
doInBackgroundでキャンセル判定処理の追加


ⅰ - 135

AsyncTaskの中断（５）
private TextView text;
……… 省略 ………
……… 省略 ………
@Override
Log.v("MyAsncTask", "params:" + params[0]);
for (int i = 0; i < 10; i++) {
try {
if(isCancelled()){
break;
}
Log.v("MyAsyncTask", "i:" + i);
……… 省略 ………

｝

@Override
protected void onCancelled() {
// インジケータを非表示にする
// TextViewに中止を設定
text.setText("中止");
}
｝


ⅰ - 136

AsyncTaskの中断（６）
確認
Cancelボタンをクリックして以下のようになることを確認
画面右上のインジケータアイコンが表示されなくなること
カウント表示のTextView部分に「中止」の文字列が設定されること
①


ⅰ - 137

AsyncTaskの中断（解答）
解答


ⅰ - 138

実習用スケルトンの非同期化（１
）
実習4

完成図

実習用スケルトンを非同期にする
AsyncTaskで画像の取得処理を行い、取得したタイミングで画面を更新
する。
画面右上にインジケータアイコンを表示する

すぐにローディング
アイコンが表示される

徐々にアイコンが
表示される


完了
ⅰ - 139

実習用スケルトンの非同期化（２
）
スケルトンプログラムの内容
別ドキュメント参照


ⅰ - 140

実習用スケルトンの非同期化（３
）
非同期によるイメージ取得処理
イメージの取得処理を非同期にする
ListSampleクラスに内部クラス「LoadImageTask」が定義されています
。以下の処理を実装します
＜手順＞
1. onPreExecuteメソッドを実装する
2. doInBackgroundメソッドを実装する
3. onProgressUpdateメソッドを実装する
4. onPostExecuteメソッドを実装する


ⅰ - 141

実習用スケルトンの非同期化（４
）
メソッドの実装
1. onPreExecuteメソッドを実装する
onPreExecuteメソッドインジケータダイアログを表示する処理
protected void onPreExecute() {
}


ⅰ - 142

実習用スケルトンの非同期化（５
）
2. doInBackgroundメソッド
引数RowModel配列からデータを1件ずつ取得し、サムネイルを設定する。
• サムネイル画像はListSample#getImageメソッドで取得する
画像の取得が完了したら更新通知する
• publicProgressメソッドの実行

protected Void doInBackground(RowModel... arg0) {
//引数からデータを1件ずつ読み込み、RowModelのDrawableを設定する
for(RowModel rowModel : arg0){
if(isCancelled()){
Log.v("ListSample", "LoadImageTask#doInBackground() canceled.");
break;
}
// サムネイルイメージ取得
rowModel.setThumbnailImage(getImage());
//更新通知
publishProgress();
}
return null;
}


ⅰ - 143

実習用スケルトンの非同期化（６
）
3. onProgressUpdateメソッド
ListViewの画像を更新する
• ArrayAdpter#notifyDataSetChangedメソッドを実行し、ListViewにデー
タの変更通知をする
protected void onProgressUpdate(Void... values) {
//データの変更通知
adpter.notifyDataSetChanged();
}

4. onPostExecuteメソッド
インジケータダイアログを非表示する
protected void onPostExecute(Void result) {
}


ⅰ - 144

実習用スケルトンの非同期化（７
）
ListSample.java
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRES
S);
adpter = new TableAdapter(this);
setListAdapter(adpter);
～略～
//非同期処理呼び出し
task = new LoadImageTask();
task.execute(models);
}


ⅰ - 145

実習用スケルトンの非同期化（７
）
確認
ローディングアイコンが表示されていること
ロード中に画面右上にインジケーターアイコンが表示されていることを
確認


ⅰ - 146

実習用スケルトンの非同期化（解
答）
解答


ⅰ - 147

実習用スケルトンの非同期化
（追加実習）
実習5
前項で作成したプログラムを最初から作成する

解答


ⅰ - 148

概要
レスポンスデータを取得する
WebAPIを使ったHTTP通信


ⅰ - 150

ユーザはブラウザなどのクライアントを使ってHTTP通信をして外部の
Androidは常時接続が可能なため外部のWebサービスと連携したアプリケ
ーションを作成することが可能
特定のWebサービスに特化したアプリケーションを作成する場合は、プ
ログラム上で通信ロジックを組み込む必要がある


ⅰ - 151

HTTP通信の仕方（１）
HTTP通信
AndroidにはHTTP通信を行うユーティリティとしてDefaultHttpClientク
ラスが用意されています。
DefaultHttpClientクラスを使ってHTTP通信を行う手順
1. DefaultHttpClientクラスを生成する。
2. リクエストメソッドの設定をする。
3. 指定したURLにリクエストを発行する。
4. レスポンスステータスをチェックする。
5. レスポンスデータから必要な情報をとりだす。


ⅰ - 152

HTTP通信の仕方（２）
1. DefaultHttpClientクラスを生成する。
//DefaultHttpClientオブジェクトの生成
DefaultHttpClient client = new DefaultHttpClient();

1. リクエストメソッドの設定をする。
引数に接続先URLを指定する。
//接続先URL
String url = “http://www.oesf.jp/”;
//GETメソッドで接続するリクエストオブジェクトの生成
HttpGet get = new HttpGet(url);


ⅰ - 153

HTTP通信の仕方（３）
3. 指定したURLにリクエストを発行する。
引数に2.で生成したリクエストオブジェクトを指定し、executeメソッドでリ
クエストを発行する。

4. レスポンスステータスをチェックする。
5. レスポンスデータから必要な情報をとりだす。
executeメソッドを実行するとResponseオブジェクトが取得できる。
取得したResponseオブジェクトからステータスコードの確認をする。
成功した場合、レスポンス情報を取り出す。
try {
//リクエストを発行してレスポンスを取得する
HttpResponse res = client.execute(get);
//ステータスコードのチェック
if(res.getStatusLine().getStatusCode() == HttpStatus.SC_OK){
//レスポンス情報を取得する
HttpEntity entity = res.getEntity();
}
} catch (Exception e) {
}


ⅰ - 154

HTTP通信の仕方（４）
サンプルコード
//接続先URL
String url = “http://www.oesf.jp/”;
//DefaultHttpClientオブジェクトの生成
DefaultHttpClient client = new DefaultHttpClient();
//GETメソッドで接続するリクエストオブジェクトの生成
HttpGet get = new HttpGet(url);
try {
//リクエストを発行してレスポンスを取得する
//ステータスコードのチェック
if(res.getStatusLine().getStatusCode() == HttpStatus.SC_OK){
//レスポンス情報を取得する
HttpEntity entity = res.getEntity();
}
} catch (Exception e) {
}


ⅰ - 155

HTTP通信をする（１）
実習1
GETメソッドでHTTP通信を行い、ステータスコードをチェックするプ
ログラムの作成

完成図

ログ

クリック

ⅰ - 156

HTTP通信をする（２）
HTTP通信を使ったアプリケーションの作成
※スケルトンプロジェクトHttpSample_skeleton01をインポートする

項目

設定値

Project name

HttpSample

Build Target

※トレーニングで指定したバージョ
ン

Application name

HttpSample

Package name

jp.oesf.httpsample

Create Activity

HttpSample


ⅰ - 157

HTTP通信をする（３）
サンプルプログラムの作成
＜手順＞
※スケルトンでは、いくつかの処理は実装済ため確認のみ行う
リソースファイルの修正（実装済）
• strings.xml
• activity_http_sample.xml
Activityの修正
• HTTP通信処理の追加
– 接続先“http://www.oesf.jp/”
– ネットワーク環境がない場合”http://[IPアドレス]:8080/oesf.html”
AndroidManifest.xmlの修正（実装済）
• インターネット通信のパーミッション追加する。


ⅰ - 158

HTTP通信をする（４）
リソースファイルを修正する（実装済）
strings.xml
name

value

connect_http

HTTP通信

activity_http_sample.xml

階層
<Linear
構造
Layout>
<Button

View

Property

LinearLayout

android:orientation="vertical”

Button

android:id="@+id/Button01”
android:layout_height="wrap_content”
android:text="@string/connect_http”
android:onClick="onClickButton”


ⅰ - 159

HTTP通信をする（５）
Activityクラスの修正
HTTP通信処理の追加する
onClickButtonメソッドの実装
DefaultHttpClientクラスを生成する。
リクエストメソッドの設定をする。
• HttpGetオブジェクトを生成する。
– 引数にurl：” http://www.oesf.jp/”を指定する
– ネットワークが環境がない場合”http://[IPアドレス]:8080/oesf.html”
指定したURLにリクエストを発行する。
レスポンスステータスをチェックする。
• ステータスが200ならログを出力する。
• 出力ログ：Log.v(TAG, "status ok");


ⅰ - 160

HTTP通信をする（６）
AndroidManifest.xmlの修正（実装済）
インターネット通信のパーミッション追加
AndroidManifest.xmlファイルにインターネット接続を許可するパーミッショ
ンを追記します。
</activity>
</application>

<uses-permission
android:name="android.permission.INTERNET">
</uses-permission>
<uses-sdk android:minSdkVersion="7" />
</manifest>


ⅰ - 161

HTTP通信をする（７）
確認
GETメソッドでHTTP通信を行い、ログに“status ok”が出力されているこ
とを確認する

クリック
ログ

ⅰ - 162

HTTP通信をする（解答）
解答
解答ドキュメント参照


ⅰ - 163

レスポンスデータを取得する（１
）
実習2
実習1で作成したプログラムに、コンテンツ表示機能を追加する

完
成
図

ク
リ
ッ
ク


ⅰ - 164

レスポンスデータを取得する（２
）
レスポンスデータを取得する
取得したレスポンスデータを文字列に変換するにはHttpEntitiyクラスと
EntityUtilsを使用する
＜手順＞
HttpResponseからHttpEntityを取得する
HttpEntityとEntityUtils#toStringメソッドにHttpEntityを引数に指定してコンテ
ンツを取得する

サンプル
String content = EntityUtils.toString(res.getEntity(), "EUC-JP");


ⅰ - 165

レスポンスデータを取得する（３
）
手順
1. レイアウトファイルの修正
2. Activityクラスにレスポンスデータ取得処理を追加
3. 取得したデータを画面に表示


ⅰ - 166

レスポンスデータを取得する（４
）
1. レイアウトファイルの修正
コンテンツデータを表示用のTextViewの追加
View

Property

TextView

android:id="@+id/text_content"
android:layout_width=“wrap_content“
android:layout_height="wrap_content“

階層構造

<Linear
Layout>
<Button


ⅰ - 167

レスポンスデータを取得する（５
）
2. Activityクラスにレスポンスデータ取得処理を追加
HttpResponseからHttpEntityを取得する
HttpEntityとEntityUtils#toStringメソッドにHttpEntityを引数に指定してコンテ
ンツを取得する
String content = EntityUtils.toString(res.getEntity(), "EUC-JP");

3. 取得したデータを画面に表示
activity_http_sample.xmlに追加したTextViewにレスポンスデータを設定する


ⅰ - 168

レスポンスデータを取得する（６
）
確認
取得したレスポンスデータがTextViewに表示されることを確認する。

クリック


ⅰ - 169

レスポンスデータを取得する（解
答）
解答


ⅰ - 170

WebAPI
WebAPIとは？
Web上にあるアプリケーションプログラムインタフェースのこと。
基本的にはURLにパラメータを付与して、XML/JSON データのやりとり
を行う。
代表的な物として、Yahoo API、 Google API、 Twitter API などがある
。

Get/Post で送信

JSON・XML で送信


ⅰ - 171

WebAPIを使の使い方
WebAPIを使った通信の仕方
WebAPIには、リクエストにパラメータを付与してアクセスします。
リクエストは、各Web APIのURL(例 http://www.oesf.jp/modules/news)に
、パラメータ
(例 ?page=rss)を追加して作成します。
レスポンスはXML/JSONなどで返されます。（上記の例ではXMLが返さ
れます）
http://www.oesf.jp/modules/news?page=rss

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Open Embedded Software Foundation</title>
<link>http://www.oesf.jp/</link>
<description></description>
<lastBuildDate>Fri, 22 Jun 2012 02:09:57 +0000</lastBuildDate>

ⅰ - 172

WebAPIパラメータ
WebAPIを使った通信の仕方
Key-ValueセットのWebAPIパラメータを作成する
?page=rss

key
value
page = rss

クエリパラメータからHttpGetオブジェクトを生成する
リクエストの送信
以降のリクエスト処理は実習２までの手順と同じ


ⅰ - 173

WebAPIを使ったHTTP通信（１）
WebAPIを使ったHTTP通信の実装方法
Key-ValueセットのWebAPIパラメータを作成する
1. コンストラクタを使ってUri.Builderオブジェクトを生成する
2. Builder#pathメソッドを使って接続先URLを設定する
3. Builder#appendQueryParameterメソッドを使用しWebAPIパラメータを設定
する
•

サンプル
// WebAPI用クエリパラメータのの作成
Builder builder = new Builder();
・・・①
builder.path(URL);
・・・②
builder.appendQueryParameter(“page”, “rss”);
・・・③


ⅰ - 174

WebAPIを使ったHTTP通信（２）
クエリパラメータからHttpGetオブジェクトを生成する
Builder#buidメソッドを使用し、パラメータに基づいた Uriオブジェクトを生
成する
Uri#decodeメソッドを使用して、パラメータ付きの接続先URL文字列を生成
する
生成したURLを引数に指定し、HttpGetオブジェクトを生成する
// 作成したクエリパラメータからHttpGetオブジェクトを生成する

サンプル = Uri.decode(builder.build().toString());
String uri
HttpGet get = new HttpGet(uri);


ⅰ - 175

WebAPIを使ったHTTP通信（３）
まとめると
// WebAPI用クエリパラメータのの作成
Builder builder = new Builder();
builder.path(URL);
builder.appendQueryParameter(“page”, “rss”);
// 作成したクエリパラメータからHttpGetオブジェクトを生成する
String uri = Uri.decode(builder.build().toString());
HttpGet get = new HttpGet(uri);

Builderクラスの主なメソッド
メソッド

機能

path

リソースを指定する。「/」以外の文字は必要に応じてエ
ンコードされる

appendQueryParameter

KeyとValueを引数にとり、それぞれエンコードしてクエ
リ文字列に追加する

build

指定されたパラメータに基づいた Uri オブジェクトを生成
するThis material is licensed under the Creative
ⅰ - 176

Androidアプリケーション応用 WebAPI開発

Androidアプリケーション応用 WebAPI開発

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Androidアプリケーション応用 WebAPI開発

Similar to Androidアプリケーション応用 WebAPI開発 (20)

More from OESF Education

More from OESF Education (7)

Recently uploaded

Recently uploaded (8)

Androidアプリケーション応用 WebAPI開発