akihiro kamijo

March 04, 2009

Flex SDK 3.3 公開

Flex SDK 3.3 が公開されましたのでお知らせします。

US のサイトから SDK とデータビジュアライゼーションコンポーネントがダウンロードできます。（Flex Downloads） また、Adobe Open Source のサイトに Open Source SDK 3.3 の参るストーンビルドが公開されています。（Flex 3 SDK Downloads）

今回のアップデートは、先日の Flash Player と AIR の更新への対応になります。あわせて主要なバグフィックスも行われています。

インストール手順については、こちらのテックノートをご覧ください。（Flex 3 SDK リリースノート） 現時点ではまだ SDK 3.2 発表時の内容ですが、インストール手順自体は同じです。

Posted by ackie at 04:27 PM | Comments (4)

February 26, 2009

ILOG Elixir V2 公開

Flex のデータ可視化コンポーネントの ILOG Elixir の新しいバージョンが公開されました。（ILOG Elixir V2）

新しく追加されたコンポーネントは、ガントチャート、ヒートマップ、OLAP チャート、カレンダーです。既存のコンポーネントも更新されています。デモが ILOG のサイトに公開されていますので、ご興味があれば。（ILOG Elixir demos）

Posted by ackie at 05:49 PM | Comments (1)

November 21, 2008

FlexBuilder 3.0.2 / SDK 3.2 の公開

Flex Builder 3.0.2 は Flex SDK 3.2 をベースにした、Flash Player 10 と AIR 1.5 を正式にサポートするバージョンです。20 件ほどのバグ修正も行われています。（Flexbuilder: Fixed Bugs in 3.0.2）

Flex SDK 3.2 では、80 件ほどのバグフィックス （SDK: Fixed Bugs in 3.2） に加え、新機能としてバージョンの異なる Flex アプリケーションをひとつのアプリケーション内で利用できる Marshall Plan が追加されています。（Marsharll Plan についてはまた改めて説明をいたします）

Flex Builder のアップデートはヘルプメニューから更新を確認を選択してください。アップデータのダウンロードも、そのうちこのページ （Adobe Flex ダウンロード） からできるようになると思います。

Flex SDK 3.2 のダウンロードはオープンソースサイトから最新のマイルストーンビルドを選択してください。（Flex 3 SDK Downloads）

Flex Builder 3.0.2 の Flex プロジェクトを新規に作成すると、デフォルトではターゲットの Flash Player のバージョンが 9 になります。Flash Player 10 用のプロジェクトを作成するには、プロジェクト作成後に、プロジェクトを選択後右クリックして プロパティ → Flex コンパイラ → HTML ラッパー → 必要な Flash Player バージョン と辿ってフィールドに 10.0.2 のような適当な値を設定します。これをしないと Flash Player 10 の新しい API は利用できません。

Flex Builder 3.0.2 のアップデート時に Flash Player 9 のインストールを確認されるのは、このように Flex Builder 3.0.2 のデフォルトが Flash Player 9 をターゲットとしているためです。Flash Player 10 のデバッグプレーヤが必要な場合は後から手動でインストールする必要があります。（Flex Builder のインストールディレクトリ下の Player フォルダ内にあります）

AIR のプロジェクトでは AIR 1.5 がデフォルトになります。Flex Builder 3.0.2 で AIR 1.1 のプロジェクトを新しく作成したい場合には、

1. xxx-app.xml ファイルの application タグの名前空間を 1.5 から 1.1 に変更
2. プロジェクトを選択後右クリックして プロパティ → Flex コンパイラ → 追加コンパイラ引数 に -target-player=9.0.151 のように Flash Player のバージョンを指定

を行います。

1.5 の名前空間は Flash Player 9, 10 ともに使えますが、1.1 の名前空間は Flash Player 9 の時だけ使えます。バージョンが合わない場合にはアプリケーションを実行してみても何も実行されません。（エラーも表示されません）

Posted by ackie at 07:35 PM | Comments (0)

August 16, 2008

Flex 3.1 SDK オープンソースサイトに公開

Flex 3.1 SDK が公開されました。AIR 1.1 を正式にサポートするマイルストーンリリースです。Adobe オープンソースサイトからダウンロードできます。（Flex 3 SDK Downloads） ビルド番号は 3.1.0.2710 です。

Flex 3.1 はメジャーリリースですので、今回は Flex Builder のパッチとしても提供されることになると思います。（たぶん）

この発表が行われたことで Flex 3.0.3 SDK への暫定 AIR 1.1 サポートは近々終了することになると思われます。お手数ですが Flex 3.0.3 ベースの AIR アプリケーションは Flex 3.1 への移行をご検討ください。いくつかのバグフィックスも行われていますので可能であれば Web アプリケーションについても移行をお勧めします。修正されたバグのリストは Flex バグ管理サイトから確認できます。（SDK: Fixed Bugs in 3.1 : 要ユーザ ID）

今後は、以前の記事 （Flex 3.0.3 SDK 公開と今後のロードマップ） にも書きましたが、今秋に Flex 3.2 のリリースが予定されています。

Posted by ackie at 05:31 PM | Comments (0)

July 17, 2008

Flex 3.0.3 SDK 公開と今後のロードマップ

Flex 3.0.3 SDK の stable build が公開されました。（Flex 3 SDK Downloads） いくつかのバグフィックスに加え、locale/ja_JP が zip ファイルに含まれていますので、これから AIR 開発環境を設定する人にはお勧めです。Flex Builder の設定は、以前の記事 （Adobe AIR 1.1 公開です） と英文ですがテックノート （Update Flex Builder to use the Adobe AIR 1.1 SDK） をご覧ください。

今後は、AIR 1.1 に正式対応するマイルストーンリリースとして Flex 3.1 が 8 月に公開される予定です。　（3.1 がリリースされるまでの間は暫定的に 3.0.2 がサポートされるそうです）

それから、今秋には Flex 3.2 も公開が予定されています。Adobe オープンソースのサイトによると Flex 3.2 では Marshall Plan と呼ばれる新機能が追加される予定になっています。Marshall Plan は異なるバージョンの SDK で開発された SWF を 1 つのアプリケーション内で利用可能にする技術で、例えば、将来のバージョン （Gumbo ?） で作成したメインのアプリケーションに Flex 3.1 SDK で作成してあったサブアプリケーション （SWF） をロードして使うようなケースが想定されています。

Marshall Plan は Flex 3.1 以前のバージョンでは利用できないとの記述があったので AIR 1.1 サポートの件もあわせ既存 Flex アプリの 3.1 対応は検討する価値がありそうです。

Posted by ackie at 06:40 PM | Comments (0)

July 15, 2008

Gumbo （Flex SDK 次期バージョン） の発表

Gumbo はオープンソース Flex の次バージョンのコードネームです。Adobe のオープンソースサイトに最初の stable build が公開されました。（Gumbo Downloads）

Gumbo の開発はまだ始まったばかりで、今回の発表も早い段階からコミュニティのフィードバックを受けられるよう行われたものです。仕様についての意見や要望 （もちろんバグも） はバグデータベース（http://bugs.adobe.com/flex/）に登録できますのでよろしくお願いします。入力内容は日本語でも大丈夫です。ちなみに、バグベースはログインしたら Profile → Preference と進んで UI を日本語に設定することが可能です。

以下の 3 つが Gumbo の開発テーマとして挙げられているものです。Flex 3 に対する要望として多かったものから選ばれたとのこと。

• Design in Mind: デザイナーとデベロッパーの連携を容易にするフレームワーク、スキンデザインを容易にするコンポーネントアーキテクチャの提供
• Developer Productivity: コンパイラのパフォーマンス、データバインディング機能の強化等
• Framework Evolution: Flash Player の新しい機能 （テキストエンジン等） への対応

Gumbo の公開予定についてはまだ努力目標程度の確度と前置きされていますが 2009 年後半となっています。

Posted by ackie at 11:53 AM | Comments (0)

June 18, 2008

Flex 3 のセキュリティアップデート　（3.0.2 SDK）

Flex 3 に潜在的なクロスサイトスクリプティングの脆弱性が発見されました。影響を受けるのはヒストリー管理の機能を使用しているアプリケーションです。Flex 2 はこの問題の影響を受けません。

該当するアプリケーションを開発している場合は、この問題に対処するため Flex 3.0.2 SDK にアップデートすることをお勧めします。（Flex 3 SDK Downloads） Flex Builder 3 開発環境の更新方法は livedocs をご覧ください。（Flex Builder での複数の SDK の使用）

既に展開済みのアプリケーションについては history/historyFrame.html をひたすたら新しい SDK 内のファイルと置き換えることで対応できます。SDK のディレクトリ内では以下の 3 箇所に該当するファイルがあります。

• client-side-detection-with-history/history/historyFrame.html
• express-installation-with-history/history/historyFrame.html
• no-player-detection-with-history/history/historyFrame.html

Posted by ackie at 05:47 PM | Comments (2)

March 10, 2008

BlazeDS のプッシュ機能（その３）

ちょっと間が空きましたが、BlazeDS を使ったサーバからのプッシュ 3 つ目の方法です。

３．Polling + Piggybacking （使用するチャネル： AMFChannel）

この方法は、昔ながらのポーリングをベースにしています。基本的には、サーバにデータの有無を確認するポーリングリクエストを定期的に繰り返し送信することでサーバから最新の情報を取得します。

それに加えて、ポーリング以外のタイミングでサーバへのリクエストを送信する際にも、そのリクエストにポーリングリクエストを付加して送信します。するとサーバは元々のリクエストに対するレスポンスに加えて、ポーリングへのレスポンスがあればそれも一緒に返します。（このように抱き合わせで送信することを指してピギーバックと呼んでいます）

さて、ポーリング＋ピギーバッキングの設定例です。

<channel-definition id="polling-piggybacking-amf" class="mx.messaging.channels.AMFChannel">
<properties>
  <polling-enabled>true</polling-enabled>
  <polling-interval-millis>10000</polling-interval-millis>
  <piggybacking-enabled>true</piggybacking-enabled>
  ...
 

ロングポーリングのときと同様に polling-enabled を true にしてポーリング機能を有効にします。そして、polling-interval-millis には 10000 を設定しています。これは 10 秒間隔でポーリングリクエストを送信するようにという指定です。

polling-interval-millis の値を小さくするほどリアルタイム度が高くなります。（ロングポーリングでは 0 でした） が、その分余計なオーバヘッドが発生しますし、無駄なリクエストの数も増える可能性があります。この方法はせいぜい数秒に一度情報が更新されれば大丈夫といった使い方が向いていそうです。

ロングポーリングの例と違い、上のサンプルでは wait-interval-millis を明示的に指定していません。サーバ側はリクエストを受けたら直ぐに返信するという動きにしたいので、デフォルト値 （0） から変更する必要が無いためです。

あとは、piggybacking-enabled を true にしておくことで定期的なポーリング以外のタイミングでも情報を受け取れるようになります。効果の程は、どのくらいアクティブにクライアント側でのインタラクションが行われるかによりそうですね。

この方法は、前の 2 つの方法と違ってサーバのスレッドをブロックする必要がありません。そのため、スケーラビリティの面からは有利だと考えられます。とはいえ、サーバ一台辺りが処理できる数は数百のオーダーだと思われるので、よりスケーラビリティの必要な環境では BlazeDS の代わりに LCDS の利用も検討してみてください。

最後に、この方法に限らず、サーバからのプッシュと RPC に個別のチャネルを使用する必要はありません。効率的なリソース使用の観点からは一つの ChannelSet で RPC やサーバからのプッシュやデータ管理用コンポーネント全てをまかなうようにすることをお勧めします。

Posted by ackie at 09:57 AM | Comments (0)

March 04, 2008

BlazeDS のプッシュ機能（その２）

引き続き BlazeDS を使ったサーバからのプッシュ機能の設定のご紹介です。

２．ストリーミングチャネルの使用 （使用するチャネル： StreamingAMFChannel）

この方法では、クライアントが HTTP リクエストをサーバに送ってクライアント・サーバ間の接続を確立すると、サーバはその接続をデータプッシュ専用のチャネルとして張りっぱなしにします。サーバからのデータは HTTP 1.1 の Transfer-Encoding: chunked を使って送信されます。（そのため HTTP 1.0 クライアントはこの方法が使えません）

ロングポーリングではサーバがデータをプッシュする度にクライアントは新しいポーリングリクエストを送りなおす必要がありましたが、ストリーミングチャネルでは一度リクエストが送られると後はサーバからのプッシュのみ繰り返しになります。ポーリングによるオーバヘッドが無いことや、より遅延の少ないデータ配信が可能であることはこの方法の利点と考えられるでしょう。

下はストリーミングチャネルの設定例です。

<channel-definition id="my-streaming-amf" class="mx.messaging.channels.StreamingAMFChannel">
<properties>
  <idle-timeout-minutes>0</idle-timeout-minutes>
  <max-streaming-clients>100</max-streaming-clients>
  <server-to-client-heartbeat-millis>5000</server-to-client-heartbeatmillis>
  ...
 

idle-timeout-minutes に 0 を指定するとチャネルがタイムアウトにより閉じられることがなくなります。これで、ずっとチャネルを開きっぱなしの状態が実現されます。

ストリーミングチャネルも接続されているクライアントの数だけサーバのスレッドを占有します。そのため max-streaming-clients を使ってストリーミング用に使用できるスレッドの最大数を指定するようにします。上の例では 100 が設定されています。

貴重なスレッドを不要なのにも関わらず使用していたら効率がよくありません。そのため、サーバからクライアントがちゃんと接続されているか確認信号を送ることができるようになっています。server-to-client-heartbeat-millis に正の値 （単位はミリ秒） を指定するとこの機能が利用できます。上の設定では 5 秒おきにハートビートが送信されます。

ところで、ストリーミングチャネルでは、一回のリクエストに対して複数回に渡りレスポンスを送るという構造になるため、サーバとクライアント間のネットワーク構成の影響を受ける可能性があります。例えば、間の HTTP プロキシがデータをバッファしてからクライアントに送るような環境では、リアルタイムのプッシュが実現できません。

そのため、idle-timeout-minutes には 0 でなく 2 や 3 （単位は分） を指定して、「データは送られているがクライアントには届いていない状況」を判別できるようにしたほうが安全だと考えることができます。その場合は、クライアント側では「届いていないと判断されてチャネルが閉じられてしまった場合」に備えて、ChannelSet に 2 次利用できるチャネル （ポーリング AMF チャネル等） を指定しておく必要がありそうです。

このようにストリーミングチャネルは動きに少し癖があります。最初にご紹介したロングポーリングの方が一般的には使いやすいかもしれませんね。

3 つめの方法は、また次回。

Posted by ackie at 07:55 PM | Comments (0)

March 03, 2008

BlazeDS のプッシュ機能

Flex 3 と一緒に BlazeDS がオープンソースプロジェクトとしてリリースされました。BlazeDS は RPC とサーバからのプッシュを実現するためのサーバ側のテクノロジーです。クライアント側は Flex 3 のライブラリを使用します。

BlazeDS のプロジェクトサイト（http://opensource.adobe.com/wiki/display/blazeds/BlazeDS） には GNU LGPL 下で turnkey （Tomcat 付き構成済みバイナリ）、バイナリ、ソースの 3 種類のリリースバージョンが公開されています。

また、Adobe のバグ管理サイトにも BlazeDS 用のバグデータベースが追加されました。（http://bugs.adobe.com/blazeds/） 例によって、日本語表示を選択することが可能です。

BlazeDS と Flex （もしくは AIR） アプリケーションの接続にはチャネルの指定が必要です。RPC の利用には LCDS でもおなじみの AMFChannel または HTTPChannel 等を使用しますが、サーバからのプッシュにはこれらに加えて StreamingAMFChannel やStreaminｇHTTPChannel 等が使用できます。

（チャネル名に含まれる AMF と HTTP による違いは送信するデータフォーマットがバイナリ形式かどうかだけなので、この記事では AMF のみ取り扱います）

さて、BlazeDS でのサーバからのプッシュの実現は、3 種類の方法から選択することができます。以下、それぞれの特徴について簡単に説明します。

１．Long Polling （使用するチャネル： AMFChannel）

この方法では、クライアントは通常の HTTP リクエストとしてポーリングをサーバに行います。サーバ側ではクライアントへ送るデータが無かった場合は、そのまま新しく送信するデータが利用可能になるまでレスポンスを保留します。（これがロングポーリングと呼んでいる理由です） クライアントはデータを受信すると次の受信に備えるため、直ちに新しいポーリングのリクエストをサーバに送信します。

クライアントが毎回リクエストを送る手間を除けばほぼリアルタイムのプッシュが実現できます。この方法の利点の一つは、一般的な HTTP のリクエスト・レスポンスのパターンを利用するため、ネットワーク環境について特別に心配する必要がないことです。

下はロングポーリング用チャネルの設定例です。

<channel-definition id="long-polling-amf" class="mx.messaging.channels.AMFChannel">
<properties>
  <polling-enabled>true</polling-enabled>
  <polling-interval-millis>0</polling-interval-millis>
  <wait-interval-millis>-1</wait-interval-millis>
  <max-waiting-poll-requests>300</max-waiting-poll-requests>
  ...
 

まず polling-enabled を true にしてポーリング機能を有効にしています。次の行では polling-interval-millis に 0 を指定することでクライアントがデータを受信したら直ぐ （待ち時間が 0） 次のポーリングを行うよう設定しています。

サーバ側は、wait-interval-millis を -1 にすることで、ポーリングに対するデータが利用可能になるまでずっとレスポンスの送信を保留するようになります。ここまでがロングポーリングの基本設定です。

ロングポーリングで注意が必要なのは、返事を保留しているリクエストの数だけサーバのスレッドがブロックされてしまうという点です。無制限にポーリングリクエストを受け付けたりすると、全てのスレッドが保留状態になってサーバが新規リクエストを一切受け付けられなくなってしまうかもしれません。

そこで、上の例では max-waiting-poll-requests を使い、受け付けられるポーリングリクエストの最大値を 300 に指定しています。実際には、この数値はアプリケーションサーバのスレッドの最大数と、スレッドの使われ方を基準に決定することになることと思われます。

あとは、不要に長時間スレッドを占有する状態を避けるため、wait-interval-millis に例えば 60,000 （1 分） 程度の値を設定して、一旦サーバ側のリソースを開放するという方法も効果があるかもしれません。

なお、同じ HTTP セッションを使って複数のポーリングリクエストを行うことはできません。（サーバ側で制限しています） 例えば、複数の Flash Player インスタンスを同一ブラウザ内で起動する場合、一時点では、どちらか片方のみがロングポーリングを利用できます。

この方法では、サーバがデータをプッシュする度に、クライアントがポーリングリクエストを送るという「余分な」負荷がかかります。沢山のクライアントに頻繁にデータを送るケースではあまり向かない（効率が悪くなる）可能性もあるということですね。

ちょっと長くなったので、続きはまた次回。

Posted by ackie at 06:15 PM | Comments (0)

February 27, 2008

Flex 3 日本語版リリース

Flex 3 日本語版が発表になりました。出荷は 3 月中旬開始予定ですが、60 日間トライアル版が既にダウンロードできるようになっています。（Flex Builder 3 60 日間無償体験版）

Flex Builder 3 は standard と professional 2 つのバージョンが用意されていて、価格はそれぞれアドビストア価格で stanard が 31,500 円、 Professional が 89,250 円です。Flex Builder 2 のライセンスをお持ちの方はアップグレード版の購入が可能とのことです。

2 つのバージョン間の機能上の違いは、Advanced DataGrid, チャートコンポーネント、プロファイラ機能等の有無になります。英語になりますが詳しくはこちらのページをご覧ください。（Flex version comparison chart）その他の新機能は、こちらも英語ですが US のサイトに一覧が掲載されています。（Flex Builder 3 features）

それから、残念なことに、CS3 用の Flex スキンデザイン機能拡張や Flex Component Kit for Flash CS3 は英語版のみとなったようです．．．英語版がダウンロードできるようなので一応お知らせしておきます。（Flex Skin Design Extensions）

Posted by ackie at 09:24 AM | Comments (3)

December 13, 2007

Adobe BlazeDS オープンソースプロジェクト公開

BlazeDS は Adobe からの新しいオープンソースプロジェクトです。Remoting と Web メッセージングのソースコードが LGP v3 ライセンス下で公開されます。AMF のスペックもあわせて公開されます。

Adobe Labs から BlazeDS のパブリックベータ版がダウンロード可能です。（BlazeDS@Labs） フィードバックやバグレポートには当面パブリックバグデータベースが使用されるようです。

BlazeDS を Adobe が ビルドした LiveCycle Data Services, Community Edition も提供される予定です。こちらを利用すると Adobe からのサポートプログラムに登録できるようになるようです。従来の LCDS ES は引き続き販売されます。

さて、BlazeDS は従来 LCDS ES の一部として提供されていた機能をオープンソース化したものです。提供される機能は以下の 2 つです。

remoting

Flex や Ajax アプリケーションからサーバ側の Java オブジェクトのメソッド呼び出し（RPC モデルです）を実現することができます。データ送信のためのフォーマット変換ロジックを記述する必要が無いこと、バイナリデータフォーマットである AMF の使用によるパフォーマンス向上などの利点があります。

Web メッセージング

Flex や Ajax アプリケーションにサーバからメッセージをプッシュすることができます。クライアントは「トピック」に登録することでメッセージを受信できるようになります。クライアント間のコラボレーションを実現することも可能です。

BlazeDS の Web メッセージングは、COMET と同様のポーリングモデルか、クライアントとサーバ間に永続的なデータプッシュ用の接続を実現する新しい HTTP ストリーミングチャネルを使用します。CPU あたりおおよそ 100 から 200 程度の接続を処理することができます。（一般的なサーブレットと同様に考えられるという理解で書いています）

これに対して LCDS ES では CPU あたり数千の接続を扱うことが可能でクラスタリング機能も提供されるため、スケーラビリティの求められる環境では引き続きこちらを選択する必要があると思われます。RTMP のサポートも LCDS ES のみの機能です。

Posted by ackie at 02:02 PM | Comments (0)

October 03, 2007

Thermo （Adobe の新しい RIA ツール） 情報

MAX で新しい製品についての話がありましたのでご紹介します。といっても、まだ実際に使えるようになるのはだいぶ先のようですが。

さて、Thermo は RIA の UI デザイン作業を効率化するために提供しようと考えられているツールです。Thermo を使った際に想定されているワークフローは以下のようなものです（たぶん）。

1. Photoshop, Illustrator, Fireworks で画面デザインを作成する
2. 作成したファイルを Thermo でを直接開く、または Thermo の描画ツールを使って画面をデザインする
3. 画面デザインに対してインタラクションを追加する
4. トランジション等のビジュアルエフェクトを定義する
5. サンプルデータを設定して実際に動かしてみる
6. MXML として書き出して開発者に渡す

Photoshop, Illustrator, Fireworks はグラフィックデザイナー向け、Thermo はインタラクションデザイナー向けといった感じでしょうか。FlexBuilder とのファイル共有ができるので開発が楽になりそうな気がしますね。

デモで使われたスクリーンショット等が Labs にあります。（Thermo@Labs）

Posted by ackie at 06:05 PM | Comments (1)

October 01, 2007

Flex 3 beta 2

Flex 3 ベータ 2 がリリースされましたので簡単なご紹介を。（Adobe FlexBuilder@Labs, Adobe Flex SDK@Labs）

Flex 3 Planning ページの最新情報によれば、Flex 3 のスケジュールは以下のようになっています。

• April 9, 2007 M1 Release (Alpha)
• June 11, 2007 M2 Release (Beta 1)
• October M3 Release (Beta 2) - Feature Complete
• Late 2007 M4 - Release Candidate
• Early 2008 Final Release

今回は上から3つ目の M3 と呼ばれるリリースで、機能実装が終了した状態であることがわかります。この先、年内には正式リリース候補が公開され （M4）、来年の早い時期に正式出荷される予定ですので、今後はバグフィックスが主な作業になると思われます。

システム条件等はベータ 1 から変わっていませんが、既存の環境にそのままインストールすると問題の起きるケースがあるようです。古いバージョンをアンインストールするか別の場所にインストールするようにしてください。

また、クロスドメイン RSL 機能を使用する場合、Flash Player は一緒に公開された最新版 （9,0,60,235） を使用する必要があります。この Flash Player はベータ版ですので、通常の Web 閲覧環境で使用には十分ご注意ください。他の機能に関しては、最新の正式リリース版 （9,0,47,0） でも大丈夫なようですが、できるだけ最新のベータ版をお使いいただければと思います。

Flex Skin Design Extensions

CS3 製品で制作したスキンを Flex 3 にインポートするための機能拡張のプレリリース版が公開されました。Photoshop, Illustrator, Flash, Fireworks それぞれに機能拡張が提供され、FlexBuilder 3 のスキンインポートウィザード用に合わせた形でスキンをデザインできるようになります。

ダウンロードは Labs からどうぞ。（Flex Skin Design Extensions@Labs Downloads）

ILOG Elixir

最後に、Adobe が ILOG Elixir の再販を検討していることがアナウンスされました。ILOG Elixir は Flex 3 用のデータビジュアライゼーションコンポーネントで、さまざまなグラフやマップがあります。詳しくは製品情報ページをご覧ください。（ILOG Elixir）

Posted by ackie at 07:30 PM | Comments (2)

July 23, 2007

Flex 2.0.1 Hotfix 3

Flex 2.0.1 SDK Hotfix 3 が US のサポートページに公開されていますのでお知らせします。

まだ日本では発表されていませんが、US で一緒に発表された LCDS 2.5.1 を利用する際は Flex Builder 2.0.1 に Hotfix 3 を適用する必要があります。将来 LCDS 2.5.1 を採用するプロジェクトがあれば、ご面倒でも Hotfix 3 の件は忘れずにご対応ください。逆に、Hotfix 3 は LCDS 2.5.1 との使用が基本です。サーバ側に FDS 2.0.1 をご使用の場合はご注意ください。

そのほかの注意事項としては以下のものがあります。

• Flex Builder 2.0 はサポートされません
• Hotfix 3 を適用する前に Hotfix 2 を適用する必要があります
• Hotfix で修正されている件に該当する問題が起きていない場合は適用をお勧めしません

インストール手順などの詳細は以下のテックノートをご覧ください。

• Flex 2.0.1 Hotfix 3
• Flex 2.0.1 Hotfix 2

Posted by ackie at 11:26 AM | Comments (0)

June 11, 2007

Flex 3 パブリックベータ開始

Flex 3 のパブリックベータが Adobe Labs に公開されました。FlexBuilder 3 ベータのページに加え （FlexBuilder 3@Labs） 今回から独立して SDK のページ （Flex 3 SDK@Labs） が作られました。

従来、Flex のバージョンアップは Flash Player のバージョンアップと同じスパンで行われてきましたが、先日のオープンソース化の発表もふまえ、今後は短い期間で少しずつバージョンアップをしていく方針になったようです。先日の LCDS 2.5 ES の発表により、Flex SDK / FlexBuilder がサーバ側のソリューションから切り離されましたので、効率よく実効性の高い拡張ができる状況が整ってきているように思われます。

（ちなみにオープンソースプロジェクトも今日から始動しています。詳しくはこちらの記事をご覧下さい - Flex オープンソースプロジェクト開始）

Flex 3 のメインテーマは以下の4つです。

1. デザイナー/デベロッパー間ワークフローの改善
2. AIR アプリケーション開発のサポート
3. データ操作機能の改善
4. プラットフォームの機能向上

4 つのテーマそれぞれの主な項目は以下の通りです。

１．デザイナー/デベロッパー間ワークフローの改善

• FlexBuilder デザインビューの改善（カラーピッカーや拡大縮小ツール）
• CSS エディタ搭載
• 拡張された制約ベースのレイアウト
• ステートに基づくスキンのサポート
• OpenType フォントサポート
• グラフィックアセットのインポートウィザード
• Flash 統合キット

２．AIR アプリケーション開発のサポート

• AIR プロジェクトの作成
• コードヒント表示やエラーのレポート
• アプリケーションデバッグ機能
• アプリケーションのパッケージ作成

３．データ操作機能の改善

• 高機能なデータグリッドコンポーネント
• チャートコンポーネントの機能拡張
• Web サービスウィザード
• データウィザード

４．プラットフォームの機能向上

• フレームワークをキャッシュすることによるアプリケーションサイズの縮小
• メモリおよびパフォーマンスのプロファイラ
• コードのリファクタリング機能
• JavaScript / Ajax Wrapper による Flex コンポーネントの容易な埋め込み
• アプリケーションの特定な状態にリンクできるディープリンク
• コンパイラのパフォーマンス改善
• 実行時のローカライゼーションサポート

Posted by ackie at 01:03 PM | Comments (2)

Flex オープンソースプロジェクト始動 & バグデータベース公開

Flex 3 ベータの公開に伴い、先日の記事に書いたとおり Flex のオープンソース化の第一歩が開始されました。

最終的な体制の確立は今年末が目標で、現時点ではまだコンパイラのコードなど公開されていないものもあるようですが、発表されたばかりの Flex 3 のフレームワークのコード等は Flex SDK のページ （Flex 3 SDK@Labs） に既に公開されています。

また、バグデータベースも使用可能になっています。バグデータベースには Flex や ActionScript コンパイラなど、現在 5 つのプロジェクトがあります。下は主なプロジェクトへの直リンクです。

Flex ： http://bugs.adobe.com/flex
ActionScript : http://bugs.adobe.com/asc

バグデータベースでは、バグの登録やステータス管理だけでなく、欲しい機能に対する投票もできます。誰でもアカウントが作成できますので、是非ご参加ください。

さらに、今後の開発プランもwiki に公開されています。FlexBuilder 3 のロードマップ （Flex Builder 3 Plannning@flexwiki） と Flex SDK （Flex 3 Planning@flexwiki） のページは是非チェックしてくださいね。

ところで、バグデータベースでは日本語がサポートされています。アカウントを作成する段階までは英語のインターフェースのみですが、その後設定を変えると日本語の UI に変更することができます。手順は以下の通りです。

1. ログイン後、画面右上に表示される "Profile" をクリック
2. 次の画面の左に表示されるナビゲーションの下のほうにある "Edit Preferences" をクリック
3. 次の画面で Locale のラベルがついたプルダウンから Japanese(Japan) を選択

バグ報告を日本語で入力することも可能です。ただし、開発エンジニアのために英語に翻訳するのが Adobe の社内スタッフに依存するため、当面は英語で入力していただいた方がありがたいかもしれません。とはいえ、この点も、年末に向けて外部のボランティアによる翻訳を可能にする方向で調整中です。早く、みんなで協力して Flex の開発が進められるようになるといいですね。

Posted by ackie at 01:02 PM | Comments (0)

June 05, 2007

Cairngorm と Flex Hotfix 2

先日より Flex の HotFix 2 が控えめに US のサポートページに公開されていますので、すでにお使い始めた方もいることと思います。HotFix 2 では LCDS 2.5 対応のためにパッケージングの変更が行われていますが、この変更の影響で HotFix 2 適用後に Cairngorm を使用すると、必要なクラスが見つからずにコンパイルエラーが出るようになります。

この問題に対応するには fdc.swc を明示的にクラスパスに追加するのが当面のワークアラウンドとのことです。Alistair のブログには対応版となる Cairngorm 2.2.1 のベータも公開されていますので（New Release - Cairngorm 2.2.1 for Flex 2.0.1 with Hotfix 2）、テストに協力できる場合はこちらもお試しいただければと思います。

Posted by ackie at 06:34 PM | Comments (0)

June 04, 2007

Flex Stress Testing Framework アップデート

先週 Google Gears が発表されましたが、Apollo とも協調して開発されるとのことで web テクノロジーの適用範囲の拡大が、より現実的になってきたような印象です。

さて、US では LiveCycle ES が発表されました。（Adobe LiveCycle Enterprise Suite） 既報のとおり FDS も名前を変えて LiveCycle Data Services ES (LCDS) になっています。LCDS 2.5 のトライアル版はサポートサイトからダウンロード可能です。（LiveCycle Data Services ES 2.5）

これにあわせて Flex Stress Testing Framework もアップデートされましたのでお知らせします。（Flex Stress Testing Frameworkp@Labs)

LCDS 2.5 の新機能は出荷が近くなったらまたまとめてお伝えする予定です。

Posted by ackie at 05:32 PM | Comments (0)

May 04, 2007

Flex Module for Apache and IIS アップデート

Flex Module for Apache and IIS が地味にアップデートされました。（Flex module for Apache and IIS@Labs） 主な変更項目は以下のようになっています。

• PowerPC サポート追加
• Windows Vista サポート関連の修正
• キャッシュによるコンパイル速度の改善
• JRE 1.4.2 互換性関連の修正
• IIS 6 で誤った content-length が送られる件への対応
• IE の自動キャッシュ機能への対応
• Windows の PATH 変数関連の対応
• template を若干変更
• Apache 1.3.7 / Windows サポート追加

Flex 2.0.1 以降と JRE 1.4.2 以降をお持ちの場合は、以下のインストーラをダウンロードしてください。

• Windows インストーラ
• MacOSX インストーラ

無い場合は SDK & JRE 込みのインストーラをどうぞ。

• Windows バンドル　インストーラ
• MacOSX バンドル　インストーラ

ライセンスアグリーメントは次の URL にあります。（Software License Agreement@Labs）

Posted by ackie at 08:56 AM | Comments (0)

April 28, 2007

Cairngorm 2.2 公開

Cairngorm 2.2 が Adobe Labs に公開されました。（Cairngorm@Labs）

今回の大きな変更の一つは Flex Data Services への依存の解消です。Cairngorm 2.2 では Flex Data Services が必要ない場合の Cairngorm と必要な場合の Cairngorm Enterprise との 2 つのパッケージに分かれました。具体的には ServiceLocator が mx.data.DataService のインスタンスを指すようであれば Cairngorm Enterprise を選択することになります。

ダウンロードはこちらのページです。（Download Cairngorm 2.2@Labs） Cairngorm と Cairngorm Enterprise それぞれのドキュメントやソースコードへのリンクがありますので必要なものを選んでダウンロードしてください。

そのほかの主な変更点は以下の通りです。（英語でごめんなさい）

• Flex SDK SWCs are no longer linked into Cairngorm.swc (produces a smaller cairngorm.swc)
• Added support for setting remote credentials
• Fixed bug with Web services not loading the WSDL (no need to call loadWSDL() explicitly)
• ModelLocator interface has been deprecated. Added com.adobe.cairngorm.model.IModelLocator
• Added deprecation metadata for compiler support
• Added dispatch() helper method to CairngormEvent class
• Commands are now added to base Controller with weak references
• Added removeCommand to FrontController
• Made commands protected in FrontController (was private)

Posted by ackie at 08:33 PM | Comments (0)

April 27, 2007

Flash CS3 で UIMovieClip を拡張して Flex コンポーネントを作成

Flash CS3 ではコンポーネントの親クラスを指定できます。指定する親クラスには提供されているクラス （MovieClip など） だけでなく、それらのクラスを自分で拡張したものも利用できます。今回は Flash Integration Kit が提供する UIMovieClip を拡張して利用するケースを紹介します。

カスタムイベントの利用

UIMovieClip は標準的な Flex コンポーネントのイベントが一通り定義されています。そのため Flash CS3 で作成したコンポーネントでも特別な追加作業なしで大きさや位置の変化をイベントを発行して Flex フレームワークに通知することができます。

もし、それ以外のカスタムイベントが必要な場合には、UIMovieClip を拡張して新しいクラスを作成し、そこに必要なカスタムイベントを定義します。そしてこの新しく作成したクラスを Flash コンポーネントの親クラスとして定義するとカスタムイベントが利用可能になります。

以下に簡単な例を紹介します。AlarmClock というクラスが、設定された時刻になると alarmEvent をディスパッチするという設定です。

まず Event メタデータをクラス定義に追加します。

[Event("alarmEvent")]
public class AlarmClock extends UIMovieClip
{
  // ここに必要なクラス定義を記述
}
 

AlarmClock クラスは UIMovieClip のサブクラスになっています。

次にムービークリップを作成し、実際にイベントをディスパッチするコードを記述します。（もちろんイベントをディスパッチするコードはクラス定義の中に記述するということにしてもかまいません）

// 例えばムービークリップのタイムラインのフレーム内に
if (currentTime == alarmTime)
{
  dispatchEvent(new Event("alarmEvent"));
}
 

これでムービークリップの親クラスとして AlarmClock を指定すれば Flash 側の作業は完了です。Flex 側では下のようにして alarmEvent を他のイベントと同様に利用できます。

<myComps:Clock alarmEvent="showAlarm()" />
 

スクリプトによるサイズ設定

measuredWidth と measuredHeight は”標準値として使用される” Flex コンポーネントの幅と高さをしめす属性です。UIMovieClip にもこの属性があります。Flash コンポーネントの親コンポーネントが十分な大きさを持っていれば Flash コンポーネントの幅と高さは大抵 measuredWidth と measuredHeight の値になります。

measuredWidth と measuredHeight の get を上書きすると親コンポーネントに通知する大きさを設定することができます。下の例のようにそれぞれの属性の get を上書きします。

package {
  import mx.flash.UIMovieClip;
 
  public dynamic class UIMCChild extends UIMovieClip
  {
    override public function get measuredWidth():Number
    {
      return _widthOfMyWish;
    }
    override public function get measuredHeight():Number
    {
      return _heightOfMyWish;
    }
  }
}
 

さて、Flex では親コンポーネントが子コンポーネントの大きさを設定する際 setActualSize() メソッドを呼びます。その際に設定される大きさはコンポーネントが期待していた大きさになるとは限りません。

このような場合 setActualSize() メソッドを上書きすることで Flash コンテンツ側の大きさが変更された際に対応するロジックを記述することができるようになります。

package {
  import mx.flash.UIMovieClip;
 
  public dynamic class UIMCChild extends UIMovieClip
  {
    override public function setActualSize(newWidth:Number, newHeight:Number):void
    {
      if (newWidth != _width || newHeight != _height)
      {
        _width = newWidth;
        _height = newHeight;
 
        // ここで必要な処理があれば記述
        // 例えば子オブジェクトの再配置など
      }
    }
  }
}
 

Posted by ackie at 05:54 PM | Comments (0)

April 26, 2007

Flex SDK のオープンソース化発表

先ほど Flex SDK のオープンソース化についての発表が行われました。（Flex SDK:Open Source） 昨秋の AVM のオープンソース化 （Adobe と Mozilla のオープンソースプロジェクト（Tamarin）） に続く Adobe からのオープンソースプロジェクトになります。

Flex SDK は Mozilla Public License (MPL) の元に公開される予定で、公開開始時期は今年の 6 月くらいになる模様です。オープンソース化されるものには Flex コンポーネントやフレームワークに加えて ActionScript / MXML のコンパイラや ActionScript デバッガも含まれます。誰でも自由にソースコードをダウンロードして拡張したりプロジェクトに貢献したりすることが可能になります。

Adobe ではオープンソースプロジェクトを実施するためのインフラ提供計画が進行中で、完成すると daily build やバグベースも公開できるようになるそうです。6 月以降の公開開始が予定されていますが、プロジェクト支援システム全体が移行完了するのは今年一杯くらいかかりそうです。これにより Adobe 社内の SDK 開発エンジニアは、事実上オープンソースプロジェクトのフルタイムコントリビュータという位置づけということになりますね。オープンソースプロジェクト開始時には、Moxie というコードネームで呼ばれる次期 Flex SDK の開発が対象プロジェクトになる予定です。

SDK が MPL 下で使用できるようになっても、商用ライセンスでの販売は継続されます。利用者はサポートの必要の有無などに応じて適当なライセンスを選択することができます。

Posted by ackie at 01:33 PM | Comments (2)

April 25, 2007

Flex Component Kit for Flash CS3 を使った Flex コンポーネントの開発

以下は、Flex Component Kit for Flash CS3 を使った Flex コンポーネントの開発における注意点です。

基準点

基準点はシンボルの左上の角である必要があります。もし他の箇所が基準点になっている場合は別のシンボルでくるんで外側のシンボルの基準点が左上になるようにすれば OK です。

フレームレート

Flash コンポーネントのフレームレートと Flex のフレームレートは同じでないと正しく動作しません。Flex のフレームレートはデフォルトで 24 fps になっていますのでそれにあわせるのがお勧めです。Flex 側のフレームレートを変えることも可能ですが、これは非常用の手段くらいの位置づけと考えた方がよさそうです。特に 24 fps より遅くするとと UI の表示がもたつくことがあるようです。

コンテンツのサイズ

通常のケースでは Flash コンテンツの大きさはそのまま Flex フレームワークに認識されます。アニメーションにより Flash コンテンツの大きさが変わる場合、その大きさの変化も認識されるため、変化にあわせたコンテンツのレイアウト変更も自動的に行われます。

以下のコードは BlueBox という Flash のコンポーネントを Flex アプリケーション内に表示する例です。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*" width="300" height="250">
    <myComps:BlueBox />
  <mx:Button />
</mx:Application>
 

このとき BlueBox コンポーネントがモーショントゥイーンなどで大きさの変わるアニメーションを表示すると、アニメーションにあわせて Flex アプリケーションのレイアウトも変化します。今回の例では、BlueBox の大きさに合わせてボタンの位置が上下に移動することになります。

大きさの自動認識に関してはいくつかの注意事項があります。例えば、シェイプトゥイーンを使うとキーフレームのタイミングだけでしか大きさが認識されません。また、マスクされたコンテンツの大きさは、マスクされた結果として表示されている領域ではなく、コンテンツ全体の大きさになります。

その他にもレイアウトを固定したい場合など、自動認識されるコンテンツの大きさでは都合の悪い場合には、代理のオブジェクトを指定することが可能です。コンテンツ制作時、ステージに "boundingBox" という名前のオブジェクトを作成すると、そのオブジェクトの位置と大きさがコンテンツ自体の位置と大きさとして使用されるようになります。

boundingBox の visible 属性を false にしておけば boundingBox オブジェクトが表示されることはありません。"Make Flex Component" でも自動的にこの属性設定が行われます。

少し分かりにくいですが、下の図のステージ領域の青い線だけの長方形が boundingBox という名前のオブジェクトになっています。これで、実際に画面上に表示されるのが boundingBox 内の青い四角いオブジェクトでも Flex からは boundingBox の位置と大きさが認識されるようになります。

なお、"boundingBox" という名前は UIMovieClip の boundingBoxName 属性に設定されています。この属性値を変えることで、別の名前のオブジェクトを代理オブジェクトとして指定することも可能です。

ラベルとステート

Flex にはアプリケーションのビューの状態を "ステート" として定義する機能があります。UIMovieClip はラベル名の付いたフレームを Flex のステートと対応付けることができます。

Flex アプリケーション内で Flash コンポーネントの currentState 属性を指定すると （指定された名前のラベルが存在すれば） 同じラベル名のフレームに移動します。gotoAndStop(currentState) のように使えるわけです。

下の図ではタイムラインに "ellipse", "rectangle", "triangle" の３つのラベルが定義されています。

これらのラベルをステートとして Flex のコードから指定しているサンプルです。ボタンを押すと Shapes コンポーネントが該当するラベルのフレームに移動します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*" width="300" height="250">
  <mx:HBox>
    <mx:Button label="Ellipse" click="s.currentState='ellipse'" />
    <mx:Button label="Rectangle" click="s.currentState='rectangle'" />
    <mx:Button label="Triangle" click="s.currentState='triangle'" />
  </mx:HBox>
  <myComps:Shapes id="s" />
</mx:Application>
 

トランジション

トランジションはあるステートから別のステートへの移行時に視覚的な表現を加える Flex の機能です。Flash コンテンツを使った場合、トランジションをタイムライン上のアニメーションとして作成することができます。

トランジションの開始フレームと終了フレームはラベル名を使って指定します。例えば、state1 という名前のステートから state2 というステートに移行する場合、UIMovieClip はアニメーションの開始フレームとして "state1-state2:start" という名前のフレームを探します。同様に終了フレームとして "state1-state2:end" というフレームを探します。

下の図では "state1" がフレーム 1 のラベル名、トランジション開始になる "state1-state2:start" がフレーム 7 のラベル名になっています。隠れていますが、トランジション終了のラベルになる "state1-state2:end" がフレーム 22 にありますので、コンポーネントが state1 のステートのときに state2 にステートを変更するとフレーム 7 からフレーム 22 が再生されてから "state2" のフレームが表示されます。

反対に、ステートが state2 から state1 に変更された場合にはタイムラインが 22 フレームから 7 フレームに逆に再生されます。ただし、"state2-state1:start" と "state2-state1:end" が明示的に定義されていればそちらが優先されます。

トランジションのラベルには "*" も使用することができます。例えば "state1-*:start" のようにして、state1 から全てのステートへの移行開始という意味に使うことができます。同様に "*-state1:start" はどんなステートからでも state1 に移行開始する場合という意味になります。"*" で指定したラベルは逆再生の指定にも有効です。

トランジションのラベルに使用できるパターンは以下の通りです。最後の *-* 以外は逆再生にも使用されます。

• from-to
• from-*
• *-to
• *-*

ツールチップ

UIMovieClip には toolTip という属性があります。この属性に値を設定しておくと、コンテンツ上にマウスが移動したときに Flex 標準のツールチップが表示されます。

<myComps:BlueBox toolTip="MXML Tooltip"/>
 

Posted by ackie at 04:44 PM | Comments (0)

April 24, 2007

Flex Component Kit for Flash CS3

Flex Component Kit for Flash CS3 が公開されました。 （Flex Component Kit for Flash CS3@Labs） この kit を使うと Flash CS3 で作成した AS3 のムービークリップをそのまま Flex のコンポーネントとして使用できるようになります。まだベータ版ですのでお試し用の環境でのみご使用ください （日本ではまだ CS3 が発売されていませんが念のため）。

Flex Component Kit for Flash CS3 とドキュメントは Adobe Labs からダウンロードできます。

• Flex Component Kit extension for Flash CS3 (mxp, 60KB)
• ドキュメント (zip, 424KB)

前提となるソフトウェアは以下のとおりです。

• Adobe Flash CS3
• Adobe Extension Manager 1.8
• Adobe Flex Builder 2.0.1 （または Flex SDK 2.0.1）

また、Flash CS3 と使用する際に必要になる Flex 2.0.1 用のパッチも提供されています。詳細はテックノートをご参照ください。（Flex 2.0.1 patch for Flash CS3 Professional compatibility）

以下がパッチへのリンクです。

• Flex 2.0.1 patch for CS3 Compatability (zip, 1.86MB)

ダウンロードして解凍すると以下の3つのファイルが含まれています。

• swfkit.jar
• mxmlc.jar
• fdb.jar

これらのファイルを \plugins\com.adobe.flexbuilder.flex_2.0.155577\lib ディレクトリにコピーして使用します。念のためもとのファイルはバックアップしておきましょう。SDK を使用している場合は lib の下にコピーします。

詳細は下にありますが、このキットの大まかな使用手順は、

1. Flash CS3 で AS3 のムービークリップを作成
2. Commands メニューから Make Flex Component を実行
3. 作成した fla を SWC として書き出す （パブリッシュすると生成される）
4. Flex Builder 2 で対象となるプロジェクトのライブラリに SWC を追加する

です。Flex 用に書き出すムービークリップが予め提供されている標準のイベントやメソッド以外を使用しないばあいなら、必要な作業は以上のステップだけです。

Flash CS3 ではムービークリップに対して親クラスを指定するパネルが用意されています。手順の２の後にライブラリパネルからムービークリップの likage パネルを開くと base class つまり親クラスとして UIMovieClip クラスが指定されていると思います。この UIMovieClip クラスが Flex で Flash コンポーネントを使用するために必要な機能を実装しています。

Flash 側の設定

Flash で Flex 用のコンポーネントを作成するにはいくつかの設定が必要です。この作業は "Make Flex Component" コマンドから自動で行うことができますが、手動で行う場合は以下の手順になります。

まず、Publish Settings のダイアログ内の以下の設定を確認します。

• "Version" を "Flash Player 9" に設定（デフォルト値です）
• "ActionScript version" を "ActionScript 3.0" に設定（これもデフォルト地です）
• （後でデバッグが必要であれば） "Permit Debugging" を true に設定
• "Export SWC" オプションをチェック

次にフレームレートを 24fps に設定します。これは Flex の標準フレームレートです。Flex 側のフレームレートを変えると Effect 等に影響が出るためフレームレートは Flex 側にあわせるようにします。

最後に UIMovieClip コンポーネントをコンポーネントパネルからライブラリにドラッグしたら、SWC に書き出すムービークリップの Linkage Properties パネルで以下の設定をします。（注： "Make Flex Component" コマンドを使用した場合以下の設定はライブラリ内で選択されたムービークリップに対してのみ行われます）

• "Export for ActionScript" を選択
• Select "Export in First Frame" も選択
• "Base Class" に "mx.flash.UIMovieClip" を設定

Flex Builder 側の設定

上記の設定後 Flash 側でパブリッシュすると SWC ファイルが作成されますので、次は Flex Builder で Flash コンポーネントの読み込みを行います。

1. FlexBuilder 側では Project Properties ダイアログを開き "Flex Build Path" を選択し "Library Path" タブを押す
2. "Add SWC..." ボタンを押してダイアログを開く
3. "Browse..." ボタンを押してステップ1で作成した SWC ファイルを指定する
4. Project Properties ダイアログを閉じる
5. 必要な xmlns 属性を追加する。例えば、

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*">  

7. コンポーネントを使用する。上の例に従えば "<myComps:" と入力することでコードヒントが表示される

開発に関する注意点等はまた次回。

Posted by ackie at 11:55 AM | Comments (0)

April 03, 2007

イベントによる Flex コンポーネントの連携

当面 Apollo の開発環境が Flex Builder のみとのことで Flex 入門も兼ねてと書き始めたら （今頃すみません） 思っていたより長引いてます。

さて、前回のコードでは、以下の通り MyBrowser.mxml から HTMLControlBar コンポーネントにイベントの発生を伝えるためにメソッドを呼び出していました。

// MyBrowser.mxml
private function onDomInitialize(e:Event):void {
  htmlControl.onDomInitialize();
}
 

これは２つのコンポーネントの依存関係を強くしますし、そもそも HTML コンポーネントへの参照を HTMLControlBar コンポーネントに渡しているのに別途イベントを伝えるコードも在るのは冗長なように思われます。

そこで、この箇所を変更してみたいと思います。

domInitialize イベントが発生したら処理を行うというのは HTMLControlBar コンポーネントの都合です。なのでイベントを受け取る設定は HTMLControlBar コンポーネント側のみで完結するようにします。具体的には、”HTMLControlBar コンポーネントは HTML コンポーネントへの参照が target 属性に渡されたら HTML コンポーネントの domInitialize イベントへのリスナを登録する” ようにしたいと思います。

そのために set を使うことにします。set は get と対になるプロパティへのアクセスを実現する機能です。以前に解説を書いたことがありますのでより詳しい説明はそちらをご参照くさい。（get と set）

set を使うと target 属性は以下のように書き直すことができます。

private var _target:HTML;
 
public function set target(value:HTML):void {
  _target = value;
}
 

この形であれば、set 関数内部でイベントリスナを登録することも可能です。下のコードでは Event.DOM_INITIALIZE イベントに対して onDomInitialize() メソッドをリスナとして登録しています。これで target で domInitialize イベントが発生したら onDomInitialize() が呼ばれるようになります。

private var _target:HTML;
 
public function set target(value:HTML):void {
  _target = value;
  _target.addEventListener(Event.DOM_INITIALIZE, onDomInitialize);
}
 

HTML コンポーネントは一つとは限らないかもしれません。念のため古いリスナが登録されていたら削除するコードも追加してみます。

private var _target:HTML;
 
public function set target(value:HTML):void {
  if (_target != null) {
    _target.removeEventListener(Event.DOM_INITIALIZE, onDomInitialize);
  }
  _target = value;
  _target.addEventListener(Event.DOM_INITIALIZE, onDomInitialize);
}
 

今のところ必要なさそうですが、念のため get も定義しておきます。

public function get target():HTML {
  return _target;
}
 

以上で HTMLControlBar コンポーネント内に HTML コンポーネントへのイベントリスナを設定する機能も実装されました。

従って、MyBrowser.mxml からは HTML コンポーネントの domInitialize イベント関連の記述は全て削除可能になります。

最後に全ファイルのコードです。

MyBrowser.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
 
  <local:HTMLControlBar id="htmlControl" target="{html}"/>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>
 

HTMLControlBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      import mx.controls.HTML;
      private var _target:HTML;
 
      public function set target(value:HTML):void {
        if (_target != null) {
            _target.removeEventListener(Event.DOM_INITIALIZE, onDomInitialize);
        }
        _target = value;
        _target.addEventListener(Event.DOM_INITIALIZE, onDomInitialize);
      }
      public function get target():HTML {
        return _target;
      }
      private function onDomInitialize(event:Event):void {
        prevLocations.pushLocation(_target.location);
        inputTF.text = _target.location;
      }
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(url:String):void {
        _target.location = url;
      }
    ]]>
  </mx:Script>
  <local:PreviousLocations id="prevLocations"/>
  <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
  <mx:Button label="移動" click="setLocation(inputTF.text)"/>
  <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
</mx:HBox>
 

PreviousLocations.as

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    [Bindable]
    public var isPopEnabled:Boolean = false;
    private function setPopEnabled():void {
      isPopEnabled = history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        setPopEnabled();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
        setPopEnabled();
      }
    }
  }
}
 

MyBrorser.css

Application {
   background-color:"";
   background-image:"";
   background-alpha: 0.4;
}
 

Posted by ackie at 05:44 PM | Comments (0)

April 02, 2007

Apollo ブラウザのコードの見直しの続き

MXML コンポーネントの作成

今回はユーザが操作する UI すなわち HBox タグで囲まれたコンポーネント群を外部コンポーネント化してみます。MyBrowser.mxml 内の以下の箇所になります。

  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
  </mx:HBox>
 

コンポーネントの名前は HTMLControlBar とします。例によって Ctrl-n でダイアログを開いたら MXML Component を選んで Next を押します。

上記の画面が表示されたら Filename の欄に HTMLControlBar と入力し、Based on の欄を HBox に、Width と Height は空白にします。

Finish ボタンを押すと、MXML エディタが開いて、下のような MXML コンポーネントのテンプレートが出来上がります。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
 
</mx:HBox>
 

ここに MyBrowser.mxml ファイルから TextInput タグと２つの Button タグをコピーしてきます。Hbox タグの間にそのままペーストするだけです。

履歴管理の機能もこちらのコンポーネントに持たせた方がよさそうですので、PreviousLocations タグもコピーします。その際ルートの HBox タグに xmlns:local="*" の追加を忘れないようにしましょう。local 名前空間の宣言が必要ですので。

以上で下のようなファイルができたと思います。 これで、タグの部分の移動は完了です。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <local:PreviousLocations id="prevLocations"/>
  <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
  <mx:Button label="移動" click="setLocation(inputTF.text)"/>
  <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
</mx:HBox>
 

次に、スクリプトの記述を始めます。

HTMLControlBar からはユーザの操作に応じて HTML コンポーネントの location を設定できなければなりません。そこで、HTML コンポーネントへの参照を属性として持つことにします。名前は target とします。

import mx.controls.HTML;
public var target:HTML;
 

HTMLControlBar 内３つの UI コンポーネントから呼び出される back() と setLocation() はそのままコピーしてもよさそうです。直接 HTML コンポーネントを参照していた箇所 （html と記述された部分） だけ target と置き換えます。

private function back():void {
  var prevURL:String = prevLocations.popLocation();
  if (prevURL != null) {
    setLocation(prevURL);
  }
}
private function setLocation(url:String):void {
  target.location = url;
}
 

同様に onDomInitialize() もそのままコピーしてきます。こちらも html → target の変換のみ行います。

public function onDomInitialize():void {
  prevLocations.pushLocation(target.location);
  inputTF.text = target.location;
}
 

とりあえずこれで HTMLControlBar に必要な機能はひととおりそろいました。

MXML コンポーネントの利用

MyBrowser.mxml ファイル側では、これまで HBox タグで囲まれていた箇所全体を、上で作成した HTMLControlBar のタグで置き換えます。

<local:HTMLControlBar id="htmlControl" target="{html}"/>
 

この際 HTMLControlBar の target 属性に html を指定します。これで HTMLControlBar コンポーネントに HTML コンポーネントへの参照が設定されます。

MyBrowser.mxml 内のスクリプトブロックに関しては、back() と setLocation() は HTMLControlBar に移したのでそのまま削除して構いませんが、onDomInitialize() はちょっと配慮が必要です。単純に削除すると HTMLControlBar 側の onDomInitialize() を呼び出す手段がなくなってしまうからです。

なので、ここでは onDomInitialize() は残すことにしてその中で HTMLControlBar コンポーネント側の onDomInitialize() を呼び出すように変更してみます。

private function onDomInitialize(e:Event):void {
  htmlControl.onDomInitialize(e);
}
 

以上で MyBrowser から外部コンポーネント化した HTMLControlBar を使えるようになりました。

あと少し変更したい箇所がありますが、とりあえずここまでのまとめです。まずは、HTMLControlBar.mxml ファイルから。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      import mx.controls.HTML;
      public var target:HTML;
 
      public function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(target.location);
        inputTF.text = target.location;
      }
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(url:String):void {
        target.location = url;
      }
    ]]>
  </mx:Script>
  <local:PreviousLocations id="prevLocations"/>
  <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
  <mx:Button label="移動" click="setLocation(inputTF.text)"/>
  <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
</mx:HBox>
 

それから MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        htmlControl.onDomInitialize(e);
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
 
  <local:HTMLControlBar id="htmlControl" target="{html}"/>
  <mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)"
    domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>
 

PreviousLocation.as は前回のものが使用できます。

Posted by ackie at 06:39 PM | Comments (0)

March 29, 2007

Binding を使った Flex コンポーネント連携

アプリケーション構造見直しの手始めとしてまず履歴管理を PreviousLocations という外部クラスで行うことにしました。とりあえず動くようにはなりましたが少し気になる箇所が残っています。

「MyBrowser.mxml をよくみると back() と onDomInitialize() 両関数とも ”戻る” ボタンの状態を設定するために履歴の状況チェックを行っています」 という理由で、「履歴の状態を公開する手段を何かしら提供する必要がありそう」なため、PreviousLocations クラスに isPopEnabled() というメソッドを定義してみました。

ところが、このメソッドは履歴の状態が変わったら必ず呼ぶことが要求されるという種類のものです。そのため、呼び出す側からすると、いつ呼び出すのが適切かを把握したいと思ったら PreviousLocations 内部の動きを理解しなければなりません。

せっかく外部クラス化したのに、これでは意義も薄れてしまいます。そこで、PreviousLocations の内部ステータスが変わったら、PreviousLocations の側から通知するように変更してみたいと思います。

Bindable メタタグ

まず、履歴が2つ以上残っているかどうかを示すフラグ isPopEnabled を定義します。このフラグに新しく値が代入されたらイベントを発生するように変更したいと思います。あわせてフラグを設定するための setPopEnabled() メソッドも定義しておきます。

public var isPopEnabled:Boolean = false;
private function setPopEnabled():void {
  isPopEnabled = history.length > 1;
}
 

さて、これから isPopEnabled の変更を伝えるイベントを追加するわけですが、Flex にはこういった仕組みを簡単に実現する手段が提供されています。Bindable というメタタグです。

[Bindable]
public var isPopEnabled:Boolean = false;
 

上のように変数の宣言の上の行に [Bindable] と記述すると isPopEnabled の値が変わったらそれを通知するイベントを発生させるというコンパイラに対する指示になります。この指定によってコンパイル時にイベント生成に必要なコードが勝手に追加されます。

このときに発生するイベント名は propertyChange という名前です。イベント名を指定することも可能です。

[Bindable(event="changePopEnabled")]
public var isPopEnabled:Boolean = false;
 

Binding

さて、MyBrowser.mxml 側では PreviousLocations からのイベントを受け取るためにイベントリスナが必要になります。が、Flex はここでも便利な機能を提供しています。タグの属性に中括弧で囲んだ変数を代入する式があるとイベントリスナがコンパイル時に自動的に生成されるというものです。この機能をバインディングと呼んでいます。

<mx:Button label="戻る" enabled="{prevLocations.isPopEnabled}"/>
 

上のように記述することを enabled 属性に prevLocations.isPopEnabled をバインドすると言ったりします。これだけで対象 （ここでは prevLocations.isPopEnabled） の値が変更されたイベントで enabled 属性の値を再設定する仕組みまで記述したことになります。

以上で ”PreviousLocations の側から履歴の状況が変わったら通知” という目的は達成されました。あとはこの変更にあわせていくつかの修正です。

MyBrowser.mxml 内では isPopEnabled() を呼び出している２つの行を削除します。

代わりに PreviousLocations.as 内では、履歴を保持している配列の中身を変更したら setPopEnabled() の呼び出しを行うように直します。これにより popLocation() と pushLocation() で一箇所ずつ修正されることになります。

下が新しい PreviousLocations.as ファイルです。

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    [Bindable]
    public var isPopEnabled:Boolean = false;
    private function setPopEnabled():void {
      isPopEnabled = history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        setPopEnabled();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
        setPopEnabled();
      }
    }
  }
}
 

こちらは MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(location:String):void {
        html.location = location;
      }
 
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(html.location);
        inputTF.text = html.location;
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <local:PreviousLocations id="prevLocations"/>
 
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>
 

Posted by ackie at 05:04 PM | Comments (0)

Flex 2.0.1 アップデータ

Flex 2.0.1 日本語版のアップデータ及びリリースノートの日本語訳がサポートサイトに公開されました。（Adobe Flex ダウンロード） Flex 製品サイトはまだ英語版へのリンクがいくつか残っていますので、とりあえずこちらからアクセスお願いします。

Posted by ackie at 10:26 AM | Comments (1)

March 28, 2007

Apollo ブラウザのコードの見直し

Kuler （Kuler@Labs） がアップデートされました。RSS への対応や UI の変更等がされています。昨日発表された Illustrator CS3 との連携もできるようです。

さて、前回の Apollo ブラウザの記事で ”戻る” ボタンに関する修正を入れたおかげでコードがぱっと見では分かり辛くなってしまいました。そこで、ちょっとアプリケーションの構造を見直してみたいと思います。

ActionScript コンポーネントの作成

まずは、履歴管理に関する機能を外部クラス化してみます。

新しく作成するクラスは PreviousLocatons という名前にして、履歴の取り出しと追加を行うために以下のようなメソッドを持たせることにします。

public class PreviousLocations {
  public function popLocation():String {} // 履歴の取り出し
  public function pushLocation(location:String):void {} // 履歴の追加
}
 

早速ファイルを作成してみましょう。例によって Ctrl-n を押してダイアログウインドウを開いたら ActionScript Class を選んで Finish を押します。すると下の図のような画面が表示されるので Project が MyBrowser になっていることを確かめて、Name のフィールドに PreviousLocations と入力します。今回は Package 等他のフィールドは指定せずにおきます。

この状態で Finish を押すと、PreviousLocations.as というファイルが作成されて同時に AS エディタが開かれます。エディタ内には PreviousLocations のクラス定義の枠だけが作成された状態になります。

これで準備ができたので、このクラス定義の中に MyBrowser.mxml 内のスクリプトから履歴管理に関連した箇所を移動させてきます。

まず、2つの変数定義はどちらもそのまま移動してしまってよさそうです。

private var history:Array = new Array();
private var isPop:int = 0;
 

isBack は isPop に（新しいメソッド名にあわせて）変えてみました。

次は popLocation() を定義してみます。MyBrowser.mxml の back() がほぼそのまま使えそうです。

public function popLocation():String {
  var prevLocation:String = null;
  if (history.length > 1) {
    history.pop();
    prevLocation = history[history.length - 1];
    isPop++;
  }
  return prevLocation;
}
 

popLocation() の戻り値は、履歴内に戻る先が存在すればその URL、存在しなければ null を返すようにしました。

さらに pushLocation() も定義してみます。こっちは onDomInitialize() からのコードが使えそうです。

public function pushLocation(location:String):void {
  if (isPop > 0) {
    isPop--;
  } else {
    history.push(location);
  }
}
 

これは簡単でしたね。そのまま移すだけでした。

さて、これで予定していたメソッドが定義できたので、あとは PreviousLocations クラスに合わせて MyBrowser.mxl 側を直せばよさそうです。が、MyBrowser.mxml をよくみると back() と onDomInitialize() 両関数とも ”戻る” ボタンの状態を設定するために履歴の状況チェックを行っています。

．．．とすると、PreviousLocations クラスは履歴の状態を公開する手段を何かしら提供する必要がありそうです。

ここではとりあえず下のメソッドを足すことにしてみようと思います。

public function isPopEnabled():Boolean {
  return history.length > 1;
}
 

以上で、履歴管理のクラスは使えそうな感じになりました。

ActionScript コンポーネントの利用

さて、今度は MyBrowser.mxml ファイルを変更していきましょう。

最初に、新しく定義した PreviousLocations クラスのインスタンスを宣言します。

インスタンスは ApolloApplication タグの子タグとして宣言したいと思います。なので、Style タグの次辺りの適当な行で <local と入力します。するとコードヒントに PreviousLocations が出てきます（と思います）のでそれを選択します。id 属性を指定してタグを閉じるとインスタンス宣言の完了です。

<local:PreviousLocations id="prevLocations"/>
 

このタグを追加してから MyBrowser.mxml の2行目にある ApolloAppication タグを見ると xmlns:local="*" が自動的に追加されているのが分かると思います。今回のようにとりあえずパッケージを指定せず作ったクラスを使うときには便利な機能です。

あとは、back() と onDomInitialize() の修正ですね。

まず back() はこんな感じに。

private function back():void {
  var prevURL:String = prevLocations.popLocation();
  if (prevURL != null) {
    setLocation(prevURL);
    backBtn.enabled = prevLocations.isPopEnabled();
  }
}
 

onDomInitialize() はこんなで。

private function onDomInitialize(e:Event):void {
  prevLocations.pushLocation(html.location);
  inputTF.text = html.location;
  backBtn.enabled = prevLocations.isPopEnabled();
}
 

以上で変更はおしまいです。

ちょっと長くなってしまったので、ここまでに出来上がったコードをまとめておきます。まず、PreviousLocations.as ファイルを。

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    public function isPopEnabled():Boolean {
      return history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
      }
    }
  }
}
 

少しスリムになった MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
          backBtn.enabled = prevLocations.isPopEnabled();
        }
      }
      private function setLocation(location:String):void {
        html.location = location;
      }
 
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(html.location);
        inputTF.text = html.location;
        backBtn.enabled = prevLocations.isPopEnabled();
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <local:PreviousLocations id="prevLocations"/>
 
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>
 

Posted by ackie at 06:55 PM | Comments (1)

March 23, 2007

Flex 2.0.1 日本語版リリース

Flex 2.0.1 日本語版が公開されました。SDK、Flex Builder、FDS 共に新しいバージョンになっています。Adobe サイト内の Flex ページに詳しい情報がありますのでご覧ください。（Flex 2.0.1 アップデータ） なお、日本語版では現在フルインストーラのみが提供されています。アップデータの状況は分かり次第お伝えします。（19:10追記 ： フルインストーラが旧バージョンである 2.0 のままであるとのご指摘をいただきました。現在対応中です。本当に申し訳ありません。 3/27 日追記 ： フルインストーラが新しいバージョンになっている旨確認が取れました。）

SDK と Flex Builder については既に公開されている英語版に加えていくつかのバグフィックスが追加されています。英語版の Flex 2.0.1 をお使いの方には Hot Fix （SDK のみ？） が提供される予定です。

さて（重要）、日本語版の Flex Builder 2.0.1 は Apollo 機能拡張とのテストがまったくされていないことが判明しました。（公開のタイミングの関係で時間が取れなかったようです） 従って Apollo の開発環境として現在使えるのは英語版 Flex Builder 2.0.1 のみです。申し訳ありませんが、日本語版をお使いの方は英語版をダウンロードしていただきますようお願いします。30日間トライアル版がこちらからダウンロード可能です。（Adobe Trial Downloads）

それから（これも重要）、Apollo 及び Flex Builder 用 Apollo 機能拡張共にまだアルファ版です。そのため、まだまだいろいろと大きなバグやパフォーマンス上の問題点が残っています。英語版 Flex Builder 2.0.1 のライセンスをお持ちの方でも、実際の業務使用には影響を与えないような使い方を心がけてください。問題が見つかったらお知らせいただければ製品チームにフィードバックいたします。

最後に、Flash 及び Dreamweaver 用の Apollo 機能拡張ももちろん予定されています。ただ、こちらは、まず新しいバージョンを出荷してからということで、少しお待ちいただく形になっています。

Posted by ackie at 05:10 PM | Comments (5)

March 21, 2007

LCDS 2.5 ベータ公開

FDS 改め LCDS (LiveCycle Data Services) 2.5 のベータ版が Adobe Labs に公開されました。（Adobe LiveCycle Data Services 2.5@Labs）

名前が変更されたのは、ドキュメント管理やプロセス管理のための LiveCycle 製品群との連携機能の強化を反映したもので、Flex や Ajax アプリケーションに対するデータサービスを提供するという従来の位置づけ自体は変わりっていません。

LiveCycle Data Services 2.5 ベータ版およびドキュメントは Labs のダウンロードページから入手できます。まず、ライセンス条項（Adobe Software License Agreement）をお読みいただき、以下の適当なリンクをクリックしてください。

• Windows (EXE, 172 MB)
• Linux (BIN, 188 MB)
• Solaris (BIN, 186 MB)
• Java (JAR, 156 MB)

ドキュメント

• LCDS 2.5 ベータドキュメント (ZIP, 7.72MB)

サポートされる環境は以下の通りです。

OS

• Microsoft Windows 2000 Server, Windows XP Professional, Windows Server 2003 (32- and 64-bit)
• Red Hat Advanced Server 3.x and 4.x
• SUSE™ Linux® Enterprise Server 9
• Solaris™ SPARC 9 and 10

JVM

• Sun 1.4.2_08 or later
• Sun 1.5
• BEA JRockit 1.4.2_08 (BEA WebLogic 8.1 のみ)
• BEA JRockit 1.5 (BEA WebLogic 9 のみ)
• IBM 1.4.2 (IBM WebSphere のみ)
• IBM 1.5 (IBM WebSphere のみ)

アプリケーションサーバ

• JRun 4 Updater 6 (integrated installation option を選択するとインストールされる)
• Apache Tomcat 5.5.x
• BEA WebLogic 8.1 (SP2 以降) , 9.1 and 9.2
• IBM WebSphere 5.1.1.x, 6.0.x, 6.1.x
• JBoss 4.0.3 SP1, 4.0.4, 4.0.5
• Hitachi Cosminexus 7 (日本語のみ)

LiveCycle Data Services 2.5 の主な新機能は以下の通りです。

• 新設計の Web Services ライブラリ
• サーバでの実行時 PDF 生成機能
• Data Services の destination 実行時構成機能
• メッセージングサービスでのクライアント単位での QoS 指定
• Ajax アプリケーションから Data Services の利用を可能にする Ajax Data Services のサポート
• Flex-Ajax Bridge のサポート
• オフライン時のメッセージキャッシュ機能の向上
• RTMP トンネリング (RTMPT) サポート
• SQL adaptor サポート
• JSP Tags サポート
• その他パフォーマンス向上、スケーラビリティの向上などなど

Posted by ackie at 10:22 AM | Comments (1)

March 16, 2007

Flex module for Apache and IIS

Flex module for Apache and IIS （長い！）は web サーバで mxml ファイルやアクションスクリプトファイルのコンパイルを可能にするモジュールです。Java サーバの無い環境でも PHP のようにして Flex を使うことができます。Windows, Mac, Linus の各プラットフォームがサポートされます。Remoting など FDS の機能は提供されません。詳細は Labs をご覧ください。（Flex module for Apache and IIS@Labs）

ダウンロードは以下のリンクから可能です。。

• Windows インストーラ
• MacOSX インストーラ
• Linux インストーラ

いまのところ Flex module for Apache and IIS はテスト用の用途のみに提供されたものとのことです。本番環境で動的なコンパイルが必要な場合には FDS をご利用ください。

3/19 追記：なお ”テスト用” はライセンス上のしばりではありません。十分な負荷テスト等が行われていないこと、サポートがないこと、を意味しています。

対応する Web サーバは以下の2つです。

• Apache 1.x/2.x (Windows, MacOS, Linux)
• IIS versions 5.1, 6, 7 (Windows)

また、JRE も必要です。以下のどちらかがあれば OK です。

• Flex SDK 2.0.1 以降
• JRE 1.4.2 以降

無い場合は以下から適当なリンクをクリックしてください。中身は Flex 2.0.1 SDK と Sun 1.5.0.3 JRE です。

• Windows バンドル　インストーラ
• MacOSX バンドル　インストーラ
• Linux バンドル　インストーラ

ウインドウズのみインストール後 OS の再起動が必要だそうです。

Web サーバを再起動後 http://localhost/Main.mxml のようにして Flex アプリケーションが実行できれば設定完了です。

Posted by ackie at 05:55 PM | Comments (0)

February 23, 2007

DisplayShelf Component

先日の Apollo セッションの後、Flex のエフェクトについて質問された方がいらっしゃったので関連情報です。（見てますか？）

画像を3D っぽく動かすエフェクトのサンプルがこちらにあります。（デモ） ソースもダウンロードできます。（DisplayShelf.zip:2.6MB） ご丁寧に写真も含まれているので少しダウンロードサイズは大きめですが、本体はエフェクトを実装している TiltingPane とそれを立体的なリストとして扱う DisplayShelf の2つのクラスおよびそれらを使う mxml ファイルの３つだけです。ちなみに元ネタはこちらの blog です。（Tutorial:DisplayShelf Component@Quietly Scheming ）

DisplayShelf Component は Flex チームのメンバーが Flex コンポーネントのサンプルとして開発したものです。コンセプトの紹介を目的としたもので十分なテストはされていませんので、その旨ご了解ください。

Posted by ackie at 04:52 PM | Comments (1)

February 14, 2007

Flex Style Explorer の新バージョン

本日 developer summit 2007 にお越しいただいたみなさまお忙しい中ありがとうございました。Apollo についてはデベロッパー版が公開されたらもう少し詳しい情報をお伝えしていきたいと思います。

さて、Flex Style Explore が新しくなりました。こちらのリンク （Flex 2 Style Explorer） からご覧いただけます。（横 1280 ピクセル以上の画面をお勧めします） カラーピッカーがちょっとおしゃれになっています。ちなみに FlexBuilder のスタートページのリンクからでも新しい Style Explorer が起動します。

それから、Ajax Data Services が地味にアップデートされました。Wiki のサンプル等も更新されています。リンクはこちらです。（Ajax Data Services@Labs）

Posted by ackie at 04:48 PM | Comments (0)

January 31, 2007

Flex Ajax bridge と Ajax Data Services

Flex と Ajax の世界を繋ぐ Flex Ajax bridge がアップデートされました。（Flex Ajax Bridge@Labs） また、Ajax Data Services と名前も新しくなって Ajax から FDS を使うためのライブラリが公開されています。（Ajax Data Services@Labs） どちらも Flex 2.0.1 が前提です。

Flex Ajax bridge はこちらからダウンロードできます　（FABridge.zip 763 KB） が、肝心の js ファイルがスパムフィルタによりテキストファイルに置き換えられているようです。現在対応中とのことですが、同じファイルが Ajax Data Services にも含まれていますので、とりあえずこちらをダウンロードすることをお勧めします。（Ajax Data Services 23 MB）

Ajax Data Services を使うと Ajax アプリケーションからでも FDS を使ったオブジェクトの同期や非同期のメッセージング、サーバからのプッシュができるようになります。

Posted by ackie at 04:59 PM | Comments (0)

January 26, 2007

Halo から Aeon へ

今回はビジュアルデザインの話です。といっても UI コンポーネント限定ですが。

Flash に興味のある方は Halo （ヘイロー） という言葉を聴いたことがある方も多いと思います。最近の Flash にはもれなく付いてる UI コンポーネントのビジュアルデザインのテーマ名ですね。

Halo はどんなデザインなのかよく分からないという方は、例えばボタンだと下の図のような感じです。言葉だけではぴんと来なかった人も見れば思い出したりしませんか？

いまさらながら Flash 標準 UI コンポーネントが登場した背景

ちょっと前になりますが Flash が Web サイトで広く使われるようになって、スプラッシュページ以外の用途もだんだんと認知されるようになってきた頃がありました（Flash 5 あたり）。一方で、その頃は Flash の使用自体に対するネガティブな意見もまだまだ強い頃でした。jacob nielsen の "Flash: 99% Bad" などは覚えている人も多いのではないでしょうか。

上記の nielsen のドキュメント内でも記述されていたポイントに、Flash を使ったサイトではサイト毎にコンテンツの操作方法が異なるため混乱することがしばしばで、且つ大抵どのケースも十分に使いやすさが検証されていないコントロールが採用されている、というものがありました。この指摘に対する回答の一つとして（formerly known as） Macromedia から提供されたのが Flash MX 以来の標準 UI コンポーネントというわけです。

さて、その際にビジュアルデザインのテーマとして採用されたのが Halo でした。Flash MX 後も V2 コンポーネントや Flex 1 のコンポーネント等が作られていますが、全てルック＆フィールは Halo になっています。

Halo のデザインは枠の形やベベルなど特徴的で印象の強いものです。おかげでいくつかの問題を抱えることになりました。例えば、コンテンツ並みに目立ってしまうとか、サイトのデザインにあわせにくいとか。。。

結局あまり見かけない標準コンポーネントになってしまいました。

そうこうしている間に Adobe もいろいろと経験を積んだわけです。そうして新しくデザインされたテーマが Aeon （イーオン） です。Aeon が製品に使われたのは Flex 2 が初めてです。Flash ユーザの方はまだ馴染みがないかもしれませんね。

これが Aeon （のボタン）です。

シャープになったエッジやシンプルなサーフェイスから背景との関係がより意識されていることが伺えます。

Flex 2 の Aeon コンポーネント

前述のように、今のところ Flex 2 のみ Aeon コンポーネントを持っています。Flex 2 の SDK をインストールすると Windows であれば \Flex SDK 2\frameworks\themes\AeonGraphical Source に AeonGraphical.fla というファイルが見つかると思います。このファイルを開くと各コンポーネントのスキンが定義されています。

実際には、これらのスキンが使用されているわけではなくて別のファイルに Flex 2 デフォルトのスキンの定義があるのですが、Aeon のデザインポリシーやスキンの構造を理解するにはこっちの方が分かりやすくて便利でしょう。

特に、Flex 2 の UI デザインをする際は Aeon を理解しておくといろいろと役に立ちます。ということで、ここでは一番単純そうなボタンコンポーネントのスキンを紹介します。

Aeon のボタンは下図のように 枠 + 塗り + ハイライト の３つのレイヤーからなるしごく単純な構造です。

実は Halo ボタンは6つのレイヤー（つまり Aeon の倍！）からできていました。Flex 2 でも Halo は使用できますが Aeon の方が全体的にシンプルな構造になっているため描画処理が軽いのです。

また、スキンのカスタマイズも Halo よりは分かりやすくなっているように思います。

Aeon スキンのカスタマイズ

Halo は中央から外へのグラデーションでした。Aeon は上下のグラデーションが基本です。

Flex 2 の Aeon ボタンでは fillColors というプロパティを使って "塗り" のレイヤーに上下両端の色を指定できるようになっています。指定の仕方は CSS と同じ要領です。下の例ではボタンの上から下にかけて白から薄いグレー（これがデフォルト値です）のグラデーションを指定しています。

Button { 
 fillColors: #ffffff, #cccccc;
}
 

実際にいくつかの値を適用してみた例が以下になります。左から順に、白（ffffff）→青（0000ff）、青→青、青→白を指定しています。

さて、上の例を見ると、青（0000ff）を指定したのにちゃんとその色になってませんよね？もう理由分かってる人も多いと思いますが、これはボタンが透けているからです。

Aeon のボタンでは "塗り" と "ハイライト" のレイヤーに透明度のグラデーションを設定できます。使用するプロパティはそれぞれ fillAlphas と highlightAlphas で 0 （完全透明）から 1 （非透明）の間の値を設定します。

まず "塗り" の透明度を指定してみます。下の例は全て fillColors に白（ffffff）→青（0000ff）を指定したものです。fillAlphas は左から順に [1, 1]（ボタン全体が非透明）、[0.6, 0.4]（Aeon のデフォルト）、[0.4, 0.6] の値が使われています。

次は "ハイライト" の透明度の指定を変えてみます。fillColors には白（ffffff）→青（0000ff）を、fillAlphas には [0.6, 0.4] を（つまり上のサンプルの真ん中のボタンと同じ）指定することにします。

下の例の左端は highlightAlphas に [0.3, 0] を指定しました。これは Aeon のデフォルトですので、上図の真ん中のボタンと同じはずです。中央のボタンには、[1, 0]（上端が非透明）、[1, 1]（ハイライト全体が非透明）を指定してみました。ハイライトの効果が分かるでしょうか。

それから、ボタン自体が透明度を持つため背景によってボタンの見え方が変わります。下図は上の３つのボタンをそのまま Flex 2 デフォルトの背景色の上に乗せたものです。結構違った印象になります。

このように透明度を使って背景と重ねた効果を積極的に使おうというのは Aeon のデザインコンセプトの一つです。

おわりに

下のスクリーンショットは Flex 2 のサンプルアプリケーションとして公開されている Flex Store です。白い背景でコントラストの強い主役のコンテンツ領域に対し、画面左側の操作用のパネル部は少し背景が透けた状態でそこが2次的なエリアであることが表現されています。

Halo がデザインされた頃は 3D 的な形状を与えることによりノーマン的アフォーダンスを持たせる（懐かしい）というのがトレンドでした。最近は透明なサーフェイスを重ねることでコンテンツやコントロールと背景の関係を表現するというのがトレンドの一つのようですので、Halo から Aeon になってもトレンドを追っかけるという点は変わっていないのかもしれませんね。

Posted by ackie at 04:59 PM | Comments (0)

January 25, 2007

Flex Ant tasks と Flex Compiler Shell

Adobe Labs に2つ新しく Flex 関連の公開がありました。

Flex Ant tasks

Flex Ant tasks は Ant プロジェクトとして Flex アプリケーションをビルドするためのタスクを提供します。提供されるタスクは以下の3つです。

• mxmlc: コマンドラインのアプリケーションコンパイラーを起動します。Flex アプリケーションやモジュール、SWF を生成する際に使用します
• compc: コマンドラインのコンポーネントコンパイラーを起動します。SWC や RSL を生成する際に使用します
• html-wrapper: Flex アプリケーションをラップする HTML ファイルを生成するのに使用します

詳細は Labs の wiki をご覧ください。（Flex Ant tasks@Labs） ダウンロードは以下のリンクからどうぞ。 （ZIP ファイル, 112KB）

Flex Compiler Shell

Flex Compiler Shell (fcsh) は Flex アプリケーション等をコンパイルするためのシェルです。

コマンドラインで mxmlc や compc を使うのと同じような機能ですが、fcsh のほうがコンパイルに必要なリソースをメモリ上に保持し続けること等から実行は早くなるようです。つまり起動し続けて使う形が想定されているということですね。Flex Builder では既にこの形の最適化が採用されています。

こちらも詳細は wiki をご覧ください。（Flex Compiler Shell@Labs） ダウンロードはこちらです。（ZIP ファイル, 72KB）

Posted by ackie at 05:13 PM | Comments (0)

January 22, 2007

Docking ToolBar

Adobe Exchange に新しい Flex コンポーネントが公開されました。Docking ToolBar　です。

Docking ToolBar　コンポーネントはアプリケーションウインドウの上端または下端にドックするか、アプリケーション領域内に浮いた状態で使えるツールバーです。ダウンロードのリンクおよび簡単な説明がこちらのページにありますのでご覧ください。（Docking ToolBar@Adobe Exchange）

Posted by ackie at 04:59 PM | Comments (0)

January 18, 2007

Flex 2 Tag Library for JSP

公開からちょっと経ってしまいましたが、Adobe Labs に Flex 2 用の JSP Tag Library が公開されています。（Flex Tag Library for JSP）

JSP Tag Library を使うと JSP の機能で動的に mxml ドキュメントを生成しコンパイルすることができます。この機能は Flex 1.X の時にはあったのですが、Flex 2 の出荷時には実装されていませんでした。

使用するには先日公開された FDS 2.0.1 が必要です。使用する手順は以下の通りです。

1. FDS を停止します
2. ZIP ファイルをダウンロードします（flex2_tag_library_for_jsp.zip: 31KB)
3. ダウンロードした ZIP ファイル内の flex-bootstrap-jsp.jar を /WEB-INF/lib にコピーします
4. ダウンロードした ZIP ファイル内の flex-webtier-jsp.jar を /WEB-INF/flex/jars にコピーします
5. web.xml ファイルを編集して以下の定義を追加します
   

   <taglib>
       <taglib-uri>FlexTagLib</taglib-uri>
       <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>
   </taglib>
   
   

6. FDS を再起動します

簡単な使い方も紹介しておきます。下の例はユーザの役割によって表示する画面を切り替える例です。

<%@ taglib uri="FlexTagLib" prefix="mm" %>
 
<mm:mxml>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
    <% if (request.isUserInRole("admin")) { %>
      <AdminConsole/>
    <% } else { %>
      <UserConsole/>
    <% } %>
  </mx:Application>
</mm:mxml>
 

動的なコンパイルはサーバの負荷の高い処理です。使用する際は十分にパフォーマンス面の検証を行うようにしてください。といっても、まだ正式版のリリース前でした。

Posted by ackie at 05:04 PM | Comments (2)

January 07, 2007

Flex 2.0.1 英語版リリース

Flex 2.0.1 （英語版）がリリースされました。英語版の Flex Bulder 2 をお使いの方はアップデータがダウンロードできます。（Adobe Flex Support Center） また、SDK 等のフルインストーラもダウンロード可能です。（Adobe Trial Downloads）

日本語版のリリースはまだですが、いろいろとバグが直っていますので時間のある方はぜひお試し下さい。なお、実際のプロジェクトでの使用に際しては十分に検証をしてから移行されることをお勧めします。

Flex 2.0.1 は基本的にはバグフィックスのためのリリースですが、いくつかの新機能も追加されています。主なものは以下の通りです。

• Mac OS 10.4.7 サポート（PowerPC & Intel）
• 大規模アプリケーションを分割する手段を提供する mx.modules パッケージ
• ランタイム CSS のサポート
• Mercury QuickTest Pro 9.1 との連携による自動機能テスト（Windows のみ、FDS のライセンスが必要）
• ASDoc が SDK の一部に

日本でのサポートについては正式なアナウンスをお待ちください。

Posted by ackie at 08:13 AM | Comments (0)

December 01, 2006

Flex Stress Test Framework

Flex Stress Testing Framework はその名のとおり Flex Data Services (FDS) のストレステスト用フレームワークです。Adobe Labs にベータ版が公開されています。（Flex Stress Testing Framework@Labs）

管理用のアプリケーションが提供され、受信したメッセージの数や終了したトランザクションの数などを知ることができます。Flex Stress Testing Framework では AMF や RTMP などのプロトコルでの接続にも対応しています。

Flex Stress Testing Framework （長いので以下 FSTF） はデータの記録にも FDS を使うため、FDS を使ったことの無い方には少し設定が分かりにくいかもしれません。よろしければこの機会に経験してみてください。

フレームワーク及び簡単なサンプルファイルは Labs からダウンロードできます。（flexstress_11_30_06.zip: 116K）

クライアント側の設定

FSTF を使うには、まずクライアント側の設定を行います。クライアント側では Test Browser Server と呼ばれるサーバを実行します。このサーバは負荷テストのクライアントとなるブラウザを起動する役目を持っていて、起動されたブラウザにテストの対象となる Flex アプリケーションが読み込まれます。

実行方法は次のとおりです。

> java -jar browserServer.jar
...: browserServer version 0.95
...: starting server on port 7777
...: server ready
 

メッセージの2行目でポート番号 7777 が使用されていることがわかります。これは jar ファイルと同じディレクトリにある browserServer.properties ファイル内の serverPort を編集すれば変えることができます。

ie="C:\\Program Files\\Internet Explorer\\iexplore.exe"
firefox="C:\\Program Files\\Mozilla Firefox\\firefox.exe"
default=ie
serverPort=7777
 

テストに使用するブラウザもこのファイルに記述されている必要があります。IE や Firefox 以外のブラウザを追加する場合はパスを properies ファイルに追加してください。

なお browserServer は一度に複数のウインドウを起動することはできますが同じのブラウザのウインドウのみしか開けません。複数の種類のブラウザを実行する場合は browserServer を複数立ち上げる必要があります。

サーバ側の設定

さて、サーバ側では FDS を使用するための設定を行います。設定ファイルの詳細な説明は省きますので（すみません）製品のドキュメントも合わせてご覧ください。

まず、services-config.xml に以下の設定を追加します。

<channel-definition id="perf-rtmp" class="mx.messaging.channels.RTMPChannel">
  <endpoint uri="rtmp://{server.name}:2296" class="flex.messaging.endpoints.RTMPEndpoint"/>
  <properties>
    <idle-timeout-minutes>20</idle-timeout-minutes>
    <client-to-server-maxbps>100K</client-to-server-maxbps>
    <server-to-client-maxbps>100K</server-to-client-maxbps>
  </properties>
</channel-definition>

この設定で browserServer と FDS の通信用 RTMP サーバを設定します。上記ではポート 2296 を指定していますので、他の設定と重ならないよう注意してください。

次に data-namagement-config.xml に次のエントリを追加します。

<destination id="Perf.Participants" channels="perf-rtmp" adapter="java-dao">
  <properties>
    <source>perf.controller.ParticipantAssembler</source>
    <scope>application</scope>
    <metadata>
      <identity property="id"/>
    </metadata>
    <network>
      <session-timeout>0</session-timeout>
      <paging enabled="false" />
      <throttle-inbound policy="ERROR" max-frequency="500"/>
      <throttle-outbound policy="REPLACE" max-frequency="500"/>
    </network>
    <server>
      <fill-method>
        <name>fill</name>
      </fill-method>
      <sync-method>
        <name>sync</name>
      </sync-method>
    </server>
  </properties>
</destination>  
　

この Perf.Participants という id で追加された destination にストレステストの結果を各クライアントから受け取るプログラム（perf.controller.ParticipantAssembler）が指定されています。最終的な結果の取得もこの destination から行います。

次は proxy-config.xml 内の DefaultHTTP というエントリを少し修正します。

<destination id="DefaultHTTP">
  <properties>
    <dynamic-url>*</dynamic-url>
  </properties>
</destination>
　

この設定で任意の URL で DefaultHTTP が使用できるようになります。社内のテストサーバとかではなく公開されているサーバ等での設定の場合はちゃんとテスト環境に応じた設定を行うことをお勧めします。

さて、あとは必要なファイルをコピーして終わりです。

//WEB-INF\flex\user_classes に
Participant.as
events\TimeUpEvent.as     
events\StartRequestEvent.as
qa\perf\BrowserServerManager.as
qa\perf\BrowserServerTestRunner.as
 
//WEB-INF\classes に 
perf\controller\Participant.class
perf\controller\ParticipantAssembler.class
　
//Web アプリケーションのルートディレクトリに管理用アプリケーションを
TestAdmin.mxml
 

テストプログラムの作成

テストプログラムは通常の Flex アプリケーションに Participant クラスのインスタンス生成を追加したものになります。ASDoc が無いようですので、使い方は zip ファイル内の simpleLoadTest.mxml を参照してください。

主要な箇所のみ説明しますと、まず、管理アプリケーションから起動するとテストアプリケーションがロードされる際に Application.application.parameters に個々のクライアント専用の id が設定されているはずですので、これを Participant のコンストラクタに指定します。

var id:String = Application.application.parameters.id;
// id があれば管理プログラムからの起動
var monitored:Boolean = (id != null);
var name:String = id;
p = new Participant(name,monitored);
 

それから管理アプリケーションからのイベントで呼び出されるイベントハンドラも設定します。インスタンスでなく Participant.eventdispatcher に設定します。

// テスト開始イベント
Participant.eventdispatcher.addEventListener("startRequest",startTest);
// テスト終了イベント
Participant.eventdispatcher.addEventListener("timeUp", stopTest); 
...
private function startTest(e:Object):void {
  // テスト開始に必要な初期化を行う
  p.startTest(startTimer,e.duration);
}
private function startTimer():void {
  requestTimer.start();
}
private function stopTest(e:Object):void {
  // テストの後処理を記述
  if (p.testCount == 0) { // 初めてのテストなら 0 のはず
    requestTimer.stop();
    p.testStopAt = getTimer();
    ...
  }
}
 

startRequest イベントで Participant インスタンスの startTest() メソッドを必ず呼ぶ必要があります。引数には実行する関数とテスト時間（イベントオブジェクトから取得）を設定します。

テストの実行

以上でようやくテスト環境が整いました。browserServer が起動されていること、ブラウザに必要なバージョンの Flash Player がインストールされていること、を確認したら TestAdmin.mxml をブラウザで開きます。

後は、以下のステップです。

1. テストアプリケーションの URL を入力
2. テストを実行する時間と必要な Flash Player のバージョンを指定
3. 各 browserServer の情報（ホスト名、ポート、ブラウザの種類）を入力
4. browserServer ごとに開くブラウザの数を指定
5. ブラウザのタイムアウト値を指定（TestAdmin が正常に後処理をできなかったときのため-テスト時間より大きな値を入れること）
6. LaunchBrowsers ボタンをクリックしてテスト開始
7. 結果の確認

と、長くなってしまいましたがぜひお試しいただければと思います。フィードバックなどもお寄せください。

Posted by ackie at 06:47 PM | Comments (0)

November 28, 2006

Masked Input と 3D Chart コンポーネント

今日明日と Photoshop World ですね。参加された方はいかがでしたでしょうか。

さて、少し前に Flex Exchange に AutoComplete Input コンポーネントが公開された記事を書きましたが、その後 2 つのコンポーネントが追加で Adobe からリリースされていますのでご紹介します。

一つ目は Masked Text Input というコンポーネントです。（Adobe Masked Text Input）　下がサンプルになりますが、一行のテキストに入力可能な文字を文字単位でコントロールすることができます。ちょっと見にくいですが、真ん中のフィールドでは MM/DD/YYYY を背景表示しています。

2つ目は3D のチャートコンポーネントです。（Flex 3D Charts） チャートを回したり拡大したりもできるようになっています。なかなかドキュメントが公開されないのですが、サンプルを見ればそこそこ使い方も分かりそうですのでとりあえず。

Posted by ackie at 01:33 PM | Comments (0)

October 30, 2006

Cairngorm 2.1 リリース

MAX 2006 でアナウンスされたとおり Cairngorm 2.1 が Adobe Labs からダウンロードできるようになりました。（cairngorm2_1.zip:72KB）

リリースノートによれば今回の変更点は以下のようになっています。（英文失礼）

• Responder has been deprecated. Use mx.rpc.IResponder
• Command has been deprecated. Use com.adobe.cairngorm.commands.ICommand
• ValueObject has been deprecated. Use com.adobe.cairngorm.vo.IValueObject
• ServiceLocator.getService() has been deprecated. Use ServiceLocator.getRemoteObject( string )
• ServiceLocator.getInvokerService() has been deprecated.
• IServiceLocator interface has been created to support unit testing
• ServiceLocator has security methods added
• FrontControler.executeCommand() and getCommand() visibility has been changed to protected
• Error messages have been internationalized

以前にも書きましたが、Labs に Cairngorm ページがあります。少しずつ充実してきているようです。英語で恐縮ですがときどき覗いてみてください。（Cairngorm@labs）

Posted by ackie at 04:54 PM | Comments (2)

October 24, 2006

Flex Scheduling Framework

Adobe Labs にスケジュールコンポーネント用のフレームワークが公開されました。これは Adobe Consulting からのプロジェクトのため Cairngorm と同じような位置づけになるかと思います。 今回は 0.1 アルファ版ということで、だんだんと機能も品質も改善されていくことでしょう。（Scheduling Framework@labs）

できるだけ拡張性の高いフレームワークにするため、実プロジェクトからのフィードバックを求めて Labs に公開したとのことです。英語だけになってしまいますが、よろしければ是非ご協力ください。

フレームワークのダウンロードは次の URL からどうぞ。（Scheduling Framework Source and ASDoc@labs - zip:4.17MB ）

ダウンロードしたファイルを Flex Builder 2 のプロジェクトにインポートするとそのままサンプルも試せます。下のスクリーンショットはその一例です。

Posted by ackie at 05:03 PM | Comments (0)

July 20, 2006

Flex 2 アプリからの Flash 8 swf の使用

ご存知のように Flash 8 の swf （AS1/2 の swf） は Flex 2 アプリ （AS3 の swf） から直接扱うことができません。そのため Loader コンポーネントで Flash 8 の swf を読み込んでから LocalConnection を使う必要があります。

この件に関する簡単なサンプルがテックノートとして公開されましたのでご紹介します。（Using Flash 8 SWFs with Flex 2 Applications） テックノート内のサンプルファイルもこちらからダウンロードできます。（LocalConnection.zip - 210KB）

概要をかいつまんで説明しますと、Flash 側では以下のような記述をします（一部のみ抜粋）。

var lc:LocalConnection = new LocalConnection();
 
lc.stopPlanet = function() {
  stop();
}
lc.resumePlanet = function() {
  play();
}
lc.allowDomain("*");
lc.connect("swf8connector");
 
star_mc.onRelease = function() {
  var sendLC:LocalConnection = new LocalConnection();
  sendLC.send( "swf2Flex", "starClick" );
}

LocalConnection オブジェクトを生成してから関数を追加して（必要であれば）allowDomain() を呼び出しています。これで初期設定は完了なので、swf8connector という名前で接続します。これは Flex 側からの接続に使われる名前です。

最後の4行ではイベントハンドラーを設定しています。この中でも LocalConnection オブジェクトを生成していますが、これは Flash 側から送信するためのものです。LocalConnection で双方向の通信はできないのでしたね。

Flex 側では以下のようなコンポーネントを作成します（これも抜粋＆一部修正）。

<mx:Script>
<![CDATA[
import flash.net.LocalConnection;
 
private var swfState:String = "play";
private var lc:LocalConnection;
private var fromSWF:LocalConnection;
 
private function initApp() : void　{
　　lc = new LocalConnection();	
　
　　fromSWF = new LocalConnection();
　　fromSWF.client = this;
　　fromSWF.connect("swf2Flex");
}
private function starClick() : void　{
　　if( swfState == "play" ) {
　　　　stopResumeButton.label = "Resume";
　　　　lc.send( "swf8connector", "stopPlanet" );
　　　　swfState = "stop";
　　}　else {
　　　　stopResumeButton.label = "Stop";
　　　　lc.send( "swf8connector", "resumePlanet" );
　　　　swfState = "play";
　　}
}
]]>
</mx:Script>

initApp() 内で送受信用の LocalConnection オブジェクトそれぞれを初期化しています。後はメソッドの定義です。

Flash 側で star_mc がクリックされると、Flex 側の starClick() が呼ばれ、そこから Flash 側の stopPlanet() または resumePlanet() がよばれるというちょっとややこしい動きをします。

Posted by ackie at 05:37 PM | Comments (2)