« カメラのアクセス許可ダイアログ | Home | 音レボトップ10 アーティストライブ »

Nov 062007

MAX補足#3 (Embed、Config、flashVars等)

前回MAX補足#2でFlashにおけるMVCの各要素の大まかな仕組みを説明しました。
実際のMVC構造に進む前に、講演でも話したいくつかのスクリプト以前の事項について書いておきます。

HTMLへのEmbed
これは特に何でもいいのですが、私はswfObjectを使用しています。
swfObject / http://blog.deconcept.com/swfobject/
FlashObjectのころから使っているのですが、非常にとり回しが楽なのと、代替ページの制御が楽チンで愛用しております。ただし代替ページ要素にあまりデータサイズの大きいものを置くとよろしくないようです。
(新しいバージョンが出ているようですが、まだ試していません)


SWFのパス基点設定
良く知られていることだと思いますが、一応念のため書いておきます。
HTMLファイルとSWFファイルの関係により、SWFファイルのパスの基点がかわり、相対的に他のリソースにアクセスする場合に問題が発生します。HTMLと同じ階層にSWFファイルを配置する場合は特に問題ありませんが、そうするとサーバ上がゴチャゴチャになって美しくないので、/swfなどというフォルダの中にSWFファイルを格納します。

この場合オーサリング時とHTMLから見たときで外部ソースへの参照パスが変わってしまうのですが、SWFObjectのタグに

so.addParam("base", ".");

としてやることで、強制的にSWFファイルの場所をパスの基点として認識させます。
以前SWFを埋め込んでいるHTMLのパス#2で、base="."だと正常に動作しないということを書きましたが、今は特に問題なくローカルでHTML参照しても動作しております。理由は不明ですが・・・。

設定ファイルの設置
これは外部ソースを参照したりする場合に使用するのですが、もう全案件外部ソースを参照するので私の場合は必須で設定しています。前述のswfObjectに

so.addVariable("config", "../config.xml");

のように記述して設定ファイルのパスを引き渡します。この中身は

<xml>
<defines>
<!-- 初期設定ファイル -->
<item name="profile" format="xml" location="../xml/profile.xml" />
</defines>
<aliases>
<!-- エイリアス設定ファイル -->
<item name="users" format="json" location="../xml/user.json" />
</aliases>
<docs>
<!-- ドキュメント設定ファイル -->
<doc name="hello"><![こんにちわ!]></doc>
</docs>
</xml>

こんな感じです。
defines
初期化時に読み込む必要のあるソース。主に静的な設定ファイルへの参照になります。
aliases
シーン毎に呼び出すもの、CGIへのパスや、画像へのパスなどが中心になります。
docs
これはFlash内に表示させるテキストが変更などが発生する場合、ダイナミックテキストで文字を制御する際に参照する値になります。主に多元語化のFlashなどで、言語毎に文字を切り分けたり、日付表示を切り替えたりなどちょっとしたFlash内のテキストを制御する際に使用します。


ちなみに私はオーサリング時のconfigの値が未設定の場合には"local.xml"を参照するように定義して、開発環境用の設定を参照させるようにしています。
これにより、CGIなどの動的に接続するエイリアスに対して、色々パターンを検証したい。もしくはCGI側がまだ出来ていないけど、制作を始めないといけない場合などは静的XMLやJSONを用意して、local.xmlの設定ファイル内からそのファイルを参照させ擬似的に動作させたりします。(サーバに上げて静的ファイルにPOSTしたりするとエラーになるサーバもあるので、あくまでローカルでの開発用です)
実際のCGIとつなぎたいときにはCGIのパスを設定すればよいだけです。
通常本番用設定ファイル、開発環境用設定ファイル、ローカル開発用設定ファイルの3つを用意して開発を行います。
また、これらの値はModelの子供クラスConfigクラスによって制御されます。(この辺はまた追って説明します)


FlashVarsとの連携
Flashで標準で用意されているFlashVarsは構造を持っておらず、変数を逐一定義し受け取るスクリプトを記述する必要があります。この辺が非常に美しくないので、JSONを使用し構造化したデータセットをFlashに初期化データとして引き渡します。
JSONについてはこちら(http://json.org/)を参照してください。
こちらにJavaScript、ActionScript用のライブラリがあります。(FlashのexztensionとしてJSONConnectorというものもありますが、これは使用したことがありません)

組み込み方はHTMLに

<script type="text/javascript" src="common/json.js"></script>

でJSのJSONライブラリを読み込み。
そしてSWFObjectのソース部分に

//add parameters
var _params = {};
_params.a=100;
_params.name="あほです";
_params.aaa=[1,2,3,4,5];
_params = encodeURI(_params.toJSONString());
so.addVariable("params", _params);

こんな感じで書きます。(paramsという変数名は固定にしています)
これによってJSONフォーマットでFlashVarsの値を引き渡すことが出来ます。(恐らくこれらの値はPHPやJavaScriptで動的に生成することが多いかと思いますが)ただし受け取るFlashにも当然仕組みは必要で、これはModelの子供クラスFlashVarsクラスによってパース、管理されます。
これによりFlash側ではこの値を

params{
a:100,
name:"あほです",
aaa:[1,2,3,4,5]
}

というObjectの形で取り扱うことが出来るようになります。
FlashVarsクラスについては後日Modelクラスの説明をするときに説明します。


ということでなかなかスクリプトに話が入っていきませんが、次ぐらいからちょっとずつ実際のクラスの話になるかと思われます。

10 Comments

MAX参加できなかったので、こういった記事を書いていただけるととても嬉しいです。続きも期待してます!

仕事の合間にぼちぼちやっていきますw

いつも拝見させて頂いてます。
フレークワークや他の方のコーディングスタイルはすごく興味があるのですが、実際のコードやパッケージを公開される予定はありませんか?
次回も楽しみにしてますので、頑張ってください!

か・・神が来ました・・汗
ギャボー・・汗
一応公開していくつもりでいますけどProgressionの足元にも及ばないです・・・汗

制作作業の中で必要なものを組み込んで行った結果・・という産まれのためものすごく汚いです・・汗(クラスパスを変えたくても既存の案件の都合上変えられずとか・・)

あぁ・・・言い訳・・orz

あまり参考にならないというかむしろ恥を晒す感じになると思うのですが、まぁ失うものも特に無いので晒していきますw

返信ありがとうございます!
すいません!神じゃないですw

パッケージ構成の変更は悩みますね。
修正したい部分を放置するのは精神衛生上よくないと割り切ってしまって、公開しているにも拘らず変更しまくっているダメっぷりです。

僕も最初は作業の過程で自然と生まれた汚いコードで公開しましたが、「公開したら修正したくなるメソッド」のおかげでキレイになったので、これはこれでありかなと思いましたw

公開されるの楽しみにしてます!

>修正したい部分を放置するのは精神衛生上よくないと割り切ってしまって、公開しているにも拘らず変更しまくっているダメっぷりです。
イヤー、そうしたいと思うんですが、昔の案件とかのクラスパスを直す勇気が無くて、同じようなクラスがゾロゾロ混在しています・・・orz

>「公開したら修正したくなるメソッド」のおかげでキレイになったので、これはこれでありかなと思いましたw
おお、なんて恐ろしいメソッド(汗
>公開されるの楽しみにしてます!
は、ハィ、来週中には少しずつ・・・頑張りまっす。

swfObjectについて下記の現象が報告されていますが、トザキ様のところでは発生していますでしょうか?
http://mtl.recruit.co.jp/blog/2008/02/ie7swfobject.html

手元のマシンでうまく再現できなかったりして気になっております。何か情報をお持ちでしたら、お教えいただければ幸いです。よろしくお願いいたします。

いえ、IE7は自宅の環境しか入れてないのですが、今のところ問題は起こっていません。
この問題はどちらかというとFalsh Playerのバージョン管理の問題のような気もしています。(JSレベルでの判定ってVer6未満ですよね?それ以降はExpressInstallで処理しているのだと思うのですが・・・)

Eolas問題だけで使用してる訳でもないので、これにトラブル起きると嫌ですねぇ・・。
(特に私の場合は色々拡張してしまってフレームワークの一部になってる部分あるので・・・)
死ぬ・・・

了解です。コメントありがとうございました~。

ふと思ったのですが、これってIE6からIE7にバージョンアップにも絡んだ問題なのかも知れないですね・・。家のマシンはVistaなので最初からIE7だったので・・。
IE6からIE7にアップした環境が無いのであります。

Leave a comment

Search and Archives