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

2009年4月18日
Ruby Business Commons
根之木礼司

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

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

3

 AIRアプリケーションの作成方法に
ついて解説します。

①プロジェクト作成
②コーディング
③コンパイル
④アプリケーション実行

4

 Flex Builder等の統合開発環境(IDE)を使わなくても、
以下の手順だけでプロジェクトを作成することができ
ます。

①任意の場所にフォルダを新規作成する。
②AIRアプリケーション記述ファイルを作成し、上記①
で作成したフォルダ直下に配置する。

今回の場合、Cドライブ
直下に作成したIketeruGourmetフォルダ
がプロジェクトです。

今回の場合、application.xmlが
AIRアプリケーション記述ファイルです。

6

 今回の勉強会では、以下のファイルも予め準備
しました。

①iconsフォルダ
⇒AIRパッケージ用のアイコンを格納。
②libsフォルダ
⇒Google Maps API for Flashを使用する為のライブラリ
map_flex_1_9.swcを格納。
③srcフォルダ
⇒Adobe Flexサンプル(dashboard)のプログラムを格納。
※イケテル勉強会向けに改造済。
④IketeruGourmet.p12ファイル
⇒AIRパッケージ作成時に必要な自己署名入り証明書。
7

 AIRアプリケーション記述ファイルはXMLで記述します。
今回の勉強会で使用したapplication.xml の内容は以下の
通りです。
<?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
必要なAIRランタイムのバージョン ※必頇
<application xmlns=quot;http://ns.adobe.com/air/application/1.5quot;>
<id>IketeruGourmet</id> アプリケーションID ※必頇

<filename>IketeruGourmet</filename> アプリケーションのファイル名 ※必頇
<name>IketeruGourmet</name>
インストーラに表示されるタイトル
<version>v1</version>
<initialWindow> アプリケーションのバージョン ※必頇
<content>src/IketeruGourmet.swf</content>
メインコンテンツファイル
<visible>false</visible>
</initialWindow> 成したメインウィンドウを直ちに表示したい
場合はtrueを設定。
<icon>
<image16x16>/icons/AIRApp_16.png</image16x16> アプリケーションで使用するアイコンファイル
<image32x32>/icons/AIRApp_32.png</image32x32>
</icon>
</application>
8

 まずは、メインとなるMXMLファイルが必要です。
必ず１つは作成しましょう。

今回の場合、赤枠の部分（画面全体）が
IketeruGourmet.mxmlというメインのMXMLで実装されて
います。

10

 メインとなるMXMLファイルはWindowedApplication
コンポーネントを使用して実装します。
IketeruGourmet.mxmlの最初と最後は
WindowedApplicationコンポーネントの
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> タグで括られています。
<mx:WindowedApplication
xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
xmlns:rbc=quot;rbc.view.*quot;
title=quot;イケテルRails勉強会quot;
status=quot;Day by day, in every way, I'm getting better and better.“
minWidth=quot;1200quot; minHeight=quot;700quot;
width=quot;100%quot; height=quot;100%quot;
backgroundSize=quot;100%quot;
applicationComplete=quot;onApplicationComplete()quot;>

～～～～～中略～～～～～～

</mx:WindowedApplication>

【注意！】文字コードはUTF-8を使用してください！
11

 コーディングには、MXMLとActionScript
を使います。
MXMLとActionScriptの使い方は以下の
通りです。

・MXML
⇒ 画面をデザインする時に使用。
・ActionScript
⇒ プログラムを書く時に使用。
12

 MXMLファイルにActionScriptを書きたい場合は、
Scriptタグ内に書いてください。
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<mx:WindowedApplication
xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
title=quot;イケテルRails勉強会補習quot;
Addファンクションはcalボタンを
width=quot;100%quot; height=quot;100%quot;
クリックした時に実行されます。
layout=quot;absolutequot;>

<mx:Script>
<![CDATA[
private function add():void {
c.text = String(Number(a.text) + Number(b.text));
}
]]>
</mx:Script>

<mx:TextInput id=quot;aquot; x=quot;10quot; y=quot;10quot; width=quot;40quot; height=quot;20quot; text=quot;1quot;/>
<mx:TextInput id=quot;bquot; x=quot;60quot; y=quot;10quot; width=quot;40quot; height=quot;20quot; text=quot;2quot;/>
<mx:TextInput id=quot;cquot; x=quot;110quot; y=quot;10quot; width=quot;40quot; height=quot;20quot; editable=quot;falsequot;/>
<mx:Button id=quot;calquot; label=quot;Addquot; x=quot;10quot; y=quot;40quot; width=quot;60quot; height=quot;20quot; click=quot;add()quot;/>
</mx:WindowedApplication>
13

 前ページのMXMLファイルをコンパイルして実行する
と、以下の画面が表示されます。

「Add」ボタンをクリック左側のテキストボックスの
すると・・・加算結果が表示されます。

14

 MXMLやActionScriptには沢山のクラスがあります。
調べる際には以下のサイトを利用してみてください。

・Adobe Flex3 リファレンスガイド
http://livedocs.adobe.com/flex/3_jp/langref/

⇒ クラスの一覧と使い方が掲載されています。

・Adobe Flex 3 Component Explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html

⇒ クラスの使い方の実例が掲載されています。

15

 コンパイルのコマンドオプションについて説明します。

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

① ② ③
①メインのMXMLファイルを指定します。
②swfファイルの出力先と名称を指定します。
※ AIRアプリケーション記述ファイルのcontentタグに記述した
名称を指定しましょう。
③コンパイル時に参照するライブラリを指定します。
※今回は、Google Maps API for Flashのライブラリを指定して
います。
【注意！】
上記①～③のファイルは、プロジェクトルートからの相対パス
で指定する必要があります。
17

 アプリケーション実行のコマンドオプションについて説明します。

adl application.xml
①

① AIRアプリケーション記述ファイルを指定します。

【注意！】
上記①のファイルは、プロジェクトルートからの相対パス
で指定する必要があります。

19

20

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

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

21

※今回の場合
 Google Maps API for Flashの使い方
①http://code.google.com/intl/ja/apis/maps/documentation/flash/index.htmlにアクセス。
②API Keyを取得する。
③SDKをダウンロードして解凍する。
④解凍したフォルダ内のmap_flex_1_9.swcをC:¥IketeruGourmet¥libs
に配置する。
⑤コンパイル時にmap_flex_1_9.swcをライブラリパスに指定する。

このファイルのおかげで、Google Maps API for Flashが使える
ようになる。
※いつの間にかバージョンアップしているので、ファイル名
が異なる場合アリ。
（2009年4月18日現在の最新バージョンはmap_flex_1_9.swc）

22

 <maps:Map
id=quot;map“
API Key取得時に指定した
width=quot;100%“ URLを設定する。

height=quot;100%“
url=quot;http://localhost/quot;
key=quot;ABQIAAAA3hk8tSWJBtrv7SdGaRNVahT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSwJelIuU1E96KfDhGIXqqayaU9HAquot;
mapevent_mapready=quot;displayMap(event)quot;
API Keyを設定する。
/>
Google Mapsが表示される時に実行する
ファンクションを指定する。

23

 map.setCenter( 地図の中心を定義する。
引数１：緯度・経度
new LatLng(35.690137,139.692836), ⇒警固公園辺りを設定
引数２：ズームレベル
16, 引数３：地図タイプ
⇒「NORMAL_MAP_TYPE：地図」を設定
MapType.NORMAL_MAP_TYPE); ※その他に
HYBRID_MAP_TYPE：地図＋写真
PHYSICAL_MAP_TYPE：地形
SATELLITE_MAP_TYPE：航空写真

 map.addControl(new ZoomControl());
拡大縮小コントロールを表示する。

 map.addControl(new PositionControl());
位置コントロールを表示する。

 map.addControl(new MapTypeControl());
地図選択コントロールを表示する。

24

25

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

26

 属性visibleにquot;truequot;を設定した列のみが画面に表示される。
また、属性dataFieldの値はRailsから返ってきたデータ（XML）のタグ名
と合わせている。

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

27

28

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

29

 var httpService:HTTPService = new HTTPService();
⇒ Railsと通信する為のオブジェクトを生成する。
 httpService.url = quot;http://localhost:3000/restaurants.xmlquot;;
⇒ RailsへのリクエストURLを設定する。
 httpService.resultFormat = HTTPService.RESULT_FORMAT_E4X;
⇒ Railsから返されるデータ形式を設定する。
※今回は、XML形式でデータを返してもらうように設定する。
 httpService.addEventListener(ResultEvent.RESULT, resultHandler);
⇒ Railsとの通信に成功した場合に実行するファンクション名を
設定する。
 httpService.addEventListener(FaultEvent.FAULT, faultHandler);
⇒ Railsとの通信に失敗した場合に実行するファンクション名を
設定する。

30

 var parameters:Object = new Object();
⇒ Railsへ渡すパラメータのオブジェクトを生成する。
 parameters.Prefecture = cboPrefecture.selectedItem.data;
⇒ パラメータ１：コンボボックスで選択した都道府県をパラメータ
に設定する。
 parameters.SortOrder = cboSortOrder.selectedItem.data;
⇒ パラメータ２：コンボボックスで選択した並び順をパラメータに
設定する。
 parameters.PageNum = cboPage.selectedItem.data;
⇒ パラメータ３：コンボボックスで選択したページをパラメータに
設定する。
 parameters.ResultSet = quot;largequot;;
⇒ パラメータ４：結果形式を設定する。
※今回は、食べログAPIで定義されている“large”を設定する。
 httpService.send(parameters);
⇒ Railsと通信を行う。
31

 var itemList:XMLList = e.result.Items.Item;
⇒ Railsから返ってきたデータをXMLListという型の変数itemList
に代入する。

 sharedVariable.searchResult = this.xmlListToArrayCollection(itemList);
⇒ ①itemListをxmlListToArrayCollectionというファンクションに
渡してArrayCollectionという型に変換する。
②上記①で変換したArrayCollectionをsharedVariableオブジェクト
のsearchResultに代入する。
※これにより、 GoogleMaps.mxmlとSearchResult.mxmlの
onChangeSharedVariableファンクションが実行される。

何故そんなことが起こるのか？には理由があるのですが、今回は
時間の都合上説明を割愛します。
「事前に準備しておいたプログラムにそのように動作するような
仕組みが仕込んであったんだな。」
と思っておいてください。
32

 map.clearOverlays();
⇒ 地図上のマーカーをクリアする。

 var marker:Marker
= new Marker(
new LatLng(result.latitude, result.longitude),
new MarkerOptions({draggable:true, hasShadow:true}));
⇒ 検索結果の緯度・経度上にマーカーを生成する。
その際に、マーカーの属性として、
①マーカーをドラッグで移動可能
②マーカーに陰影をつける
を設定する。

 map.addOverlay(marker);
⇒ マーカーを地図上に表示する。
33

 dataGrid.dataProvider = sharedVariable.searchResult;
⇒ Railsから返ってきたデータを検索結果一覧に表示する。
※<mx:DataGridColumn>の属性dataFieldの値とRailsから返って
きたデータ（XML）のタグ名を合わせているのがポイント。
これにより、↑のようにコーディングが楽になっている。
<mx:DataGridColumn headerText=quot;名称quot; dataField=quot;restaurant_namequot;
<mx:DataGridColumn headerText=quot;URLquot; dataField=quot;tabelog_urlquot;
<mx:DataGridColumn headerText=quot;総合評価quot; dataField=quot;total_scorequot;
<mx:DataGridColumn headerText=quot;料理・味quot; dataField=quot;taste_scorequot;
<mx:DataGridColumn headerText=quot;サービスquot; dataField=quot;service_scorequot;
<mx:DataGridColumn headerText=quot;雰囲気quot; dataField=quot;mood_score”

34

35

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

36

marker.addEventListener(MapMouseEvent.CLICK, ファンクション);

⇒ マーカーがクリックされた時に実行されるファンクションを定義する。

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;;
⇒ 吹き出しに表示する文言を設定する。

infoWindowOptions.width = 350;

⇒ 吹き出しの幅を設定する。

marker.openInfoWindow(infoWindowOptions);

⇒ infoWindowOptionsに定義されている情報を元に吹き出しを表示する。
37

38

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

39

 AIRパッケージ作成のコマンドオプションについて説明します。

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

① ② ③ ④

①自己署名入り証明書とパスワードを指定します。
②作成するAIRファイルの名称を指定します。
③AIRアプリケーション記述ファイルを指定します。
④AIRファイルにパッケージ化するファイルやディレクトリを
指定します。
空白文字で区切って、任意の数のファイルとディレクトリを
指定できます。

40

 Adobe Flex3 リファレンスガイド
⇒ http://livedocs.adobe.com/flex/3_jp/langref/

 Adobe Flex3 ヘルプ
⇒ http://livedocs.adobe.com/flex/3_jp/html/help.html

 Adobe Flex3 デベロッパーセンター
⇒ http://www.adobe.com/jp/devnet/flex/

41

RBC には「rbc-incubator」というQ&A
窓口があります。
本日の内容で分からないことがあれば、
rbc-incubator@googlegroups.com
までメールをお送りください。

43

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (7)

Similaire à 20090418 イケテルRails勉強会第2部Air編解説

Similaire à 20090418 イケテルRails勉強会第2部Air編解説 (20)

Dernier

Dernier (20)