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

1,795 views

Published on

http://www.ustream.tv/channel/rubybizcommons
2009年4月18日に行われたイケテルRails勉強会@東京の第2部資料。
作成者はレイジ氏。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,795
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 2009年4月18日 Ruby Business Commons 根之木 礼司
  2. 2.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 2
  3. 3.  プロジェクトを作成する。 まずは、プロジェクトを作成しましょう。 ※本当は、 ・AIRアプリケーション記述ファイルの作成 ・Google Maps API for Flashを使う為の準備 等が必要ですが、今回は時間の都合上、事前に準備した プロジェクトを使います。 また、開発環境・実行環境が正しく構築できて いるか確認してみましょう。 3
  4. 4.  AIRアプリケーションの作成方法に ついて解説します。 ①プロジェクト作成 ②コーディング ③コンパイル ④アプリケーション実行 4
  5. 5. 5
  6. 6.  Flex Builder等の統合開発環境(IDE)を使わなくても、 以下の手順だけでプロジェクトを作成することができ ます。 ①任意の場所にフォルダを新規作成する。 ②AIRアプリケーション記述ファイルを作成し、上記① で作成したフォルダ直下に配置する。 今回の場合、Cドライブ 直下に作成したIketeruGourmetフォルダ がプロジェクトです。 今回の場合、application.xmlが AIRアプリケーション記述ファイルです。 6
  7. 7.  今回の勉強会では、以下のファイルも予め準備 しました。 ①iconsフォルダ ⇒AIRパッケージ用のアイコンを格納。 ②libsフォルダ ⇒Google Maps API for Flashを使用する為のライブラリ map_flex_1_9.swcを格納。 ③srcフォルダ ⇒Adobe Flexサンプル(dashboard)のプログラムを格納。 ※イケテル勉強会向けに改造済。 ④IketeruGourmet.p12ファイル ⇒AIRパッケージ作成時に必要な自己署名入り証明書。 7
  8. 8.  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> <image48x48>/icons/AIRApp_48.png</image48x48> <image128x128>/icons/AIRApp_128.png</image128x128> </icon> </application> 8
  9. 9. 9
  10. 10.  まずは、メインとなるMXMLファイルが必要です。 必ず1つは作成しましょう。 今回の場合、赤枠の部分(画面全体)が IketeruGourmet.mxmlというメインのMXMLで実装されて います。 10
  11. 11.  メインとなる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
  12. 12.  コーディングには、MXMLとActionScript を使います。 MXMLとActionScriptの使い方は以下の 通りです。 ・MXML ⇒ 画面をデザインする時に使用。 ・ActionScript ⇒ プログラムを書く時に使用。 12
  13. 13.  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
  14. 14.  前ページのMXMLファイルをコンパイルして実行する と、以下の画面が表示されます。 「Add」ボタンをクリック 左側のテキストボックスの すると・・・ 加算結果が表示されます。 14
  15. 15.  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
  16. 16. 16
  17. 17.  コンパイルのコマンドオプションについて説明します。 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
  18. 18. 18
  19. 19.  アプリケーション実行のコマンドオプションについて説明します。 adl application.xml ① ① AIRアプリケーション記述ファイルを指定します。 【注意!】 上記①のファイルは、プロジェクトルートからの相対パス で指定する必要があります。 19
  20. 20.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 20
  21. 21.  検索結果位置情報画面を表示する。 Google Maps API for Flashを使って、地図を 表示する画面を作りましょう。 こんな画面を表示 しましょう。 21
  22. 22. ※今回の場合  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
  23. 23.  <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
  24. 24.  map.setCenter( 地図の中心を定義する。 引数1:緯度・経度 new LatLng(35.690137,139.692836), ⇒警固公園辺りを設定 引数2:ズームレベル 16, 引数3:地図タイプ ⇒「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. 25.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 25
  26. 26.  検索結果一覧画面を表示する。 MXMLを使って、Railsアプリケーションから 取得したデータを一覧表示する為の画面を作 りましょう。 こんな画面を表示 しましょう。 26
  27. 27.  属性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. 28.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 28
  29. 29.  各イベントのアクションを実装する。 ①検索ボタンをクリック Action Scriptを使って、検索ボタンをクリック した時に動作するプログラムを書きましょう。 ※検索ボタンをクリックすると、以下のことができるように します。 ・検索条件をRailsに渡して、検索してもらう。 ・検索結果の店舗の場所を地図上に表示する。 ・検索結果を一覧表示する。 29
  30. 30.  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
  31. 31.  var parameters:Object = new Object(); ⇒ Railsへ渡すパラメータのオブジェクトを生成する。  parameters.Prefecture = cboPrefecture.selectedItem.data; ⇒ パラメータ1:コンボボックスで選択した都道府県をパラメータ に設定する。  parameters.SortOrder = cboSortOrder.selectedItem.data; ⇒ パラメータ2:コンボボックスで選択した並び順をパラメータに 設定する。  parameters.PageNum = cboPage.selectedItem.data; ⇒ パラメータ3:コンボボックスで選択したページをパラメータに 設定する。  parameters.ResultSet = quot;largequot;; ⇒ パラメータ4:結果形式を設定する。 ※今回は、食べログAPIで定義されている“large”を設定する。  httpService.send(parameters); ⇒ Railsと通信を行う。 31
  32. 32.  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
  33. 33.  map.clearOverlays(); ⇒ 地図上のマーカーをクリアする。  var marker:Marker = new Marker( new LatLng(result.latitude, result.longitude), new MarkerOptions({draggable:true, hasShadow:true})); ⇒ 検索結果の緯度・経度上にマーカーを生成する。 その際に、マーカーの属性として、 ①マーカーをドラッグで移動可能 ②マーカーに陰影をつける を設定する。  map.addOverlay(marker); ⇒ マーカーを地図上に表示する。 33
  34. 34.  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. 35.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 35
  36. 36.  各イベントのアクションを実装する。 ②地図上のマーカーをクリック 地図上に表示されたマーカーをクリックすると、 該当の店舗情報が吹き出しに表示されるように しましょう。 ※吹き出しに表示するのは、 ・食べログの情報:店名、住所、電話番号、URL ・第1部にて自分で登録した情報:メモ、画像 の6項目です。 36
  37. 37. marker.addEventListener(MapMouseEvent.CLICK, ファンクション);  ⇒ マーカーがクリックされた時に実行されるファンクションを定義する。 var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions();  ⇒ 吹き出しに表示する情報を定義するオブジェクトを生成する。 infoWindowOptions.contentHTML  = quot;店名:quot;+ result.restaurant_name + quot;<br/>quot; + quot;住所:quot;+ result.address + quot;<br/>quot; + quot;TEL:quot;+ result.tel + quot;<br/>quot; + quot;URL:quot;+ quot;<a href='quot; + result.tabelog_url + quot;'><b>ココをクリック!</b></a>quot; + quot;<br/>quot;; ⇒ 吹き出しに表示する文言を設定する。 infoWindowOptions.width = 350;  ⇒ 吹き出しの幅を設定する。 marker.openInfoWindow(infoWindowOptions);  ⇒ infoWindowOptionsに定義されている情報を元に吹き出しを表示する。 37
  38. 38.  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 38
  39. 39.  AIRパッケージを作成する。 AIRでは、インストールファイルを作ることが できます。 今回作成したアプリケーションでインストール ファイルを作り、実際にインストールしてみま しょう。 39
  40. 40.  AIRパッケージ作成のコマンドオプションについて説明します。 adt -package -storetype pkcs12 -keystore IketeruGourmet.p12 -storepass iketeru IketeruGourmet.air application.xml icons libs src ① ② ③ ④ ①自己署名入り証明書とパスワードを指定します。 ②作成するAIRファイルの名称を指定します。 ③AIRアプリケーション記述ファイルを指定します。 ④AIRファイルにパッケージ化するファイルやディレクトリを 指定します。 空白文字で区切って、任意の数のファイルとディレクトリを 指定できます。 40
  41. 41.  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
  42. 42. 42
  43. 43. RBC には「rbc-incubator」というQ&A 窓口があります。 本日の内容で分からないことがあれば、 rbc-incubator@googlegroups.com までメールをお送りください。 43

×