20120125 titanium study

位置情報と連携したアプリ開発

http://www.flickr.com/photos/normanbleventhalmapcenter/2674845313/

12年1月22日日曜日

http://www.flickr.com/photos/vaucher/5763894833/sizes/l/in/photostream/


今回の狙い✤ 位置情報と連携したアプリ開発を通じてMapViewの使い方について学びます

✤ 今回作るアプリをベースにして、次回各自でオリジナル機能の実装にチャレンジしてもらいたいと考えてます

http://www.flickr.com/photos/alanant/4483533096/




今回作るアプリのイメージ

✤ 過去の勉強会で取り上げたTableViewの機能を使ってお店の一覧情報を表示

✤ 今回説明するMapView機能も活用し、お店の情報をクリックしたら該当する場所の地図を表示するアプリを作成


はじめに位置情報の基礎http://www.flickr.com/photos/avlxyz/4999120709/




位置情報基礎知識①緯度経度と単位

緯度（latitude）は赤道を０度として北：＋（プラス）南：ー（マイナス）の数字で表現

経度（longitude）はグリニッジ天文台跡を南北へ通る子午線を０度として東：＋（プラス）西：ー（マイナス）の数字で表現

緯度経度を10進法で示すDegree単位でパソナテック丸の内オフィスは以下のようになります+35.679113+139.763137※ 60進で表現する度分秒（DMS）というのもあるそうですがインターネット上ではDegree単位が利用されることが多いそうです


位置情報基礎知識②測地系✤ 同じ場所でも利用する測地系（datum）によって緯度経度の値が変わる。日本で気にする必要があるのは以下２つ✤ 日本測地系✤ 世界測地系

✤ 日本では2002年4月1日まで日本測地系が使われてきた経緯があり、サービスによってはまだ日本測地系を利用しているものもあるそうです✤ 日本測地系に基づいた緯度経度と世界測地系のそれとでは、約400mのズレが生じるそうです


位置情報基礎知識③位置情報取得方法

場所の精度

バッテリ消費

プログラムから測位方式指定不可プログラムから測位方式指定可能

GPS 基地局測位 Wi-Fi測位

測位方式

高低

計測に要する時間


MapViewって何？

✤ スマートフォンならではの地図表示を行える機能

✤ Titanium MobileではTitanium.Map.createViewというAPIにて簡単に実装可能

✤ ただし、地図のズームイン/ズームアウトのボタン配置/制御や、画面上のピンの表示などはそれなりに大変

✤ 現在位置の取得を順次処理するようなナビゲーション的な機能を実装しようとするともっと大変。（http://hamasyou.com/blog/archives/000398）


http://hamasyou.com/blog/archives/000398






MapViewを使ったアプリ①

✤ TitaniumStudioを起動した後、File→New→Titanium Mobile Projectと進みます

✤ 右記画面が表示されますので今回は以下入力してプロジェクトの設定を行います✤ Project name: 20120125TiStudy

✤ App Id:jp.co.pasonatech.20120125TiStudy

✤ 補足）今回はローカルでの作業のため App Idを仮にこのようにしましたがAppStoreで配布する場合、他のアプリケーションと重複することは出来ません。


MapViewを使ったアプリ②

var prop = { win: { backgroundColor: '#999' }, tab1:{ icon: 'KS_nav_views.png', title:'MapView' }, mapView:{ width: 320, height:480, top:0, left:0, mapType: Titanium.Map.STANDARD_TYPE, region: { latitude:35.676564, longitude:139.765076, latitudeDelta:0.01, longitudeDelta:0.01 }, animate:true, regionFit:true, userLocation:true }};

var exports = { prop:prop};

Titanium.UI.setBackgroundColor('#000');var tabGroup = Titanium.UI.createTabGroup();var $$ = require('ui/styles').prop;var win1 = Titanium.UI.createWindow($$.win);win1.title = '地図表示サンプル';var tab1 = Titanium.UI.createTab($$.tab1);tab1.window = win1;

var mapView = Titanium.Map.createView($$.mapView);

win1.add(mapView);tabGroup.addTab(tab1);tabGroup.open();

app.js ui/styles.js


MapViewを使ったアプリ③

//中略 mapView:{ width: 320, height:480, top:0, left:0,

mapType: Titanium.Map.STANDARD_TYPE,

region: { latitude:35.676564, longitude:139.765076,

latitudeDelta:0.01, longitudeDelta:0.01 }, animate:true, regionFit:true, userLocation:true }};

MapViewのプロパティ解説※説明する都合上、下記のソースコードに適宜改行を入れています

STANDARD_TYPE以外にTitanium.Map.SATELLITE_TYPETitanium.Map.HYBRID_TYPEも指定出来ます

latitude（緯度）longitude（経度）をDegree単位で指定します

latitudeDelta、longitudeDeltaは縮尺尺度で1.0から0.001で指定可能


MapViewを使ったアプリ④

latitudeDelta、longitudeDeltaの数値を大きくすると広域表示になります

0.51.0 0.1 0.05


サンプルアプリを少しBrushUP

http://www.flickr.com/photos/craigsd/4687453830/




ズームイン/ズームアウトボタン配置＆ピンの表示✤ 機能解説のために、あえてズームイン、ズームアウトさせるためのボタンを配置します

✤ iPhoneシミュレータでoptionキーを押しながらタッチパッドを操作するとピンチイン/ピンチアウト出来るので本来不要・・

✤ パソナテックオフィスのある場所が地図上で判断しやすいように、ピンを配置します


ズームイン/ズームアウトボタン配置＆ピンの表示（app.js）

※先ほど作った20120125TiStudyプロジェクトをそのまま流用して作業を進めます

後述するcreateZoomInBtnメソッドを使ってズームイン、ズームアウトのボタンをそれぞれ生成します

Titanium.UI.setBackgroundColor('#000');var tabGroup = Titanium.UI.createTabGroup();var $$ = require('ui/styles').prop;var win1 = Titanium.UI.createWindow($$.win);win1.title = '地図表示サンプル';

var ui = require('ui/ui');var mapView = Titanium.Map.createView($$.mapView);

var pin = Titanium.Map.createAnnotation($$.pin);mapView.addAnnotation(pin);

var zoominPosition = 50;var zoomoutPosition = 100;

var zoomin = ui.createZoomInBtn(zoominPosition,mapView);var zoomout = ui.createZoomOutBtn(zoomoutPosition,mapView);

win1.add(mapView);win1.add(zoomin);win1.add(zoomout);

win1.open();

後述するui.jsを読み込みます

地図上にピンを表示するためにTitanium.Map.createAnnotationというAPIを使います。ピンの設定情報はui/styles.jsに記述します

上記生成したズームイン、ズームアウトのボタンをwindowに配置します


ズームイン/ズームアウトボタンとピンのプロパティの設定（ui/styles.js）

styles.jsに以下追記します

// mapView:{..}の後に以下追記します

pin:{ latitude: 35.676564, longitude:139.765076, title:"文字が表示されます", pincolor:Titanium.Map.ANNOTATION_GREEN, animate:true }, zoomBtn:{ width:30, height:30, left:10 }};

latitude（緯度）longitude（経度）をDegree単位で指定します


Coffee Break!

http://www.flickr.com/photos/windsordi/3273502072/




最終的に作るアプリのポイント

お店の名前、住所、緯度、経度、お店の画像の保存先のパスの情報を配列で保持しておきます

var shopAddress = [ { name:'地ビールダイニング神楽坂ラ・カシェット', address:'東京都新宿区神楽坂1-10', latitude:35.700457, longitude:139.742207, pict:'pict/001.png' }, { name:'イノダコーヒ東京大丸支店', address:'東京都千代田区丸の内1-9-1', latitude:35.683016, longitude:139.768417, pict:'pict/002.png' }, { name:'nicoドーナツ麻布十番店', address:'東京都港区麻布十番1-7-9', latitude:35.656134, longitude:139.734884, pict:'pict/003.png' }];

Titanium.UI.TableViewを利用して緯度経度以外の情報を表示します

お店の情報がクリックされた際に該当のお店の緯度経度情報をTitanium.MapViewのsetLocationメソッドを使ってlatitude,longitudeを設定しなおす


// 続きvar container = [];

var len = shopAddress.length;

for(var i=0;i<len;i++){

var row = ui.createAddressRow(shopAddress[i]);

container.push(row);

}

var tableView = ui.createTableView(container);

win1.add(tableView);

var ui = require('ui/ui');

// 省略

// 省略 win1.title = 'レストランブック';var shopAddress = [ { name:'地ビールダイニング神楽坂ラ・カシェット', address:'東京都新宿区神楽坂1-10', latitude:35.700457, longitude:139.742207, pict:'pict/001.png' }, { name:'イノダコーヒ東京大丸支店', address:'東京都千代田区丸の内1-9-1', latitude:35.683016, longitude:139.768417, pict:'pict/002.png' }, { name:'nicoドーナツ麻布十番店', address:'東京都港区麻布十番1-7-9', latitude:35.656134, longitude:139.734884, pict:'pict/003.png' }];// 右に続きます

app.jsの編集

後述するui.createAddressRowを使ってお店の名前、画像、住所が配置されたTableViewRowを順次生成しそれらを配列containerに格納しておきます

後述するui.createTableViewに上記生成したcontainerを渡しお店の一覧情報が含まれたTableViewを生成します


var $$ = require('ui/styles').prop;var exports = { createAddressRow:function(address){ var row = Ti.UI.createTableViewRow($$.viewRow);

row.data = address;

row.addEventListener('click', function(e){

var pin = Titanium.Map.createAnnotation($$.mapAnnotation); pin.latitude = e.rowData.data.latitude; pin.longitude = e.rowData.data.longitude; pin.title = e.rowData.data.name;

setMapView(pin,e.rowData.data.latitude,e.rowData.data.longitude);

}); var shopName = Ti.UI.createLabel($$.shopName); shopName.text = address.name, row.add(shopName);

var addressInfo = Ti.UI.createLabel($$.address); addressInfo.text = address.address, row.add(addressInfo);

var pict = Ti.UI.createImageView($$.pict); pict.image = address.pict; row.add(pict); return row; },

ui/ui.jsの編集①

お店の名前、住所はTitanium.UI.Labelを利用し、お店の写真についてはTitanium.UI.ImaveViewを利用して生成しそれら全てTableViewRowに配置します

TableViewRowをクリックした際に緯度、経度情報を取得できるようにまずはdataプロパティに引数のaddressをそのまま代入しますクリック時に発火するイベントを設定します。 ※このメソッドの引数であるaddressは上記dataプロパティに代入してあるためe.rowData.data.xxx で取得可能になってます

後述するsetMapView関数を利用して該当のお店の場所にピンを配置＆地図上の表示を行います


ui/ui.jsの編集②

exportsしてないこのsetMapView関数についてはモジュール呼び出し側のapp.jsからはアクセス出来ないプライベートなメソッドになります。

createTableView:function(rows){ var len = rows.length; var tableView = Ti.UI.createTableView($$.tableView); for(var i=0;i<len;i++){ tableView.appendRow(rows[i]); } return tableView; }};

// private methodfunction setMapView(pin,latitude,longitude){ mapView.addAnnotations([pin]);

mapView.setLocation({ latitude :latitude, longitude:longitude, latitudeDelta:0.01, longitudeDelta:0.01 });}

お店の一覧情報が含まれたTableViewRowが複数入っている配列を引数に取り、それを順番にTableViewのRowにセットします

Titanium.MapViewのsetLocationメソッドを利用して、緯度経度情報を再設定＆該当の場所まで自動的にスクロールします


ui/styles.jsの編集

// zoomBtn:{..}の後に以下追記します tableView:{ width: 320, height:200, top:0, left:0 }, viewRow:{ width:320, height:'auto' }, shopName:{ font:{fontSize:14}, color:'#000', left:80, top:5, width:230, height:20 }, address:{ font:{fontSize:10}, left:80, top:30, width:230, height:20 }, pict:{ left:5, top:5, width:60, height:60 }};


オリジナル機能実装にむけてのアイデア✤ 過去取り上げてない機能もあるが、以下のような視点でオリジナル機能実装にチャレンジしてみてください✤ お店の情報

✤ 住所→緯度経度情報変換してくれるサービスを活用（http://www.geocoding.jp/api/）

✤ SQLiteを使ってお店の情報の読み書き可能にする

✤ ユーザインタフェース✤ お店情報クリック→画面遷移して地図を表示

http://www.flickr.com/photos/craigsd/4687453830/


http://www.geocoding.jp/api/






参考資料

✤ WEB+DB PRESS Vol.57　特集3スマートフォンでもケータイでも！［速習］位置情報サービス✤ http://amzn.to/zAHI46

✤ On HTML5 Field　 [第4回] DEVICE ACCESS (Geolocation API /DeviceOrientation Event)


20120125 titanium study

Self Improvement