« February 2007 | Main | April 2007 »
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 27, 2007
Adobe CS3 発表
先週 Shibuya.js Technical Talk で AS ネタがたくさんあったみたいです。（Shibuya.js Technical Talk #3 - Shibuya.es） 行きたかった。。
さて、US で Creative Suite 3 が発表になりました。（Adobe Unleashes Creative Suite 3 Product Line） 出荷時期は4月中とのみアナウンスされています。
旧 Macromedia Studio にほぼ相当するのが Web Standard edition で Dreamweaver CS3, Flash CS3 Professional, Fireworks CS3, Contribute CS3 が含まれます。これに Photoshop CS3 Extended, Illustrator CS3, Acrobat 8 Professional の付いた Web Premium edition もあります。
全ての組み合わせはこちらで確認できます。（Press Kit - Adobe Creative Suite 3） Flash は Professional のみになりました。
Posted by ackie at 01:50 PM | Comments (1)
March 26, 2007
Apollo HTML コンポーネントのイベント
前回までに作ったコードを実際に試された方は気がつかれたと思いますが、”戻る” ボタンがちゃんと機能しない場合があります。今回はその辺りを修正してみたいと思います。
問題その１： 2つ前の画面に戻れない
いくつかのページを表示した後、”戻る” を押すと前の画面に戻ります。ところが、もう一回 ”戻る” を押しても同じページが表示されてしまいます。その後何回押しても同じページのままです。
これは、HTML コンポーネントの complete イベントで履歴を追加するようにしたことに原因があります。（Apollo でブラウザを作る の続き） 普通に新しいページをロードしているうちは問題ないのですが、”戻る”ボタンで前のページを表示したときにも、戻ったページの表示が完了すると complete イベントが発生するため戻ったページを改めて履歴に追加しなおすという一歩戻ってまた進むような動作をしてしまうのです。
これを解決するには complete イベントハンドラ内で、”戻る” の押下による表示かどうかを判定して動作を切り替えればよいはずです。そこで、状況を示すフラグを追加して、それによってハンドラの動作を切り替えるよう変更します。修正される箇所はフラグの追加を含め 3 箇所です。
private var isBack:int = 0; // 戻り中を示すフラグの宣言
private function back():void {
if (history.length > 1) {
history.pop(); // 現在の URL を廃棄
var prevURL:String = history[history.length - 1]; // 最終エントリを取得
html.location = prevURL; // HTML コンポーネントに URL を設定
isBack++; // フラグをセット
}
}
private function pushURL(e:Event):void {
if (isBack > 0) {
isBack--;
} else {
history.push(html.location); // 現在の location を配列に記録
}
inputTF.text = html.location;
fadeIn.target = html; // 効果のターゲットを設定したら開始
fadeIn.play();
}
まず、isBack という変数を宣言して、back() 内でその値を一つ増やしています（”戻る” の開始）。onComplete() 内では isBack が正の値なら一つ値を減らし（”戻る” の完了）、それ以外の場合（新規ページの表示）のみ通常の処理を行うよう変更しました。
これで、2つ前のページにも戻れるようになったと思います。
HTTP コンポーネントのイベント
問題その２： 表示完了前に ”戻る” ボタンを押すと2つ前の画面に飛んでしまう
”戻る” は一つ前の画面に戻るためのボタンです。ところがときどき2つ前の画面に戻ってしまうことがあります。これは、履歴の追加されるタイミングが complete イベント発生時、すなわちページ全体の描画完了時であるためです。
今の仕様だと、読み込んだページの描画が完全に終了するまで、履歴の状態は前のページが表示されていたときのままです。なので描画完了前に ”戻る” を押すと、一つ前のさらに前のページに移動してしまうわけです。
とすると画面に表示が開始されるまでには履歴の追加を済ませておきたいところです。では、都合よく使えそうなイベントは HTML コンポーネントにあるでしょうか。
以下が、HTML コンポーネントの描画に関連するイベントです。
locationChange: HTML コンポーネントの location プロパティが変更された domInitialize : HTML ドキュメントの読み込み開始に伴い DOM が初期化された htmlRender : HTML コンテンツの描画が完了した complete : 全てのコンテンツの読み込みと描画が完了した
このうち htmlRender は読み込むコンテンツが複数あるとそれぞれのコンテンツの描画完了に対して発生します。
今回は読み込み開始のタイミングで処理を行いたい訳ですから domInitialize を使うのがよさそうです。そこで complete イベントで呼び出している pushURL() メソッドから履歴操作に関連する分を取り分けます。
メソッドを分けたついでにそれぞれ onDomInitialize() と onComplete() という名前に変更します。そのまたついでに locationChange の処理も onLocationChange() というメソッドで行うことにします。
この変更で、呼び出されるメソッドの定義はそれぞれ以下のようになります。
private function onLocationChange(e:Event):void {
html.alpha=0
}
private function onDomInitialize(e:Event):void {
if (isBack > 0) {
isBack--;
} else {
history.push(html.location); // 現在の location を配列に記録
}
inputTF.text = html.location;
}
private function onComplete(e:Event):void {
fadeIn.target = html; // 効果のターゲットを設定したら開始
fadeIn.play();
}
いままで back() の中でも入力テキストフィールドに読み込む対象の URL を設定していましたが、どうやら onComplete() のタイミングだけでよさそうです。ということで back() メソッドからはその行を削除することにします。
最後に HTML コンポーネントからこれらのメソッドが呼び出されるよう記述を変更します。
<mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
さて、これを実際に試してみましょう。描画完了前に ”戻る” を押しても2つ前には戻らなくなったかと思います。
UI コンポーネントの状態を変更する
問題その３： 履歴が無くても ”戻る” ボタンが押せる状態になっている
プログラムを起動した瞬間から ”戻る” ボタンがアクティブになっています。これも気になりますよね。
まず、初期表示時に ”戻る” ボタンを無効にしたいと思います。それには enabled プロパティを false にします。後でボタンを有効にするためこのプロパティを切り替える必要があるはずなので、id も指定しておきます。backBtn という名前にしてみました。
<mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>
ボタンを有効にできるのは履歴が2つ以上あるときです。履歴を追加したタイミングで履歴の数をチェックしてボタンの有効/無効を切り替えるようなロジックを追加します。
private function onDomInitialize(e:Event):void {
if (isBack > 0) {
isBack--;
} else {
history.push(html.location); // 現在の location を配列に記録
if (history.length > 1) { // 履歴が１より多い
backBtn.enabled = true;
}
}
inputTF.text = html.location;
}
逆に ”戻る” を押したときは履歴の数が１以下になったら無効に戻す処理が必要です。
private function back():void {
if (history.length > 1) {
...
if (history.length <= 1) { // 履歴が１以下
backBtn.enabled = false;
}
}
}
これでボタンの表示が戻る先の有り無しで切り替わるようになったと思います。
以下が今回の修正を反映したコードです。50 行余りになりました。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// この配列に現在表示中の URL までが記録されている
private var history:Array = new Array();
private var isBack:int = 0;
private function back():void {
if (history.length > 1) {
history.pop(); // 現在の URL を廃棄
var prevURL:String = history[history.length - 1]; // 最終エントリを取得
html.location = prevURL; // HTML コンポーネントに URL を設定
isBack++;
if (history.length <= 1) { // 履歴が１以下
backBtn.enabled = false;
}
}
}
private function loadURL():void {
html.location = inputTF.text;
}
private function onLocationChange(e:Event):void {
html.alpha=0
}
private function onDomInitialize(e:Event):void {
if (isBack > 0) {
isBack--;
} else {
history.push(html.location); // 現在の location を配列に記録
if (history.length > 1) { // 履歴が１より多い
backBtn.enabled = true;
}
}
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"/>
<mx:HBox>
<mx:TextInput id="inputTF" width="225" text="http://" enter="loadURL()"/>
<mx:Button label="移動" click="loadURL()"/>
<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 05:22 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 22, 2007
Apollo ウインドウスタイルの変更
メインウインドウのスタイル変更
前回までの MyBrowser は下のように OS （この場合は Windows XP Classic） のウインドウ内に表示されていました。今回はこのウインドウのスタイルを変更してみます。
まず MyBrowser プロジェクト下にある MyBrowser-app.xml というファイルを変更します。
MyBrowser-app.xml ファイルを見つけたらダブルクリックするとエディタが開きます。その中から rootContent タグを探します。下のようなタグが見つかると思います。
<rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>
ここでタグ内の systemChrome 属性の値を none に変更します。
<rootContent systemChrome="none" transparent="false" visible="true">[SWF reference is generated]</rootContent>
MyBrowser-app.xml ファイルを保存して MyBrowser を実行すると、下図のようにタイトルバー等のパーツが Apollo が提供するものに変わります。
次に、ウインドウの背景を透けた状態にして見ましょう。それには先ほどの rootContent タグ内の transparent 属性の値を true に変更します。
<rootContent systemChrome="none" transparent="true" visible="true">[SWF reference is generated]</rootContent>
これだけだとまだ背景は透けません。別途 css を使ってスタイルを設定する必要があります。
MXML ファイル内にも直接スタイルを設定できますが、今回は別途 CSS ファイルを作成してみます。Ctrl-n キーを押すと下のようなウィザードが表示されます。ここでは Flex フォルダー下の CSS File を選択します。
Next キーを押すと下の画面に変わります。MyBrowser が選択されていることを確認して、File name に MyBrowser と入力したら画面下の Finish を押します。
これで MyBrowser.css が作成されてエディタに開かれた状態になったと思います。ここではウインドウの背景を透かしたいので Application のスタイル属性を下のように記述します。ファイルの保存をお忘れなく。
/* MyBrowser.css file */
Application {
background-color:"";
background-image:"";
background-alpha:"0.4";
}
あとは、MXML ファイルから今作成した CSS ファイルを参照するように指定すれば完了です。以下のタグを MyBrowser.mxml ファイル内にルートタグの子として記述します。
<mx:Style source="MyBrowser.css"/>
下の図は背景の黒が少し分かる程度で分かりにくいですが、実際のデスクトップ上で見るとよく分かるかと思います。のちほどお確かめくださいませ。
Effect の適用
Flex には Effect という表現効果を定義したクラスがあります。これを使って、コンテンツが表示される際にだんだんくっきりしてくるような効果を追加してみたいと思います。
今回使用するのは Fade という Effect のサブクラスです。Fade は対象オブジェクトの透明度を指定された効果前の値 （alphaFrom） から効果後の値 （alphaTo） に変化させます。効果にかける時間は duration で指定します。
タグで定義すると以下のようになります。（もちろん ActionScript で定義することも可能です）
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
上で定義した効果を HTML が表示されるタイミングで適用したいので、HTML コンポーネントの complete イベントに設定されている pushURL() 関数で呼び出すようにします。
private function pushURL(e:Event):void {
// 効果のターゲットを設定したら開始
fadeIn.target = html;
fadeIn.play();
// 現在の location を配列に記録
history.push(html.location);
// あわせて入力テキストフィールドの表示も変更
inputTF.text = html.location;
}
ついでに、新しい URL が指定された時点で HTML コンポーネントを透明にしてしまいたいと思います。URL が変更されると HTML コンポーネントの locationChange イベントが発生しますので、そのタイミングで HTML コンポーネントのアルファを 0 に設定します。ここでは下のコードのように HTML タグの locationChagnge 属性に直接書いてみました。
<mx:HTML id="html" width="100%" height="100%" locationChange="html.alpha=0" complete="pushURL(event)"/>
最後に全体のコードです。ここまでで約40行になりました。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// この配列に現在表示中の URL までが記録されている
private var history:Array = new Array();
private function back():void {
if (history.length > 1) {
history.pop(); // 現在の URL を廃棄
var prevURL:String = history[history.length - 1]; // 最終エントリを取得
html.location = prevURL; // HTML コンポーネントに URL を設定
inputTF.text = prevURL; // 入力テキストフィールドの表示も変更
}
}
private function loadURL():void {
html.location = inputTF.text;
}
private function pushURL(e:Event):void {
// 効果のターゲットを設定したら開始
fadeIn.target = html;
fadeIn.play();
// 現在の location を配列に記録
history.push(html.location);
// あわせて入力テキストフィールドの表示も変更
inputTF.text = html.location;
}
]]>
</mx:Script>
<mx:Style source="MyBrowser.css"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:HBox>
<mx:TextInput id="inputTF" width="225" text="http://" enter="loadURL()"/>
<mx:Button label="移動" click="loadURL()"/>
<mx:Button label="戻る" click="back()"/>
</mx:HBox>
<mx:HTML id="html" width="100%" height="100%" locationChange="html.alpha=0" complete="pushURL(event)"/>
</mx:ApolloApplication>
Posted by ackie at 04:10 PM | Comments (0)
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）をお読みいただき、以下の適当なリンクをクリックしてください。
ドキュメント
- 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 20, 2007
Apollo でブラウザを作る の続き
”戻る” ボタンの追加
前回作った MyBrowser に一つ前のページに戻る機能を追加してみたいと思います。
まず、ボタンを一つ追加します。”移動” ボタンの次の行に Botton タグを ”戻る” というラベルで追加します。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HBox>
<mx:TextInput id="inputTF" width="225" text="http://"/>
<mx:Button label="移動" click="html.location = inputTF.text;"/>
<mx:Button label="戻る" click="back()"/>
</mx:HBox>
<mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>
追加した Button タグ内に click="back()" という記述がありますが、これは ”戻る” ボタンがクリックされたら back() という関数を呼び出すという指定です。
次はこの back() 関数を記述します。MXML 内に ActionScript を記述するには Script タグを使います。下の例にあるように Script タグで囲まれた範囲にはスクリプトを書くことができます。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// ここにスクリプトを記述
private function back():void {
}
]]>
</mx:Script>
<mx:HBox>
<mx:TextInput id="inputTF" width="225" text="http://"/>
<mx:Button label="移動" click="html.location = inputTF.text;"/>
<mx:Button label="戻る" click="back()"/>
</mx:HBox>
<mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>
back() 関数内では一つ前の URL を HTML コンポーネントの location プロパティ、すなわち html.location に設定することになります。（HTML コンポーネントの詳しい使い方は別の機会に説明します） そうすると以前のURLを覚えている必要がありますので、履歴を保持するための配列も一つ定義します。スクリプトの箇所は、以下のようになります。
<mx:Script>
<![CDATA[
// この配列に現在表示中の URL までが記録されている
private var history:Array = new Array();
private function back():void {
if (history.length > 1) {
history.pop(); // 現在の URL を廃棄
var prevURL:String = history[history.length - 1]; // 最終エントリを取得
html.location = prevURL; // HTML コンポーネントに URL を設定
inputTF.text = prevURL; // 入力テキストフィールドの表示も変更
}
}
]]>
</mx:Script>
あとは URL が変更される毎に history 配列に URL を追加する仕組みを作れば出来上がりです。HTML コンポーネントは、指定された URL からリソースの読み込みが完了すると complete というイベントを発生しますので、これを使ってみることにします。
まず、HTML コンポーネントのタグを使ってイベントハンドラを設定します。
<mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>
今回は pushURL() という関数を呼ぶように指定しました。pushURL() の中身はこんな感じです。
private function pushURL(e:Event):void {
// 現在の location を配列に記録
history.push(html.location);
// あわせて入力テキストフィールドの表示も変更
inputTF.text = html.location;
}
以上で ”戻る” ボタンらしきものが出来たと思います。以下は全体のコードです。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// この配列に現在表示中の URL までが記録されている
private var history:Array = new Array();
private function back():void {
if (history.length > 1) {
history.pop(); // 現在の URL を廃棄
var prevURL:String = history[history.length - 1]; // 最終エントリを取得
html.location = prevURL; // HTML コンポーネントに URL を設定
inputTF.text = prevURL; // 入力テキストフィールドの表示も変更
}
}
private function pushURL(e:Event):void {
// 現在の location を配列に記録
history.push(html.location);
// あわせて入力テキストフィールドの表示も変更
inputTF.text = html.location;
}
]]>
</mx:Script>
<mx:HBox>
<mx:TextInput id="inputTF" width="225" text="http://"/>
<mx:Button label="移動" click="html.location = inputTF.text;"/>
<mx:Button label="戻る" click="back()"/>
</mx:HBox>
<mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>
</mx:ApolloApplication>
Apollo アプリケーションの配布
作成したアプリケーションを配布するには air パッケージを作成します。Flex Builder の場合は、まずメニューバーから File -> Export と選択します。そうすると Flex Builder は以下のパネルを表示します。
Deployable AIR File を選択して Next ボタンを押します。今度は下図のように Apollo Deployment Export Wizard が表示されます。MyBrowser-app.xml ファイルを選んで Wizard 下部の Finish ボタンを押します。これで air ファイルが作成され、Navigator パネル内の MyBrowser.mxml の上あたりに表示されます。
今回作成した air ファイルに含まれるのは上で指定した xml ファイルと MyBrowser.swf の2つのみです。上記のパネルが表示された状態で、Finish の代わりに Next を押すと他に air ファイルに含めたいファイルを指定することもできます。
air ファイルをダブルクリックするとインストーラが起動されます。
Posted by ackie at 05:40 PM | Comments (4)
March 19, 2007
Adobe Apollo アルファ版公開
Apollo のアルファ版が Adobe Labs に公開されました。（Apollo@Labs） Apollo は従来の Web アプリケーションの境界を大きく広げる可能性を持った新しいクロス OS の実行環境（のコードネーム）です。以前に書いた簡単な説明 （Apollo のご紹介 ） と、先日のデブサミで使用した資料（Developer Summit 2007 資料ダウンロード：14-B-2f）もよろしければご参照ください。
Apollo の特徴は Ajax (HTML+JavaScript), Flash, Flex (MXML+ActionScript) といった Web アプリケーション開発技術を使いながらデスクトップアプリケーションのように様々なローカルのリソースも利用できることです。まだアルファ版ですので Ajax のフルサポートや PDF 表示機能はこれからですがファイル I/O 等の主要な機能は実装されています。早速 Apollo 体験をしてみてください。
まずは Apollo のランタイムのインストールです。次のライセンス条文 （Adobe Apollo Runtime License） をお読みいただいてから、必要なモジュールをダウンロードしてください。アルファ版でサポートされるのは以下のプラットフォームです。
- Windows 版 (Windows XP SP2 / Vista Home premium edition: msi, 6 MB)
- Macintosh 版 (Mac OSX 10.4 PPC / Intel: dmg, 8 MB)
ダウンロードしたファイルをダブルクリックすると Apollo のランタイムがインストールされます。
Apollo ランタイムをインストールすると、Apollo アプリケーションがインストールできるようになります。このようにアルファ版では Apollo ランタイムと Apollo アプリケーションを別々にインストールしますが、正式リリース時には Apollo ランタイムのインストールされていない環境でも Apollo アプリケーションとランタイムを一度にインストールする手段が提供される予定になっています。
いくつかのサンプルアプリケーションが Labs 内 （Apollo:Applications:Samples@Labs） にも公開されていますのでインストールしてお試しいただければと思います。（mms.cfg ファイルを標準以外の構成で使用している場合、Apollo アプリケーション実行中はそのファイルを削除してください）
注 ： なお Apollo アプリケーションはデスクトップアプリのように種々のローカルリソースを利用できます。出自の不明な Apollo アプリケーションは決してインストールしないよう注意してください。Apollo のリリース時までには電子署名機能がサポートされる予定です。
Apollo アプリケーションの開発
Apollo アプリケーションを開発するには Apollo SDK を使用します。
コマンドラインツールで開発する場合はこの SDK のみダウンロードすれば OK です。が、これでは結構大変なのでオーサリングツールへの Apollo 開発用の拡張機能も提供されることになっています。現時点で拡張機能が提供されるオーサリングツールは Flex Builder 2.0.1 のみです。Labs から Flex Builder 用機能拡張のベータ版が提供されています。
SDK と Flex Builder の機能拡張 （SDK を含む） どちらも Labs のダウンロードページ （Adobe Labs Downloads Apollo） から入手できます。
Flex Builder 2.0.1 はまだ英語版しか公開されていませんが、今週末には日本語版もリリースされる予定です。既に日本語版のライセンスをお持ちの方はそれまでお待ちいただくのもよいかもしれません。英語版をダウンロードされる方は US の Adobe サイトからお願いします。（Adobe Trial Downloads）
Flash および Dreamweaver にも将来的には Apollo 用アドオンが提供される計画です。当面はこの機会に Flex Bulder をお試しいただければと思います。
開発に必要なドキュメントも Labs 内上記のリンク （Adobe Labs Downloads Apollo） にあります。日本語訳は順次この blog で公開していく予定です。
なお、Apollo のアルファ版は英語環境のみでテストされています。日本語を使用する上で問題が見つかるかもしれませんが、その際にはコメントをお寄せください。製品チームにフィードバックさせていただきます。
ブラウザを作ってみよう
最後に Flex Builder を使った簡単な Apollo アプリケーションの作り方をご紹介します。
まず Flex Builder 2.0.1 と Apollo 開発用機能拡張をインストールします。とりあえず Flex Builder を試してみようという方は、インストール時に Flex Builder plug-in ではなく Flex Builder （デフォルトの方です） を選ぶことをおすすめします。plug-in はインストールに Eclipse 環境が必要です。
インストールが完了したら Flex Builder を起動します。画面左上の Navigator パネル内で右クリックして ”new” を選んでから "Apollo Project" を選択します。
ダイアログウインドウが表示されたらまず Basic を選びます。すると下の画面が表示されますのでプロジェクト名を入力します。ここでは MyBrowser としています。
プロジェクト名を入力したら画面下の Finish を押して完了です。Navigator パネル内に MyBrowser というプロジェクトが作成されたと思います。
MyBrowser.mxml が編集できる状態になっているはずですので、エディタ内に以下のコードを入力します。
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HBox>
<mx:TextInput id="inputTF" width="225" text="http://"/>
<mx:Button label="移動" click="html.location = inputTF.text;"/>
</mx:HBox>
<mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>
Ctrl-s を押してファイルをセーブしたら、mxml ファイルを実行します。（Navigator パネル内の MyBrowser.mxml の文字の上で右クリックをして、表示されたメニューから "Run Application" を選択）
無事ブラウザが動きましたか？
Posted by ackie at 07:14 PM | Comments (0)
Solaris 版 Flash Player 9 ベータ
Adobe Labs に Solaris 用 Flash Player 9 のベータ版が公開されました。（Flash Player 9 beta for Solaris@Labs） Spark と x86 版がダウンロードできます。なおインストーラは英語版のみです。
Posted by ackie at 10:35 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）
ダウンロードは以下のリンクから可能です。。
いまのところ 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 です。
ウインドウズのみインストール後 OS の再起動が必要だそうです。
Web サーバを再起動後 http://localhost/Main.mxml のようにして Flex アプリケーションが実行できれば設定完了です。
Posted by ackie at 05:55 PM | Comments (0)
March 14, 2007
Adobe CEO インタビュー記事
Adobe CEO のインタービュー記事が CNET Japan に掲載されていますのでご紹介します。（チゼンCEO、アドビのオンライン戦略を語る） オンライン戦略や Apollo を中心に今後の Adobe の方向性が語られています。ちなみに記事内の発言（一ページ目の下のほう）にあるように、オンライン版の Photoshop は Photoshop CS2 のオンライン版というようなものではなく、Google の Picasa のようなものを考えているようです。
Posted by ackie at 05:26 PM | Comments (0)
March 12, 2007
Flex Builder 関連のニュース
先日 AS3 のサンプルコードの件でご指摘をいただきましたので （ありがとうございます） 修正しておきました。（コンストラクタ （と Singleton）） なにぶんベータ期間に書いたもののため、他にも不具合があるかと思われます。人任せで恐縮ですが、なにか見つけた際にはコメントをいただければ幸いです。
さて Flex Builder 2 が今年度の Eclipse Community Awards で商用開発ツールの次点に選ばれました。（Eclipse Foundation Community Awards Announcement） 一位ではないもののおめでたいことですのでお伝えしておきます。
それから、US の Flex のユーザの方に Flex Builder 2 の機能拡張プラグインとして Cairngorm プラグインを開発している人がいます。（Introducing Cairngorm Plugin） 現時点ではスクリーンショットが何点か公開されており （Cairngorm Preview Gallery）、あと2週間ほどでリリースできる見通しとのことです。
Posted by ackie at 06:00 PM | Comments (0)
March 06, 2007
CS3 英語版の発表予定
Adobe Creative Suite 3 英語版の発表日についてのアナウンスがあったようです。（注：出荷日ではありません） それによると 3月27日のアメリカ東海岸時間で午後3時半に New York で製品発表イベントがあり web でのライブ中継もあるとのことです。 web 中継の詳細は今週中に Adobe の US サイトに公開されるとのことでした。日本では早朝になりますがご興味があれば是非。
日本語版の公開はもうしばらく先になるとのことです。
Posted by ackie at 06:17 PM | Comments (1)
March 02, 2007
MAX 2007
MAX 2007 の日程が公開されたようです。詳細は追ってということのようですがとりあえず。
North America MAX 2007
September 30 - October 3, 2007
McCormick Place WEst, Chicago
EMEA MAX 2007
October 2007
Barcelona, Spain
Japan MAX 2007
November 2007
Posted by ackie at 04:50 PM | Comments (1)
Adobe Consulting です
私事で恐縮ですが、最近 Adobe Consulting に移動しました。あまり知られていないと思いますが Adobe Consulting は主にモバイル/デバイス系のプロジェクト支援をしてきたチームです。これからは Apollo, Flash, Flex や Experience design といった分野も始めるということで参加のはこびになりました。市場の活性化とかベストプラクティスの共有に貢献するとかして RIA を使いたい人 RIA を作りたい人のお役に立てるようになれれば思っています。まだ小さなチームですし、いろいろな方と協業させていただくことになると思います。その際はよろしくお願いします。
Posted by ackie at 04:45 PM | Comments (3)