Upload
mochiko-astech
View
1.297
Download
2
Embed Size (px)
DESCRIPTION
http://www.ustream.tv/channel/rubybizcommons2009年4月18日に行われたイケテルRails勉強会@東京の第2部資料。作成者はレイジ氏。
Citation preview
April 18, 2009
Ruby Business Commons
Reiji Nenoki
Adobe Flexのサンプルを改造して・・・http://examples.adobe.com/flex3/devnet/dashboard/main.html
2
↓のデスクトップ・アプリケーションを作ります。
3
作るのは、赤枠の部分です。
4
第2部の目的は、以下の2点です。
①Google Maps API for Flashを使ってみよう!
②第1部で作成した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
プロジェクトを作成する。
検索結果位置情報画面を表示する。
検索結果一覧画面を表示する。
各イベントのアクションを実装する。
①検索ボタンをクリック
②地図上のマーカーをクリック
AIRパッケージを作成する。
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
コマンドプロンプトで→のコマンドを実行
すると・・・
プロジェクトを作成する。
検索結果位置情報画面を表示する。
検索結果一覧画面を表示する。
各イベントのアクションを実装する。
①検索ボタンをクリック
②地図上のマーカーをクリック
AIRパッケージを作成する。
17
検索結果位置情報画面を表示する。
Google Maps API for Flashを使って、地図を
表示する画面を作りましょう。
18
こんな画面を表示しましょう。
src/rbc/view/GoogleMaps.mxml その1
<?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 その2
<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
設定ファイル "D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air-config.xml" をロードしていますC:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes)
コマンドプロンプトを起動後、C:¥IketeruGourmetに移動してコマンドを実行してください。
このメッセージが表示されたら、コンパイルOK。
21
コマンドプロンプトで→のコマンドを実行
すると・・・
↓の画面が表示されます。
22
adl application.xml
プロジェクトを作成する。
検索結果位置情報画面を表示する。
検索結果一覧画面を表示する。
各イベントのアクションを実装する。
①検索ボタンをクリック
②地図上のマーカーをクリック
AIRパッケージを作成する。
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
コンパイルしましょう。
amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf -library-path+=libs/map_flex_1_9.swc
設定ファイル "D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air-config.xml" をロードしていますC:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes)
コマンドプロンプトを起動後、C:¥IketeruGourmetに移動してコマンドを実行してください。
このメッセージが表示されたら、コンパイルOK。
26
コマンドプロンプトで→のコマンドを実行
すると・・・
↓の画面が表示されます。
27
adl application.xml
プロジェクトを作成する。
検索結果位置情報画面を表示する。
検索結果一覧画面を表示する。
各イベントのアクションを実装する。
①検索ボタンをクリック
②地図上のマーカーをクリック
AIRパッケージを作成する。
28
各イベントのアクションを実装する。
①検索ボタンをクリック
Action Scriptを使って、検索ボタンをクリック
した時に動作するプログラムを書きましょう。※検索ボタンをクリックすると、以下のことができるように
します。
・検索条件をRailsに渡して、検索してもらう。
・検索結果の店舗の場所を地図上に表示する。
・検索結果を一覧表示する。
29
src/rbc/view/SearchCondition.mxml その1
<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
src/rbc/view/SearchCondition.mxml その2
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 その3
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 その1
<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
src/rbc/view/GoogleMaps.mxml その2override 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
<mx:Script><![CDATA[
import mx.events.PropertyChangeEvent;
override protected function onChangeSharedVariable(e:PropertyChangeEvent):void {dataGrid.dataProvider = sharedVariable.searchResult;
}]]></mx:Script>
<mx:DataGrid>タグの前に全て追加してください。
35
コンパイルしましょう。
amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf -library-path+=libs/map_flex_1_9.swc
設定ファイル "D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air-config.xml" をロードしていますC:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes)
コマンドプロンプトを起動後、C:¥IketeruGourmetに移動してコマンドを実行してください。
このメッセージが表示されたら、コンパイルOK。
36
検索ボタンをクリックすると・・・
検索結果が表示されます。
37
コマンドプロンプトで↑のコマンドを実行
して画面を表示
adl application.xml
プロジェクトを作成する。
検索結果位置情報画面を表示する。
検索結果一覧画面を表示する。
各イベントのアクションを実装する。
①検索ボタンをクリック
②地図上のマーカーをクリック
AIRパッケージを作成する。
38
各イベントのアクションを実装する。
②地図上のマーカーをクリック
地図上に表示されたマーカーをクリックすると、
該当の店舗情報が吹き出しに表示されるように
しましょう。※吹き出しに表示するのは、
・食べログの情報:店名、住所、電話番号、URL
・第1部にて自分で登録した情報:メモ、画像
の6項目です。
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 + "<br/>" +"住所:"+ result.address + "<br/>" +"TEL:"+ result.tel + "<br/>" +"URL:"+ "<a href='" + result.tabelog_url + "'><b>ココをクリック!</b></a>" + "<br/>";
if(result.memo != null && result.memo != "") {infoWindowOptions.contentHTML
= infoWindowOptions.contentHTML + "メモ:" + result.memo + "<br/>";}if(result.image_url != null && result.image_url != "") {
infoWindowOptions.contentHTML= infoWindowOptions.contentHTML + "画像:" + "<a href='" + result.image_url + "'><b>ココをクリック!</b></a>";
}infoWindowOptions.width = 350;
marker.openInfoWindow(infoWindowOptions);
map.setCenter(new LatLng(result.latitude, result.longitude), 16, MapType.NORMAL_MAP_TYPE);}
);map.addOverlay(marker);
}
赤色の部分を追加してください。
40
コンパイルしましょう。
amxmlc src/IketeruGourmet.mxml -output src/IketeruGourmet.swf -library-path+=libs/map_flex_1_9.swc
設定ファイル "D:¥develop¥Adobe¥flex_sdk_3¥frameworks¥air-config.xml" をロードしていますC:¥IketeruGourmet¥src¥IketeruGourmet.swf (486726 bytes)
コマンドプロンプトを起動後、C:¥IketeruGourmetに移動してコマンドを実行してください。
このメッセージが表示されたら、コンパイルOK。
41
42
コマンドプロンプトで↑のコマンドを実行
して画面を表示
adl application.xml
マーカーをクリックすると・・・
該当マーカーが地図の中央に移動して、吹き出しが表示されます。
プロジェクトを作成する。
検索結果位置情報画面を表示する。
検索結果一覧画面を表示する。
各イベントのアクションを実装する。
①検索ボタンをクリック
②地図上のマーカーをクリック
AIRパッケージを作成する。
43
AIRパッケージを作成する。
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に移動してコマンドを実行してください。
C:¥IketeruGourmet直下に IketeruGourmet.airが
作成されます。
46
コマンド実行前 コマンド実行後
① IketeruGourmet.airをダブルクリック
②インストーラが起動するので、「インストール」をクリック
③「続行」をクリック
④インストールが完了すると・・・
47
⑤↓の画面が表示されます。
48