位置情報と連携したアプリ開発
http://www.flickr.com/photos/normanbleventhalmapcenter/2674845313/
12年1月22日日曜日
今回の狙い✤ 位置情報と連携したアプリ開発を通じてMapViewの使い方について学びます
✤ 今回作るアプリをベースにして、次回各自でオリジナル機能の実装にチャレンジしてもらいたいと考えてます
http://www.flickr.com/photos/alanant/4483533096/
12年1月22日日曜日
今回作るアプリのイメージ
✤ 過去の勉強会で取り上げたTableViewの機能を使ってお店の一覧情報を表示
✤ 今回説明するMapView機能も活用し、お店の情報をクリックしたら該当する場所の地図を表示するアプリを作成
12年1月22日日曜日
はじめに位置情報の基礎http://www.flickr.com/photos/avlxyz/4999120709/
12年1月22日日曜日
位置情報基礎知識①緯度経度と単位
緯度(latitude)は赤道を0度として北:+(プラス)南:ー(マイナス)の数字で表現
経度(longitude)はグリニッジ天文台跡を南北へ通る子午線を0度として東:+(プラス)西:ー(マイナス)の数字で表現
緯度経度を10進法で示すDegree単位でパソナテック丸の内オフィスは以下のようになります+35.679113+139.763137※ 60進で表現する度分秒(DMS)というのもあるそうですがインターネット上ではDegree単位が利用されることが多いそうです
12年1月22日日曜日
位置情報基礎知識②測地系✤ 同じ場所でも利用する測地系(datum)によって緯度経度の値が変わる。日本で気にする必要があるのは以下2つ✤ 日本測地系✤ 世界測地系
✤ 日本では2002年4月1日まで日本測地系が使われてきた経緯があり、サービスによってはまだ日本測地系を利用しているものもあるそうです✤ 日本測地系に基づいた緯度経度と世界測地系のそれとでは、約400mのズレが生じるそうです
12年1月22日日曜日
位置情報基礎知識③位置情報取得方法
場所の精度
バッテリ消費
プログラムから測位方式指定不可 プログラムから測位方式指定可能
GPS 基地局測位 Wi-Fi測位
測位方式
高 低
計測に要する時間
12年1月22日日曜日
MapViewって何?
✤ スマートフォンならではの地図表示を行える機能
✤ Titanium MobileではTitanium.Map.createViewというAPIにて簡単に実装可能
✤ ただし、地図のズームイン/ズームアウトのボタン配置/制御や、画面上のピンの表示などはそれなりに大変
✤ 現在位置の取得を順次処理するようなナビゲーション的な機能を実装しようとするともっと大変。(http://hamasyou.com/blog/archives/000398)
12年1月22日日曜日
MapViewを使ったアプリ①
✤ TitaniumStudioを起動した後、File→New→Titanium Mobile Projectと進みます
✤ 右記画面が表示されますので今回は以下入力してプロジェクトの設定を行います✤ Project name: 20120125TiStudy
✤ App Id:jp.co.pasonatech.20120125TiStudy
✤ 補足)今回はローカルでの作業のため App Idを仮にこのようにしましたがAppStoreで配布する場合、他のアプリケーションと重複することは出来ません。
12年1月22日日曜日
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
12年1月22日日曜日
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で指定可能
12年1月22日日曜日
MapViewを使ったアプリ④
latitudeDelta、longitudeDeltaの数値を大きくすると広域表示になります
0.51.0 0.1 0.05
12年1月22日日曜日
サンプルアプリを少しBrushUP
http://www.flickr.com/photos/craigsd/4687453830/
12年1月22日日曜日
ズームイン/ズームアウトボタン配置&ピンの表示✤ 機能解説のために、あえてズームイン、ズームアウトさせるためのボタンを配置します
✤ iPhoneシミュレータでoptionキーを押しながらタッチパッドを操作するとピンチイン/ピンチアウト出来るので本来不要・・
✤ パソナテックオフィスのある場所が地図上で判断しやすいように、ピンを配置します
12年1月22日日曜日
ズームイン/ズームアウトボタン配置&ピンの表示(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に配置します
12年1月22日日曜日
var exports = { createZoomInBtn:function(topPosition,obj){ var zoomin = Ti.UI.createImageView($$.zoomBtn); zoomin.text = '+'; zoomin.top = topPosition; zoomin.image = 'images/zoomin.png'; zoomin.addEventListener('click',function(){ obj.zoom(1); }); return zoomin;
}, 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); }); return zoomout; }};
ズームイン/ズームアウトボタン配置&ピンの表示(ui/ui.js)
TitaniumUI.createImageViewを利用してボタンの画像を配置します
uiフォルダを作成して、その配下にui.jsを配置。以下ソースコードを記述します
ImageViewに対してクリックした時に発火させるイベントを設定。引数として渡されたTitanium.MapView(引数名はobj)のzoomメソッドを使ってズームイン処理を実現してます。(マイナス1を指定するとズームアウトになります)
※ createZoomInBtn() 、createZoomOutBtn()とも似た処理なのでリファクタリングしたほうがよさそうなのですが説明やりやすくするために今回このようなコードにしました
12年1月22日日曜日
ズームイン/ズームアウトボタンとピンのプロパティの設定(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単位で指定します
12年1月22日日曜日
Coffee Break!
http://www.flickr.com/photos/windsordi/3273502072/
12年1月22日日曜日
最終的に作るアプリのポイント
お店の名前、住所、緯度、経度、お店の画像の保存先のパスの情報を配列で保持しておきます
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を設定しなおす
12年1月22日日曜日
// 続き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を生成します
12年1月22日日曜日
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関数を利用して該当のお店の場所にピンを配置&地図上の表示を行います
12年1月22日日曜日
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メソッドを利用して、緯度経度情報を再設定&該当の場所まで自動的にスクロールします
12年1月22日日曜日
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 }};
12年1月22日日曜日
オリジナル機能実装にむけてのアイデア✤ 過去取り上げてない機能もあるが、以下のような視点でオリジナル機能実装にチャレンジしてみてください✤ お店の情報
✤ 住所→緯度経度情報変換してくれるサービスを活用(http://www.geocoding.jp/api/)
✤ SQLiteを使ってお店の情報の読み書き可能にする
✤ ユーザインタフェース✤ お店情報クリック→画面遷移して地図を表示
http://www.flickr.com/photos/craigsd/4687453830/
12年1月22日日曜日
参考資料
✤ WEB+DB PRESS Vol.57 特集3スマートフォンでもケータイでも![速習]位置情報サービス✤ http://amzn.to/zAHI46
✤ On HTML5 Field [第4回] DEVICE ACCESS (Geolocation API /DeviceOrientation Event)
12年1月22日日曜日
Top Related