際際滷

了崔秤烏と銭亊したアプリ蝕�k

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

12定1埖22晩晩袗晩

書指の粧い
? 了崔秤烏と銭亊したアプリ蝕�k
を宥じてMapViewの聞い圭に
ついて僥びます
? 書指恬るアプリをベ�`スにし
て、肝指光徭でオリジナル�C嬬
の�g廾にチャレンジしてもらい
たいと深えてます

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


書指恬るアプリのイメ�`ジ

? �^肇の茶�氏で函り貧げたTableView
の�C嬬を聞ってお糾の匯�E秤�鵑魃輅�
? 書指�h苧するMapView�C嬬も試喘し、
お糾の秤�鵑鬟�螢奪�靴燭蚶�輝する
��銈竜�蹐魃輅召垢襯▲廛蠅鰈��


はじめに了崔秤烏の児粥
http://www.?ickr.com/photos/avlxyz/4999120709/


了崔秤�鷸侊A岑�R�
�業�U業と�g了

�業�latitude�は橿祇を０業として
臼��プラス�
掴��`�マイナス�
の方忖で燕�F

�U業�longitude�はグリニッジ爺猟岬�Eを掴臼へ
宥る徨怜�を０業として �業�U業を10�M隈で幣すDegree�g了でパソナ
�|��プラス� テック来の坪オフィスは參和のようになります
廉��`�マイナス� +35.679113
の方忖で燕�F +139.763137
☆ 60�Mで燕�Fする業蛍昼�DMS�というのもあ
るそうですがインタ�`ネット貧ではDegree�g了
が旋喘されることが謹いそうです


�y仇狼
? 揖じ��銈任眄繒辰垢�y仇狼�datum�によって�業�U業の�､�笋錣襦Ｈ娜召�櫃�
する駅勣があるのは參和２つ
? 晩云�y仇狼
? 弊順�y仇狼
? 晩云では2002定4埖1晩まで晩云�y仇狼が聞われてきた�U�があり、サ�`ビスによっ
てはまだ晩云�y仇狼を旋喘しているものもあるそうです
? 晩云�y仇狼に児づいた�業�U業と弊順�y仇狼のそれとでは、�s400mのズレが伏じ
るそうです


了崔秤�麋ゝ歎酬�
�y了圭塀

GPS 児仇蕉�y了 Wi-Fi�y了
互詰

��銈両��

バッテリ��M

��yに勣する�r�g

プログラムから�y了圭塀峺協音辛プログラムから�y了圭塀峺協辛嬬


MapViewって採�

? スマ�`トフォンならではの仇�躅輅召鯰�
える�C嬬
? Titanium Mobileでは
Titanium.Map.createViewというAPI
にて��gに�g廾辛嬬
? ただし、仇�蹐離懇`ムイン/ズ�`ムア
ウトのボタン塘崔/崙囮や、鮫中貧
のピンの燕幣などはそれなりに寄��

? �F壓了崔の函誼を�肝�I尖するよう
なナビゲ�`ション議な�C嬬を�g廾し
ようとするともっと寄�筺��http://
hamasyou.com/blog/archives/
000398�


MapViewを聞ったアプリ�

? TitaniumStudioを軟�咾靴吹瓠�
File★New★Titanium Mobile Projectと
�Mみます
? 嘔�鮫中が燕幣されますので書指は參和秘
薦してプロジェクトの�O協を佩います
? Project name:
20120125TiStudy
? App Id:
jp.co.pasonatech.20120125TiStudy

? �a怎�書指はロ�`カルでの恬�Iのため
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のプロパティ盾�h
☆�h苧する脅栽貧、和�のソ�`スコ�`ドに�m卷個佩を秘れています
//嶄待
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��U業�をDegree
longitude:139.765076, �g了で峺協します

latitudeDelta:0.01, latitudeDelta、longitudeDeltaは�s樫樫業で
longitudeDelta:0.01
}, 1.0から0.001で峺協辛嬬
animate:true,
regionFit:true,
userLocation:true
}
};


MapViewを聞ったアプリ∠

latitudeDelta、longitudeDeltaの方�､魎鵑④�垢襪�旃魃輅召砲覆蠅泙�

1.0 0.5 0.1 0.05


サンプルアプリを富し京姻顎壊鞄雨永

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


ズ�`ムイン/ズ�`ムアウトボタン塘崔�ピンの
燕幣
? �C嬬盾�hのために、あえてズ�`ムイン、
ズ�`ムアウトさせるためのボタンを塘
崔します

? iPhoneシミュレ�`タでoptionキ�`
を兀しながらタッチパッドを荷恬す
るとピンチイン/ピンチアウト竃栖
るので云栖音勣??
? パソナテックオフィスのある��銈��
�輊呂播亢呂靴笋垢い茲Δ法▲團鵑鯏�
崔します


燕幣�app.js�
☆枠ほど恬った20120125TiStudyプロジェクトをそのまま送喘して恬�Iを�Mめます
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を�iみ�zみます
var mapView = Titanium.Map.createView($$.mapView);

var pin = Titanium.Map.createAnnotation($$.pin);
仇�輊呂縫團鵑魃輅召垢襪燭瓩�
mapView.addAnnotation(pin); Titanium.Map.createAnnotationというAPIを
var zoominPosition = 50; 聞います。ピンの�O協秤�鵑�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に��してクリックした�rに�k諮させ
obj.zoom(1);
}); るイベントを�O協。
return zoomin;
哈方として局されたTitanium.MapView�哈方
}, 兆はobj�のzoomメソッドを聞ってズ�`ムイン
createZoomOutBtn:function(topPosition,obj){
var zoomout = Ti.UI.createImageView($$.zoomBtn); �I尖を�g�Fしてます。�マイナス１を峺協する
zoomout.text = '-';
zoomout.top = topPosition; とズ�`ムアウトになります�
zoomout.image = 'images/zoomout.png';
zoomout.addEventListener('click',function(){
obj.zoom(-1); ☆ createZoomInBtn() 、
});
return zoomout;
createZoomOutBtn()とも貌た�I尖なのでリ
} ファクタリングしたほうがよさそうなのですが
};
�h苧やりやすくするために書指このようなコ�`
ドにしました


ズ�`ムイン/ズ�`ムアウトボタンとピンのプロ
パティの�O協�ui/styles.js�
styles.jsに參和弖�します

// mapView:{..}の瘁に參和弖�します

pin:{
latitude: 35.676564, latitude��業�longitude��U業�をDegree
title:"猟忖が燕幣されます", �g了で峺協します
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:'仇ビ�`ルダイニング舞�S梳ラ?カシェット',
address:'�|奨脅仟凡曝舞�S梳1-10', 旋喘して�業�U業參翌の
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'
お糾の秤�鵑��螢奪�気�
];
} た�Hに�輝のお糾の�業�U
業秤�鵑�
お糾の兆念、廖侭、�業、�U業、
Titanium.MapViewの
お糾の鮫�の隠贋枠のパスの秤��
setLocationメソッドを
を塘双で隠隔しておきます
聞ってlatitude,longitudeを
�O協しなおす


温沿沿.逮壊の園鹿

// 福待 // �Aき
win1.title = 'レストランブック'; var container = [];
var shopAddress = [
var len = shopAddress.length;
{
name:'仇ビ�`ルダイニング舞�S梳ラ?カシェット',
for(var i=0;i<len;i++){
address:'�|奨脅仟凡曝舞�S梳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に貧�伏撹した
// 嘔に�Aきます
containerを局しお糾の匯�E秤�鵑��泙譴�
TableViewを伏撹します


顎庄/顎庄.逮壊の園鹿�

var $$ = require('ui/styles').prop;
var exports = {
createAddressRow:function(address){ TableViewRowをクリックした�Hに�業、�U業
var row = Ti.UI.createTableViewRow($$.viewRow); 秤�鵑鯣ゝ辰任④襪茲Δ砲泙困�dataプロパティ
row.data = address; に哈方のaddressをそのまま旗秘します
row.addEventListener('click', function(e){ クリック�rに�k諮するイベントを�O協します。
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�v方を旋喘して�輝のお
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;
},


顎庄/顎庄.逮壊の園鹿�

createTableView:function(rows){ お糾の匯�E秤�鵑��泙譴�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�v方について
// 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 旋喘して、�業�U業秤�鵑鰓捏O協��輝の��
});
} まで徭�啜弔縫好�踪`ルします


顎庄/壊岳霞鉛艶壊.逮壊の園鹿

// 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
}
};

オリジナル�C嬬�g廾
にむけてのアイデア
? �^肇函り貧げてない�C嬬もあるが、參
和のような�泣でオリジナル�C嬬�g廾
にチャレンジしてみてください
? お糾の秤��
? 廖侭★�業�U業秤��Qしてく
れるサ�`ビスを試喘�http://
www.geocoding.jp/api/�
? SQLiteを聞ってお糾の秤�鵑燐i
み��苗椶砲垢�
? ユ�`ザインタフェ�`ス
? お糾秤�鵐�螢奪�晥㍍聨w卞し
て仇�蹐魃輅�

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


歌深�Y創

? WEB+DB PRESS Vol.57?蒙鹿3スマ�`トフォンでもケ�`タイでも��堀��了崔秤
�鵐稀`ビス
? http://amzn.to/zAHI46
? On HTML5 Field? [及4指] DEVICE ACCESS (Geolocation API /
DeviceOrientation Event)


際際滷

20120125 titanium study

More Related Content

20120125 titanium study