20120125 titanium study

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

http://www.ﬂickr.com/photos/normanbleventhalmapcenter/2674845313/

12年1月22日日曜日

今回の狙い
✤ 位置情報と連携したアプリ開発
を通じてMapViewの使い方に
ついて学びます
✤ 今回作るアプリをベースにし
て、次回各自でオリジナル機能
の実装にチャレンジしてもらい
たいと考えてます

http://www.ﬂickr.com/photos/alanant/4483533096/


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

✤ 過去の勉強会で取り上げたTableView
の機能を使ってお店の一覧情報を表示
✤ 今回説明するMapView機能も活用し、
お店の情報をクリックしたら該当する
場所の地図を表示するアプリを作成


はじめに位置情報の基礎
http://www.ﬂickr.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）


MapViewを使ったアプリ①

✤ TitaniumStudioを起動した後、
File→New→Titanium Mobile Projectと
進みます
✤ 右記画面が表示されますので今回は以下入
力してプロジェクトの設定を行います
✤ Project name:
20120125TiStudy
✤ App Id:
jp.co.pasonatech.20120125TiStudy

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


MapViewを使ったアプリ②

app.js ui/styles.js
Titanium.UI.setBackgroundColor('#000'); var prop = {
var tabGroup = Titanium.UI.createTabGroup(); win: {
var $$ = require('ui/styles').prop; backgroundColor: '#999'
var win1 = Titanium.UI.createWindow($$.win); },
win1.title = '地図表示サンプル'; tab1:{
icon: 'KS_nav_views.png',
var tab1 = Titanium.UI.createTab($$.tab1); title:'MapView'
tab1.window = win1; },
mapView:{
var mapView = Titanium.Map.createView($$.mapView); width: 320,
height:480,
win1.add(mapView); top:0,
tabGroup.addTab(tab1); left:0,
tabGroup.open(); 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
};


MapViewを使ったアプリ③

MapViewのプロパティ解説
※説明する都合上、下記のソースコードに適宜改行を入れています
//中略
mapView:{
width: 320,
height:480,
top:0, STANDARD_TYPE以外に
left:0, Titanium.Map.SATELLITE_TYPE
Titanium.Map.HYBRID_TYPE
mapType: Titanium.Map.STANDARD_TYPE,
も指定出来ます

region: {
latitude:35.676564, latitude（緯度）longitude（経度）をDegree
longitude:139.765076, 単位で指定します

latitudeDelta:0.01, latitudeDelta、longitudeDeltaは縮尺尺度で
longitudeDelta:0.01
}, 1.0から0.001で指定可能
animate:true,
regionFit:true,
userLocation:true
}
};


MapViewを使ったアプリ④

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

1.0 0.5 0.1 0.05


サンプルアプリを少しBrushUP

http://www.ﬂickr.com/photos/craigsd/4687453830/


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

✤ iPhoneシミュレータでoptionキー
を押しながらタッチパッドを操作す
るとピンチイン/ピンチアウト出来
るので本来不要・・
✤ パソナテックオフィスのある場所が地
図上で判断しやすいように、ピンを配
置します


表示（app.js）
※先ほど作った20120125TiStudyプロジェクトをそのまま流用して作業を進めます
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'); 後述するui.jsを読み込みます
var mapView = Titanium.Map.createView($$.mapView);

var pin = Titanium.Map.createAnnotation($$.pin);
地図上にピンを表示するために
mapView.addAnnotation(pin); Titanium.Map.createAnnotationというAPIを
var zoominPosition = 50; 使います。ピンの設定情報はui/styles.jsに記述
var zoomoutPosition = 100;
します

var zoomin = ui.createZoomInBtn(zoominPosition,mapView); 後述するcreateZoomInBtnメソッドを使って
var zoomout = ui.createZoomOutBtn(zoomoutPosition,mapView); ズームイン、ズームアウトのボタンをそれぞれ生
成します
win1.add(mapView);
win1.add(zoomin);
win1.add(zoomout); 上記生成したズームイン、ズームアウトのボタン
win1.open(); をwindowに配置します


表示（ui/ui.js）
uiフォルダを作成して、その配下にui.jsを配置。以下ソースコードを記述します

var exports = {
createZoomInBtn:function(topPosition,obj){ TitaniumUI.createImageViewを利用してボタ
var zoomin = Ti.UI.createImageView($$.zoomBtn);
zoomin.text = '+'; ンの画像を配置します
zoomin.top = topPosition;
zoomin.image = 'images/zoomin.png';
zoomin.addEventListener('click',function(){ ImageViewに対してクリックした時に発火させ
obj.zoom(1);
}); るイベントを設定。
return zoomin;
引数として渡されたTitanium.MapView（引数
}, 名はobj）のzoomメソッドを使ってズームイン
createZoomOutBtn:function(topPosition,obj){
var zoomout = Ti.UI.createImageView($$.zoomBtn); 処理を実現してます。（マイナス１を指定する
zoomout.text = '-';
zoomout.top = topPosition; とズームアウトになります）
zoomout.image = 'images/zoomout.png';
zoomout.addEventListener('click',function(){
obj.zoom(-1); ※ createZoomInBtn() 、
});
return zoomout;
createZoomOutBtn()とも似た処理なのでリ
} ファクタリングしたほうがよさそうなのですが
};
説明やりやすくするために今回このようなコー
ドにしました


ズームイン/ズームアウトボタンとピンのプロ
パティの設定（ui/styles.js）
styles.jsに以下追記します

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

pin:{
latitude: 35.676564, latitude（緯度）longitude（経度）をDegree
title:"文字が表示されます", 単位で指定します
pincolor:Titanium.Map.ANNOTATION_GREEN,
animate:true
},
zoomBtn:{
width:30,
height:30,
left:10
}
};


Coffee Break!

http://www.ﬂickr.com/photos/windsordi/3273502072/


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

var shopAddress = [
{ Titanium.UI.TableViewを
name:'地ビールダイニング神楽坂ラ・カシェット',
address:'東京都新宿区神楽坂1-10', 利用して緯度経度以外の
latitude:35.700457, 情報を表示します
pict:'pict/001.png'
},
{
name:'イノダコーヒ東京大丸支店',
address:'東京都千代田区丸の内1-9-1',
latitude:35.683016,
pict:'pict/002.png'
},
{
name:'nicoドーナツ麻布十番店',
address:'東京都港区麻布十番1-7-9',
latitude:35.656134,
pict:'pict/003.png'
お店の情報がクリックされ
];
} た際に該当のお店の緯度経
度情報を
お店の名前、住所、緯度、経度、
Titanium.MapViewの
お店の画像の保存先のパスの情報
setLocationメソッドを
を配列で保持しておきます
使ってlatitude,longitudeを
設定しなおす


app.jsの編集

// 省略 // 続き
win1.title = 'レストランブック'; var container = [];
var shopAddress = [
var len = shopAddress.length;
{
name:'地ビールダイニング神楽坂ラ・カシェット',
for(var i=0;i<len;i++){
address:'東京都新宿区神楽坂1-10',
latitude:35.700457, var row = ui.createAddressRow(shopAddress[i]);
pict:'pict/001.png' container.push(row);
},
{ }
name:'イノダコーヒ東京大丸支店',
var tableView = ui.createTableView(container);
address:'東京都千代田区丸の内1-9-1',
latitude:35.683016, win1.add(tableView); 後述する
pict:'pict/002.png' ui.createAddressRowを使っ
},
{ てお店の名前、画像、住所が配
name:'nicoドーナツ麻布十番店', var ui = require('ui/ui');
置されたTableViewRowを順次
address:'東京都港区麻布十番1-7-9', // 省略生成しそれらを配列container
latitude:35.656134,
longitude:139.734884, に格納しておきます
pict:'pict/003.png'
}
]; 後述するui.createTableViewに上記生成した
// 右に続きます
containerを渡しお店の一覧情報が含まれた
TableViewを生成します


ui/ui.jsの編集①

var $$ = require('ui/styles').prop;
var exports = {
createAddressRow:function(address){ TableViewRowをクリックした際に緯度、経度
var row = Ti.UI.createTableViewRow($$.viewRow); 情報を取得できるようにまずはdataプロパティ
row.data = address; に引数のaddressをそのまま代入します
row.addEventListener('click', function(e){ クリック時に発火するイベントを設定します。
var pin = Titanium.Map.createAnnotation($$.mapAnnotation); ※このメソッドの引数であるaddressは上記
pin.latitude = e.rowData.data.latitude;
pin.longitude = e.rowData.data.longitude;
dataプロパティに代入してあるため
pin.title = e.rowData.data.name; e.rowData.data.xxx で取得可能になってます

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

}); 後述するsetMapView関数を利用して該当のお
var shopName = Ti.UI.createLabel($$.shopName);
shopName.text = address.name,
店の場所にピンを配置＆地図上の表示を行いま
row.add(shopName); す
var addressInfo = Ti.UI.createLabel($$.address); お店の名前、住所はTitanium.UI.Labelを利用
addressInfo.text = address.address, し、お店の写真については
row.add(addressInfo);
Titanium.UI.ImaveViewを利用して生成しそれ
var pict = Ti.UI.createImageView($$.pict);
pict.image = address.pict; ら全てTableViewRowに配置します
row.add(pict);
return row;
},


ui/ui.jsの編集②

createTableView:function(rows){ お店の一覧情報が含まれたTableViewRowが複
var len = rows.length;
var tableView = Ti.UI.createTableView($$.tableView); 数入っている配列を引数に取り、それを順番に
for(var i=0;i<len;i++){
tableView.appendRow(rows[i]); TableViewのRowにセットします
}
return tableView;
}
};
exportsしてないこのsetMapView関数について
// private method はモジュール呼び出し側のapp.jsからはアクセ
function setMapView(pin,latitude,longitude){
mapView.addAnnotations([pin]); ス出来ないプライベートなメソッドになりま
mapView.setLocation({ す。
latitude :latitude,
longitude:longitude,
latitudeDelta:0.01, Titanium.MapViewのsetLocationメソッドを
longitudeDelta:0.01 利用して、緯度経度情報を再設定＆該当の場所
});
} まで自動的にスクロールします


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/


参考資料

✤ WEB+DB PRESS Vol.57 特集3スマートフォンでもケータイでも！［速習］位置情
報サービス
✤ http://amzn.to/zAHI46
✤ On HTML5 Field [第4回] DEVICE ACCESS (Geolocation API /
DeviceOrientation Event)


20120125 titanium study

Recomendados

Recomendados

Más contenido relacionado

Similar a 20120125 titanium study

Similar a 20120125 titanium study (15)

Más de Hiroshi Oyamada

Más de Hiroshi Oyamada (20)

20120125 titanium study