効率的なダイナミックテキストの扱いを考える

ダイナミックテキストをスクリプトを使って作ったり、配置したりすると、テキストフィールドの操作だったり、テキストボックス自体のプロパティ設定だったりと、いろいろと面倒だし、特にこれがレイアウト中の操作だったりすると、ものすごいイライラが溜まる。そこで、ちょっといい方法を思いついたので、メモしておくことにする。
早い話、面倒なのはスクリプト上でテキストボックスを作成→プロパティ設定→レイアウト確認というステップが面倒なのだから、ある程度の基本的な設定はテキストパネル上で設定(フォント名だとかデータのエンベット処理だとか)して、MovieClip化してしまい、それをテキストの設定に合わせた名前をつけてライブラリに登録しておく。そしてそれを使って、頻繁に設定を変えたい部分だけをスクリプトで処理していくという方法。

ダイナミックテキストをMovieClip化して使う

まず、とりあえずレイアウトラフなどから、使用するフォントと基本的なプロパティ(ボールドとか行間だとか)を設定して使いそうなテキスト用MovieClipを作っておく。

そしてレイアウト時には、ここから取り出して、好きな位置に配置。これでテキストの配置作業は簡略化できる。また、この基本セットのテキストボックスから、ちょっとだけ変えたいプロパティだけをスクリプトで変えてしまえばよい。

配置したテキストにプロパティを設定するためのサブメソッドを追加する

重要なのはここからで、一つ一つのテキストに細かい処理を施していくのは面倒なので、処理をグローバルで関数化してムービークリップ内のテキストに引数を使い、プロパティ変更させていく。具体的にはこんなコード(MovieClip内のテキストボックスには、全てtextboxという名前をつけておくこと!)

//テキスト設定用メソッドtextProp

_global.textProp = function(targ, tWidth, multiBool, wrapBool, basePos, htmlBool, content) {
	with(targ) {
		textbox._width = tWidth;	//テキストボックスの幅
		textbox.multiline = multiBool;	//複数行設定
		textbox.wordWrap = wrapBool;	//テキストの折り返し
		textbox.autoSize = basePos;	//テキスト固定位置
		textbox.html = htmlBool;	//html化
		if (htmlBool != false) {	//ストリングを格納
			textbox.htmlText = content;
		} else {
			textbox.text = content;
		}
	}
}

これで準備完了。グローバル化してあるので、当然どこでも使える。あとは配置したテキストボックスでメソッドを実行するだけだ。

//テキスト設定処理(MovieClip“summary”)
content = stringObj.summary;	//コンテンツの中身を保存
textProp(summary, 400, false, false, "left", true, content);	//メソッド実行

比較的デザインやレイアウトにこだわる人は、一度試してみるとなかなかナイスな手であることに気づくはず。例えば、フラッシュ上で実際に文字を入れてレイアウトしていて、あとからダイナミックテキストにする場合などは、ムービークリップの入れ替えだけで済むので、かなり楽チンだと思う。 また、関数内でfontなどの指定をしてあげれば、getFontList関数などを使って、クライアントの中に入っているfontによって、適用させるfontとか他のプロパティを条件分岐&一括指定できるので、そういった点からも有効かなと思う。

SWFからJavaScriptの関数を呼び出し返り値を得る

まだFlashMXを使っていて、Flash6.0+Webサービスということをやろうとすると、ActionScriptXMLを解析してオブジェクト化するスクリプトを作るのが非常に面倒くさかったりする。そこで、この作業をJavaScriptAJAXライブラリ(prototype.jsとか)でやってしまって、実際にオブジェクト化された値をswfで受け取るというプロセスができたら、すごく嬉しいかも。早い話、SWF側からJavaScriptのメソッドをコールして、JavaScript内で作成したオブジェクトをActionScript内の変数へセットできたらすごく便利だということ。
実際にやってみると、returnを使って返り値を得ることができないみたいなので、少し複雑な構成になってしまった。でも便利そうなので、メモしておくことにする。

ActionScriptからJavaScriptの関数を呼び出すメソッド

//状態を示す変数flagObjをセット
var flagObj = "waiting";

//JavaScripから受け取る値を格納する変数をセット
var returnVar = "";

//イベントが起きたら、JavaScriptをコールするメソッド「callMethod」を呼び出す
//同時にflagObjをcallにする
buttonCaller.onRelease = function() {
	callMethod();
	_parent.flagObj = "call";
}

//JavaScriptをコールするメソッドcallMethodの定義
function callMethod() {
	putVar = "javascript: returnMethod()";	//コール文の作成
	getURL(putVar);	//コール
	loader.loadAction();	//ローディング開始
}

//onEnterFrameを使って、flagObjのチェック。
//flagObjがreturn状態になったら、SWF側でオブジェクトを作成
this.onEnterFrame = function() {
	if (flagObj == "return") {
		createObj();	//オブジェクトの作成
		loader.loadedAction();	//ロード終了
		flagObj = "waiting";	//flagObjをふたたびwaitingに
	}
}
という具合。 まず状況を監視するための変数を用意し、そこに今の状態を参照できるようにしておく。 それをonEnterFrameイベントで監視し、if文を使ってflagObjの値によってSWFの動きを制御する。 こうしておけば、JavaScriptからflagObjの値を書き換えることで、 JavaScript内での処理が終わり、変数が返ってきたらSWFが再び出すという構成がセットできるというわけだ。
次は、JavaScript側からSWFの変数を書き換えるメソッドを書かなければならない。

JavaScriptからSWFの制御をするには、JavaScriptがHTML内のSWFを認識しなければならないので、DOMを使ってオブジェクト化しておく。実際にはブラウザによってDOMの位置が違うが、ライブラリ使用を前提と考えて、あまり問題視はしない。とりあえずFirefoxでは、
window.document['SWFの参照値']Firefox
でSWFを参照することができる。参照値は、objectタグの中のid属性と、embedタグのname属性にセットしておけば良い。また、swLiveConnect属性をtrueに設定しておくのも忘れずに。(さっきテストした時はなくても動いたが…)
そして、SWFに値を送るためには、関数はあらかじめ用意されている。それは、
SetVariable("variable","value");
でSWFのvariable変数に"value"を代入することができる。

JavaScriptからSWFの変数に値をセットする処理

//SWFからコールされるメソッドの定義
function returnMethod() {
	//実際のJavaScriptでの処理
	createAJAXObj();
	xmlParse();
	・・・・・・
	//最後にオブジェクトを返して、変数flagをreturnにする
	window.document["SWFfile"].SetVariable("returnVar", returnObj);
	window.document["SWFfile"].SetVariable("flagObj", "return");
}
とこうなる。ポイントは最後にSWF内のflagをreturnにすること。
SWF内では変数flagの監視によって動きを制御してるので、これを書き換えるだけで、JavaScriptからSWFの制御が可能だ。非常にシンプル。だから注意するのは変数flagの書き換えタイミングだけで、あとはどれだけJavaScript側の処理が複雑だろうと、時間がかかろうと関係ないことになる。

とりあえずこれで、SWF→JavaScriptCGIWebサービスの連携が簡単に出来ると。さあ、何を作ろうかなあ。

Googleの検索APIにAJAXインターフェイスが追加

Googleの検索APISOAPインターフェイスからGoogle AJAX Search APIというのに変わっている。今までの検索エンジンの提供からAJAXインターフェイスを付けた改良版みたいな感じ。とか思ったら、ちょっとサンプルを見ただけでも、とんでもないことになっている。ボクの知らない間に、こんなこと出来るようになってたんだ…

Google AJAX Search APIサンプルページ

AJAX Search サンプル
Blog-Restricted Search サンプル
Product Search サンプル

特にProduct Searchは半端じゃないな。 ちょwwwコレwww、勝手に使っちゃっていいの!?という感じ。しかもコードは超簡単仕様のようだ。やっぱりGoogleGoogleだと。 リファレンスのドキュメントも既に充実してるようなので、連休中に読み込むことにする。

Amazon Webサービス(RESTリクエスト)

Amazon Web Serviceの一つ、Amazon E-Commerce Service。これを使ってAmazonのデータベース情報を受け取ることができる。まとまったパラメータの説明が日本語のサイトで見つからなかったので、必要な部分だけメモっておくことにする。今回はRESTのパラメータ。

リクエストを送る際の日本用ベースサービスURL

http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService

送信に使えるメソッド(Operation)

ItemLookup|ASINコードやISBNコードなどの固有IDから検索をかける場合に使う。基本的に、特定の商品を検出したい場合に利用する
ItemSearch|キーワードやタイトル名、著者名、監督名など言葉によるインデックスで検索する場合に使う。複数オブジェクトのリターン

ItemLookupリクエスト時に使えるパラメーター

・ItemId|IDコード
・IdType|IDの種類(デフォルトはASIN)
・SearchIndex|検索する商品の種類
・Condition|検索する商品のコンディション指定(デフォルトはNew)
・ResponseGroup|返されるデータセットを指定
*1

ItemSearchリクエスト時に使えるパラメーター

・ReviewSort|オブジェクトのソート順をAmazon内レビュー指定するための値
・SearchIndex|検索する商品の種類
・Keywords|検索するキーワード
・BrowseNode|ブラウズノード番号(カテゴリ毎のベストセラーを取得)
・Title|検索する商品名
・MinimumPrice|最安値
・MaximumPrice|最高値
・Condition|ItemLookupリクエストと同じ
・ResponseGroup|ItemLookupリクエストと同じ
*2

例1:Asinコード4122044286の商品情報を得るRESTリクエス

http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService
&AWSAccessKeyId=[自分のAWSアクセスキー]
&Operation=ItemLookup
&IdType=ASIN
&ItemId=4122044286

例2:検索ワードに"AmazonWebサービス"にヒットする商品情報をMediumサイズのデータセットで得るRESTリクエス

http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService
&AWSAccessKeyId=[自分のAWSアクセスキー]
&Operation=ItemSearch
&Keyword=["AmazonWebサービス"というキーワードをURLエンコードしたString]
&ResponseGroup=Medium
&SearchIndex=Books

Matium.orgのノート

Matium.org用ノートを作った。名前は「MatiumBackStage」。Matiumの裏側ってことですね。デザインはシンプルというか、メモなんで、それほど凝ったものは初めから作るつもりがない。
PHPActionScriptJavaなどのプログラミング用メモからラフスケッチとかイラストの下絵とかアップロードしていきます。あと気になったサイトやWebサービスとかもメモがてら紹介します。更新頻度はMatiumBlogよりは高いです。
Matium内で何やってるかは、こっちを見てもらえるとある程度わかると思います。ただ、あくまでメモなんで面白い人には面白いかもしれんが、つまらない人にはつまらないだろう。あまり読んでくれる人を意識してやるつもりが無いと言えるかもしれないが…
はてなダイアリーのデザインはid:chepookaさんの公開テンプレートをベースにさせていただいてます。chepookaさん、ありがとう☆
もらってばかりでは申し訳ないので、公開デザインはボクも作ることにする(時間とれた時。夏休みごろかも…)。ではMatium共々、よろしく。