EclipseでJava+Dartのプログラム開発を楽しむ

Dartwatch: Integrating Dart into Eclipse (and your Java Eclipse project)」にDartプログラムをEclipseで開発して、TomcatのWebアプリのスタティックコンテンツとして提供する方法が紹介されています。

手順は次の通り。

  1. Eclipseをダウンロード
  2. Dart Editorをインストール
  3. unzipしたDartiumをEclipseへインストール
  4. Dartプロジェクトの新規作成
  5. Mavenプロジェクトへ変換
  6. faceted form へプロジェクト変換
  7. Java の Dynamic Web Module facets を追加
  8. ローカルTomcatサーバの追加と、それをプロジェクトへ追加
  9. 配備まわりの設定
  10. Tomcatの起動
  11. WebブラウザによるDart + Java によるWebサイトの表示

Eclipseをダウンロード
まず、 http://www.eclipse.org/downloads/ へアクセスして、Eclipse IDE for Java EE Developers をダウンロードします。

ダウンロードしたアーカイブファイルを展開したらEclipseを実行します。workspaceは、ここでは$HOME/workspace/eclipse を指定したとします。また、Eclipseは $HOME/applications/eclipse へ展開したとします。

Dart Editorをインストール
Eclipseのメニューで Help – Install New Software を指定したら、Dart Editor の Eclipse update URLである http://www.dartlang.org/eclipse/update を指定し、Dart Editor とその下にある項目を選び、インストールします。

unzipしたDartiumをEclipseへインストール
次に、Dartiumをhttp://www.dartlang.org/dartium/からダウンロードします。ダウンロードしたファイルを展開したら、$HOME/applications/eclipse/chromium という名前でEclipseをインストールしたディレクトリへ置きます。これで、DartEditorプラグインからDartiumを起動することができるようになります。(64bit版ではなく32bit版を手に入れたい場合は、DartEditorをダウンロードして、そこに含まれるDartiumを持ってくるのが良さそうだったので、http://www.dartlang.org/docs/editor/ からdarteditor-linux-32.zipをダウンロードして、そこに含まれるchuromiumを使うことにしました。)

Dartプロジェクトの新規作成
次に、Eclipseのメニューで File – New – Other… を指定して、new project ウィザードを起動し、Dart – Dart Project をクリックします。Dartプロジェクトが生成されたら、Eclipseのメニューで Run – Run As – Dartium launch を指定して、動作を確認します。ちなみに、Dart2js launchを指定するとJavaScriptが生成できます。

Mavenプロジェクトへ変換
次に、Mavenプロジェクトを扱えるようにm2eをインストール。Eclipseのメニューで Help – Install New Software を指定したら、http://download.eclipse.org/technology/m2e/releases を指定します。Maven Integration for Eclipse をチェックして、インストールします。

インストールしてEclipseを再起動したら、プロジェクトをマウスで右クリックして Configure – Convert to Maven Project を指定します。このとき、packaging を jar から war へ変更してください。Finishをクリックします。すると、pom.xmlなどが生成されます。

faceted form へプロジェクト変換, Java の Dynamic Web Module facets を追加
次に、プロジェクトをマウスで右クリックして Configure – Convert to Faceted Form を指定します。表示される画面で “Dynamic Web Model” の “2.5” を使うように指定します。「Further configuration available…」という文字列が下の方に表示されるので、これをクリックします。表示される画面で、Content directory を「/src/main/webapp」と指定し直してからOKをクリックすると、Project Facetの画面に戻ります。それから、Project Facet の画面で OK をクリックします。

dartのプログラムをsrcへ移動
次に、dart_sample/web を dart_sample/src/main/dart という名前に変更します。

ローカルTomcatサーバの追加とdart_sampleをTomcatへ追加
次に、Apache Tomcat を追加します。Apache Tomcat – Apache Tomcat 6 Downloads から、apache-tomcat-6.0.36.tar.gz をダウンロードして、$HOME/applications/apache-tomcat-6.0.36 に展開しました。これを Eclipse の Server へ追加します。

Eclipseのメニューで File – New – Others – Servers – Server をクリックします。New server wizard…が表示されるので、一覧から Apache Tomcat v6.0 を選び、Next をクリックします。Tomcatをインストールしたディレクトリのパスを installation directory path へ指定して、Next をクリックします。

dart_sampleが左のavailable側にあるので、選択してaddをクリックし、configured側へ移動します。Finish をクリックすると、TomcatのWebアプリに追加されます。

Deployment Assenblyの追加
次に、プロジェクトをマウスで右クリックしてPropertiesを指定します。Deployment Assembly の画面を開き、Add で画面を開き、Folderを選択して Next をクリックし、src/main/dart を選んで Finish をクリックします。これで、Deployment Assembly の画面に src/main/dart が追加されます。src/main/dart の Deploy Path が / となっているので、これをダブルクリックして編集できるようにして、/dart へ変更します。変更できたら、OKをクリックします。

起動時の初期画面作成
dart_sample/src/main/webapp/index.html を作成します。下記のような簡単な内容でよいでしょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dart_sample</title>
</head>
<body>
dart_sample
</body>
</html>

Tomcatの起動
動作確認で Dartium が必要なので、dart_sample.dart をアクティブにした状態で Eclipseのメニューで Run – Run As – Dartium launch を指定して、Dartium で実行しておきます。

次に、Eclipse のメニューで、Window – show view – other として表示される画面で、Server -Servers をクリックして、Server画面を表示します。そこに登録済みの Apache Tomcat が表示されているので、これを Start します。

DartiumによるDart + Java によるWebサイトの表示
Tomcatが起動したら、Dartiumで、http://localhost:8080/dart_sample/ へアクセスすると、dart_sample/src/main/webapp/index.html が表示されます。また、http://localhost:8080/dart_sample/dart/dart_sample.html へアクセスすると、dartプログラムを実行することができます。

これで、JavaとDartを使ったWebアプリを開発できますね!

同じタグの記事: DartEditor
同じタグの記事: dartlang
同じタグの記事: Eclipse
同じタグの記事: Maven
同じタグの記事: Tomcat
同じカテゴリの記事: Program