もっと！ Android

【ミッション： Android 開発本を攻略しよう】

前回のあらすじ： Android の本を買った。

今日は第 4 章を攻略するよ。完成するとこんなアプリになるらしい。

いきなり超本格的な見栄えだ。たぶん作り終えたら達成感もひとしおだと思う。

※ この記事は、本の内容をただなぞっているだけなので、解説ではなく単なるお勉強の実況中継だよ。ここを読んでも再現はできないから、やってみたい人は本を買おう。

---

前準備として、Google Map を利用するための API キーをゲットする。

コマンドプロンプトを開き、

keytool -list -keystore "%USERPRoFILE%\.android\debug.keystore"

と入力。

続いてキーストアのパスワードの入力を求められるが、これは無視。

すると、証明書のフィンガープリントが得られるので、この値をコピーしておく。

次に、Android Maps API Key を取得するために、Sign Up for the Android Maps API にアクセスし、先ほどのフィンガープリントを入力する。以下のような画面が表示された。

---

【プロジェクトの作成】

はじめに、Android Maps API を利用するため、マニフェストファイルを書き換える。

XML を直接編集してもよいが、Eclipse には GUI ベースで設定を変更する事もできる。

AndroidManifest.xml のソースは以下の通り。

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.       package="com.tercel_tech.mapviewsample"  
4.       android:versionCode="1"  
5.       android:versionName="1.0">  
6.     <uses-sdk android:minSdkVersion="4" />  
7.     <uses-permission android:name="android.permission.INTERNET"></uses-permission>  
8.   
9.     <application android:icon="@drawable/icon" android:label="@string/app_name">  
10.         <activity android:name=".MapViewSample"  
11.                   android:label="@string/app_name">  
12.             <intent-filter>  
13.                 <action android:name="android.intent.action.MAIN" />  
14.                 <category android:name="android.intent.category.LAUNCHER" />  
15.             </intent-filter>  
16.         </activity>  
17.         <uses-library android:name="com.google.android.maps"></uses-library>  
18.   
19.     </application>  
20. </manifest>  

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.tercel_tech.mapviewsample"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" />
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MapViewSample"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <uses-library android:name="com.google.android.maps"></uses-library>

    </application>
</manifest>

そして、res/layout/main.xml を開き、以下のように修正（まぁさっきのサイトからコピペしただけなのだが）。

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7. <com.google.android.maps.MapView  
8.     android:layout_width="fill_parent"  
9.     android:layout_height="fill_parent"  
10.     android:apiKey="xxxxxxxxxx"  
11.     />  
12. </LinearLayout>  

<?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"
    >
<com.google.android.maps.MapView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:apiKey="xxxxxxxxxx"
    />
</LinearLayout>

これでよし。ちなみに xxxxxxxxxx の箇所は取得した API キーである。念のため。

最後に、MapViewSample.java の継承元を Activity から MapActivity クラスに変更し、必要なメソッドをオーバライド。

view plainprint?

1. package com.tercel_tech.mapviewsample;  
2.   
3. import android.os.Bundle;  
4.   
5. import com.google.android.maps.MapActivity;  
6.   
7. public class MapViewSample extends MapActivity {  
8.     /** Called when the activity is first created. */  
9.     @Override  
10.     public void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.main);  
13.     }  
14.   
15.     @Override  
16.     protected boolean isRouteDisplayed() {  
17.         // ルート情報を表示するかどうか  
18.         // 今回はしないのでfalse  
19.         return false;  
20.     }  
21. }  

package com.tercel_tech.mapviewsample;

import android.os.Bundle;

import com.google.android.maps.MapActivity;

public class MapViewSample extends MapActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    @Override
    protected boolean isRouteDisplayed() {
        // ルート情報を表示するかどうか
        // 今回はしないのでfalse
        return false;
    }
}

ここまでやったら一旦コンパイル。

Google Map が表示された！やったね！！

---

【ブラッシュアップ！】

どうせ、やっている事は本に書いてある事そのままなので、ここからは途中経過のスクリーンショットを中心にお送りする。

マップの移動・拡大縮小操作が可能になった

↓

タップした場所に●が表示されるようになった

↓

次は、タップした場所の地名が画面上に表示されるように拡張されるはずだった。だが……。

↓

あれ…？ 画面上部に TextView は見えるのに何も表示されない。

なにこれ。地名出てないし。

あわてて本を読み返すと、こんな事が書いてあった。

なお、少なくとも本書を執筆した2010年8月の時点では、Androidエミュレータ上でGeocoderの機能は利用できませんでしたので、このサンプルプログラムを試す際には実機で試してください。

ぼくは愕然とした。Android の実機なんて持ってないし。ダメじゃん。

モチベーションだだ下がりのまま続行。

検索Boxを追加。これもGeocoderを使うので、実機じゃないと無意味。

---

【仕上げ】

最後に、Free Weather API を利用して、タップした場所の天気を表示する機能をくっつける。

これはどうやら、HTTP リクエストを投げると、（任意の地点の）天気情報を格納した XML ファイルが返ってくるという仕組みらしい。

XML の解析には、Android SDK が標準でサポートしているパーサのうち、最も軽量で高速な XmlPullParser を利用した。

本によると、DOM などの一般的なパーサはメモリ使用量等の観点からモバイル端末に向いているとは言い難いのだそうな。

こうして、なんとかでき上がったものがこちら。

深谷のあたりは9℃らしい。

タップするたびに、その位置の天気を自動取得してくれる。

エミュレータ上で動作させるだけでもかなり感動した。

---

今回、本の内容をなぞってみて、なんとなく開発の流れが解ったような気がする。

実機が無いせいで試せない機能もいくつかあり、遺憾の極みではあるが、それでもマッシュアップの醍醐味を体感できたのでよし。

次のマルチタッチイベントの検出（第 6 章）も、なんか実機が無いとダメっぽいのでそれは飛ばし、一気に OpenGL ES へと学習のコマを進めたいと思う。