読者です 読者をやめる 読者になる 読者になる

clock-up-blog

go-mi-tech

糞丁寧な Android MapView チュートリアル with Eclipse

Android Eclipse GoogleAPI GoogleMap MapView

概要

Android で MapView v2 を扱う。
とにかくいろいろハマったので手順をメモ。ウザいほど詳細にメモ。

巷には MapView の多彩なサンプルが煌びやかに並んでいますが
その裏には環境構築という苦行に苦しむ人々が数多くいます。
この記事により、どこかの誰かが少しでも救われれば幸いです。

とりあえず Windows 環境が前提です。他の環境でも流れが同じかどうかは知らない。

クイック備忘録

以下の情報を参照することが多いです。

(※A) パッケージ名
AndroidManifest.xml - package
(※B) SHA1 fingerprint
[Window] - [Preferences] - [Android] - [Build] - [Default debug keystore] - [SHA1 fingerprint]
(※C) API Key
Google Developers Console
- [Project] - [APIs & auth] - [Credentials] - [Public API access] - [API Key]
Google Play services プロジェクト
{ADT 付き Eclipse のフォルダ}/sdk/extras/google/google_play_services/libproject/google-play-services_lib
Google Play services サンプル
{ADT 付き Eclipse のフォルダ}/sdk/extras/google/google_play_services/samples
android-support-v4.jar
{ADT 付き Eclipse のフォルダ}/sdk/extras/android/support/v4/android-support-v4.jar


欲張らずに行こう

とにかくハマりどころが多い。
欲張らずに最小の一歩をまず進めよう。今回踏み出す一歩が成功したなら、その後の道はたぶん楽。

新しめの Android を使う

無理に古いバージョンに対応しようとするとハマる。
まずは新しめの Android で動かすことを第一目標としよう。今回は 4.4 (4.4.2) を使う。

まずはサンプルの実行を目指す

ゼロから作ろうとしない。
まずは Google Play services に付属のサンプル「maps」を正常に動かすことを第一目標としよう。

MapView のバージョンは v2 を使う

古い v1 や新しすぎる v3 を使わない。
まずは無難に v2 を動かすことを第一目標としよう。

デバッグモードで実行する

リリース用の設定は保留。
まずはデバッグ用に動かすことを第一目標としよう。

一般的なネットワーク環境で実行する

プロキシとか挟まるとめんどくさい。
一般家庭のルータ経由や直接の3G回線など、ごくごく「普通の」ネットワーク環境で実行しよう。

Step1. EclipseSDK の準備

ADT 付き Eclipse の入手

このあたりを入れる。
Android SDK | Android Developers
Windows の場合だと、
「Download the SDK
ADT Bundle for Windows
というダウンロードリンクからZIPを入手します。

入手したZIPを適当な場所に解凍すればOK。
f:id:kobake:20140225121850p:plain:w500

解凍したフォルダの中の eclipse というフォルダの中に eclipse 実行ファイルがあります。
これを直接実行すれば Eclipse が立ち上がります。
f:id:kobake:20140225122102p:plain:w500

SDK とサンプルの入手

Eclipse の [メニュー] - [Window] - [Android SDK Manager] を開く。
f:id:kobake:20140225120054p:plain:w500

Android SDK 4.4 (API 19) の中身ぜんぶチェック入れちゃう。
f:id:kobake:20140225121407p:plain:w500

Extras の中にある Google Play services もチェック。ここに MapView のサンプルが入ってる。
f:id:kobake:20140225124727p:plain:w500

ついでに、エミュレータを高速化するために「HAXM」も入れておくと良い。(※ただしここでインストールしただけでは機能しません。今回は解説しません。詳細はググりましょう。)
f:id:kobake:20140225120623p:plain:w500

Installボタンを押すとLicense確認画面に進みます。
ライセンス読んで Accept しましょう。(意外とここでの Accept で漏れがあって一部インストールが行われない例が多い)
f:id:kobake:20140225120949p:plain:w500

インストールはけっこう長いです。気長に待ちます。ネットワーク帯域使うのでテザリングとかではやらないほうが良いと思います。
f:id:kobake:20140225121234p:plain:w500


Step2. サンプルのインポートとビルド

Google Play services のインポート

まずサンプルが依存するライブラリとして Google Play services が必要なので、インポートします。(上記手順で Google Play services がインストールされている必要があります)
{ADT 付き Eclipse のフォルダ}/sdk/extras/google/google_play_services/libproject/google-play-services_lib
f:id:kobake:20140225131237p:plain:w400
f:id:kobake:20140225131243p:plain:w400
f:id:kobake:20140225142546p:plain:w600

  1. Root Directory を入力。上記 google-play-services_lib のフルパスを入れます。
  2. Refresh を押さないと一覧が出ないことがあります。押しましょう。
  3. インポートしたいプロジェクトにチェックを入れます。
  4. Copy projects into workspace にチェック入れておくのが無難です。(分からない場合)
  5. 問題なければ Finish を押してインポート実行。

インポートされました。
「Unable to resolve target 'android-9'」というエラーが出てますが気にしなくてOKです。
自動でSDKバージョンが変更され、ビルドは通ります。
f:id:kobake:20140225143111p:plain:w600

サンプルプロジェクトのインポート

MapView のサンプルをインポートします。(上記手順で Google Play services がインストールされている必要があります)
{ADT 付き Eclipse のフォルダ}/sdk/extras/google/google_play_services/samples/maps
f:id:kobake:20140225131237p:plain:w400
f:id:kobake:20140225131243p:plain:w400
f:id:kobake:20140225131814p:plain:w600

  1. Root Directory を入力。上記 maps のフルパスを入れます。
  2. Refresh を押さないと一覧が出ないことがあります。押しましょう。
  3. インポートしたいプロジェクトにチェックを入れます。(プロジェクト名が MainActivity となっているのはご愛嬌)
  4. Copy projects into workspace にチェック入れておいたほうが良いです。(分からない場合)
  5. 問題なければ Finish を押してインポート実行。

インポートされました。
「Unable to resolve target 'android-16'」というエラーが出てます。
このエラーは上述に同じく自動で修正されるので問題が無いのですが、別のエラーが発生しているためビルドに失敗しています。
f:id:kobake:20140225143555p:plain:w600

まぁいろいろ出てます。
f:id:kobake:20140225144056p:plain:w600
抜粋するとこのへんが目立つ。

error: No resource identifier found for attribute 'cameraBearing' in package 'com.example.mapdemo'
error: No resource identifier found for attribute 'cameraTargetLat' in package 'com.example.mapdemo'
error: No resource identifier found for attribute 'cameraTargetLng' in package 'com.example.mapdemo'
error: No resource identifier found for attribute 'cameraTilt' in package 'com.example.mapdemo'
error: No resource identifier found for attribute 'cameraZoom' in package 'com.example.mapdemo'

サンプルプロジェクトのライブラリ設定

プロジェクトを右クリック - [Properties] で Properties を開く。
f:id:kobake:20140225145537p:plain:w400

Properties ウィンドウで [Android] を選択し、[Library] の [Add] を押す。
f:id:kobake:20140225150057p:plain:w500

google-play-services_lib を選択。
f:id:kobake:20140225150103p:plain:w500

追加された。「×」印が付いてるやつは無視して良いですが、気持ち悪ければRemoveすると良いです。
f:id:kobake:20140225150108p:plain:w500

エラーが2個に減りました。
f:id:kobake:20140225150122p:plain:w600

The project was not built since its build path is incomplete. Cannot find the class file for android.support.v4.app.Fragment. Fix the build path then try building this project
The type android.support.v4.app.Fragment cannot be resolved. It is indirectly referenced from required .class files

v4系のエラーが出ているので v4 のライブラリを追加します。
{ADT 付き Eclipse のフォルダ}/sdk/extras/android/support/v4/android-support-v4.jar
を見つけておきます。
プロジェクト内に libs フォルダを作成し、上記 android-support-v4.jar を libs にコピーします。
f:id:kobake:20140225151030p:plain:w600

エラーが消えました。
ビルドは通りましたがまだ実行はできません。これから API Key を取得し、設定を行う必要があります。

Step3. キー登録

アプリケーションのパッケージ名を確認

アプリケーションのパッケージ名を確認しておきます。
ソース内フォルダ構成や、AndroidManifest.xml を見るとパッケージ名が分かります。
今回は「com.example.mapdemo」です。(※A)
f:id:kobake:20140225152934p:plain:w600

キーストアの把握

  • Eclipse の [メニュー] - [Window] - [Preferences] で Preferences を開く。
  • Preference ウィンドウの [Android] - [Build] を開き、[Default debug keystore] を確認。

f:id:kobake:20140225112335p:plain:w500

以下の内容をメモっておきます。

  • Debug 用 keystore のファイルパス
  • MD5 fingerprint
  • SHA1 fingerprint (※B)

SHA1 は以下のコマンドで確認する方法が知られてますが、上記ウィンドウで確認するほうが楽です。

> keytool -list -keystore c:\Users\kobake\.android\debug.keystore

API Key を取得

まずは Google Developers Console にアクセス。
Google にログインしていない場合はログインしましょう。

初めての場合は
「You don't have any projects!
Create a new project to get started.」
って言われるので、「CREATE PROJECT」ボタンでプロジェクトを作ります。
f:id:kobake:20140225113329p:plain:w500

Project name、Project ID は適当に付ければ良いです。
f:id:kobake:20140225113749p:plain:w500

できた。
f:id:kobake:20140225114510p:plain:w500

必要な API を ON にする

Google Developers Console のプロジェクトページの左側のメニューから [APIs & auth] - [APIs] を開きます。
いろんなAPIのON/OFFができるので、とりあえずMap系全部ONにしちゃいましょう。
細かい切り分けは詳しくなってからで良い。
f:id:kobake:20140225115435p:plain:w500

Geocoding API も ON にしておく。
f:id:kobake:20140226004245p:plain:w500

それっぽいものを全部ONにした状態。
f:id:kobake:20140226004144p:plain:w500

API ページで Project を登録する

Google Developers Console のプロジェクトページの左側のメニューから [APIs & auth] - [Credentials] を開き、
「Public API access」の「CREATE NEW KEY」を押す。
f:id:kobake:20140225153826p:plain:w600

キーの種類は「Android key」
f:id:kobake:20140225123347p:plain:w600

「{(※B) SHA1 fingerprint};{(※A) パッケージ名}」を入力して Create を押します。
f:id:kobake:20140225153648p:plain:w600

API Key ができました。これをメモっておきます。(※C)
f:id:kobake:20140225154050p:plain:w600

プロジェクトにキーを埋め込む

AndroidManifest.xml の com.google.android.maps.v2.API_KEY の値を
上記で取得した (※C) API Key に差し替えます。
f:id:kobake:20140225154413p:plain:w600

ひとまずこれで準備完了。

Step4. 実行

AVD 準備

AVD (Android Virtual Device) を用意します。エミュレータのことです。

Eclipse の [メニュー] - [Window] - [Android Virtual Device Manager] を開く。
f:id:kobake:20140225172308p:plain:w500

Android Virtual Device Manager の [Device Definitions] タブで、
ベースとなる端末を選択し、[Create AVD] を押します。解像度は小さいほうがたぶん軽くて良い。
f:id:kobake:20140225172312p:plain:w500

AVD の詳細を入力します。

  • Target は Google APIs ではなく Android 4.4.2 を選ぶこと。
  • CPU は Intel が良い。HAXM が導入されていればとても高速に動く。
  • メモリは 512 程度が適切。大きすぎると AVD が起動しなかったりする。

f:id:kobake:20140225172316p:plain:w300

[Android Virtual Devices] タブを開き、
作成された AVD を選択し、[Start] を押してみよう。
f:id:kobake:20140225172320p:plain:w500

起動した。
f:id:kobake:20140225172325p:plain:w300

こうなるまで待つ。
f:id:kobake:20140225172329p:plain:w300
HAXM が有効なら30秒くらいでここまで来る。
HAXM がうまく動いていない場合、ここまで来るのにだいたい10分くらいかかる。

AVD に Google Play services を入れる

今回作成した AVD には Google Play services が入っていないので、adb コマンドを使って手動でインストールを行う。

情報元:
android - This app won't run unless you update Google Play Services. (via Bazaar) - Stack Overflow

まず、以下2つのapkをダウンロードする。

入手したapkを
{ADT 付き Eclipse のフォルダ}/sdk/platform-tools
に配置する。

コマンドプロンプトにて、以下を実行。

> cd {ADT 付き Eclipse のフォルダ}/sdk/platform-tools
> adb install com.android.vending-20140218.apk
926 KB/s (6951714 bytes in 7.323s)
WARNING: linker: libdvm.so has text relocations. This is wasting memory and is a security risk. Please fix.
        pkg: /data/local/tmp/com.android.vending-20140218.apk
Success

> adb install com.google.android.gms-20140218.apk
916 KB/s (11267154 bytes in 12.003s)
WARNING: linker: libdvm.so has text relocations. This is wasting memory and is a security risk. Please fix.
        pkg: /data/local/tmp/com.google.android.gms-20140218.apk
Success

WARNINGはとりあえず気にしないでおく。
それぞれ「Success」という表示が確認できればOK。

これでやっとアプリケーションを実行する準備ができた。

AVD 上でのアプリ実行

Eclipse でプロジェクトを選択し、[Run As] ボタンを押す。
f:id:kobake:20140225174016p:plain:w400

初回起動だと Run As ウィンドウが出ます。
[Android Application] を選択しましょう。
f:id:kobake:20140225174132p:plain:w200

起動端末を選択するウィンドウが出ます。実機が接続されていれば実機も選択できます。
今回はエミュレータを選択してOKを押しましょう。
f:id:kobake:20140225175554p:plain:w500

起動の様子は Console を眺めておくとなんとなく分かります。
f:id:kobake:20140225175615p:plain

起動しました。[Basic Map] をタップ(クリック)してみます。
f:id:kobake:20140225175728p:plain:w300

地図が表示されました\(^o^)/
f:id:kobake:20140225175648p:plain:w300

実機でのアプリ実行

端末の選択画面(Android Device Chooser) で実機のほうを選択すれば実機側でも実行できます。
f:id:kobake:20140225180126p:plain:w500

こんな感じ。
f:id:kobake:20140225180024j:plain:w400
f:id:kobake:20140225180033j:plain:w400

Step5. 追加情報

困ったとき

以下を確認しましょう。

  • Android SDK Manager で Google Play services はインストールしましたか?
  • maps プロジェクトの依存ライブラリとして Google Play services は追加しましたか?
  • maps プロジェクトの libs フォルダに android-support-v4.jar はコピーしましたか?
  • Google Developers ConsoleAPI Key は取得しましたか?
  • Google Developers Console で Map 系 API の STATUS を ON にしましたか?
  • AndroidManifest.xmlAPI Key は記載しましたか?
  • AVD の Target は Android 4.4.2 になっていますか?
  • AVD に com.google.android.gms-20140218.apk, com.android.vending-20140218.apk をインストールしましたか?
  • ネットワークは繋がっていますか?


最後のおまじない

  • Eclipse の [Project] - [Clean] メニュー
  • Eclipse を再起動
  • AVD を作り直す

さいごに

ここまでたどり着くのに様々なサイトの情報を渡り歩き、優に30時間は費やしました。ただ、今回まとめた情報も1年後2年後には役に立たなくなるでしょう。

情報の代謝が加速していることを実感します。
常に新しい道しるべを残しましょう。

});