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 アプリケーションを作成します。

Tim McIntire (timmcintire.net), Consultant, Uniserve Communications Corporation

Photo of Tim McIntireTim 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 を訪問してください。



2006年 11月 29日

この記事は、私が 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 を使い始めるためには、以下の手順に従います。

  1. 最新バージョンの ATF を Eclipse.org からダウンロードします。この記事は、V0.1 リリース (0.1-20060912) を基にしているので、下記の必要なコンポーネントをすべてダウンロードしてインストールしてから ATF のインストールを行います。
  2. 現在の V0.1 リリースに必要な JRE (Java Runtime Environment) V1.4.2 をダウンロードします。Sun Microsystems のものでも IBM® のものでも構いません。
  3. ローカル Web サーバーとして、また XULRunner として使用するための、Apache Tomcat V5 をダウンロードします。これによって Eclipse が Mozilla とインターフェースしやすくなります (「参考文献」を参照してください)。
  4. XULRunner と JRE をインストールし、次に Tomcat V5 をインストールします。

    注意: Tomcat V5 には JRE V5 が推奨です。そのため、Tomcat を特別な手順でインストールしなくてすむように、JRE V5 もダウンロードした方が良いでしょう。

  5. まだシステムに 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 アプリケーションを作成します。新しいプロジェクトを開き、下記を行います。

  1. Eclipse を開き、File > New > Project をクリックします。
  2. Web > Static Web Project をクリックし、次に Next をクリックします。
    図 1. プロジェクト・タイプを選択する
    Select the project type
  3. Project name フィールドに HelloWorld と入力し、次に、Target Runtime の下にある New をクリックします。この名前が、このプロジェクト全体に対する名前になります。ここには、皆さんが選んだ名前を持つサブフォルダーと Web アプリケーションを含めることができます。
    図 2. プロジェクトに名前を付ける
    Name your project
  4. HTTP > HTTP Server をクリックし、次に Next をクリックします。このステップは Eclipse に対して、ターゲット・ランタイムの宛先にローカル HTTP サーバーを使うように指定をします。インストール・ステップの中で Tomcat V5 (または、サポートされている他の HTTP サーバー) をインストールする必要があったのは、このためです。これによって、アプリケーションの動作を、Eclipse の中でローカルに分析できるようになります。
    図 3. ローカル HTTP サーバーへのリンクを設定する
    Set up the link to the local HTTP server
  5. ローカル HTTP サーバーのポートを正しく入力し (おそらく 80 または 8080 でしょう)、次に、アプリケーションを使いたいディレクトリーの名前を入力します。
  6. Publish Projects to this Server を選択し、次に Browse をクリックしてローカルの Web ディレクトリーを選択します。私のシステムの例では、このパスは C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ROOT\helloworld です。おそらく皆さんは helloworld ディレクトリーを作成する必要がありますが、その親ディレクトリーは既に存在しています。
  7. Finish をクリックします。
    図 4. ローカル HTTP ディレクトリーを設定する
    Set up the local HTTP directory
  8. Next をクリックし、次に ATF > Dojo をクリックします。
  9. Rico チェックボックスをクリアし、次に Finish をクリックします。これによって、Dojo Toolkit を使って Ajax アプリケーションを開発するために必要なすべての要件がプロジェクトに設定されます。
    図 5. Dojo Toolkit を有効にする
    Enable the Dojo Toolkit

ここまでのステップで、Eclipse の中に Dojo のスケルトン・プロジェクトが作成されます。今度は、これから取り掛かるアプリケーションを作成しなければなりません。

アプリケーションを作成する

Navigator の中で HelloWorld を展開します。次に、WebContent を右クリックしてから New > Other をクリックします。

図 6. 新しい Web コンテンツを作成する
Create new Web content

今度は Dojo を展開し、Dojo Application > Next をクリックします。上記のステップではアプリケーションのためのフレームワークを設定しました。このステップでは、プロジェクト内の 1 つの Dojo アプリケーションの編集プロセスやビルド・プロセスで実際に使用するファイルを作成します。1 つのプロジェクトの中には、多くのアプリケーションを作成することができます。

図 7. Dojo アプリケーションを作成する
Create a Dojo application

Name フィールドに helloworldapp と入力し、次に Finish をクリックします。各アプリケーションの名前は、そのファイル・セットが何を表しているのかを区別できるように、少なくともプロジェクト名とは少し異なっている必要があります。

図 8. Dojo アプリケーションに名前を付ける
Name your Dojo application

このステップで、Eclipse の中央フレームに helloworldapp.html がロードされます。このフレームの中で helloworldapp.html を編集し、単なるスケルトン・アプリケーションから実際に動作する HelloWorld アプリケーションへと変更します。

図 9. 編集ペインを検証する
Examine the edit pane

実際に動作する HelloWorld アプリケーションを生成する

まず、タイトルを Hello World に変更します。これは、通常の HTML ファイルで、皆さんが慣れ親しんでいるものと同じ構文、そして同じ HTML をサポートしていますが、また Dojo と Dojo ウィジェットを使う JavaScript コードも含んでいます。基本的な HTML 要素に関しては、他の任意の Web ページと同じように扱うことができます。

図 10. HTML を、関連のプロジェクト名を含むように変更する
Alter the HTML to include a relevant project name

今度は、HelloWorld アプリケーションのためのコードを追加します。これらのコード・スニペットは、以前の記事の HelloWorld の例でも使われましたが、そのときはアプリケーションのためのフレームワークが Eclipse で設定されていました。このスクリプトを、helloworldapp.html コードの head セクションの最後に追加します。このコード・スニペットを使ってボタンを作成します。ユーザーがこのボタンを押すと、デバッグ・ウィンドウに「Hello World!」が出力されます。

図 11. Button ウィジェットをコードに追加する
Add a Button widget to your code

最後に、body セクションの最上部に、実際にボタンをユーザーの画面に置くためのコードを追加します。Dojo Button ウィジェットは既にロードされているので、このウィジェットを HTML の本体の中で参照することができます。このアプリケーションはユーザーとの対話動作なしに単純に文を出力する典型的な HelloWorld アプリケーションよりも少し高度ですが、デバッグ用にメッセージが出力されることに注意してください。

図 12. コンテンツ・エリアに実際のボタンを追加する
Add the actual button to your content area

アプリケーションを保存してコンパイルし、そして実行する

いよいよ、作成した HelloWorld アプリケーションを保存してコンパイルし、そして実行する時が来ました。

  1. File > Save をクリックします。
  2. Eclipse のNavigator フレームの中で HelloWorld と WebContent、そして helloworldapp を展開します。
  3. helloworldapp.html を右クリックし、次に Run As > Run in Mozilla をクリックします。
  4. Finish をクリックすると、統合された Mozilla ブラウザーが表示され、HelloWorld アプリケーションが実行されます。
    図 13. Dojo アプリケーションの出力を検証する
    Examine the output of your Dojo application

Press Me をクリックすると、デバッグ・コンソールに「Hello World!」が出力されるはずです。これがきちんと出力され、他のメッセージが何も出力されなければ、ATF インストールとプロジェクト・コードは適切に動作していると自信を持って言えます。

図 14. ボタンを試す
Try the button

アプリケーションの機能を拡張する

実際に動作する基本的なアプリケーションはできたので、ATF に含まれているコード・スニペットを活用してアプリケーションの機能を拡張することを考えてみましょう。まだ Eclipse のビューに Snippets ペインが表示されていなかったら、Window > Show View > Other をクリックします。General を展開して Snippets をクリックし、次に OK をクリックします。そうすると Eclipse ウィンドウの右側に Snippets ペインが現れるはずです。

図 15. 事前作成されたコード・スニペット
Premade code snippets

Snippets ペインの中で Dojo を展開し、次に dojo.require を、helloworldapp.html 編集ペインの中の JavaScript ブロックにドラッグします。パッケージ名を尋ねるダイアログが表示されます。この例では、dojo.widget.Tree と入力します。これで Tree ウィジェットをロードする行が追加され、このウィジェットをコードのコンテンツ・エリアで使えるようになります。

図 16. Tree ウィジェットをロードする
Load the Tree widget

helloworldapp.html の本体部分まで下にスクロールし、Tree をSnippet ペインから編集ペインにドラッグします。Eclipse が、サンプル・データを含めるかどうかを尋ねます。サンプル・データを囲む、Tree コードのみを追加するので、このチェックボックスをクリアします。次に、Tree タグの中で、Tree Node スニペットを Snippet ペインから編集ペインにドラッグし、そしてこのノード に Hello という名前を付けます。そして、Hello ノードの中に、さらに 3 つの Tree ノードを追加します。

図 17. HelloWorld データで Tree ノードを作成する
Create Tree nodes with HelloWorld data

ここでまた、作成した 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 など他のサポート・ツールキットの詳細についても説明する予定です。

参考文献

学ぶために

  • 2006 年 2 月の IBM プレス・リリース、「Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community」は、Open Ajax イニシアティブについて詳細を説明しています。
  • Eclipse.org を訪れ、Eclipse IDE の詳細を学んでください。
  • Ajax で Dojo プロジェクトを作成する方法を説明した Flash ムービー、Dojo Project Cycle Demo を見てください。このムービーで説明されている情報を、この記事の中のステップに活用することができます。
  • Dojo ついて詳しく知るために、Dojo Toolkit documentation を調べてください。
  • Eclipse プラットフォームへの優れた入門記事として、「Eclipse Platform入門」を読んでください。
  • IBM developerWorks の Eclipse project resources を訪れ、Eclipse について詳しく学んでください。
  • developerWorks technical events and Webcasts で最新情報を入手してください。
  • IBM オープンソース開発者にとって関心のある、世界中で今後開催される会議や業界展示会、ウェブキャスト、その他のイベントについて調べてみてください。
  • developerWorks の Open source ゾーンをご覧ください。オープンソース技術を使った開発や、IBM 製品でオープンソース技術を使用するためのハウ・ツー情報やツール、プロジェクトの更新情報など、豊富な情報が用意されています。
  • developerWorks podcasts では、ソフトウェア開発者のための興味深いインタビューや議論を聞くことができます。

製品や技術を入手するために

  • ATF プロジェクトについて調べてください。
  • また、Eclipse WTP Project についても調べてください。
  • ATF をインストールするために必要な基本コンポーネント、Eclipse Callisto bundle をダウンロードしてください
  • 最新版の ATF を Eclipse からダウンロードしてください。
  • ATF を使うために必要な JRE をダウンロードしてください。
  • ATF に統合できる互換 Web サーバー、Apache Tomcat V5をダウンロードしてください。
  • IBM alphaWorks に用意された、最新の Eclipse technology downloads を見てください。
  • 皆さんの次期オープンソース開発プロジェクトを IBM trial software を使って革新してください。ダウンロード、あるいは DVD で入手することができます。

議論するために

  • Eclipse newsgroups には、Eclipse を利用し、拡張することに関心を持つ人達のために、さまざまなリソースが用意されています。
  • developerWorks blogs から developerWorks のコミュニティーに加わってください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=232911
ArticleTitle=Eclipse のための Ajax Toolkit Framework を知る
publish-date=11292006