boscoworks.log

boscoworksのブログ的な

GPSを使ったAndroidアプリを作ってみる

最近Androidは旬だし、実際にHello Worldしてみたら、そこまではサクっと出来てしまったので、なんか1個サンプルでも作っておくかーということで、GPSを使ったアプリを作ってみます。

AndroidアプリでHello World出来る程度の知識が必要です(要するにぼくと同じくらいの前提知識)



参考にしているのはこれ→http://android.siprop.org/index.php?%CA%D9%B6%AF%B2%F1%2FGPS
というかこれのマルパクリ。

  • 1. 新規プロジェクトの作成

この辺はHello worldするときとおんなじ。Android2.2用のSDKが出てたからためしに使ってみたけど、何かエラー出てたから、ビビって2.1系にしたよ。

http://gyazo.com/69c73aefb582263ce3b5488c61d84609.png

Android関係ないけど、Google API使うのでキーをもらってきます。
http://code.google.com/intl/ja/android/maps-api-signup.html

  • 3. 証明書のフィンガープリントを取得する

"Program Files\Java\jdk1.6.0_20\bin\keytool.exe" -list -keystore C:\Users\scarletmoon\.android\debug.keystore

http://gyazo.com/f9d774233e82346e0e9bf7c0d9155cd2.png

MD5をコピペしてGenerateするとキーが発行されます。

  • 4. ライブラリ追加

Google MapsのMapViewを使うので、AndroidManifest.xmlにライブラリを追加

http://gyazo.com/4f51ed44aa93630c0da80fc0fca9d19d.png

インターネット、GPSパーミッションをAndroidManifest.xmlに追加

http://gyazo.com/2dd6d952a82f0e1892993b059bad5d42.png

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="net.boscoworks.dev.hellogps"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".HelloGpsActivity"
                  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>




<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"></uses-permission>





</manifest>
  • 6. レイアウトの決定

Google Maps API keyをセットします。
res/layout/main.xml

http://gyazo.com/14855ea3c7b4a12ba9b94b7b8d761d31.png

<?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"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />

<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="<Google Maps API key>"
    />

</LinearLayout>
  • 7.Activityクラスの実装
package net.boscoworks.dev.hellogps;

/**
 * インポートするクラスを定義
 *
 */
import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.widget.ZoomControls;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.view.Gravity;
import android.view.ViewGroup;
import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;

/**
 * GPSテストアプリケーション
 *
 * @author boscoworks
 */
public class HelloGpsActivity extends MapActivity implements LocationListener {
	/**
	 * マップコントローラーフィールドを追加
	 *
	 * @var obj
	 */
	MapController map_controller;

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

        // 現在位置が変化に、メソッドが呼び出されよう登録する
        LocationManager location_manager = (LocationManager)getSystemService(Context.LOCATION_SERVICE);
        location_manager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, this);

        // マップコントローラーの取得
        MapView map_view = (MapView)findViewById(R.id.mapview);
        map_controller = map_view.getController();
        map_controller.setZoom(15);

        // ズームコントローラーの取得
        ZoomControls zoom_controls = (ZoomControls) map_view.getZoomControls();
        zoom_controls.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
        zoom_controls.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
        map_view.addView(zoom_controls);
    }

    /**
     * ルート表示時にコールされるメソッド
     *
     * @return   boolean
     *
     * @TODO     未実装
     *
     * @Override
     */
	protected boolean isRouteDisplayed() {
		return false;
	}

	/**
	 * ロケーションが変更されたときにコールされるメソッド
	 *
	 * @param  Location location ロケーション
	 *
	 * @return void
	 */
	public void onLocationChanged(Location location) {
		GeoPoint geo_point = new GeoPoint((int)(location.getLatitude() * 1E6), (int)(location.getLongitude() * 1E6));
		map_controller.animateTo(geo_point);
	}

	public void onProviderDisabled(String provider) {
	}

	public void onProviderEnabled(String provider) {
	}

	public void onStatusChanged(String provider, int status, Bundle extras) {
	}
}
  • 8. 実行

http://gyazo.com/8bd4ed7e91def88e148f84525051a1e9.png

  • 9. ルートをセットする

google earthで地点をいくつかセットしたkmlファイルを生成すると、アニメーション表示してくれる。
google earthの"場所"のところで右クリックしてフォルダ作成(名前は半角英数字じゃないと文字化ける)

http://gyazo.com/bd566e86e22319354754f743cdd83086.png

そのあと適当に場所を検索し、フォルダの上で右クリックして目印を追加、を繰り返す(目印の名前も半角英数字)

最後に名前をつけて場所を保存。KMLファイルが出来る。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://earth.google.com/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>minato-ku.kml</name>
	<StyleMap id="msn_ylw-pushpin">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_ylw-pushpin1</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_ylw-pushpin1</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sn_ylw-pushpin">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<Style id="sh_ylw-pushpin">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<Style id="sn_ylw-pushpin0">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<StyleMap id="msn_ylw-pushpin0">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_ylw-pushpin</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_ylw-pushpin0</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sh_ylw-pushpin0">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<Style id="sn_ylw-pushpin1">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<Style id="sh_ylw-pushpin1">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<StyleMap id="msn_ylw-pushpin1">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_ylw-pushpin0</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_ylw-pushpin</styleUrl>
		</Pair>
	</StyleMap>
	<Folder>
		<name>minato-ku</name>
		<open>1</open>
		<Placemark>
			<name>Fuji-TV</name>
			<LookAt>
				<longitude>139.7742880001543</longitude>
				<latitude>35.6268639999717</latitude>
				<altitude>0</altitude>
				<range>1000.000056507929</range>
				<tilt>0</tilt>
				<heading>8.986021141538874e-011</heading>
				<altitudeMode>relativeToGround</altitudeMode>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_ylw-pushpin</styleUrl>
			<Point>
				<coordinates>139.7742880001543,35.6268639999717,0</coordinates>
			</Point>
		</Placemark>
		<Placemark>
			<name>Tokyo Tower</name>
			<LookAt>
				<longitude>139.7571514467238</longitude>
				<latitude>35.64568875441014</latitude>
				<altitude>0</altitude>
				<range>2178.963252204124</range>
				<tilt>0</tilt>
				<heading>2.49245691098581e-006</heading>
				<altitudeMode>relativeToGround</altitudeMode>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_ylw-pushpin1</styleUrl>
			<Point>
				<coordinates>139.7571514467238,35.64568875441014,0</coordinates>
			</Point>
		</Placemark>
		<Placemark>
			<name>Tokyo Midtown</name>
			<LookAt>
				<longitude>139.7330952053221</longitude>
				<latitude>35.66521810834022</latitude>
				<altitude>0</altitude>
				<range>395.3556960965036</range>
				<tilt>0</tilt>
				<heading>1.088592548051111e-009</heading>
				<altitudeMode>relativeToGround</altitudeMode>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_ylw-pushpin0</styleUrl>
			<Point>
				<coordinates>139.7330952053221,35.66521810834022,0</coordinates>
			</Point>
		</Placemark>
	</Folder>
</Document>
</kml>

KMLファイルのURLのなかに"www.opengis.net"というのがあったら全て"earth.google.com"に書き換える(書き換え忘れるとLoadできない)

  • 10. KMLファイルをロードする

Emulator Control からLoad XML...を選択し、先ほど生成したKMLファイルを読み込む。

http://gyazo.com/aef4c3fd8d9bb0ccb3de030eae4fa286.png

  • 11. 実行

左下の緑の三角を押すとアニメーションが始まる。


  • おまけ

上の動画がちょっと短すぎたみたいなので、山手線を一周してみたよ。

参考文献
http://android.siprop.org/index.php?%CA%D9%B6%AF%B2%F1%2FGoogleMap
http://android.siprop.org/index.php?%CA%D9%B6%AF%B2%F1%2FMapsAPIKey