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

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

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

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

14

 C:¥IketeruGourmet¥src直下にIketeruGourmet.swf
が作成されます。

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

15

コマンドプロンプトで
→のコマンドを実行
adl application.xml
すると・・・

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

16

17

Google Maps API for Flashを使って、地図を
表示する画面を作りましょう。

こんな画面を表示
しましょう。

18

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

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




21

adl application.xml
すると・・・


22

23

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

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





26

adl application.xml
すると・・・


27

28

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

その２

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

その３

前ページの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

その１

<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

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





36

adl application.xml

検索ボタンをクリックすると・・・
↑のコマンドを実行
して画面を表示

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

37

38

地図上に表示されたマーカーをクリックすると、
該当の店舗情報が吹き出しに表示されるように
しましょう。
※吹き出しに表示するのは、
・食べログの情報：店名、住所、電話番号、URL
・第１部にて自分で登録した情報：メモ、画像
の６項目です。

39

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; quot; +
quot;住所：quot;+ result.address + quot; quot; +
quot;TEL：quot;+ result.tel + quot; quot; +
quot;URL：quot;+ quot;<a href='quot; + result.tabelog_url + quot;'>ココをクリック！</a>quot; + quot; quot;;
if(result.memo != null && result.memo != quot;quot;) {
= infoWindowOptions.contentHTML + quot;メモ：quot; + result.memo + quot; quot;;
}
if(result.image_url != null && result.image_url != quot;quot;) {
= infoWindowOptions.contentHTML + quot;画像：quot; + quot;<a href='quot; + result.image_url + quot;'>ココをクリック！</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





41

adl application.xml

↑のコマンドを実行
して画面を表示

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

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

42

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

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

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

Semelhante a 20090418 イケテルRails勉強会第2部Air編 (20)

Último

Último (20)