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

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








11


まずは、プロジェクトを作成しましょう。※本当は、

・AIRアプリケーション記述ファイルの作成

・Google Maps API for Flashを使う為の準備

等が必要ですが、今回は時間の都合上、事前に準備した

プロジェクトを使います。

また、開発環境・実行環境が正しく構築できて

いるか確認してみましょう。

12

配布資料のIketeruGourmetフォルダをCドライブ

直下にコピーしてください。

13

時間の都合上、事前に準備したプロジェクトを使用して進行していきます。

コンパイルしましょう。

amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf

設定ファイル "D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air-config.xml" をロードしていますC:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes)

コマンドプロンプトを起動後、C:¥IketeruGourmetに移動してコマンドを実行してください。

このメッセージが表示されたら、コンパイルOK。

14

C:¥IketeruGourmet¥src直下にIketeruGourmet.swf

が作成されます。

15

コンパイル実行後コンパイル実行前

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

16

adl application.xml

コマンドプロンプトで→のコマンドを実行

すると・・・








17


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:Mapid="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><![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>

前ページの<PodContentBase>タグと<maps>タグの間に全て追加してください。

20


amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf -library-path+=libs/map_flex_1_9.swc




21


すると・・・


22

adl application.xml








23


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






26


すると・・・


27

adl application.xml








28



Action Scriptを使って、検索ボタンをクリック

した時に動作するプログラムを書きましょう。※検索ボタンをクリックすると、以下のことができるように

します。

・検索条件をRailsに渡して、検索してもらう。

・検索結果の店舗の場所を地図上に表示する。

・検索結果を一覧表示する。

29

src/rbc/view/SearchCondition.mxml その１


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 その３

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

前ページのonClickBtnSearchの後に全て追加してください。

src/rbc/view/GoogleMaps.mxml その１


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);

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

displayMapの後に全て追加してください。

34

src/rbc/view/SearchResult.mxml


import mx.events.PropertyChangeEvent;

override protected function onChangeSharedVariable(e:PropertyChangeEvent):void {dataGrid.dataProvider = sharedVariable.searchResult;

}]]></mx:Script>

<mx:DataGrid>タグの前に全て追加してください。

35






36

検索ボタンをクリックすると・・・

検索結果が表示されます。

37

コマンドプロンプトで↑のコマンドを実行

して画面を表示

adl application.xml








38



地図上に表示されたマーカーをクリックすると、

該当の店舗情報が吹き出しに表示されるように

しましょう。※吹き出しに表示するのは、

・食べログの情報：店名、住所、電話番号、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






41

42

コマンドプロンプトで↑のコマンドを実行

して画面を表示

adl application.xml

マーカーをクリックすると・・・

該当マーカーが地図の中央に移動して、吹き出しが表示されます。








43


AIRでは、インストールファイルを作ることが

できます。

今回作成したアプリケーションでインストール

ファイルを作り、実際にインストールしてみま

しょう。

44

AIRパッケージを作成しましょう。

adt -package -storetype pkcs12 -keystore IketeruGourmet.p12 -storepass iketeru IketeruGourmet.air application.xml icons libs src

C:¥IketeruGourmet>

次のプロンプトが表示されたら、OK。

45


C:¥IketeruGourmet直下に IketeruGourmet.airが

作成されます。

46

コマンド実行前コマンド実行後

① IketeruGourmet.airをダブルクリック

②インストーラが起動するので、「インストール」をクリック

③「続行」をクリック

④インストールが完了すると・・・

47

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

48

Technology

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

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