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

2009年4月18日

Ruby Business Commons

根之木礼司

プロジェクトを作成する。

検索結果位置情報画面を表示する。

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

各イベントのアクションを実装する。

①検索ボタンをクリック

②地図上のマーカーをクリック

AIRパッケージを作成する。

2


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

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

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

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

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

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

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

3

AIRアプリケーションの作成方法に

ついて解説します。

①プロジェクト作成

②コーディング

③コンパイル

④アプリケーション実行

4

5

Flex Builder等の統合開発環境(IDE)を使わなくても、

以下の手順だけでプロジェクトを作成することができ

ます。

①任意の場所にフォルダを新規作成する。

②AIRアプリケーション記述ファイルを作成し、上記①

で作成したフォルダ直下に配置する。

6

今回の場合、Cドライブ直下に作成したIketeruGourmetフォルダ

がプロジェクトです。

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

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

しました。

①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 の内容は以下の

通りです。

8

<?xml version="1.0" encoding="utf-8" ?><application xmlns="http://ns.adobe.com/air/application/1.5">

<id>IketeruGourmet</id><filename>IketeruGourmet</filename><name>IketeruGourmet</name><version>v1</version><initialWindow>

<content>src/IketeruGourmet.swf</content><visible>false</visible>

</initialWindow><icon>

<image16x16>/icons/AIRApp_16.png</image16x16><image32x32>/icons/AIRApp_32.png</image32x32><image48x48>/icons/AIRApp_48.png</image48x48><image128x128>/icons/AIRApp_128.png</image128x128>

</icon></application>

必要なAIRランタイムのバージョン ※必頇

アプリケーションID ※必頇

アプリケーションのファイル名 ※必頇

インストーラに表示されるタイトル

アプリケーションのバージョン ※必頇

メインコンテンツファイル

成したメインウィンドウを直ちに表示したい場合はtrueを設定。

アプリケーションで使用するアイコンファイル

9

まずは、メインとなるMXMLファイルが必要です。

必ず１つは作成しましょう。

10

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

います。

メインとなるMXMLファイルはWindowedApplication

コンポーネントを使用して実装します。

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication

xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:rbc="rbc.view.*"title="イケテルRails勉強会"status="Day by day, in every way, I'm getting better and better.“minWidth="1200" minHeight="700"width="100%" height="100%"backgroundSize="100%"applicationComplete="onApplicationComplete()">

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

</mx:WindowedApplication>

11

IketeruGourmet.mxmlの最初と最後はWindowedApplicationコンポーネントの

タグで括られています。

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

コーディングには、MXMLとActionScript

を使います。

MXMLとActionScriptの使い方は以下の

通りです。

・MXML

⇒ 画面をデザインする時に使用。

・ActionScript

⇒ プログラムを書く時に使用。

12

MXMLファイルにActionScriptを書きたい場合は、

Scriptタグ内に書いてください。

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication

xmlns:mx="http://www.adobe.com/2006/mxml"title="イケテルRails勉強会補習"width="100%" height="100%"layout="absolute">

<mx:Script><![CDATA[private function add():void {

c.text = String(Number(a.text) + Number(b.text));}]]>

</mx:Script>

<mx:TextInput id="a" x="10" y="10" width="40" height="20" text="1"/><mx:TextInput id="b" x="60" y="10" width="40" height="20" text="2"/><mx:TextInput id="c" x="110" y="10" width="40" height="20" editable="false"/><mx:Button id="cal" label="Add" x="10" y="40" width="60" height="20" click="add()"/>

</mx:WindowedApplication>13

Addファンクションはcalボタンをクリックした時に実行されます。

前ページのMXMLファイルをコンパイルして実行する

と、以下の画面が表示されます。

14

「Add」ボタンをクリックすると・・・

左側のテキストボックスの加算結果が表示されます。

MXMLやActionScriptには沢山のクラスがあります。

調べる際には以下のサイトを利用してみてください。

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

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

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

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

15

http://livedocs.adobe.com/flex/3_jp/langref/

http://examples.adobe.com/flex3/componentexplorer/explorer.html

16

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

①メインのMXMLファイルを指定します。

②swfファイルの出力先と名称を指定します。

※ AIRアプリケーション記述ファイルのcontentタグに記述した

名称を指定しましょう。

③コンパイル時に参照するライブラリを指定します。

※今回は、Google Maps API for Flashのライブラリを指定して

います。

【注意！】

上記①～③のファイルは、プロジェクトルートからの相対パス

で指定する必要があります。17

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

① ② ③

18

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

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

【注意！】

上記①のファイルは、プロジェクトルートからの相対パス

で指定する必要があります。

19

adl application.xml

①








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をライブラリパスに指定する。

22

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

<maps:Map

id="map“

width="100%“

height="100%“

url="http://localhost/"

key="ABQIAAAA3hk8tSWJBtrv7SdGaRNVahT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSwJelIuU1E96KfDhGIXqqayaU9HA"

mapevent_mapready="displayMap(event)"

/>

23

API Keyを設定する。

Google Mapsが表示される時に実行するファンクションを指定する。

API Key取得時に指定したURLを設定する。

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

24

地図の中心を定義する。引数１：緯度・経度⇒警固公園辺りを設定

引数２：ズームレベル引数３：地図タイプ⇒「NORMAL_MAP_TYPE：地図」を設定※その他に

HYBRID_MAP_TYPE：地図＋写真PHYSICAL_MAP_TYPE：地形SATELLITE_MAP_TYPE：航空写真

拡大縮小コントロールを表示する。

位置コントロールを表示する。

地図選択コントロールを表示する。








25


MXMLを使って、Railsアプリケーションから

取得したデータを一覧表示する為の画面を作

りましょう。

26

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

属性visibleに"true"を設定した列のみが画面に表示される。

また、属性dataFieldの値はRailsから返ってきたデータ（XML）のタグ名

と合わせている。

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

27








28



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

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

します。

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

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

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

29

var httpService:HTTPService = new HTTPService();

⇒ Railsと通信する為のオブジェクトを生成する。

httpService.url = "http://localhost:3000/restaurants.xml";

⇒ 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 = "large";

⇒ パラメータ４：結果形式を設定する。

※今回は、食べログ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）のタグ名を合わせているのがポイント。

これにより、↑のようにコーディングが楽になっている。

34

<mx:DataGridColumn headerText="名称" dataField="restaurant_name"<mx:DataGridColumn headerText="URL" dataField="tabelog_url"<mx:DataGridColumn headerText="総合評価" dataField="total_score"<mx:DataGridColumn headerText="料理・味" dataField="taste_score"<mx:DataGridColumn headerText="サービス" dataField="service_score"<mx:DataGridColumn headerText="雰囲気" dataField="mood_score”








35



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

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

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

・食べログの情報：店名、住所、電話番号、URL

・第１部にて自分で登録した情報：メモ、画像

の６項目です。

36

marker.addEventListener(MapMouseEvent.CLICK, ファンクション);

⇒ マーカーがクリックされた時に実行されるファンクションを定義する。

var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions();

⇒ 吹き出しに表示する情報を定義するオブジェクトを生成する。

infoWindowOptions.contentHTML

= "店名："+ result.restaurant_name + " " +

"住所："+ result.address + " " +

"TEL："+ result.tel + " " +

"URL："+ "<a href='" + result.tabelog_url + "'>ココをクリック！</a>" + " ";

⇒ 吹き出しに表示する文言を設定する。

infoWindowOptions.width = 350;

⇒ 吹き出しの幅を設定する。

marker.openInfoWindow(infoWindowOptions);

⇒ infoWindowOptionsに定義されている情報を元に吹き出しを表示する。

37








38


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

できます。

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

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

しょう。

39

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

①自己署名入り証明書とパスワードを指定します。

②作成するAIRファイルの名称を指定します。

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

④AIRファイルにパッケージ化するファイルやディレクトリを

指定します。

空白文字で区切って、任意の数のファイルとディレクトリを

指定できます。

40

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

① ② ④③

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

http://livedocs.adobe.com/flex/3_jp/langref/

http://livedocs.adobe.com/flex/3_jp/html/help.html

http://www.adobe.com/jp/devnet/flex

42

RBC には「rbc-incubator」というQ&A

窓口があります。

本日の内容で分からないことがあれば、

[email protected]

までメールをお送りください。

43

mailto:[email protected]

Technology

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

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