藤田です。
今回は地図アプリの作成Android編その1です。
開発環境の作成についてはトモキさんのエントリAndroid 開発環境を作るを参照してください。
新規プロジェクトの作成
まずは新規プロジェクトの作成です。
上記の環境が揃っていれば、新規プロジェクトウィザードでAndroid プロジェクトが選択できます。
プロジェクト名、アプリケーション名、パッケージ名を入力します。
ビルドターゲットは作成するアプリケーションがどのOSバージョンで動作するかを指定します。今回は1.6以上で動作するようにします。
GoolgeMapAPIを使用するので、Goolge APIs(プラットホーム1.6 APIレベル4)を選択します。
Create Activityにはチェックを入れ、作成するアクティビティ名を入力します。
Min SDK Versionはビルドターゲットと同じ4にしておきましょう。
Android Maps API keyの作成
Google MapをAndroidで作成するにはAPI keyが必要となります。
API keyの取得にはGoogleアカウントが必要です。
Googleアカウントを持っていたらSign Up for the Android Maps APIをひらきましょう。
ここで、証明書のMD5 fingerprintが必要になります。
開発用証明書のMD5 fingerprintはWindowsの場合以下のコマンドで確認できます。
keytool -list -keystore "%USERPROFILE%\.android\debug.keystore"keytoolはJDKに含まれるコマンドです。実行できない場合はPATHを確認しましょう。
表示されたMD5 fingerprintを先ほどのWebページに入力し、I have read and agree with～のチェックボックスにチェックを入れて、Generate API Keyボタンを押します。
取得したAPI keyは無くさないようにテキストファイル等に保存しておきましょう。また、あとで文字列リソースとして使うので/res/values/strings.xmlに追加しておきます。
[cce_xml]
<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
…
<string name=”apiKey”>取得したAPI Key</string>
</resources>
[/cce_xml]
MapActivityの準備
Google Mapを表示するActivityはMapActivityです。
まずは最初に作成されたActivityのコードを変更します。
extends Activityをextends MapActivityにします。
足りないメソッド(isRouteDisplayed)が出ますので、とりあえずスタブを作成しておきます。
[cce_java]package jp.co.spiritek.dev.mapapp;
import android.os.Bundle;
import com.google.android.maps.MapActivity;
public class MapSampleActivity 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()
{
// TODO 自動生成されたメソッド・スタブ
return false;
}
}[/cce_java]
次にレイアウトファイルを修正します。 /res/layout/main.xmlにあります。
[cce_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”
>
<com.google.android.maps.MapView
android:id=”@+id/mapview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:enabled=”true”
android:clickable=”true”
android:apiKey=”@string/apiKey”
/>
</LinearLayout>
[/cce_xml]
ポイントは
- Viewタグをcom.google.android.maps.MapViewに変更すること
- android:apiKey属性を追加すること
です。
最後にAndroidManifest.xmlを修正します。
MapViewクラスが地図データをインターネットから取得するので uses-permissionにandroid.permission.INTERNET を追加します。
AndroidManifest.xmlをEclipseで開き、許可タブ内の追加ボタンを押します。
Uses Permissionを選択してOKを押します。
ドロップダウンリストからAndroid.permission.INTERNETを選択し、CTRL+Sを押して保存します。
次に、GoogleMapsAPIライブラリを使用するので uses-libraryにcom.google.android.mapsを追加します。
アプリケーションタブ内のApplication Nodesにある追加ボタンを押します。
Create a new element at the top level, in Application.を選択し、Uses LibraryをクリックしてからOKを押します。
Attributes for Uses Libraryのドロップダウンリストからcom.google.android.mapsを選択し、CTRL+Sを押して保存します。
現時点で、AndroidManifest.xmlは以下のようになります。
[cce_xml]<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”jp.co.spiritek.dev.mapapp”
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=”.MapSampleActivity”
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>
[/cce_xml]
ここまでで、地図表示を行う最低限の設定はできました。
実行＞デバッグ＞Android アプリケーション
で実際に実行してみましょう。
アメリカ合衆国を中心とした地図が表示されると思います。
もし、地図が表示されない場合はapiKeyが間違っている可能性が高いです。
debug.keystoreが複数あったりすることも・・・（実話ですｗ）
さて、ここから地図の表示位置、範囲を変更することにします。
[cce_java]
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// マップビューを取得
MapView mapView = (MapView)findViewById(R.id.mapview);
// マップをコントロールするためのコントローラを取得
MapController controller = mapView.getController();
// 座標の中心点を設定
GeoPoint point = new GeoPoint((int)(35.658704 * 1E6), (int)(139.745408 * 1E6));
controller.setCenter(point);
// ZoomLevel(1～21)を設定
controller.setZoom(17);
}
[/cce_java]
実行した結果は以下のようになります。
GoogleMap APIで座標指定はGeoPointクラスによって行われます。
このクラスでは緯度・経度は整数で表されます。値は(実際の緯度・経度)×1,000,000で求められます。
今回はsetCenterで中心座標を設定しました。この場合、地図表示は直ちに指定された座標に移ります。
iPhone版でいうところのanimated:NOですね。
animated:YESに相当するのはMapController#animateTo(GeoPoint point)になります。
MapController#setZoom(int zoomLevel)で渡すzoomLevelは値が小さいほど縮小（表示範囲が広く）、値が大きくなると拡大（表示範囲が狭く）なります。
前回のiPhone版で指定した
[cce_objc]
MKCoordinateSpan span = MKCoordinateSpanMake(0.005f, 0.005f);
[/cce_objc]
に相当するのはzoomLevel=17～18くらいになります。
次回予告
ここまでで前回のiPhone版で解説した範囲とほぼ同じものが出来ました。
次回は
- 自分の位置を表示する
- 地図の表示方法を変える
を解説したいと思います。
