View source

[[Category:Lang-JP]]
[[Category:JP_Flash Lite]]
[[Category:JP_How To]]
[[Category:JP_Code Examples]]
[[Category:JP_Location Based Services]]

原文（英語）: [[Displaying GPS position using Google Maps images in FlashLite]]

本ページでは、[http://www.adobe.com/products/flashlite/ Flash Lite], [http://www.kunerilite.net/ KunerLite], [http://code.google.com/apis/maps/documentation/staticmaps/ Google Static Maps] を使用して、端末の現在のGPS座標を表示する方法を示します。
[[Image:Kuneri_maps_screenshot.jpg]]

= 前もって準備すべきもの =
== Google Maps APIキーの取得 ==
Google Mapsサービスを使用するため、Google Maps APIキーを取得する必要があります。まだ取得していない場合、下記サイトに行き、サインアップしてAPIキーを取得できます。
[http://code.google.com/apis/maps/signup.html http://code.google.com/apis/maps/signup.html]

== KuneriLiteのダウンロード・インストール ==
KuneriLiteはFlash Liteの機能を拡張するツールキットで、Flash Liteアプリケーションが、ファイル書き込み、GPSデータの読み込みといったSymbianのネイティブ機能にアクセスできるようにするものです。<br>
本チュートリアルを進めるには、KuneriLiteをダウンロード・インストールする必要があります。
[http://www.kunerilite.net/content/view/33/47/ KuneriLiteダウンロードページ]

= Flash Liteアプリケーションを作成する =
== Flash Liteムービーを作成する ==
本例題ではFlash Lite 2.1を使用しますが、それを別バージョン(新旧問わず)に移植することはとても簡単です。空のFlash Liteムービーを作成した後は、以下に示す簡単なステップに従うだけです。

* メニューから'''挿入 → 新規シンボル...'''と辿って「ボタン」を作成し、以下のプロパティを入力します。
** 「名前」を '''GpsButton'''
** チェックボックスの'''ActionScriptに書き出し'''と'''最初のフレームに書き出し'''にチェックを入れる
[[Image:gpsButtonProperties.jpg]]
* ボタンの作成が終了した後、そのボタンを、下記スクリーンショット中にあるようにルートムービー上のステージ底辺部に置き、そのインスタンス名を '''startButton''' とします。
[[Image:buttonOnStage.jpg]]

== ActionScriptコードを入力する ==
ルートムービー上で、'''Actions'''というラベルのレイヤーを新たに作り、そのActionScriptエディタを開きます。
そして、プロパティを数ヶ所定義します。
<code actionscript>
// Enter your api key here
var apiKey = 'API_KEY';

//If you're using non-commercial version of KuneriLite, you'll not need to change this
var kuneriPath = 'http://127.0.0.1:1001/Basic/';
</code>
ここで、コード中で使う、いくつかの有用な関数を定義します。
<code actionscript>
//We'll call this function when some KuneriLite related errors occur
function kuneriError(error:String)
{
	trace("KuneriLite error: " + error);
}

//This function will do all calls to KuneriLite servers
//and call the given handler passing response values as argument
function kuneriLoad(url, handler)
{
	var loader:LoadVars = new LoadVars();
	
	loader.onLoad = function()
	{
		handler(this);
	}
	trace("LOADING: " + url);
	
	loader.load(url);
}
</code>
ここで、ボタンに関連したロジックとして、コードを入力します。ユーザーが '''startButton''' を押した時の動作として、
* '''GPSを開始する'''
* '''現在のGPS座標を取得する'''
* 取得したGPS座標を中心とした、'''地図を表示する'''

KuneriLite GPS pluginについての情報は、以下に示す関連Wikiページで確認できます。
[http://wiki.kunerilite.net/index.php?title=GPS_plugin http://wiki.kunerilite.net/index.php?title=GPS_plugin]

gpsButtonを押した時に、GPSを開始し、'''start klCommand'''を使用します。
<code actionscript>
startButton.onPress = function()
{
	kuneriLoad(kuneriPath + 'GPS?klCommand=start', gpsStarted);
}
function gpsStarted(res:LoadVars)
{
	if(res.klError == 0 || res.klError == -11)
	{
		trace("GPS started");
		
		kuneriLoad(kuneriPath + 'GPS?klCommand=read', gpsDataRead);
	}
	else
	{
		kuneriError("Error starting GPS!");
	}
}
</code>
'''gpsStarted()'''ハンドラは、以下のことを行います。
* エラーが全く発生していない(klError = 0)、もしくはGPSが既に開始している場合(klError = -11)をキャッチします。GPSプラグインに関連したエラー一覧については、下記KuneriLite Wikiページをご確認ください。
[http://wiki.kunerilite.net/index.php?title=GPS_plugin http://wiki.kunerilite.net/index.php?title=GPS_plugin]
* GPSを開始する際にエラーが発生した場合、上記で定義した'''kuneriError()'''関数を呼出します。
* GPSが正しく開始された場合、KuneriLiteの次の呼出しを行い、ここで現在のGPS座標を取得します('''klCommand=read''')。
KuneriLiteへのこの呼出しでは、'''gpsDataRead()'''ハンドラを呼出します。それを下記に示します。
<code actionscript>
function gpsDataRead(res:LoadVars)
{
	if(res.klError == 0)
	{
		var lat = res.klPosLatitude;
		var lng = res.klPosLongitude;
		
		trace("POSITION: " + lat + ", " + lng);
		
		loadMap(lat, lng);
	}
	else
	{
		kuneriError("Error starting GPS!");
	}
}
</code>
上記のように、本ハンドラは、KuneriLiteによって何らかのエラーが発生するかどうかをチェックし、エラーがなければ緯度(latitude)と経度(longitude)をそれぞれ''klPosLatitude'',''klPosLongitude''プロパティとして取得します。
それが終わったら、'''loadMap()'''関数を呼出し、実際に'''Static Map'''画像をロードします。
<code actionscript>
function loadMap(lat:Number, lng:Number)
{
	var mapClip:MovieClip = _root.createEmptyMovieClip('mapClip', _root.getNextHighestDepth());
	
	mapClip._x = 0;
	mapClip._y = 0;
	
	var mapWidth = 240;
	var mapHeight = 280;
	
	var loader:MovieClipLoader = new MovieClipLoader();
	
	var mapUrl:String = 'http://maps.google.com/staticmap?center=' + 
		lat + ',' + lng + '&format=jpg&zoom=8&size=' + 
		mapWidth + 'x' + mapHeight + '&key=' + apiKey;
	
	loader.loadClip(mapUrl, mapClip);
}
</code>

上記関数では、以下の処理をします。
* '''新しい空のムービークリップ'''をムービールートに関連付けます。
* 上記ムービークリップを座標(0,0)に配置します。
* 空のクリップ中に240x280ピクセルのマップイメージをJPEG形式でロードするため、'''MovieClipLoader'''を使用します。
それが終わったら、作成したFlashLiteムービーをテストできます。

= 作成したFlash Liteアプリケーションをテストする =
== PC上でテストする ==
実端末にデプロイせずにアプリケーションをテストするため、以下に示す簡単なステップに従う必要があります。
* デフォルトの設定(port: 1001, key: Basic)で、'''KuneriLite Emulator'''を起動する
* '''Flash Liteムービー'''を起動する
* '''Find Me!'''をクリックし、イメージがロードされるのを待ちます。(エミュレータを使用するので、GPS位置は実際のものではありません。)

KuneriLite Emulatorについての詳細は、以下のリンクをご参照ください。
[http://wiki.kunerilite.net/index.php?title=KuneriLite_Emulator KuneriLite Emulator]

== 実端末でテストする ==
アプリケーションを実端末でテストするため、以下の手順に従い、'''KuneriLite Wizard'''を使用してSISアプリケーションをパッケージ化する必要があります。
[[Image:Kunerimaps_wizard_shot.jpg]]
* FlashLiteムービーをエクスポートする
* "Create a new project"で新しくプロジェクトを作成する
* プロジェクト名(Project name)その他データを入力し、プラグイン(Plug-ins)から''GPS''を選択する
* Flash Lite2.xまたは3.xを使用していて、その1つでアプリケーションを起動する場合、"Use external player"オプションにチェックを入れる
* 常に"Use stub"オプションにチェックを入れることを推奨
* プロジェクトの''Main SWF''として、エクスポートしたSWFファイルを選択する

KuneriLite Wizardについての詳細は、以下のリンクをご参照ください。[http://wiki.kunerilite.net/index.php?title=KuneriLite_Wizard_Beginner%27s_Guide KuneriLite Wizard Beginner's Guide]

= リソース類 =
* 本チュートリアルのFlashソースファイル(.fla)のダウンロードはこちら [[Media:KuneriGpsMap.zip]]
* モバイルアプリケーションでのGoogle Mapの使用については、こちらの記事もご覧ください。[[How to use Google Maps data in mobile applications]]