25
日本Androidの会 大分支部 第13回Android勉強会 Page1 2012/3/29 Googleマップ と GPS機能 を試してみた。 2012年 3月31日 つるつる(都留 栄一)

Google mapとgps機能を使ってみた。

Embed Size (px)

Citation preview

Page 1: Google mapとgps機能を使ってみた。

日本Androidの会 大分支部 第13回Android勉強会 Page1

2012/3/29

Googleマップ と GPS機能 を試してみた。

2012年 3月31日

つるつる(都留 栄一)

Page 2: Google mapとgps機能を使ってみた。

2012/3/29

Page2日本Androidの会 大分支部 第13回Android勉強会

はじめに。• 昨年の東日本大震災に伴う原発事故を契機に、

原発からの距離を測定するアプリを作ってみたい。。。それにはGoogleマップやGPS機能の事を調べないけんね。と思い調べて作ってみました。

• 今回のセッションの目標は、

調べた内容を整理して、次に同じ機能を実装する際の自分の為や、大分支部の方でGoogleマップやGPS機能を使ってみたいけど・・・と思ってる方へ、チャレンジする切っ掛け作りになれば幸いです。

Page 3: Google mapとgps機能を使ってみた。

2012/3/29

Page3日本Androidの会 大分支部 第13回Android勉強会

こんな感じのアプリを公開中です。

先日、ketchappってサイトで、アプリを紹介して頂いた。様です。。。(知らない間に。。。)

http://ketchapp.jp/app/16854.html

アプリ名:「原発からの距離は?」

GPS機能とGoogleマップを組み合わせて、原発からの距離を測定するアプリです。

Page 4: Google mapとgps機能を使ってみた。

2012/3/29

Page4日本Androidの会 大分支部 第13回Android勉強会

今日のセッションでは• Googleマップを使った簡単なサンプル作りを通

して、作成の過程や、ハマッタ点を説明します。

GPS機能のサンプルまで入れると長くなるので、次回の勉強会で説明する事にします。

御了承ください。。。

Page 5: Google mapとgps機能を使ってみた。

2012/3/29

Page5日本Androidの会 大分支部 第13回Android勉強会

Googleマップって。

-Googleマップは、検索エンジンのGoogleがインターネットを通して提供しているローカル(地域)検索サービス。

-2012年初頭より1日のAPI使用回数が25,000回以上(Styled Mapsの場合は1日2,500回以上)に及ぶ場合有料化されることになった。住所→緯度・経度への変換を行う「Geocoder」については、元々1日あたりの利用回数制限(1日2,500回以内)が設けられている。

だそうです。。。出典:ウィキペディア(Googleマップ)より

Page 6: Google mapとgps機能を使ってみた。

2012/3/29

Page6日本Androidの会 大分支部 第13回Android勉強会

Googleマップ表示アプリを作る。

• 開発環境以外に、事前に必要な物

-API Key(GoogleマップAPIを使うために必要) 以下のURLから取得します。

http://code.google.com/intl/ja/android/maps-api-signup.html

※その際、開発環境の証明書(debug.keysoreファイル)のフィンガープリント(MD5)が必要になります。自分の開発環境のMD5を調べてください。 詳細は次のページから。。。

■開発環境の証明書ファイルのパス。

Windows XP = C:¥Documents and Settings¥%USERNAME%¥.android¥debug.keystoreWindows Vista = C:¥Users¥%USERNAME%¥.android¥debug.keystoreMac/Linux = ~/.android/debug.keystore

※開発環境(エミュレータ上)と公開用のAPKファイルでは、フィンガープリントが異なるので、公開時はもう一つAPIKeyが必要です。(つるは公開後、地図が表示されず焦りました。Orz。。。。)

Page 7: Google mapとgps機能を使ってみた。

2012/3/29

Page7日本Androidの会 大分支部 第13回Android勉強会

開発環境の証明書を調べる。Dosプロンプトで、コマンド打つと・・・

>Keytool.exe –list –keystore ./debug.keystore

フィンガープリントが表示されます。(後で使うので結果をコピペして取っておきます。)

パスワードはEnter押下で無視します。

Page 8: Google mapとgps機能を使ってみた。

2012/3/29

Page8日本Androidの会 大分支部 第13回Android勉強会

では、APIKeyを取得しましょう。

先ほどの結果を、「コピペ」して画面下の

「Generate API Key」ボタンを押下すると・・・。

http://code.google.com/intl/ja/android/maps-api-signup.html へアクセス。

Page 9: Google mapとgps機能を使ってみた。

2012/3/29

Page9日本Androidの会 大分支部 第13回Android勉強会

APIKeyが取得できた!

APIKeyの文字列が表示されてます。

Android開発環境の画面構成XMLファイル内で使う雛形まで用意してくれます。

後で使うので、コピペして取っておいてください。

一部、文字化けしてますが、気にしない気にしない・・・。

Page 10: Google mapとgps機能を使ってみた。

2012/3/29

Page10日本Androidの会 大分支部 第13回Android勉強会

じゃあ、サンプルを作ってみよう。通常のプログラム作成と同じ様に、Eclipseにて新規にプ

ロジェクトを作ります。

• Project name : HelloGoogleMaps• Build Target : Google APIs (1.6)• Application name : HelloGoogleMaps• Package name : osc11ot.android.hellogooglemaps• Create Activity : HelloGoogleMapsActivity

「Build Target」にGoogle APIsを選択します。

Page 11: Google mapとgps機能を使ってみた。

2012/3/29

Page11日本Androidの会 大分支部 第13回Android勉強会

MapActivityを継承する。自動生成された雛形「Activity 」継承から、

『MapActivity』継承に変更する。

継承変更後、エディタに怒れますが、「Ctrl+Shift+o」する。

まだ怒られてるが、修正案の中から、メソッドの追加を選ぶ。

Page 12: Google mapとgps機能を使ってみた。

2012/3/29

Page12日本Androidの会 大分支部 第13回Android勉強会

メソッドが追加され、雛形が出来た。

Page 13: Google mapとgps機能を使ってみた。

2012/3/29

Page13日本Androidの会 大分支部 第13回Android勉強会

レイアウトにMapViewを追加する。画面構成のレイアウトファイルに、MapViewを追加します。

APIKey取得時にコピーしていた、アレをそのままコピペです。

android:id=“@+id/map”のみ追加。

android:apiKey=“赤線部分”に今回取得したAPIKeyが書かれています。(エミュレータ環境用)

最終的にマーケット等で公開する場合は、

公開用の証明書でAPIKeyを取得した物と置き換えて下さい。

Page 14: Google mapとgps機能を使ってみた。

2012/3/29

Page14日本Androidの会 大分支部 第13回Android勉強会

マニフェストファイルに追加する。android:apiKey=“hoge・・・・fuga”に今回取得したAPIKeyが書かれています。(エミュレータ環境用)

最終的にマーケット等で公開する場合は、

「GoogleMapsライブラリの使用宣言」と「インターネット接続パーミッション追加」を行います。

Page 15: Google mapとgps機能を使ってみた。

2012/3/29

Page15日本Androidの会 大分支部 第13回Android勉強会

Javaでコードを書いてませんが、とりあえず、地図が表示されるアプリが出来ました。。。

地図が表示されてるダケでつまらないです。

雛形を改造してメソッド等を叩いてみましょう。

Page 16: Google mapとgps機能を使ってみた。

2012/3/29

Page16日本Androidの会 大分支部 第13回Android勉強会

地図のドラッグ・ピンチ操作を有効に。

mapview.setClickable(true) //ドラッグやピンチ操作有効

mapview.setBuiltInZoomControls(true) //ズーム関連ボタン表示

MapViewを叩いてみる。

Page 17: Google mapとgps機能を使ってみた。

2012/3/29

Page17日本Androidの会 大分支部 第13回Android勉強会

縮尺変更と、初期表示位置を指定MapControllerを経由して、MapViewを操作する。

mapctrl.setZoom(縮尺度) //地図の縮尺変更

mapctrl.setCenter(緯度,経度) //地図の初期表示場所指定

よくある、緯度経度の値を1,000,000倍(1E6)した値で扱う様です。

小数点を扱いたくないから???

Page 18: Google mapとgps機能を使ってみた。

2012/3/29

Page18日本Androidの会 大分支部 第13回Android勉強会

見慣れた大分市が出てきました。ドラッグ操作や地図の拡大・縮小が出来るようになりました。

だだし、エミュレータだと地図の拡大・縮小に

「ピンチ操作」は出来ないみたいです。。。。

本田さんにmapvew.displayZoomControls(true);

を教わりましたが、変化せず。。。都留が何か間違った?

かな???

Page 19: Google mapとgps機能を使ってみた。

2012/3/29

Page19日本Androidの会 大分支部 第13回Android勉強会

地図上に画像を重ねてみよう。地図上に画像を配置する場合、

ベースの地図に直接書き込む訳でなく、画像をレイヤーを元地図の上に重ねる事で実現する様です。

以下のurlで詳しくやり方が示されてますので、作る場合の参考にしてください。

http://www.adamrocker.com/blog/231/android1r1_overlay_on_map.html

では、実際に画像を地図上に重ねてみましょう。。。

Page 20: Google mapとgps機能を使ってみた。

2012/3/29

Page20日本Androidの会 大分支部 第13回Android勉強会

画像を準備して保存します。

プロジェクトフォルダ内のresフォルダ内に

適当なフォルダ(drawable)を作り、

そこに“pin.png”ファイルを保存しました。

pin.png

Page 21: Google mapとgps機能を使ってみた。

2012/3/29

Page21日本Androidの会 大分支部 第13回Android勉強会

地図に重ねがきするクラスを用意。Com.google.android.maps.Overlayクラスを継承した、MyOverlayクラスを用意

Page 22: Google mapとgps機能を使ってみた。

2012/3/29

Page22日本Androidの会 大分支部 第13回Android勉強会

地図にPin画像を重ねがき。

Pin画像オブジェクトを、先ほど作ったMyOverlayクラスへ、緯度経度情報と一緒に渡し、マップビューのレイヤーに追加(add)

Page 23: Google mapとgps機能を使ってみた。

2012/3/29

Page23日本Androidの会 大分支部 第13回Android勉強会

コンパルホールを挿すピンが出た!

いくつもピンが挿したかったら、

レイヤーにピン画像と緯度経度を渡して、

追加(add)して重ねていけば、

じゃんじゃん表示できます。

Page 24: Google mapとgps機能を使ってみた。

2012/3/29

Page24日本Androidの会 大分支部 第13回Android勉強会

とりあえず、こんな流れです。

• 地図を利用したアプリ作成時、おおまかな流れを思い出して頂ければ幸いです。

• GPS機能については、次回の勉強会でスライド準備します(たぶん) 。位置情報をGPSで取得し、Googleマップが組み合わされば、発想次第で色々と出来るかな??

Page 25: Google mapとgps機能を使ってみた。

2012/3/29

Page25日本Androidの会 大分支部 第13回Android勉強会

おしまい

ご静聴、ありがとうございました。