Adobe MAX 2006　フラッシュレポート

Leveraging HTML/JavaScript and AJAX in Apollo Applications
Christopher A. Brichford
Sr. Computer Scientist, Adobe Systems

このセッションでは、Web標準技術を使ってどのようなApolloアプリケーションを開発できるのか、またHTMLとJavaScriptがApolloアーキテクチャにどのように組み込まれているのかを解説します。

Apolloの概要

Apolloは、既存のweb開発技術（Flash、Flex、HTML、Ajax）でデスクトップRIAを開発し、配布するための、クロスOSのランタイムを提供します。
特徴としては：

- Web開発者やサービス提供者がすでに持っている資産（コンテンツ、サービス）を再利用し、デスクトップに展開できる
現在使っているツールとワークフローをそのまま活用できる
Flashのみ、HTMLのみ、または両方の組み合わせをデスクトップアプリケーション化できる
Apolloランタイムは無償でダウンロード
Apolloアプリケーションを開発し、配布用の.AIRファイル（必要なファイルをパッケージ化しZIP圧縮したもの）にするためのツールは無償でAdobeから提供。とくにHTMLのみで開発を行っているデベロッパーの場合、Adobeに1銭も払わずにApolloアプリケーションを開発できる。

デモ：HTMLControlTest

デスクトップにダウンロード済みの.airファイルをダブルクリックすると、インストーラが起動し、アプリケーション画面が開きます。アコーディオンタブが2つあり、tab 1でGoogleを開き、Tab 2ではSlashdotを開きます。どちらもWebページが表示されます。画面上部にあるスライダを動かし、透明度を50%にすると、ページ全体が半透明になります。この状態でもリンクは動作します。ほかに拡大・縮小や回転を加えることもできます。回転した状態でもリンクは動作します。フィルタ効果をかけることも可能で、Googleの検索ページにぼかしをかけた状態で、検索キーワードを入力すると、それでも検索結果がきちんと表示される（ぼやけた状態で）。

ApolloがHTMLをサポートする理由

既存Webコンテンツ、サービス、ロジックの再利用
Ajax開発者のノウハウの再利用
動的CSSボックスレイアウトでテキストを配置可能なため、Flashだけでは実現できない、より柔軟で高度なテキストレイアウトを実現できる

利用例：

アプリケーションにブラウザをそのまま埋め込み表示
アプリケーション内でパートナーのWebページに誘導、アフィリエイト等の仕組みをそのまま活用
複数Webページをダッシュボードとして1画面に表示
HTML UI：Flashに同梱されるものより高機能なテキストフィールドコンポーネントとして利用
HTMLでアプリケーションUIを構築
SpryやYahoo! UI LibraryなどHTMLベースのAjaxフレームワークをUIパーツとして利用

ApolloのHTMLサポートについて

ApolloのHTMLエンジンは、WebページをFlashのディスプレイオブジェクトとしてレンダリングします。HTMLディスプレイオブジェクトは、Flash内の他のディスプレイリストオブジェクトとまったく同様に振舞います。このため、フィルタ、変形、透明度などのプロパティを自由に適用することができます。開発チームでは、Flashの埋め込みフォントをHTMLのレンダリングに利用し、アンチエイリアス表示を可能にすることを検討しています。また、HTMLフォームのUIパーツは、FlexのUIパーツと同じ見え方をするようになり、両者の統一性をとる予定です。

スクリプトについて

Apolloアプリケーションの中では、JavaScriptとActionScriptオブジェクトモデルがブリッジされます。これにより、ActionScriptからHTMLのドキュメントオブジェクトモデル（DOM）に直接アクセスすることが可能になります。また、JavaScriptからFlashのディスプレイリストを操作したり、ActionScriptからJavaScriptをインスタンス化することもできます。

JavaScriptから同期的にActionScript関数を呼び出す、またはその逆
ActionScriptはJavaScriptオブジェクトへの参照を保持でき、その逆も可能
従来のExternalInterfaceによるActionScriptとJavaScriptの通信よりもシームレス

表示するHTMLについて

表示するHTMLは、ネットワーク上にあるもの、URLRequestで呼び出したもの、ActionScriptストリング、Apolloアプリケーションパッケージ内のもの、そのいずれも可能です。ActionScriptストリングとして生成されたHTMLのレンダリングが可能ということは、クライアントサイドで動的にHTMLを生成・表示することが可能ということです。また、アプリケーションパッケージ内に含めたHTMLは、「adobe-app:/」をプロトコル接頭辞としてアクセスすることにより、Apolloアプリケーションに与えられたファイルアクセス権限に関わらず、常に参照することができる予定です。

HTMLとFlashを自由に合成

Flash画面中にHTMLを含める、あるいは逆にHTML画面中にFlashを含めることが可能で、オブジェクトモデル、セキュリティモデル、イベントモデルも統合されたものになります。

HTML+JavaScriptのみでApolloアプリケーションを開発

JavaScriptから、すべてのApollo APIにアクセスすることができます。ブラウザとの違いは、ウィンドウクローム（タイトルバーや枠）の見た目も完全にコントロールできる、ということです。

デモ：SpryGallery
SpryフレームワークのデモページがそのままApolloアプリケーションとして動作している。Webサイトに展開されたHTMLアプリケーションそのままをApollo化したもので、JavaScript、HTML、CSS以外は一切使っていない。

HTMLエンジンについて

Apolloは、HTMLエンジンにWebCore、JavaScriptエンジンにJavaScriptCoreを採用。どちらもWebKitオープンソースプロジェクトに含まれるもので、Apple社のSafariブラウザと同じソースコードを利用しています。
このエンジンを採用した理由は：

モダンなHTMLエンジンとしては比較的小さなソースコード
モバイル機器にも搭載しやすい
（Nokia S60プラットフォームに移植されている）

ただし、/Library/Frameworks/WebKit.frameworkを使っているのではなく、Adobeが独自にコンパイルをしています。理由は、特定のバージョンのWebKitを使うことで、開発者がターゲットとするHTMLエンジンを固定し、開発やQAを行いやすくするためです。また、ApolloのHTMLレンダリングエンジンがまた別のテスト対象ブラウザになってしまわないよう、なるべくWebKitのバージョンアップに沿った開発を行っていく予定です。さらに、Adobe自身、WebKitプロジェクトにコードを提供していく予定です。

HTMLプラグインについて

サポートするのはSWFとPDFのみ。他のプラグインをサポートする予定はありません。これは、すべてのプラットフォームとデバイスにおいて同じエクスペリエンスを提供するためで、他のプラグインの多くがマルチプラットフォームをサポートしていないのもその大きな理由のひとつです。PDFの場合、Adobe AcrobatあるいはReaderがマシンにインストール済みであれば、ApolloのHTMLエンジンはReader Pluginを使ってPDFを表示します。SWFの場合は、Apolloに組み込まれたFlash Playerを使って表示されます。いっぽうで、開発チームでは、システムにインストール済みのFlash Playerプラグインを使うオプションを追加することを検討しています。

Apollo API概要

「HTMLControl」は新しいActionScriptクラスで、Spriteのサブクラスとなります。また、HTMLControlのデフォルトの振舞いは、IFRAMEを使ってFlashをHTMLページに追加するのと同様となります。
実際のコードは次のとおり：

var html:HTMLControl=new flash.html.HTMLControl();
html.width=100;
html.height=100;
addChild(html);
html.loadFromURLRequest(new flash.net.URLREquest("http://www.adobe.com"))

HTMLControlに格納されたHTMLのwindowオブジェクトには、HTMLControlのプロパティとしてアクセスします。さらに、HTMLControlを継承することで、以下のタイミングでActionScript処理を行うことができます：

リンクがクリックされたとき
Window.openが呼び出されたとき
フォームが送信されたとき
などなど…

HTML Apolloアプリケーション（HTMLがルートとなる場合）

HTMLは、Apolloアプリケーションウィンドウ内に表示されますが、ブラウザクローム（ツールバー、ステータスバー、ロケーションバーなど）は表示されません。HTMLコンテンツがウィンドウサイズに収まりきらない場合は、スクロールバーが表示されます。HTML表示画面以外のアプリケーションUIはすべてHTMLかFlashで作成し、表示する必要があります。JavaScript APIは、通常ブラウザ内で動作するのと同じように動作します。

JavaScriptからは、FlashまたはApolloのAPIすべてを利用することができます。例えば、JavaScriptからApolloのAPIを操作してローカルファイルシステムにアクセスすることができます。また、FlashのディスプレイリストをJavaScriptから直接操作することもできます。しかし、flash.display.DisplayObjectをDIVオブジェクトの子にすることはできません。開発チームでは、まだFlash/Apollo APIがJavaScriptオブジェクトモデルからどのようにアクセスされるべきか（window.adobe.flash.net.URLStreamなのか？）、検討している段階です。

デモ：Maptacular
Google MapsがHTMLとして開きます。カーソルをウィンドウ左端に持っていくと、その手前に、背景が半透明（背後のマップが透けて見える）なFlashのパネルが出現します。コンタクトリストです。表示されているツリーコントロールから人の名前をドラッグし、マップ上にドロップすると、すぐにその人物の住所が中央に表示されるよう、マップがスクロールします。マーカーをクリックするとFlashで作成された、背景が半透明なウィンドウが出現し、詳細を表示します。

まとめ

このセッションでぜひ憶えて帰っていただきたい、Apolloの重要な点は2つです：

HTMLとFlashを融合して扱えるレンダリングパイプラインを利用できる
JavaScriptとActionScriptのオブジェクトモデルはシームレスにブリッジされる

最後に、Apolloに関する最新の情報がWebサイトに掲載されていることを告知し、セッションは終了しました。

「Adobe Labs（英語）」
http://www.adobe.com/go/apollo/

Adobe MAX 2006 フラッシュレポート

Leveraging HTML/JavaScript and AJAX in Apollo Applications Christopher A. Brichford Sr. Computer Scientist, Adobe Systems