Androidアプリ開発入門 

久しぶりの更新になります!
@ojimacです。

先日社内でAndroid勉強会をしたので、復習がてら、内容をまとめておきます。
概要としては、Android上でプログラミングする上で最低点必要な前提知識と、
HelloWorld、そしてYoutubeのAPIを使った、Youtube内のコンテンツを検索して
リスト表示するアプリを作ってみます。

0. 環境のセットアップ

※ 今回はMac上での環境セットアップを前提にしています。
詳細はGoogle等で調べると出てくるので省きます。
必要なものは、

1. Eclipse IDE for Java Developers( Version: Helios Service Release 1 )
→ 言わずと知れたIDE。

2. Android SDK
→ Androidアプリを作るための開発キット

3. Android SDK and AVD Manager
→ Androidのエミュレータへのアプリ転送までをEclipseと連携してサポートしてくれます。Eclipseのプラグインとして提供されています。

の3つです。

1. Androidアプリの構成要素について

Androidアプリを構成する要素としては、大きく4つ。
1. アクティビティ
→ 画面やイベント等、ユーザーとのやり取り部分を担当

2. サービス
→ バックグラウンドで走る処理を担当

3. コンテンツプロバイダ
→ アプリのデータを連携するしくみ

4. インテント
→ アクティビティ同士をつなぐ役割を担当

2. HelloWorldから、インテントまで

ここからHelloWorld、そしてインテントを使ってYoutube検索アプリを作っていきましょう!

3. 仮想マシンの設定


○で囲ったアイコンをクリックします。
すると、

のような画面が出現するので、「新規」ボタンを押します。

ここでは以下のように設定してみました。

最近だと2.3を基準にすると良いとのことでした。
2.3以下のバージョンに対応するには、下位互換性のあるAPIのみ使うようにしなければいけないです。

4. プロジェクトの作成

ここまでできたら、いよいよプロジェクトの作成です。
プロジェクトとは…

Eclipseの「メニューバー」 → 「ファイル」 → 「新規」 → 「Androidプロジェクト」と選んでいきます。すると、

のような画面が出てくるので、

のように設定してみました。
仮想マシンとプロジェクトでAndroidのバージョンが異なると、アプリが動かないことがある為、
「ビルド・ターゲット」のチェックボックスは、さっき作った仮想マシンのバージョン(2.3.3)と併せておきます。

パッケージ名はドメイン名を逆にした名前をつけることでユニークにします。
今回はcom.spark_lab.ojimac.youtube
のようにしてみました。
※ハイフンはパッケージ名に使えないので、アンダースコアを使います。

プロジェクトの作成が完了すると、

のように最低限必要なファイルが作成されます。

今回修正していくファイルは、
main.java → 初期画面のActivity
AndroidManifest.xml → アプリにどんな機能を許可するかという設定をするファイル
main.xml → 初期画面にどんな部品(テキストボックスとかボタンとか)を配置するかを書くファイル
strings.xml → ボタンなどの部品に表示する文字列を定義しておくファイル。main.xmlに直接書くこともできるようなのですが、多言語化対応等をする場合を考慮して切り分けておくのが一般的なようです。

ひとまず初期の状態で、

○を押すと、「次を実行」ウィンドウが出てくるので、「Androidアプリケーション」を選択して「OK」を押します。すると、コンパイルが走り、エミュレータが立ち上がります。
しばらくすると、

ような画面が出現し、「Hello World, main!」と文字列を表示するだけのアプリが立ち上がります。

※ちなみにMacへの実機転送も見せてもらったのですが、専用ケーブルで開発マシンと実機を接続するとエミュレータの代わりに自動的に実機へアプリの
転送が行われます。エミュレータの起動が遅いこともあり、開発中は、コードを書く←→エミュレータ or 実機で確認を繰り返すことを想定すると実機があるのとないのとでは随分開発スピードに差が出そうだなと感じました。

ここからyoutubeのAPIを使って、検索条件にマッチする動画を取得する
アプリを作成していきます。

5. AndroidManifest.xmlの修正

今回のアプリは、youtubeのAPIへ接続するためインターネット接続が必須になります。
プロジェクト作成時はインターネット接続をしない設定になっている為、AndroidManifest.xmlを修正します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.spark_lab.ojimac.youtube"
      android:versionCode="1"
      android:versionName="1.0">
 
 
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".main"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
 
    </application>
    <uses-permission android:name="android.permission.INTERNET" /> ← この1行を追加
</manifest>

6. main.xmlの修正

初期表示画面に検索クエリ入力フィールド、検索ボタンを追加します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent" ← 画面いっぱいの幅にする
    android:layout_height="fill_parent" ← 画面いっぱいの高さにする
    >
<EditText
	android:id="@+id/keyword"
	android:layout_width="fill_parent" ← 画面いっぱいの幅にする
	android:layout_height="wrap_content" ← 必要なだけの高さ
	android:singleLine="true"
	/>
<Button
	android:id="@+id/show"
	android:layout_width="wrap_content" ← 必要なだけの高さ
	android:layout_height="wrap_content" ← 必要なだけの高さ
	android:text="@string/result"
/>
</LinearLayout>

7. strings.xmlの修正

ボタンのラベル名を指定します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, Youtube!</string>
    <string name="app_name">YouTube</string>
    <string name="result">検索</string>
</resources>

ここで一旦ビルドしてみましょう。すると、

のようにテキストボックス + 検索ボタンがある画面になりました!

8. main.javaの修正と検索結果ページの作成

- main.java
検索ボタンを押した場合にIntentを使って検索ページへ入力内容を送信しています。

package com.spark_lab.android;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
 
public class Youtube extends Activity {
 
	private EditText keyword;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		keyword = (EditText)findViewById(R.id.keyword);
		Button button = (Button)findViewById(R.id.show);
 
		button.setOnClickListener(new View.OnClickListener() { // 検索ボタンをおした時に発生するイベントのリスナー
			@Override
			public void onClick(View arg0) { // ボタン押下時の処理
				Intent intent = new Intent(Youtube.this, Result.class);
				intent.putExtra("KEYWORD", keyword.getText().toString());
				startActivityForResult(intent, 0);
			}
		});
    }
}

- 検索結果ページを作ります

まず、

の「com.spark_lab.ojimac.youtube」にカーソルを当てて右クリックをして、「新規」→「クラス」を選び、

のようにActivityクラスを継承したクラスを作成します。

つぎに、res/layout 以下にresult.xmlというファイルを作り、

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
     <ListView
    	android:id="@+id/result"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    />
</LinearLayout>

のようなリスト形式のビューを作ります。

次に、ロジック部分を作っていきます。
さっき作った result.java を

package com.spark_lab.ojimac.youtube;
 
import java.io.IOException;
import java.net.URLEncoder;
 
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
 
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ArrayAdapter;
import android.widget.ListView;
 
public class Result extends Activity {
	@Override
	public void onCreate(Bundle show) {
		super.onCreate(show);
		setContentView(R.layout.result);
		Bundle extras = getIntent().getExtras();
 
		if(extras != null) {
			try {
				String url = "http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc";
				url += "&q=" + URLEncoder.encode(extras.getString("KEYWORD"), "UTF-8");
				Log.v("result", url);
				HttpUriRequest httpGet = new HttpGet(url);
	        	DefaultHttpClient defaultHttpClient = new DefaultHttpClient();
	        	HttpResponse httpResponse = defaultHttpClient.execute(httpGet);
	        	if(httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
 
	        		ListView listView = (ListView)findViewById(R.id.result);
	        		ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1);
	        		try {
	        			JSONObject json = new JSONObject(EntityUtils.toString(httpResponse.getEntity()));
	        			JSONArray items = json.getJSONObject("data").getJSONArray("items");
	        			for(int i = 0; i < items.length(); ++i) {
	        				adapter.add(items.getJSONObject(i).getString("title"));
	        			}
 
	        			listView.setAdapter(adapter);
 
	        		} catch (JSONException e) {
 
					}
	        	}
 
	        } catch(IOException e) {
 
	        }
		}
	}
}

のように修正していきます。

ビルドしてみましょう。テキストエリアに「tennis」と入力して検索ボタンを押してみます。

すると、

のように「tennis」に関連したリストが出力されていきます。

ここからは、検索オプションを付けたり、実際リストをクリックするとyoutubeの動画が再生されたりといろいろ拡張のしがいはありそうですが、今回はいったんここで完成としておきましょう。

まだ細かい部分は分からないところもありますが、とっかかりができたので自分で学習が進められそうです。

otake84君、ありがとう!

参考書

Google Androidプログラミング入門
江川 崇 竹端 進 山田 暁通 麻野 耕一 山岡 敏夫 藤井 大助 藤田 泰介 佐野 徹郎
アスキー・メディアワークス
売り上げランキング: 4689

参考になるURL

- 公式チュートリアル
- 公式リファレンス

Comments are closed.