20120125 titanium study
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

20120125 titanium study

on

  • 2,706 views

第四回目のTitanium勉強会資料

第四回目のTitanium勉強会資料

Statistics

Views

Total Views
2,706
Views on SlideShare
1,682
Embed Views
1,024

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 1,024

http://www.street-academy.com 1024

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

20120125 titanium study Presentation Transcript

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