位置情報と連携したアプリ開発              http://www.flickr.com/photos/normanbleventhalmapcenter/2674845313/12年1月22日日曜日
今回の狙い  ✤   位置情報と連携したアプリ開発      を通じてMapViewの使い方に      ついて学びます  ✤   今回作るアプリをベースにし      て、次回各自でオリジナル機能      の実装にチャレンジしてもらい   ...
今回作るアプリのイメージ  ✤   過去の勉強会で取り上げたTableView      の機能を使ってお店の一覧情報を表示  ✤   今回説明するMapView機能も活用し、      お店の情報をクリックしたら該当する      場所の地図...
はじめに位置情報の基礎              http://www.flickr.com/photos/avlxyz/4999120709/12年1月22日日曜日
位置情報基礎知識①  緯度経度と単位                                            緯度(latitude)は赤道を0度として                                       ...
位置情報基礎知識②  測地系  ✤   同じ場所でも利用する測地系(datum)によって緯度経度の値が変わる。日本で気に      する必要があるのは以下2つ      ✤   日本測地系      ✤   世界測地系  ✤   日本では200...
位置情報基礎知識③  位置情報取得方法                            測位方式              GPS          基地局測位           Wi-Fi測位              高      ...
MapViewって何?  ✤   スマートフォンならではの地図表示を行      える機能  ✤   Titanium Mobileでは      Titanium.Map.createViewというAPI      にて簡単に実装可能    ...
MapViewを使ったアプリ①  ✤   TitaniumStudioを起動した後、      File→New→Titanium Mobile Projectと      進みます  ✤   右記画面が表示されますので今回は以下入      ...
MapViewを使ったアプリ②  app.js                                               ui/styles.js  Titanium.UI.setBackgroundColor(#000); ...
MapViewを使ったアプリ③   MapViewのプロパティ解説   ※説明する都合上、下記のソースコードに適宜改行を入れています   //中略        mapView:{          width: 320,          h...
MapViewを使ったアプリ④  latitudeDelta、longitudeDeltaの数値を大きくすると広域表示になります              1.0       0.5          0.1            0.0512...
サンプルアプリを少しBrushUP              http://www.flickr.com/photos/craigsd/4687453830/12年1月22日日曜日
ズームイン/ズームアウトボタン配置&ピンの  表示  ✤   機能解説のために、あえてズームイン、      ズームアウトさせるためのボタンを配      置します      ✤   iPhoneシミュレータでoptionキー         ...
ズームイン/ズームアウトボタン配置&ピンの  表示(app.js)   ※先ほど作った20120125TiStudyプロジェクトをそのまま流用して作業を進めます   Titanium.UI.setBackgroundColor(#000);  ...
ズームイン/ズームアウトボタン配置&ピンの  表示(ui/ui.js)   uiフォルダを作成して、その配下にui.jsを配置。以下ソースコードを記述します   var exports = {     createZoomInBtn:funct...
ズームイン/ズームアウトボタンとピンのプロ  パティの設定(ui/styles.js)   styles.jsに以下追記します   // mapView:{..}の後に以下追記します    pin:{       latitude: 35.67...
Coffee Break!                  http://www.flickr.com/photos/windsordi/3273502072/12年1月22日日曜日
最終的に作るアプリのポイント   var shopAddress = [     {                                    Titanium.UI.TableViewを       name:地ビールダイニング神...
app.jsの編集   // 省略                             // 続き   win1.title = レストランブック;          var container = [];   var shopAddres...
ui/ui.jsの編集①    var $$ = require(ui/styles).prop;    var exports = {      createAddressRow:function(address){             ...
ui/ui.jsの編集②         createTableView:function(rows){                          お店の一覧情報が含まれたTableViewRowが複           var len...
ui/styles.jsの編集   // zoomBtn:{..}の後に以下追記します        tableView:{          width: 320,          height:200,          top:0,  ...
オリジナル機能実装  にむけてのアイデア  ✤   過去取り上げてない機能もあるが、以      下のような視点でオリジナル機能実装      にチャレンジしてみてください      ✤   お店の情報          ✤   住所→緯度経度...
参考資料  ✤   WEB+DB PRESS Vol.57 特集3スマートフォンでもケータイでも![速習]位置情      報サービス      ✤   http://amzn.to/zAHI46  ✤   On HTML5 Field  [第...
Upcoming SlideShare
Loading in …5
×

20120125 titanium study

2,425 views

Published on

第四回目のTitanium勉強会資料

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,425
On SlideShare
0
From Embeds
0
Number of Embeds
974
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

20120125 titanium study

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

×