エンタープライズ：特集 2003/07/01 15:46:00 更新

JAVA Developer 2003年8月号より転載
FlashとTomcatで実現する使いたくなるWebアプリ (1/10)

HTMLベースのWebアプリケーションでは、ブラウザ環境の違いによる問題を避けることができません。その問題を一挙に解決できるのが、Flashとサーブレットを連携させたWebアプリケーションです。ここでは、Flashとサーバーサイドとのコミュニケーション方法、Flash側でのバリデーションなどを、実際にアプリケーションを作りながら紹介していきます。
静から動、そしてインタラクティブへ

　インターネット／イントラネットシステムにおけるクライアントユーザーインタフェースは、ブラウザが提供します。「文字」を表示することを目的として生まれたHTMLとHTTPでは、表示される内容が「たとえサーバー上で」動的に生成されたページでさえ、表示されたときには「静」の状態です。

　こうした「静」のページに「動」を与える技術があります。最近見かけるデザインのクールなサイトでは、単なるアニメーションではなく、ユーザーの操作に反応して絵を動かしたり、音を出したり、メニューを表示したりと多彩な使われ方をしているMacromedia Flash（以下、Flash）が有名です。

　もともとFlashは、アニメーションを作成・再生する技術として登場しました。「ActionScript」というスクリプト言語を持っていて、システムやユーザー操作に対するイベント処理を、開発者が記述することができ、よりインタラクティブなインターネットアニメーションを実現します。また最新のFlash MXでは、ボタンやチェックボックス、リストボックスなど、一般的なGUI構築で必要となるユーザーインタフェース部品が標準で提供されるようになり、インターネットのGUI構築ツールとして利用できるようになりました。

　Webアプリケーションの開発では、さまざまなバージョンのブラウザに対してテストを行うため、テスト負荷が高くなってしまう傾向があります。Flashを利用した場合、Flash Playerの普及率が高いため、1つのバージョンにターゲットを絞っても、ほとんどのユーザーが利用できるのです。これは、大きな魅力でしょう。

　今回は、クライアント環境としてFlashを適用したWebアプリケーションの構築について紹介します。

●Flashの基本

　前述のとおり、Flashはアニメーションツールであるため、絵を動かすだけなら開発者がスクリプトを作る必要はありません。単純なアニメーションなら、最初の絵（フレーム）と最後の絵（フレーム）を用意して、それを「モーショントゥイーン」というおまじないで途中の動きを補間してやると、自然な動きのアニメーションができてしまいます。

　また、マウスが通過、ボタンが押されたなどのイベントに反応して、絵が変わるものも、「ボタン」というシンボルを作って、「アップ」や「オーバー」といったフレームに絵をそれぞれ描いてやれば、イベントに応じて絵が変わってくれます。

　Flashのコンテンツはムービークリップというオブジェクトの集合です。ムービークリップは一連のフレーム（動画のコマ）とレイヤーで構成されるアニメーションです。その中には複数のムービークリップが存在することができます（ムービーの入れ子）。

　Flashコンテンツを作成するには、Macromedia Flash MXが必要です。トライアル版は、Macromediaのサイトからダウンロード可能ですから、ちょっと試してみる場合には利用するとよいでしょう。

●ActionScriptという言語

　Flashにおけるプログラミングは、ActionScriptを使用します。ActionScriptは、ECMA-262(http://www.ecma-international.org/)に準拠したスクリプト言語です。文法は、JavaやCと似ています。解説を始める前からいうのもなんですが、このActionScript、JavaやCをやってきた人間から見ると、若干違和感を覚えるところがあります。

（１）存在しないメソッドを呼び出してもエラーにならない

（２）通信は同期的に行われない

　（１）は結構はまります。ほとんどの開発者は、スクリプト中で呼び出しているメソッドがなければ、一般的にはエラーになることを期待すると思います。ところがFlashは、何事もなかったかのようにするりとすり抜けてくれます。そのため、メソッドの呼び出しでスペルミスしていることになかなか気付かないことがあります。

　（２）は、サーバーサイドとFlashを連携させるWebアプリケーションで重要なポイントです。このことを知らないと、「ちゃんと通信できているのに、取得した値を参照できないのはなぜなんだろ？」ということになります。

　たとえば、リスト1はXMLオブジェクトを使って、「sample.xml」というXMLデータを読み込みますが、analyzeXMLを呼び出している行では、変数のdataにXMLデータは読み込まれていません。ではいつ読み込まれるかというと、そのloadを呼び出しているメソッドから抜けたあと、つまりloadxml1メソッドを終了してはじめて読み込みが行われます。

　では、どうやって読み込まれたデータを処理すればよいのだろうかというと、読み込みを担当するオブジェクトにコールバック関数を設定し、実際の処理はそのコールバック関数として定義する別のメソッド内で行うことになります。この手法については、あとで詳しく紹介します。

リスト１ sample.xmlを読み込む 
function loadxml1()
{
    data = new XML();
    data.load ("sample.xml");
    result = analyzeXML(data);
}

　ちなみにActionScriptにおいては、通信に限らず、データの読み込みはすべて非同期で行われます。

　　　　　 | 1 2 3 4 5 6 7 8 9 10 | 次のページ

[佐藤 毅，JAVA Developer]

Copyright © ITmedia, Inc. All Rights Reserved.