20090418 イケテルRails勉強会 第2部Air編

1,476 views

Published on

http://www.ustream.tv/channel/rubybizcommons
2009年4月18日に行われたイケテルRails勉強会@東京の第2部資料。
作成者はレイジ氏。

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,476
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

20090418 イケテルRails勉強会 第2部Air編

  1. 1. April 18, 2009 Ruby Business Commons Reiji Nenoki
  2. 2. Adobe Flexのサンプルを改造して・・・ http://examples.adobe.com/flex3/devnet/dashboard/main.html 2
  3. 3. ↓のデスクトップ・アプリケーションを作ります。 3
  4. 4. 作るのは、赤枠の部分です。 4
  5. 5.  第2部の目的は、以下の2点です。 ①Google Maps API for Flashを使ってみよう! ②第1部で作成したRailsアプリケーションと 連携させて、食べログの情報や自分で登録 した情報を画面に表示しよう! 5
  6. 6.  Adobe Systems が開発する、デスクトップ・リッチ インターネットアプリケーション (RIA) を開発・ 実行するための複数のオペレーティングシステム に対応したランタイムライブラリである。 ※リッチインターネットアプリケーション ⇒ウェブブラウザなどのクライアントの機能を活かした、柔軟な インターフェースをもつウェブアプリケーションのこと。 (Wikipediaより) 6
  7. 7.  リッチインターネットアプリケーションの統合開発 環境とSDK。 デザインにはMXML(Macromedia Flex Markup Language. Macromedia Flexのプレゼンテーションを 記述するためのXML言語)を利用し、プログラムに はActionScriptを利用し、Flash Player上で実行する swfファイルを生成する。 Flex3からはAIR上でも実行可能。 (Wikipediaより) 統合開発環境(IDE)としてはFlex Builderが有名ですが、 今回はIDEを使用せずにコマンドラインで開発します。 7
  8. 8.  AIRは実行環境、Flexは開発環境。  Flexで提供されるMXMLとAction Scriptを使って開発 を行う。 ※MXMLで画面をデザインする。 Action Scriptでプログラムを書く。  コンパイルしてswfファイルを作る。  デスクトップ・アプリケーションはAIR上で実行。 WebアプリケーションはFlash Player上で実行。 8
  9. 9.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 9
  10. 10.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 11
  11. 11.  プロジェクトを作成する。 まずは、プロジェクトを作成しましょう。 ※本当は、 ・AIRアプリケーション記述ファイルの作成 ・Google Maps API for Flashを使う為の準備 等が必要ですが、今回は時間の都合上、事前に準備した プロジェクトを使います。 また、開発環境・実行環境が正しく構築できて いるか確認してみましょう。 12
  12. 12.  配布資料のIketeruGourmetフォルダをCドライブ 直下にコピーしてください。 時間の都合上、事前に準備したプロジェクトを使用して 進行していきます。 13
  13. 13.  コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動して コマンドを実行してください。 設定ファイル quot;D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xmlquot; をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、 コンパイルOK。 14
  14. 14.  C:¥IketeruGourmet¥src直下 にIketeruGourmet.swf が作成されます。 コンパイル実行前 コンパイル実行後 15
  15. 15. コマンドプロンプトで →のコマンドを実行 adl application.xml すると・・・ ↓の画面が表示されます。 16
  16. 16.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 17
  17. 17.  検索結果位置情報画面を表示する。 Google Maps API for Flashを使って、地図を 表示する画面を作りましょう。 こんな画面を表示 しましょう。 18
  18. 18. その1  src/rbc/view/GoogleMaps.mxml <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <PodContentBase 赤色の部分を追加 してください。 xmlns=quot;rbc.view.*quot; xmlns:maps=quot;com.google.maps.*quot; xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; width=quot;100%quot; height=quot;100%quot;> <maps:Map id=quot;mapquot; width=quot;100%quot; height=quot;100%quot; url=quot;http://localhost/quot; key=quot;ABQIAAAA3hk8tSWJBtrv7SdGaRNVahT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSwJelIuU1E96KfDhGIXqqayaU9HAquot; mapevent_mapready=quot;displayMap(event)quot; /> </PodContentBase> 19
  19. 19. その2  src/rbc/view/GoogleMaps.mxml <mx:Script> 前ページの<PodContentBase>タグと<maps> <![CDATA[ タグの間に全て追加してください。 import com.google.maps.*; import com.google.maps.controls.*; private function displayMap(event:MapEvent):void { map.setCenter( new LatLng(35.690137,139.692836), 16, MapType.NORMAL_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); } ]]> </mx:Script> 20
  20. 20.  コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf - library-path+=libs/map_flex_1_9.swc コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動して コマンドを実行してください。 設定ファイル quot;D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xmlquot; をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、 コンパイルOK。 21
  21. 21. コマンドプロンプトで →のコマンドを実行 adl application.xml すると・・・ ↓の画面が表示されます。 22
  22. 22.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 23
  23. 23.  検索結果一覧画面を表示する。 MXMLを使って、Railsアプリケーションから 取得したデータを一覧表示する為の画面を作 りましょう。 こんな画面を表示 しましょう。 24
  24. 24.  src/rbc/view/SearchResult.mxml <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <PodContentBase 赤色の部分を追加 xmlns=quot;rbc.view.*quot; してください。 xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; width=quot;100%quot; height=quot;100%quot;> <mx:DataGrid id=quot;dataGridquot; width=quot;100%quot; height=quot;100%quot;> <mx:columns> <mx:DataGridColumn headerText=quot;名称quot; dataField=quot;restaurant_namequot; visible=quot;truequot; width=quot;180quot;/> <mx:DataGridColumn headerText=quot;URLquot; dataField=quot;tabelog_urlquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;総合評価quot; dataField=quot;total_scorequot; visible=quot;truequot; width=quot;45quot;/> <mx:DataGridColumn headerText=quot;料理・味quot; dataField=quot;taste_scorequot; visible=quot;truequot; width=quot;45quot;/> <mx:DataGridColumn headerText=quot;サービスquot; dataField=quot;service_scorequot; visible=quot;truequot; width=quot;45quot;/> <mx:DataGridColumn headerText=quot;雰囲気quot; dataField=quot;mood_scorequot; visible=quot;truequot; width=quot;45quot;/> <mx:DataGridColumn headerText=quot;シチュエーションquot; dataField=quot;situationquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;価格(夜)quot; dataField=quot;dinner_pricequot; visible=quot;truequot; width=quot;90quot;/> <mx:DataGridColumn headerText=quot;価格(昼)quot; dataField=quot;lunch_pricequot; visible=quot;truequot; width=quot;90quot;/> <mx:DataGridColumn headerText=quot;カテゴリquot; dataField=quot;categoryquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;最寄り駅quot; dataField=quot;stationquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;住所quot; dataField=quot;addressquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;電話番号quot; dataField=quot;telquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;営業時間quot; dataField=quot;business_hoursquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;休日quot; dataField=quot;holidayquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;緯度quot; dataField=quot;latitudequot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;経度quot; dataField=quot;longitudequot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;メモquot; dataField=quot;memoquot; visible=quot;falsequot;/> <mx:DataGridColumn headerText=quot;画像quot; dataField=quot;image_urlquot; visible=quot;falsequot;/> </mx:columns> </mx:DataGrid> </PodContentBase> 25
  25. 25.  コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf - library-path+=libs/map_flex_1_9.swc コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動して コマンドを実行してください。 設定ファイル quot;D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xmlquot; をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、 コンパイルOK。 26
  26. 26. コマンドプロンプトで →のコマンドを実行 adl application.xml すると・・・ ↓の画面が表示されます。 27
  27. 27.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 28
  28. 28.  各イベントのアクションを実装する。 ①検索ボタンをクリック Action Scriptを使って、検索ボタンをクリック した時に動作するプログラムを書きましょう。 ※検索ボタンをクリックすると、以下のことができるように します。 ・検索条件をRailsに渡して、検索してもらう。 ・検索結果の店舗の場所を地図上に表示する。 ・検索結果を一覧表示する。 29
  29. 29. その1  src/rbc/view/SearchCondition.mxml <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; 赤色の部分を追加 してください。 import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; import mx.utils.ObjectProxy; import data.SearchConditionData; import rbc.managers.SharedVariable; 30
  30. 30. その2  src/rbc/view/SearchCondition.mxml private function onClickBtnSearch(e:MouseEvent):void { var httpService:HTTPService = new HTTPService(); httpService.url = quot;http://localhost:3000/restaurants.xmlquot;; httpService.resultFormat = HTTPService.RESULT_FORMAT_E4X; httpService.addEventListener(ResultEvent.RESULT, resultHandler); httpService.addEventListener(FaultEvent.FAULT, faultHandler); var parameters:Object = new Object(); parameters.Prefecture = cboPrefecture.selectedItem.data; parameters.SortOrder = cboSortOrder.selectedItem.data; parameters.PageNum = cboPage.selectedItem.data; parameters.ResultSet = quot;largequot;; httpService.send(parameters); } 赤色の部分を追加 してください。 31
  31. 31. その3  src/rbc/view/SearchCondition.mxml 前ページのonClickBtnSearchの後に 全て追加してください。 private function resultHandler(e:ResultEvent):void { var itemList:XMLList = e.result.items.item; sharedVariable.searchResult = this.xmlListToArrayCollection(itemList); } private function faultHandler(e:FaultEvent):void { Alert.show(quot;通信エラーが発生しました!¥nquot; + e.toString()); } 32
  32. 32. その1  src/rbc/view/GoogleMaps.mxml <mx:Script> <![CDATA[ 赤色の部分を追加 import com.google.maps.*; してください。 import com.google.maps.controls.*; import com.google.maps.overlays.Marker; import com.google.maps.overlays.MarkerOptions; import mx.collections.ArrayCollection; import mx.events.PropertyChangeEvent; import mx.utils.ObjectProxy; 33
  33. 33. その2  src/rbc/view/GoogleMaps.mxml override protected function onChangeSharedVariable(e:PropertyChangeEvent):void { map.clearOverlays(); var result:ArrayCollection = sharedVariable.searchResult; for(var i:Number=0; i<result.length; i++) { if(i==0) { map.setCenter( new LatLng(result[i].latitude, result[i].longitude), 16, MapType.NORMAL_MAP_TYPE); } displayMapの後に全て this.addMarker(result[i], i); 追加してください。 } } private function addMarker(result:ObjectProxy, index:Number):void { var marker:Marker = new Marker( new LatLng(result.latitude, result.longitude), new MarkerOptions({draggable:true, hasShadow:true})); map.addOverlay(marker); } 34
  34. 34.  src/rbc/view/SearchResult.mxml <mx:DataGrid>タグの前に 全て追加してください。 <mx:Script> <![CDATA[ import mx.events.PropertyChangeEvent; override protected function onChangeSharedVariable(e:PropertyChangeEvent):void { dataGrid.dataProvider = sharedVariable.searchResult; } ]]> </mx:Script> 35
  35. 35.  コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf - library-path+=libs/map_flex_1_9.swc コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動して コマンドを実行してください。 設定ファイル quot;D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xmlquot; をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、 コンパイルOK。 36
  36. 36. adl application.xml コマンドプロンプトで 検索ボタンをクリックすると・・・ ↑のコマンドを実行 して画面を表示 検索結果が表示されます。 37
  37. 37.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 38
  38. 38.  各イベントのアクションを実装する。 ②地図上のマーカーをクリック 地図上に表示されたマーカーをクリックすると、 該当の店舗情報が吹き出しに表示されるように しましょう。 ※吹き出しに表示するのは、 ・食べログの情報:店名、住所、電話番号、URL ・第1部にて自分で登録した情報:メモ、画像 の6項目です。 39
  39. 39.  src/rbc/view/GoogleMaps.mxml private function addMarker(result:ObjectProxy, index:Number):void { var marker:Marker = new Marker( 赤色の部分を追加 new LatLng(result.Latitude, result.Longitude), してください。 new MarkerOptions({draggable:true, hasShadow:true})); marker.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void { var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions(); infoWindowOptions.contentHTML = quot;店名:quot;+ result.restaurant_name + quot;<br/>quot; + quot;住所:quot;+ result.address + quot;<br/>quot; + quot;TEL:quot;+ result.tel + quot;<br/>quot; + quot;URL:quot;+ quot;<a href='quot; + result.tabelog_url + quot;'><b>ココをクリック!</b></a>quot; + quot;<br/>quot;; if(result.memo != null && result.memo != quot;quot;) { infoWindowOptions.contentHTML = infoWindowOptions.contentHTML + quot;メモ:quot; + result.memo + quot;<br/>quot;; } if(result.image_url != null && result.image_url != quot;quot;) { infoWindowOptions.contentHTML = infoWindowOptions.contentHTML + quot;画像:quot; + quot;<a href='quot; + result.image_url + quot;'><b>ココをクリック!</b></a>quot;; } infoWindowOptions.width = 350; marker.openInfoWindow(infoWindowOptions); map.setCenter(new LatLng(result.latitude, result.longitude), 16, MapType.NORMAL_MAP_TYPE); } ); map.addOverlay(marker); } 40
  40. 40.  コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf - library-path+=libs/map_flex_1_9.swc コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動して コマンドを実行してください。 設定ファイル quot;D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xmlquot; をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、 コンパイルOK。 41
  41. 41. adl application.xml コマンドプロンプトで ↑のコマンドを実行 して画面を表示 マーカーをクリックすると・・・ 該当マーカーが地図の中央に移動して、 吹き出しが表示されます。 42
  42. 42.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 43
  43. 43.  AIRパッケージを作成する。 AIRでは、インストールファイルを作ることが できます。 今回作成したアプリケーションでインストール ファイルを作り、実際にインストールしてみま しょう。 44
  44. 44.  AIRパッケージを作成しましょう。 adt -package -storetype pkcs12 -keystore IketeruGourmet.p12 - storepass iketeru IketeruGourmet.air application.xml icons libs src コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動して コマンドを実行してください。 C:¥IketeruGourmet> 次のプロンプトが表示 されたら、OK。 45
  45. 45.  C:¥IketeruGourmet直下に IketeruGourmet.airが 作成されます。 コマンド実行前 コマンド実行後 46
  46. 46. ②インストーラが起動するので、 「インストール」をクリック ① IketeruGourmet.air をダブルクリック ③「続行」をクリック ④インストールが 完了すると・・・ 47
  47. 47. ⑤↓の画面が表示されます。 48

×