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編

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

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

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

Recently uploaded

Recently uploaded (20)