— boreal-kiss.com

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になった。