第18回 Flash OOP 勉強会

2005.07.08　渡邉達朗

7/7（木）に開催された第18回 Flash OOP 勉強会に参加してきた。

http://www.flashoop.jp/

昨日の勉強会は始まって以来の大盛況だったようで、立ち見が出るほどの混雑ぶりだった。以下は簡単なレポート。

< 2005.7.9 追記 >
fladdict.netにAjaxとFlashの連携がアップされていた。スライド、紹介サイト、追記等が載っていて参考になる。

◆FlashとAjaxの連携
講演：fladdict.net | 深津氏
http://www.fladdict.net/blog-jp/

○Ajaxとは何か
Ajax とは “Asynchronous JavaScript + XML” の略称であり、以下の技術の組み合わせである。
・XHTML と CSS を用いた、Web 標準に基づくプレゼンテーション
・Document Object Model によるダイナミックな表示と相互作用
・XML と XSLT による、データの変換や操作
・XMLHttpRequest による、データの非同期的な取得
・それらを JavaScript によって結びつける
詳細な解説はこちら。
面白い解説はこちら。
以下がAjaxが実際に使用されているサイト。
・Google Suggest
・Google Maps
言わずもがなの代表的Ajaxアプリケーション。気持ちのいいインターフェイスを実現している。
・Amazon最速検索 β以前
単語入れて検索。続きがある場合は、続けてエンターを押すと次の10件を読み込むというシンプルなインターフェイスながら、驚異的な速度でAmazonにある書籍を検索して表示してくれる。サーバーサイド処理が一切ないので、ローカルに保存しても動くのにちょっと感動。
・Amazon.com Diamond Search
形・値段・カラット・カット・色・透明度を絞り込むと、操作するそばからヒット数表示が変わる。Ajaxで実現されるこのDiamond Searchは、バーの動きもスムーズでインタラクティブ性バツグン。
・del.icio.us direc.tor
Ajaxによるdel.icio.usのタグ絞込み検索アプリ。見ているページからブックマークレットで起動して使用する。del.icio.usのアカウントが無い人はデモで動作を確認可能。

○Flashとの違いは何か、両者の比較
Ajaxでは音を出したり、高度なUIを提供することが非常に難しい。ソースもオープンなのでリバースエンジニアリングが容易い。クロスブラウザは不可能ではないが、非常な労力を要する。
逆にFlashはHTMLとの親和性が低く、ブラウザのインターフェイスに沿った動作も実現しにくい。ソースも隠蔽されている。クロスブラウザは簡単で強力な画面描画機能を有する。
両社は得手・不得手が丁度逆になる関係と言える。

○両者の連携とか、新しい可能性
そもそもAjaxにおけるJavaScriptは、HTML、CSS、ブラウザ、サーバーサイドデータといった各技術を相互接続する為の接着剤にすぎない。ならば、JavaであれFlashであれJavaScriptから制御することさえできれば、それはAjaxの構成要素と成りえると考えるのが自然だろう……と深津氏は語っていた。以下がそのサンプル。
・コンポーネント指向Ajaxのサンプル　カラーピッカー
FlashからHTMLの一部を書き換えます。
・MXNAのフィードリポート
Macromedia自ら作成したFlashとAjaxの混合ページ。
サンプルはまだ公開されていないが、MacOS XのDashboardのようなサンプルも作成されていた。Greasemonkey化してどんなページでも動くようにしたいとも語られていたが、ブラウザのセキュリティに阻まれて実現は難しそうだった。
ちなみに、FlashとJavaScriptのやりとりには以下の方法が考えられる。
・LiveConnect（ブラウザ互換性なし……）
・SWFリロード（FlashVarsを併用してSWFを変化させる）
・SWFリロード＋LocalConnection（LocalConnectionはSWF同士が通信できる機能。ダミーのSWFをリロードすることで、本命のSWFをリロードせずに変化させる）
以下は開発用の資料。
・AJAXSLT
GoogleがJavaScriptでXSLTとXPATHを実装するAJAXSLTをオープンソースで提供している。
・JavaScript Integration Kit
Macromediaが作成したFlash/JavaScript相互通信フレームワークとライブラリ。クロスブラウザが簡単に実現できる。