20090418 イケテルRails勉強会 第2部Air編 解説
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,024 views

http://www.ustream.tv/channel/rubybizcommons

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

Statistics

Views

Total Views
3,024
Views on SlideShare
3,018
Embed Views
6

Actions

Likes
1
Downloads
10
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 2009年4月18日 Ruby Business Commons 根之木 礼司
  •  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 2
  •  プロジェクトを作成する。 まずは、プロジェクトを作成しましょう。 ※本当は、 ・AIRアプリケーション記述ファイルの作成 ・Google Maps API for Flashを使う為の準備 等が必要ですが、今回は時間の都合上、事前に準備した プロジェクトを使います。 また、開発環境・実行環境が正しく構築できて いるか確認してみましょう。 3
  •  AIRアプリケーションの作成方法に ついて解説します。 ①プロジェクト作成 ②コーディング ③コンパイル ④アプリケーション実行 4
  • 5
  •  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> <image48x48>/icons/AIRApp_48.png</image48x48> <image128x128>/icons/AIRApp_128.png</image128x128> </icon> </application> 8
  • 9
  •  まずは、メインとなるMXMLファイルが必要です。 必ず1つは作成しましょう。 今回の場合、赤枠の部分(画面全体)が 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
  • 16
  •  コンパイルのコマンドオプションについて説明します。 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
  •  アプリケーション実行のコマンドオプションについて説明します。 adl application.xml ① ① AIRアプリケーション記述ファイルを指定します。 【注意!】 上記①のファイルは、プロジェクトルートからの相対パス で指定する必要があります。 19
  •  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 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( 地図の中心を定義する。 引数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
  •  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 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
  •  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 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; ⇒ パラメータ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
  •  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
  •  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 35
  •  各イベントのアクションを実装する。 ②地図上のマーカーをクリック 地図上に表示されたマーカーをクリックすると、 該当の店舗情報が吹き出しに表示されるように しましょう。 ※吹き出しに表示するのは、 ・食べログの情報:店名、住所、電話番号、URL ・第1部にて自分で登録した情報:メモ、画像 の6項目です。 36
  • 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
  •  プロジェクトを作成する。  検索結果位置情報画面を表示する。  検索結果一覧画面を表示する。  各イベントのアクションを実装する。 ①検索ボタンをクリック ②地図上のマーカーをクリック  AIRパッケージを作成する。 38
  •  AIRパッケージを作成する。 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
  • 42
  • RBC には「rbc-incubator」というQ&A 窓口があります。 本日の内容で分からないことがあれば、 rbc-incubator@googlegroups.com までメールをお送りください。 43