レベル: 中級 Tim McIntire (timmcintire.net), Consultant, Uniserve Communications Corporation
2006年 11月 29日
ATF (Ajax Toolkit Framework) は新しい Open Ajax イニシアチブの中核であり、強力な Web プログラミング手法を、Eclipse Foundation によって利用しやすくすることを目的としています。ATF は、Dojo や Zimbra、Rico など、さまざまなオープンソース Ajax ツールキットのための Ajax (Asynchronous JavaScript and XML) 開発環境を追加することによって、WTP (Eclipse Web Tools Platform) を拡張しています。この記事では、HelloWorld の例をとおして ATF のインストールと構成方法を説明し、また Eclipse と Dojo を使って、基本的な Web アプリケーションを作成します。
この記事は、私が Open Ajax イニシアチブと今後の ATFについて紹介した、2006 年 5 月の記事「Two tools bring Ajax to Eclipse's Ajax Toolkit Framework」へのフォローアップです (「参考文献」を参照してください)。その後このプロジェクトは、alphaWorks バージョンについての発表から、V0.1 リリースによるアクティブな Eclipse プロジェクトへと移行しました。
ATF は、Web 開発コミュニティーで広く使われている Eclipse WTP の上に構築されています。WTP は、J2EE (Java™ 2 Platform, Enterprise Edition) Web アプリケーションを開発するためのツールを追加することによって、Eclipse を拡張しています。
ATF は、Dojo や Zimbra、Rico など、さまざまなオープンソース Ajax ツールキットのための Ajax 開発環境を追加することによって、WTP を拡張しています。また JavaScript 編集機能が強化されており、編集時の構文チェックや、DOM (Document Object Model) Inspector とCSS (Cascading Style Sheets) Inspector を備え、また Mozilla ブラウザーが統合されています。開発者は ATF を利用することによって、単に Eclipse のみを必要とするオープンソース・ツールキットに対して、エンタープライズ・クラスの IDE (integrated development environment: 統合開発環境) として Eclipse を使えるようになります。ATF の背景となっている Open Ajax イニシアティブの目標は、急速に人気が高まりながら新しい開発者にとっては不明瞭な概念のままである Ajax を、利用しやすいものとすることです。
この記事では、ATF のインストール手順を説明し、そして Eclipse と ATF、そして Dojo を使ったサンプル Ajax アプリケーションを作成します。「Two tools bring Ajax to Eclipse's Ajax Toolkit Framework」では Dojo と Zimbra を紹介し、また ATF を備えた Eclipse に Dojo を統合する前の「Hello World!」の例を紹介しています。この記事では V0.1 リリースを利用して前回と似たプロジェクト (そしてさらなる機能) を簡単に作成します。
ATF をインストールする
まず、Microsoft® Windows® でのインストール・プロセスを簡単に説明します (詳細とダウンロードについては「参考文献」を参照してください)。まだ Eclipse を使っていない人は、Core Eclipse V3.2.1 と Eclipse WTP を含んだ J2EE プロジェクト・バンドルをダウンロードしてください (ATF を使うためには WTP が必要です)。まだ Eclipse をインストールしたことも、使ったこともないのであれば、ATF で基本的に要求されるものを入手するためには、この方法が最も簡単です。
ATF を使い始めるためには、以下の手順に従います。
- 最新バージョンの ATF を Eclipse.org からダウンロードします。この記事は、V0.1 リリース (0.1-20060912) を基にしているので、下記の必要なコンポーネントをすべてダウンロードしてインストールしてから ATF のインストールを行います。
- 現在の V0.1 リリースに必要な JRE (Java Runtime Environment) V1.4.2 をダウンロードします。Sun Microsystems のものでも IBM® のものでも構いません。
- ローカル Web サーバーとして、また XULRunner として使用するための、Apache Tomcat V5 をダウンロードします。これによって Eclipse が Mozilla とインターフェースしやすくなります (「参考文献」を参照してください)。
- XULRunner と JRE をインストールし、次に Tomcat V5 をインストールします。
注意: Tomcat V5 には JRE V5 が推奨です。そのため、Tomcat を特別な手順でインストールしなくてすむように、JRE V5 もダウンロードした方が良いでしょう。
- まだシステムに Eclipse がインストールされていなければ、Eclipse をインストールします。
Eclipse をインストールすると、ATF をインストールする準備ができたことになります。Eclipse のインストールの詳細については、「参考文献」を参照してください。
ATF を Eclipse にインストールするには、Eclipse を開き、Help > Software Updates > Find and Install > Search for New Features to Install > New Archived Site をクリックします。次に、ATF を含む zip ファイルを選択します。そうするといくつかのインストール画面が現れるので、必ずすべての ATF コンポーネントを選択します。ATF のダウンロード情報を、よく注意して読みます。一部の ATF リリース (V0.1 も含め) には、追加ファイルのインストール方法を説明した部分の最後に、インストールに関する特別な注意が書かれています。
ATF で Dojo アプリケーションを構築する
これで、最初の Dojo アプリケーションを構築する準備が整いました。まず、新しいプロジェクトを作成するところから始めます。「参考文献」には、このプロセスの最初のステップを一通り説明したフラッシュ・ムービーへのリンクが含まれていますが、ここではその説明以上のことを行い、対話型の HelloWorld アプリケーションを作成します。新しいプロジェクトを開き、下記を行います。
- Eclipse を開き、File > New > Project をクリックします。
-
Web > Static Web Project をクリックし、次に Next をクリックします。
図 1. プロジェクト・タイプを選択する
-
Project name フィールドに HelloWorld と入力し、次に、Target Runtime の下にある New をクリックします。この名前が、このプロジェクト全体に対する名前になります。ここには、皆さんが選んだ名前を持つサブフォルダーと Web アプリケーションを含めることができます。
図 2. プロジェクトに名前を付ける
-
HTTP > HTTP Server をクリックし、次に Next をクリックします。このステップは Eclipse に対して、ターゲット・ランタイムの宛先にローカル HTTP サーバーを使うように指定をします。インストール・ステップの中で Tomcat V5 (または、サポートされている他の HTTP サーバー) をインストールする必要があったのは、このためです。これによって、アプリケーションの動作を、Eclipse の中でローカルに分析できるようになります。
図 3. ローカル HTTP サーバーへのリンクを設定する
- ローカル HTTP サーバーのポートを正しく入力し (おそらく 80 または 8080 でしょう)、次に、アプリケーションを使いたいディレクトリーの名前を入力します。
-
Publish Projects to this Server を選択し、次に Browse をクリックしてローカルの Web ディレクトリーを選択します。私のシステムの例では、このパスは C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ROOT\helloworld です。おそらく皆さんは helloworld ディレクトリーを作成する必要がありますが、その親ディレクトリーは既に存在しています。
-
Finish をクリックします。
図 4. ローカル HTTP ディレクトリーを設定する
-
Next をクリックし、次に ATF > Dojo をクリックします。
-
Rico チェックボックスをクリアし、次に Finish をクリックします。これによって、Dojo Toolkit を使って Ajax アプリケーションを開発するために必要なすべての要件がプロジェクトに設定されます。
図 5. Dojo Toolkit を有効にする
ここまでのステップで、Eclipse の中に Dojo のスケルトン・プロジェクトが作成されます。今度は、これから取り掛かるアプリケーションを作成しなければなりません。
アプリケーションを作成する
Navigator の中で HelloWorld を展開します。次に、WebContent を右クリックしてから New > Other をクリックします。
図 6. 新しい Web コンテンツを作成する
今度は Dojo を展開し、Dojo Application > Next をクリックします。上記のステップではアプリケーションのためのフレームワークを設定しました。このステップでは、プロジェクト内の 1 つの Dojo アプリケーションの編集プロセスやビルド・プロセスで実際に使用するファイルを作成します。1 つのプロジェクトの中には、多くのアプリケーションを作成することができます。
図 7. Dojo アプリケーションを作成する
Name フィールドに helloworldapp と入力し、次に Finish をクリックします。各アプリケーションの名前は、そのファイル・セットが何を表しているのかを区別できるように、少なくともプロジェクト名とは少し異なっている必要があります。
図 8. Dojo アプリケーションに名前を付ける
このステップで、Eclipse の中央フレームに helloworldapp.html がロードされます。このフレームの中で helloworldapp.html を編集し、単なるスケルトン・アプリケーションから実際に動作する HelloWorld アプリケーションへと変更します。
図 9. 編集ペインを検証する
実際に動作する HelloWorld アプリケーションを生成する
まず、タイトルを Hello World に変更します。これは、通常の HTML ファイルで、皆さんが慣れ親しんでいるものと同じ構文、そして同じ HTML をサポートしていますが、また Dojo と Dojo ウィジェットを使う JavaScript コードも含んでいます。基本的な HTML 要素に関しては、他の任意の Web ページと同じように扱うことができます。
図 10. HTML を、関連のプロジェクト名を含むように変更する
今度は、HelloWorld アプリケーションのためのコードを追加します。これらのコード・スニペットは、以前の記事の HelloWorld の例でも使われましたが、そのときはアプリケーションのためのフレームワークが Eclipse で設定されていました。このスクリプトを、helloworldapp.html コードの head セクションの最後に追加します。このコード・スニペットを使ってボタンを作成します。ユーザーがこのボタンを押すと、デバッグ・ウィンドウに「Hello World!」が出力されます。
図 11. Button ウィジェットをコードに追加する
最後に、body セクションの最上部に、実際にボタンをユーザーの画面に置くためのコードを追加します。Dojo Button ウィジェットは既にロードされているので、このウィジェットを HTML の本体の中で参照することができます。このアプリケーションはユーザーとの対話動作なしに単純に文を出力する典型的な HelloWorld アプリケーションよりも少し高度ですが、デバッグ用にメッセージが出力されることに注意してください。
図 12. コンテンツ・エリアに実際のボタンを追加する
アプリケーションを保存してコンパイルし、そして実行する
いよいよ、作成した HelloWorld アプリケーションを保存してコンパイルし、そして実行する時が来ました。
-
File > Save をクリックします。
- Eclipse のNavigator フレームの中で HelloWorld と WebContent、そして helloworldapp を展開します。
-
helloworldapp.html を右クリックし、次に Run As > Run in Mozilla をクリックします。
-
Finish をクリックすると、統合された Mozilla ブラウザーが表示され、HelloWorld アプリケーションが実行されます。
図 13. Dojo アプリケーションの出力を検証する
Press Me をクリックすると、デバッグ・コンソールに「Hello World!」が出力されるはずです。これがきちんと出力され、他のメッセージが何も出力されなければ、ATF インストールとプロジェクト・コードは適切に動作していると自信を持って言えます。
図 14. ボタンを試す
アプリケーションの機能を拡張する
実際に動作する基本的なアプリケーションはできたので、ATF に含まれているコード・スニペットを活用してアプリケーションの機能を拡張することを考えてみましょう。まだ Eclipse のビューに Snippets ペインが表示されていなかったら、Window > Show View > Other をクリックします。General を展開して Snippets をクリックし、次に OK をクリックします。そうすると Eclipse ウィンドウの右側に Snippets ペインが現れるはずです。
図 15. 事前作成されたコード・スニペット
Snippets ペインの中で Dojo を展開し、次に dojo.require を、helloworldapp.html 編集ペインの中の JavaScript ブロックにドラッグします。パッケージ名を尋ねるダイアログが表示されます。この例では、dojo.widget.Tree と入力します。これで Tree ウィジェットをロードする行が追加され、このウィジェットをコードのコンテンツ・エリアで使えるようになります。
図 16. Tree ウィジェットをロードする
helloworldapp.html の本体部分まで下にスクロールし、Tree をSnippet ペインから編集ペインにドラッグします。Eclipse が、サンプル・データを含めるかどうかを尋ねます。サンプル・データを囲む、Tree コードのみを追加するので、このチェックボックスをクリアします。次に、Tree タグの中で、Tree Node スニペットを Snippet ペインから編集ペインにドラッグし、そしてこのノード に Hello という名前を付けます。そして、Hello ノードの中に、さらに 3 つの Tree ノードを追加します。
図 17. HelloWorld データで Tree ノードを作成する
ここでまた、作成した HelloWorld アプリケーションを保存してコンパイルし、実行します。File > Save をクリックします。次に Eclipse の Navigator フレームの中で HelloWorld と WebContent、そして helloworldapp を展開します。helloworldapp.html を右クリックし、そして Run As > Run in Mozilla をクリックします。Finish をクリックすると、統合された Mozilla ブラウザーが表示され、HelloWorld アプリケーションが実行されます。Hello ノードをクリックすると、Hello ノードを展開したり閉じたりでき、それによって Hello ノードの子ノードを表示したり隠したりできるはずです。
まとめ
これで、Eclipse の ATF を使って Dojo プロジェクトのコンポーネントを作成するための方法を、基本的に理解できたはずです。さらに上級のユーザーになるためには、皆さんが Eclipse の中で使おうとする Ajax ツールキットについて、できるだけ詳しく知る必要があります。また、Eclipse ATF で使われている高度なフィーチャー (例えば DOM Inspector や CSS Inspector、JavaScript デバッガーなど) を試す必要もあります。Dojo を使って単純な HelloWorld アプリケーションを作成する作業は、Eclipse を使うことで大幅に単純化されます。そしてプロジェクトが複雑になればなるほど、完全機能の Web アプリケーションを構築できるという利点が生きてきます。今後の記事では、新しいリリースやフィーチャーに関する更新について解説し、また ATF のコンポーネントの詳細や、Zimbra や Rico など他のサポート・ツールキットの詳細についても説明する予定です。
参考文献 学ぶために
製品や技術を入手するために
議論するために
著者について  | 
| | Tim McIntire は、HPCC ソフトウェアやサポート、コンサルティングのマーケット・リーダー、Cluster Corp. のコンサルタントであり、設立者です。彼は IBM developerWorks と Apple Developer Connection に定期的に寄稿しています。Scripps Institution of Oceanography の Digital Image Analysis Lab で行われた、コンピューター・サイエンスに関する研究作業を指揮する中で彼が行った研究は、Concurrency and Computation や IEEE Transactions on Geoscience and Remote Sensing の他、さまざまな雑誌で公開されています。さらに詳しく知るために、TimMcIntire.net を訪問してください。 |
記事の評価
| 
