アプリケーション構造見直しの手始めとしてまず履歴管理を 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 というメタタグです。

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

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 のクラス定義の枠だけが作成された状態になります。

先週 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 のみになりました。

前回までに作ったコードを実際に試された方は気がつかれたと思いますが、”戻る” ボタンがちゃんと機能しない場合があります。今回はその辺りを修正してみたいと思います。

問題その１： 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 コンポーネントにあるでしょうか。

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 機能拡張ももちろん予定されています。ただ、こちらは、まず新しいバージョンを出荷してからということで、少しお待ちいただく形になっています。

メインウインドウのスタイル変更

前回までの 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 を使ってスタイルを設定する必要があります。

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 サポート
• その他パフォーマンス向上、スケーラビリティの向上などなど

"戻る" ボタンの追加

前回作った 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>
 

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） から入手できます。

Adobe Labs に Solaris 用 Flash Player 9 のベータ版が公開されました。（Flash Player 9 beta for Solaris@Labs） Spark と x86 版がダウンロードできます。なおインストーラは英語版のみです。

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 アプリケーションが実行できれば設定完了です。

Adobe CEO のインタービュー記事が CNET Japan に掲載されていますのでご紹介します。（チゼンCEO、アドビのオンライン戦略を語る） オンライン戦略や Apollo を中心に今後の Adobe の方向性が語られています。ちなみに記事内の発言（一ページ目の下のほう）にあるように、オンライン版の Photoshop は Photoshop CS2 のオンライン版というようなものではなく、Google の Picasa のようなものを考えているようです。

先日 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週間ほどでリリースできる見通しとのことです。

Adobe Creative Suite 3 英語版の発表日についてのアナウンスがあったようです。（注：出荷日ではありません） それによると 3月27日のアメリカ東海岸時間で午後3時半に New York で製品発表イベントがあり web でのライブ中継もあるとのことです。 web 中継の詳細は今週中に Adobe の US サイトに公開されるとのことでした。日本では早朝になりますがご興味があれば是非。

日本語版の公開はもうしばらく先になるとのことです。

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

私事で恐縮ですが、最近 Adobe Consulting に移動しました。あまり知られていないと思いますが Adobe Consulting は主にモバイル/デバイス系のプロジェクト支援をしてきたチームです。これからは Apollo, Flash, Flex や Experience design といった分野も始めるということで参加のはこびになりました。市場の活性化とかベストプラクティスの共有に貢献するとかして RIA を使いたい人 RIA を作りたい人のお役に立てるようになれれば思っています。まだ小さなチームですし、いろいろな方と協業させていただくことになると思います。その際はよろしくお願いします。