Apache + Rails + Flex: FlashVarsを使う場合
データベースに格納された本のスコアデータをxmlに整形してFlexチャートに読み込ませたい。実際のデモはBook reviewを参照ください。デモの場合、各ページごとにFlexに読み込ませたいデータが異なるのでFlashVarsを用いてswfファイル外部からコントロールしてやる。
Rails側
スコアデータ5種類用意。特定のbook idのスコアデータをFlexで読み込みやすいようにxmlデータで出力させる。Flex側で極力整形を避けたかったので、Rails側で以下のようなxmlデータを作るURL(例えば、:controller => ‘book’, :action => ‘create_xml’, :id => @book.id)を作成しておく。具体例はFlex + Ruby on Rails + MySQL 連携メモを参照ください。
<?xml version="1.0" encoding="UTF-8"?> <grades> <grade> <label>Easy to read?</label> <score>9</score> </grade> <grade> <label>Good contents?</label> <score>8</score> </grade> <grade> <label>Latest version?</label> <score>7</score> </grade> <grade> <label>Reasonable price?</label> <score>10</score> </grade> <grade> <label>Recommend to people?</label> <score>6</score> </grade> </grades>
各本詳細ページ上にswfファイルを埋め込み、その本のスコアデータXMLを出力するURLをFlashVarsで指定してやる(最後の一行部分)。
AC_FL_RunContent( "src", "path/to/swf_file", "width", "300", "height", "220", "align", "middle", "id", "swf_id", "quality", "high", "bgcolor", "#ffffff", "name", "swf_name", "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash", "pluginspage", "http://www.adobe.com/go/getflashplayer", "FlashVars", "url=path/to/<%= @book.id %>" );
FlashVarsに送るURL部分を
"Flashvars", "url=<%= url for :controller => 'book', :action => 'create_xml', :id => @book.id %>"
のように書いてもよいが、Apacheの場合、url_forの出力がRailsアプリケーションディレクトリ(railsapp)からのパスになるので注意が必要。例えば@book.id=5だと
//Apacheの場合 /railsapp/book/create_xml/5 //Lighttpdの場合 /book/create_xml/5
となる。この辺の話は [Rails] Rails の動作環境と Location について – プログラミングは素晴らしいが詳しい。
Flex側
FlashVarsで送信された変数を受け取る。Flash(ActionScriptクラス)の場合と異なるので注意必要。
//Flex Applicationの場合 var params:Object = Application.application.parameters; trace(params.url);//"path/to/xml_data" //Flashの場合 var params:Object = this.loaderInfo.parameters; trace(params.url);//"path/to/xml_data"
Flex内部のArrayCollectionに格納するまでの流れは以下の通り(抜粋)。完全なソースはこちらを参照ください。
import mx.rpc.http.HTTPService; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; var params:Object = Application.application.parameters; var req:HTTPService = new HTTPService(); req.url = params.url; req.send(); req.addEventListener(ResultEvent.RESULT, onResult); function onResult(e:ResultEvent):void{ var ac:ArrayCollection = e.result.grades.grade; //データ処理に続く }
追記: 2008/08/08
チャート部分をFlexからActionScriptのみで作成したところ、ファイルサイズが236kb -> 4kbになった。
[…] Apache + Rails + Flex: FlashVarsを使う場合でレーダーチャートをFlexで作ったらファイルサイズ236Kb、同じものをActionScriptファイルのみで作ったら4Kbだったので驚愕。ためしに以下のような背景のみのFlexアプリケーションを作ってみた。 […]