2007年4月アーカイブ

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)

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

カスタムイベントの利用

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

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

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

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

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

基準点

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

フレームレート

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

コンテンツのサイズ

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

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

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 からダウンロードできます。

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

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

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

shell は Apollo アプリケーションと OS の仲介役のオブジェクトです。ドキュメントの記述から察するに、今後まだ仕様の追加変更がありそうな予感もしますが、とりあえず主な点をまとめます。

まず、shell オブジェクトはアプリケーション起動時に自動的に生成されますので、明示的に生成する必要はありません。シングルトンオブジェクトとして実装されていて、アクセスは Shell.shell のように行います。

Shell クラスのプロパティとメソッド

shell オブジェクトには以下のプロパティがあります。

id:String                 // アプリケーション ID
activeWindow:NativeWindow // 現在アクティブなウインドウ
focusWindow:NativeWindow  // 現在フォーカスされているウインドウ
autoExit:Boolean          // true ならウインドウクローズ時自動的に終了
 

id はアプリケーション記述ファイル (-app.xml) の name タグの値が設定されます。id はアプリケーションを識別するために使用されるので、他のアプリケーションと被らないような名前にすることが重要です。ですので "com.adobe.apollo.ApplicationName" のような形式の命名が推奨されています。id に使用できる文字は英数字と "." (ドット) と "-" (ハイフン) です。

displayStateChanging イベントのキャンセル

前回書いたように、ing 系のイベントは必要に応じて処理自体をキャンセルするために使用できます。displayStateChanging イベントであれば displayState の変更をキャンセルするわけですから、最大化や最小化を行わないという指示を出すことになります。

AS3 では、イベントにより標準的に行われることになっている処理をキャンセルするには、イベントハンドラ内で preventDefault() を呼び出します。前回のサンプルをそのまま使うと、onDispStateEvent() メソッド内に preventDefault() を追加すればよいことになります。

onDispStateEvent() メソッドは displayStateChange と displayStateChanging イベントの両者で共用しているのでキャンセル不可のイベント (displayStateChange) も渡される可能性があります。そのため、キャンセル可能かを確認するロジックも追加しています。

以下は NativeWindow クラスのイベントのリストです。

displayStateChange    NativeWindow オブジェクトの displayState 属性が変更された
displayStateChanging  NativeWindow オブジェクトの displayState 属性が変更される直前
move                  NativeWindow オブジェクトがデスクトップ上で移動した
moving                NativeWindow オブジェクトがデスクトップ上で移動する直前
resize                NativeWindow オブジェクトの大きさが変更された
resizing              NativeWindow オブジェクトの大きさが変更される直前
close                 NativeWindow オブジェクトが閉じられた
closing               NativeWindow オブジェクトが閉じられる直前
  

ひとめで2つずつペアになっているのが分かるかと思います。4種類のウインドウに対する操作に対して、完了の直前と完了後それぞれの状態を通知するイベントが定義されています。

ing で終わるイベントは警告のような位置づけで、これを受け取ることで処理が完了する前に状況を確認したり、場合によっては処理自体をキャンセルするといった使い方が想定されています。そのため ing 系のイベントはいずれもキャンセル可能です。

一方 ing のつかないイベントは完了を通知するイベントです。事後処理が必要な場合に使用します。

では個々のイベントを少し詳しく見てみたいと思います。

Apollo アプリケーションから新しいウインドウを開くには NativeWindow もしくはそのサブクラスのインスタンスを生成します。下は NativeWindow のコンストラクタです。

public function NativeWindow(visible:Boolean, initOptions:NativeWindowInitOptions)
 

NativeWindow のコンストラクタは2つの引数を取ります。

1 つ目の引数はウインドウが作成されたときに表示するかしないかのフラグです。ウインドウを作成したら表示位置や大きさなどに多少の細工を加えることも多いと思います。ウインドウが表示された状態でこれらの処理を行うと途中の段階も画面に表示されてしまいますので、とりあえずコンストラクタでは false (非表示) を指定しておいて、必要な処理が終わったら window.visible = true を呼んでウインドウを表示するというのが一般的にはよさそうですね。

同様に、アプリケーション起動時に画面に表示したくない初期処理が存在する場合は、アプリケーション記述ファイル (-app.xml) 内 rootContent タグの visible を false にしておいて適当なタイミングで window.visible = true を呼ぶことで対応できます。

既にお伝えしましたように、現在 Adobe Labs に公開されている Flex Builder 2.0.1 用 Apollo 機能拡張は日本語版の Flex Builder とのテストが行われていません。やはり日本語版で使えたほうが便利ですし、本当に動かないのか様子を見るためにとりあえず2週間ほど社内数名で使ってみたところ特に問題が起きたりすることはありませんでした。

テスト用途であれば使用できるレベルのように思われますので、Flex Builder 2.0.1 日本語版に Apollo 機能拡張をインストールする際の手順をお伝えします。サポートはありませんのであくまで自己責任にはなりますが、よろしければ参考にしてください。

  1. Adobe Labs から Apollo 機能拡張をダウンロードします。(Adobe Labs Downloads Apollo
  2. Flex Builder 2.0.1 日本語版に Apollo 機能拡張をインストールします。ビルド番号に対する警告パネルが表示されますがそのまま続行します
  3. \plugins\com.adobe.flexbuilder.components.config.nl1_2.0.160522\nl\ja\config\components に apollo.xml をコピーします
  4. \plugins\com.adobe.flexbuilder.editors.mxml_2.0.160522\resources に componentToExtensionMap.xml をコピーします
  5. もし Apollo ランタイムがインストールされていなければインストールします

以上です。必要はファイルは zip ファイルにまとめてありますのでダウンロードしてください。(ApolloFBExtJ.zip:1.7KB)

NAB 2007 にて Adobe Media Player が発表されました。プレスリリースが US のサイトから参照できます。(Adobe Unveils Next Generation Internet VIdeo Solution

Adobe Media Player はその名のとおりリッチメディアコンテンツの再生や管理をするためのデスクトッププレーヤで、 昨年 US で開催された MAX では Philo のコードネームで紹介されていました。

ストリーミングやダウンロードでのコンテンツ再生に対応し、コンテンツ提供者のためのブランディングや広告の提供をサポートする機能もあります。また Apollo ベースのためオフラインでの使用も可能です。コンテンツ保護のための機能提供についても触れられています。

Adobe Media Player は今年後半にベータ版が公開され、年内には製品をリリースする予定とのことです。なお Flash Player や Apollo と同様にエンドユーザには無償で配布される予定です。

Adobe CS3 が US で正式に発表されました。(Adobe Ships Creative Suite 3

Flash CS3 に関しては、AS3 の採用のみならず Illustrator や photoshop との連携強化など中身のあるアップグレードになっています。日本での発売はまだ先ですのでそれまで楽しみにお待ちください。ちなみに旧 Macromedia Studio にほぼ相当する CS3 Web Standard が $999 程度、それに Photoshop, Illusutrator, Acrobat が加わった CS3 Web Premium は $1,599 程度を想定しているとのことです。詳細はこちらのページをご覧ください。(Adobe Creative Suite 3 Web Editions

さらにあわせてビデオ関連の製品のアナウンスもありました。Premire Pro CS3 と After Effects CS3 のプレビュー版が Adobe Labs に公開されています。(Adobe Premire Pro CS3@Labs, Adobe After Effects CS3@Labs) Premire は Intel Mac のみサポートするようです。After Effects は PowerPC Mac もサポートします。US では今年の夏の出荷を予定しているとのことです。

Flash Player 9 がアップデートされました。最新版は 9.0.45.0 で、Win 版と Mac 版が用意されています。

今回のリリースは近々リリース予定の Flash CS3 Professional への対応が主な目的です。修正された項目は以下のとおりです。

  • Flash CS3 Professional の新しい AS3 コンポーネントが正しく動作しない
  • gotoAndStop 等のコマンドでのフレーム移動により生成された AS3 オブジェクトの第一フレームのスクリプトが正しく実行されないケースがある
  • AS3 用のランタイムシェアードライブラリ (RSL) が実行時にセキュリティーエラーを起こす
  • flash.text.TextField.getCharBoundaries の返す領域が左に2ピクセルずれる

より詳細な問題の解説と対応が以下の Technote にあります。英文で恐縮ですがとりあえず。

NativeWindow クラスには Apollo アプリケーションのウインドウの位置や大きさを示すプロパティがあります。

x:Number       // ウインドウの左上の角の x 座標
y:Number       // ウインドウの左上の角の y 座標
width:Number   // ウインドウの幅(単位:ピクセル)
height:Number  // ウインドウの高さ(単位:ピクセル)
 

これらのプロパティに値を設定することでウインドウの位置や大きさを変えることができます。

stage.window.x = 50;
stage.window.y = 50;
stage.window.width = 800;
stage.window.height = 600;
 

ウインドウの幅と高さに指定できる最小値と最大値は予め決められています。最小値より小さな値を指定すると最小値として与えられている大きさになります。つまり下限の定義よりウインドウを小さくすることはできません。同様に最大値として定義されている値よりウインドウを大きくすることもできません。

最大値と最小値はそれぞれ以下のプロパティから参照できます。当然ですがこれらのプロパティは読み取り専用です。

ふつうのウインドウだったらマウスでウインドウの位置を変えたり大きさを変えたりできますよね?今回はそれらの機能を追加したいと思います。

startMove() メソッド

startMove() は NativeWindow クラスのメソッドです。

public function startMove():void
 

マウスのボタンを押すと mouseDown イベントが発生します。この状態で startMove() メソッドを呼び出すと、マウスボタンを離す (もしくは何らかのマウスイベントが発生する) までマウスの動きに従ってウインドウを移動させることができます。

移動終了の判断は Apollo 側で勝手に行いますので、特に設定する必要はありません。ですので stopMove() といった類のメソッドは提供されていません。

ちなみに Windows では mouseDown 以外のタイミングから startMove() を呼ぶとキー操作による移動も可能になるようです。

さて、前回のサンプルにタイトルバーを使った移動ができるように機能を追加してみましょう。

NativeWindowDisplayState クラス

ウインドウの現在の表示状態を知りたいとき、NativeWindow クラスの displayState プロパティ (読み取り専用) から取得することができます。

var windowStatus:String = stage.window.displayState;
 

このプロパティの持つ値は NativeWindowDisplayState というクラスに定義されています。とりうる値は以下の3種類です。

NativeWindowDisplayState.NORMAL     // ウインドウは通常の表示状態である
NativeWindowDisplayState.MINIMIZED  // ウインドウは最小化されている
NativeWindowDisplayState.MAXIMIZED  // ウインドウは最大化されている
 

これを使うと前回紹介した NativeWindow のメソッドは以下のように理解することができます。

Apollo アプリケーションのウインドウは NativeWindow というクラスのインスタンスです。この NativeWindow クラスの API を使うとウインドウを閉じたり最大化したりできます。

NativeWindow クラス

DisplayObject のインスタンス (画面に表示されるオブジェクトは基本的にみんなそうです) であれば、自身が所属する表示領域を stage 属性に持っています。この stage 属性から stage を表示している NativeWindow オブジェクトを取得することができます。

// DisplayObject のインスタンス内では以下の記述が可能
var window:NativeWindow = stage.window;
 

Stage の window プロパティは Apollo 実行環境でのみ有効で、Flash Player 環境では存在しません。プラグインは個別のウインドウを持たないので当たり前といえば当たり前ですが。

ちなみに、アプリケーションから実行環境を調べる方法の一つとして System.Capabilities.playerType が使えます。

Apollo アプリケーションのクロームを変更する方法は以前にも一度触れましたが、そのときは Apollo が提供するクロームをそのまま使いました。今回はウインドウの形やボタンを自由にデザインする方法です。

クロームを消す

まず、アプリケーション記述ファイル (アプリ名-app.xml ) 内の rootContent タグを変更します。rootContent タグの systemChrome が "standard" の場合は OS 標準のウインドウになりますが、"none" の場合は Apollo アプリケーションの提供するクロームが使われます。

<rootContent systemChrome="none" transparent="false" visible="true">[SWF reference is generated]</rootContent>
 

上記のように systemChrome を "none" に設定して、空の Apollo アプリケーションを作ります。

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

これを実行すると以下のようなウインドウが表示されます。

apollochrome.jpg

このとき、アプリケーションのウインドウにタイトルバーやボタンが表示されているのは Apollo が提供するクロームが使用されているからです。

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

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

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

これは2つのコンポーネントの依存関係を強くしますし、そもそも 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;
}
 

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 を押します。

newmxmlcomponent.jpg

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

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

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261