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

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

April 18, 2009 Ruby Business Commons Reiji Nenoki

Adobe Flexのサンプルを改造して・・・ http://examples.adobe.com/flex3/devnet/dashboard/main.html 2

↓のデスクトップ・アプリケーションを作ります。 3

作るのは、赤枠の部分です。 4

 第２部の目的は、以下の２点です。 ①Google Maps API for Flashを使ってみよう！ ②第１部で作成したRailsアプリケーションと連携させて、食べログの情報や自分で登録した情報を画面に表示しよう！ 5

 Adobe Systems が開発する、デスクトップ・リッチインターネットアプリケーション (RIA) を開発・実行するための複数のオペレーティングシステムに対応したランタイムライブラリである。 ※リッチインターネットアプリケーション ⇒ウェブブラウザなどのクライアントの機能を活かした、柔軟なインターフェースをもつウェブアプリケーションのこと。（Wikipediaより） 6

 リッチインターネットアプリケーションの統合開発環境とSDK。デザインにはMXML（Macromedia Flex Markup Language. Macromedia Flexのプレゼンテーションを記述するためのXML言語）を利用し、プログラムにはActionScriptを利用し、Flash Player上で実行する swfファイルを生成する。 Flex3からはAIR上でも実行可能。（Wikipediaより）統合開発環境(IDE)としてはFlex Builderが有名ですが、今回はIDEを使用せずにコマンドラインで開発します。 7

 AIRは実行環境、Flexは開発環境。  Flexで提供されるMXMLとAction Scriptを使って開発を行う。 ※MXMLで画面をデザインする。 Action Scriptでプログラムを書く。  コンパイルしてswfファイルを作る。  デスクトップ・アプリケーションはAIR上で実行。 WebアプリケーションはFlash Player上で実行。 8

 プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 9

 プロジェクトを作成する。まずは、プロジェクトを作成しましょう。 ※本当は、・AIRアプリケーション記述ファイルの作成・Google Maps API for Flashを使う為の準備等が必要ですが、今回は時間の都合上、事前に準備したプロジェクトを使います。また、開発環境・実行環境が正しく構築できているか確認してみましょう。 12

 配布資料のIketeruGourmetフォルダをCドライブ直下にコピーしてください。時間の都合上、事前に準備したプロジェクトを使用して進行していきます。 13

 コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動してコマンドを実行してください。設定ファイル \"D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xml\" をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、コンパイルOK。 14

 C:¥IketeruGourmet¥src直下にIketeruGourmet.swf が作成されます。コンパイル実行前コンパイル実行後 15

コマンドプロンプトで →のコマンドを実行 adl application.xml すると・・・ ↓の画面が表示されます。 16

 検索結果位置情報画面を表示する。 Google Maps API for Flashを使って、地図を表示する画面を作りましょう。こんな画面を表示しましょう。 18

その１  src/rbc/view/GoogleMaps.mxml <?xml version=\"1.0\" encoding=\"utf-8\"?> <PodContentBase 赤色の部分を追加してください。 xmlns=\"rbc.view.*\" xmlns:maps=\"com.google.maps.*\" xmlns:mx=\"http://www.adobe.com/2006/mxml\" width=\"100%\" height=\"100%\"> <maps:Map id=\"map\" width=\"100%\" height=\"100%\" url=\"http://localhost/\" key=\"ABQIAAAA3hk8tSWJBtrv7SdGaRNVahT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSwJelIuU1E96KfDhGIXqqayaU9HA\" mapevent_mapready=\"displayMap(event)\" /> </PodContentBase> 19

その２  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

 コンパイルしましょう。 amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf - library-path+=libs/map_flex_1_9.swc コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動してコマンドを実行してください。設定ファイル \"D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air- config.xml\" をロードしています C:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes) このメッセージが表示されたら、コンパイルOK。 21

 検索結果一覧画面を表示する。 MXMLを使って、Railsアプリケーションから取得したデータを一覧表示する為の画面を作りましょう。こんな画面を表示しましょう。 24

 src/rbc/view/SearchResult.mxml <?xml version=\"1.0\" encoding=\"utf-8\"?> <PodContentBase 赤色の部分を追加 xmlns=\"rbc.view.*\" してください。 xmlns:mx=\"http://www.adobe.com/2006/mxml\" width=\"100%\" height=\"100%\"> <mx:DataGrid id=\"dataGrid\" width=\"100%\" height=\"100%\"> <mx:columns> <mx:DataGridColumn headerText=\"名称\" dataField=\"restaurant_name\" visible=\"true\" width=\"180\"/> <mx:DataGridColumn headerText=\"URL\" dataField=\"tabelog_url\" visible=\"false\"/> <mx:DataGridColumn headerText=\"総合評価\" dataField=\"total_score\" visible=\"true\" width=\"45\"/> <mx:DataGridColumn headerText=\"料理・味\" dataField=\"taste_score\" visible=\"true\" width=\"45\"/> <mx:DataGridColumn headerText=\"サービス\" dataField=\"service_score\" visible=\"true\" width=\"45\"/> <mx:DataGridColumn headerText=\"雰囲気\" dataField=\"mood_score\" visible=\"true\" width=\"45\"/> <mx:DataGridColumn headerText=\"シチュエーション\" dataField=\"situation\" visible=\"false\"/> <mx:DataGridColumn headerText=\"価格（夜）\" dataField=\"dinner_price\" visible=\"true\" width=\"90\"/> <mx:DataGridColumn headerText=\"価格（昼）\" dataField=\"lunch_price\" visible=\"true\" width=\"90\"/> <mx:DataGridColumn headerText=\"カテゴリ\" dataField=\"category\" visible=\"false\"/> <mx:DataGridColumn headerText=\"最寄り駅\" dataField=\"station\" visible=\"false\"/> <mx:DataGridColumn headerText=\"住所\" dataField=\"address\" visible=\"false\"/> <mx:DataGridColumn headerText=\"電話番号\" dataField=\"tel\" visible=\"false\"/> <mx:DataGridColumn headerText=\"営業時間\" dataField=\"business_hours\" visible=\"false\"/> <mx:DataGridColumn headerText=\"休日\" dataField=\"holiday\" visible=\"false\"/> <mx:DataGridColumn headerText=\"緯度\" dataField=\"latitude\" visible=\"false\"/> <mx:DataGridColumn headerText=\"経度\" dataField=\"longitude\" visible=\"false\"/> <mx:DataGridColumn headerText=\"メモ\" dataField=\"memo\" visible=\"false\"/> <mx:DataGridColumn headerText=\"画像\" dataField=\"image_url\" visible=\"false\"/> </mx:columns> </mx:DataGrid> </PodContentBase> 25

 各イベントのアクションを実装する。 ①検索ボタンをクリック Action Scriptを使って、検索ボタンをクリックした時に動作するプログラムを書きましょう。 ※検索ボタンをクリックすると、以下のことができるようにします。・検索条件をRailsに渡して、検索してもらう。・検索結果の店舗の場所を地図上に表示する。・検索結果を一覧表示する。 29

その１  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

その２  src/rbc/view/SearchCondition.mxml private function onClickBtnSearch(e:MouseEvent):void { var httpService:HTTPService = new HTTPService(); httpService.url = \"http://localhost:3000/restaurants.xml\"; 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 = \"large\"; httpService.send(parameters); } 赤色の部分を追加してください。 31

その３  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(\"通信エラーが発生しました！¥n\" + e.toString()); } 32

その１  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

その２  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

 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

adl application.xml コマンドプロンプトで検索ボタンをクリックすると・・・ ↑のコマンドを実行して画面を表示検索結果が表示されます。 37

 各イベントのアクションを実装する。 ②地図上のマーカーをクリック地図上に表示されたマーカーをクリックすると、該当の店舗情報が吹き出しに表示されるようにしましょう。 ※吹き出しに表示するのは、・食べログの情報：店名、住所、電話番号、URL ・第１部にて自分で登録した情報：メモ、画像の６項目です。 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 = \"店名：\"+ result.restaurant_name + \" \" + \"住所：\"+ result.address + \" \" + \"TEL：\"+ result.tel + \" \" + \"URL：\"+ \"<a href='\" + result.tabelog_url + \"'>ココをクリック！</a>\" + \" \"; if(result.memo != null && result.memo != \"\") { infoWindowOptions.contentHTML = infoWindowOptions.contentHTML + \"メモ：\" + result.memo + \" \"; } if(result.image_url != null && result.image_url != \"\") { infoWindowOptions.contentHTML = infoWindowOptions.contentHTML + \"画像：\" + \"<a href='\" + result.image_url + \"'>ココをクリック！</a>\"; } infoWindowOptions.width = 350; marker.openInfoWindow(infoWindowOptions); map.setCenter(new LatLng(result.latitude, result.longitude), 16, MapType.NORMAL_MAP_TYPE); } ); map.addOverlay(marker); } 40

adl application.xml コマンドプロンプトで ↑のコマンドを実行して画面を表示マーカーをクリックすると・・・該当マーカーが地図の中央に移動して、吹き出しが表示されます。 42

 AIRパッケージを作成する。 AIRでは、インストールファイルを作ることができます。今回作成したアプリケーションでインストールファイルを作り、実際にインストールしてみましょう。 44

 AIRパッケージを作成しましょう。 adt -package -storetype pkcs12 -keystore IketeruGourmet.p12 - storepass iketeru IketeruGourmet.air application.xml icons libs src コマンドプロンプトを起動後、 C:¥IketeruGourmetに移動してコマンドを実行してください。 C:¥IketeruGourmet> 次のプロンプトが表示されたら、OK。 45

 C:¥IketeruGourmet直下に IketeruGourmet.airが作成されます。コマンド実行前コマンド実行後 46

②インストーラが起動するので、「インストール」をクリック ① IketeruGourmet.air をダブルクリック ③「続行」をクリック ④インストールが完了すると・・・ 47

⑤↓の画面が表示されます。 48