flex2の最近のブログ記事

日本語が通るようになりました。

%uXXXX の UTF-16 escape の件は ActionScript 側で UTF-8 に変換してからサーバにリクエストすることで解決できました。具体的にはリクエストパラメータ data を作成するときに

data += id + "=" + Utf16escapeToUtf8escape( escape(text) ) + "&";

としています。ビルトイン関数の escape で「あ」が UTF-16 escape 文字列「%u3041」になるので、それをさらに自作の Utf16escapeToUtf8escape で UTF-8 の escape 文字列「%E3%81%82」に変換するということですね。変換ルーチンは「UCS-2とUTF-8」 の「UCSからUTF-8への変換法」と「高度な JavaScript 技集」の utf.js を参考にしました。サロゲートペアには対応していません。

解決方法だけ書いてみるとあっさりしすぎているけど、調べていく上で UCS と UTF の関係が勉強になりました。flex2 アプリとしてもこれで一応完成の形にはなりましたかね。

アプリはこちら: http://tsuyuguchi.com/masaaki/flex2/QRcode/ ソースは Flash アプリ上で右クリック→「View Source」で mxml を見ることができるので、そこから Script の source であるところの QRcode.as を辿って見ることができます。

テキストボックスへ入力した後そのまま Enter を押すと次のテキストボックスへフォーカスを移すようにしてみました。あとは ActionScript と JavaScript の連携する方法を調べて、同じページ内に画像を表示させるようにしてみました。こういうのができると Flash っぽいって感じがします。

あと、困っていることが一つあって ActionScript で パラメータを escape すると日本語は %uXXXX の UTF-16 escape の形に変換されるのだけど、それをうまいこと decode する方法が、 Jcode.pm だと UTF-16 扱えないし、かといってサーバにはいっている perl は 5.0 で Unicode がばりばり使えるわけでなし。

なので、今は日本語が通りません。正確に言うと日本語を入力しても画像は作られるのだけど、うまく読み取ってくれません。

アプリはこちら: http://tsuyuguchi.com/masaaki/flex2/QRcode/

フォームに入力された値を検証するのに Validator というコンポーネントを使ってみた。半角のみ受け入れるフォームには正規表現を使って検証する RegExpValidator というコンポーネントを、誕生日には DateValidator を用いた。電話番号にも PhoneNumberValidator というバリデータコンポーネントが用意されているのだけど、この仕様が、”0-9,#,*" が OK という DoCoMo の QRコード仕様にあわなかったので、カスタムバリデータを作ってみた。

カスタムバリデータを作るにあたってカスタムコンポーネントのコンパイルの仕方も調べる必要があった。コンポーネントのコンパイラは compc を使う。そして、コンパイル用の xml ファイルを用意して、

compc -load-config+=myValidators-config.xml

とすれば OK。compc は load-config を指定するとシステムデフォルトのコンフィグファイルが読み込まれないので、設定を上書きするという意味で += でファイルを指定する必要がある。これにハマってしまった。そして mxmlc で swc ファイルをリンクするためには、compc で作成したカスタムコンポーネントの swc ファイルのあるパスを library-path で指定すればリンクしてくれます。mxmlc の config ファイルはファイル名を {mxml ファイル名}-config.xml とすれば、コマンドライン引数で指定しなくても mxmlc が勝手に読み込んでくれる。

compc を使わない、つまりカスタムコンポーネントを個別にコンパイルせずに mxmlc で一発コンパイルとリンクをする場合は mxmlc のコンフィグで必要なソースファイルのあるディレクトリを source-path で指定すれば、OK。
参考までに compc の confi ファイル(myValidators-config.xml ) と mxmlc の config ファイル(QRcode-config.xml) へリンクを張っておく。

「Flex アプリケーションの構築と展開」を読んでいると mxmlc 自体にインクリメンタルコンパイルという必要なファイルだけコンパイルするという Make みたいなことをやって機能があるようで、これを使えば開発者が意図的に分割コンパイルする必要はないみたいだ。でもカ、スタムコンポーネントを別のアプリケーションで使い回す場合やソースを公開せずに swc だけを誰かに提供する場合なんかは compc で swc を作る意味があるのかも。

今回は、もう Makefile も書いてしまったので、今後不都合がでないかぎりは compc + mxmlc の 2 段構えでいく。

とりあえず、これまでいろんなところで見聞きした flex2 に対する予備知識を自分のものにするためにQRCode 作成 CGI のフロントエンドを flex2 アプリ版にしてみようと思い立ち、ありとあらゆるドキュメントを見ながら、やっととりあえずの UI と空のイベントハンドラができた。ふぅ。こちら：

http://tsuyuguchi.com/masaaki/flex2/QRcode/

構成は mxml と action script なのだが、action script はボタンのイベントハンドラだけで後はすべて MXML だ。右クリックで View Source を実行するとその MXML を見られるようにしてみたので、興味のある人はどうぞ。

ここまでのポイントはステートとデータバインディングかな。特にステートは作りながら画面遷移の設計が MXML にスムーズに対応するような気がした。データバインディングはコンボボックスに使ってみた。動的なバインディングをしてはいないので、今のところ HTML の SelectBox と何ら変わらないのだが…。 UI コンポーネントの配置は java.awt や Perl/Tk が XML になったという感じで、レファレンスがあれば後は特に難しいと言うことはなかった。

Action Script はコンパイルオプションに -strict=true を指定して片付けを意識して書いてみた。たった 10 行なのに JavaScript のつもりで書いたら警告がそれなりに出てビックリした。僕は C 上がりなので片付けは特に自分にとって問題はないが、ECMAScript の型指定、特に関数のインタフェース定義にやや違和感を覚えた。もっとも慣れの問題でしかないが。ActionScript はこの先 Flash API を使うようになったらそこでまた止まって休憩することになりそうな予感だ。

flex2 builder はインストールしていないので、全部エディタで書いた。開始タグを書いたからといって閉じタグが自動補完されることもなく完全に from full scratch。その昔、ウェブ界でテキスト系なるものが流行ったときに、サイトを作るのに HTML手書き派とビルダー派に分かれていたことを思い出して、なんだかちょっと懐かしくなった。

ちょっと興味があるのでとりあえずインストールしてみた。

インストールの仕方はAdobe のページを参考にしました。

必要なものとインストールの手順は以下に（上から順番に）：

■ JDK のインストール

Adobe によると JDK 1.4 または 1.5 が必要です。JDK 1.4 の場合、JDK 1.4.2_06 以降が必要になります。 との事です。 私は "Java SDK" でググって一番にヒットした 1.4.2_13 をインストールしました。

■ Path を通す

JDK をインストールしたフォルダの bin フォルダに Path を通します。Path の設定の方法はこのページが参考になるでしょうか。

■ flex2 SDKのダウンロード

adobe のこちらのページからダウンロードできます。ダウンロードするにはメールアドレスを登録する必要があります。メールアドレスを登録し、サインインした後は「Flex 2 SDK （無償）と日本語パック」から 「 Flex SDK」と「Flex Language Pack」をダウンロードします。それぞれファイル名は flex_sdk_2.zip と flex_sdk_2_ja.zip です。

■ flex2 SDK のインストール

flex_sdk_2.zip を適当なフォルダに展開します。 ここでは C:\flex_sdk_2 に展開したとして以下を進めます。

■ Flex Language Pack のインストール

flex_sdk_2_ja.zip を展開します。展開されたフォルダ内にある frameworks, lib, sample_ja, license_ja.htm, readme_ja.htm を C:\flex_sdk_2 に上書きします。

■ Path を通す

C:\flex_sdk_2\bin にパスを通します。

■ Flash 9 Player のインストール

C:\flex_sdk_2\player\debug にある Install Flash Player 9.exe を実行して Flash Player をインストールします。

■ 再起動

設定した Path を有効にするために PC を再起動します。

次にインストールが正しくできているか確認します。コマンドプロンプトから以下のようにします。 C:\flex_sdk_2\samples\build-sample.bat を実行します。以下のようにビルドされた swf ファイルとサイズがいっぱい出てくればうまくいっています。

C:\> cd C:\flex_sdk_2\samples
C:\flex_sdk_2> .\build-samples.bat
設定ファイル "D:\flex_sdk_2\frameworks\flex-config.xml" をロードしています
D:\flex_sdk_2\samples\explorer\explorer.swf (293842 bytes)
設定ファイル "D:\flex_sdk_2\frameworks\flex-config.xml" をロードしています
D:\flex_sdk_2\samples\explorer\loaderPanel.swf (120280 bytes)
...

ビルドが終われば、samples 以下の各フォルダに swf ファイルができているので実行してみる。

次に sample_ja でも同じように build-samples.bat を実行したのですが、

C:\flex_sdk_2\samples_ja>.\build-samples.bat
processing C:\flex_sdk_2\samples_ja\explorer\build.bat
設定ファイル "C:\flex_sdk_2\frameworks\flex-config.xml" をロードしています
エラー: ResourceBundle のクラスを解決できませんでした : styles。
...

となって失敗してしまいます。これは 2ch の Action Script 3.0 スレによるとSDK のバグのようで、製品版では修正されているようです。