Eclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET あり)

VJet は，次の機能を持つ Eclpse のプラグインです．Eclipse で JavaScript のプログラムを実行してみます

• コードアシスト
• コード検索
• 構文チェックと意味チェック など

VJet の URL: https://projects.eclipse.org/projects/webtools.vjet

この Web ページで行うこと

• Web Development Tools, JSDT のインストール
• Eclipse で GWT Designer for the Google Plugin for Eclipse とthe Google Web Toolkit SDK のインストール
• Eclipse で VJET のインストール
• 静的 Web プロジェクトの新規作成
• (オプション) VJET パースペクティブに設定
• VJET の設定
• JavaScript ファイルの新規作成
• Web ブラウザでの表示
• JavaScript プログラムと実行結果例

VJET の要点

• Eclipse 4.2 : マーケットプレースを使う
• Eclipse 3 系列 : Eclipse でインストールするとき、名前 (Name) と ロケーション (Location) を設定する

  http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/
  

• Eclipseのプロジェクトを右クリックしてVJET を有効にする

前準備

JDK (Java Development Kit) のインストール

• Windows での OpenJDK のインストール: 別ページ »で説明している．
• Ubuntu での Open JDK のインストール: 別ページ »で説明している．

Eclipse のインストール

• Windows での Eclipseのインストール，日本語化，基本操作: 別ページ »で説明している．
• Ubuntu での Eclipseのインストール，日本語化，基本操作: 別ページ »で説明している．

Web Development Tools, JSDT のインストール

1. Eclipse を起動
   
2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウェアのインストール (Install New Software)」と操作
   
3. Work With のところを設定し、しばらく待つ

   ◆ Eclipse 4.2 (juno) での実行例

   
4. 「Web, XML, Java EE および OSGi エンタープライズ開発 (Web, XML, Java EE and OSGi Enterprise Development)」を展開
   
5. 必要なパッケージをチェックし、「次へ (Next)」をクリック
   • Eclipse Web 開発ツール (Eclipse WebDevelpment Tools)
   • JavaScript 開発ツール (JavaScript Development Tools)
   • Web ページ・エディター (Web Page Editor)
   • WST サーバー・アダプタ (WST Server Adapter)
   
6. インストールされるパッケージの確認

   確認の後、「次へ (Next)」をクリック

   
7. ライセンス条項の確認
   
8. インストールが始まる
   
9. Eclipse の再起動
   

GWT Designer for the Google Plugin for Eclipse とthe Google Web Toolkit SDK のインストール

【関連する外部ページ】https://developers.google.com/eclipse/docs/install-eclipse-4.2

1. Eclipse を起動
   
2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウェアのインストール (Install New Software)」と操作
   
3. Work With の右横の「追加 (Add)」をクリック
4. 名前 (Name) とロケーション (Location) の設定

   Eclipse 4.2 (juno) での設定例．「4.2」のところは Eclipse のバージョン番号に一致させること．

   http://dl.google.com/eclipse/plugin/4.2
   

   
5. GWT ツールをインストールしたいので、次の2つをチェックし、「次へ (Next)」をクリック
   • GWT Designer for GPE (GWT Designer for the Google Plugin for Eclipse)
   • Google Web ツールキット SDK (the Google Web Toolkit SDK)
     
   • インストールされるパッケージの確認

     確認の後、「次へ (Next)」をクリック

     
   • ライセンス条項の確認
     
   • インストールが始まる
     
   • インストールの途中で 「署名なしコンテンツを含むソフトウェアをインストールしている」という確認表示がでることがある.　 確認したら「OK」をクリックする.
     
   • インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動
     

VJET のインストール

Eclipse 4.2 系列

1. Eclipse を起動
2. インストールしたいので「ヘルプ (Help)」 → 「Eclipse マーケットプレース」と操作
   
3. Eclipse マーケットプレースのウインドウが開く
   
4. 「VJET」で検索
   
5. 検索結果について、確認の上、「インストール (install)」をクリック
   
6. インストールされるパッケージの確認

   確認の後、「次へ (Next)」をクリック

   
7. ライセンス条項の確認
   
8. インストールが始まる
   
9. インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動
   

Eclipse 3系列

1. Eclipse を起動
   
2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウェアのインストール (Install New Software)」と操作
   
3. Work With の右横の「追加 (Add)」をクリック
4. 名前 (Name) とロケーション (Location) の設定

   http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/
   

   
5. 「VJET」をチェックし、「次へ (Next)」をクリック
   
6. インストールされるパッケージの確認

   確認の後、「次へ (Next)」をクリック

   
7. ライセンス条項の確認
   
8. インストールが始まる
   
9. インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動
   

静的 Web プロジェクトの新規作成

1. （オプション）テキストファイルエンコーディングの確認
   
2. 新規の静的 Web プロジェクトを作成したいので「File (ファイル)」→「New (新規)」→「Project (プロジェクト)」と操作する．
   
3. Static Web Project (静的 Web プロジェクト) を選ぶ
   
4. プロジェクト名の設定

   静的 Web プロジェクト名は好きにつけて良いが，全角文字は避ける．分かりやすい名前が良い． ここでは，例として，次のように指定する．

   • プロジェクト名：hoge
   
5. オプションの設定

   既定のままでよい。「Finish (完了)」をクリック．

   
6. Web パースペクティブに関連付ける

   「はい」をクリック．

   
7. いま作成した 静的 Web プロジェクトが，プロジェクト・エクスプローラーウインドウに表示される
   
8. 試しに index.html を作成してみる
   1. いま作成した 静的 Web プロジェクトの 「WebContent」を右クリックし、 「New (新規)」→「その他」と操作する．
      
   2. 「HTML ファイル」を選ぶ
      
   3. ファイル名を index.html のように設定する
      
   4. テンプレートを選ぶ
      
   5. ファイルが作成される
      

(オプション) VJET パースペクティブに設定

1. 「ウインドウ (Window)」→ 「パースペクティブを開く (Open Perspective)」→ 「Other (その他)」と操作する
   
2. 「VJET JS」を選ぶ
   

VJET の設定

いま作成した静的 Web プロジェクトについて、次の手順で、VJET を有効にする

1. VJET を有効にする設定

   プロジェクト を右クリックし、 「VJET」→「Enable VJET Project Capabilities」と操作する．

   
2. VJET のソースのパスに WebContent を含める設定
   1. プロジェクト を右クリックし、 「プロパティー (Properties)」と操作する．
      
   2. VJET を展開．VJET Build Path で「ソース (Source)」を選び、「インクルード:(すべて) (included: (All))」をクリックし、 「編集 (Edit)」をクリックする．
      
   3. 「追加 (Add)」をクリックする
      
   4. 「WebContent」を設定する
      
   5. 「完了 (Finish)」をクリックする
      

JavaScript ファイルの新規作成

1. 今度は、 「WebContent」を右クリックし、 「New (新規)」→ 「JavaScript Source File (JavaScript ソース・ファイル)」と操作する．
   
2. JavaScript ファイル名の設定
   
3. 先ほどの index.html を編集し、いま作成した JavaScript を使うように書き換える

   ウインドウがエディタになっている。 編集が終わったら、＜コントロールキー＞＋「S」（同時押し）で保存する．

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Insert title here</title>
   </head>
   <body>
   
   <script type="text/javascript" src="main.js"></script>
   
   </body>
   </html>
   

   
4. 今度は、main.js (JavaScript ファイル) を編集する．

   次のようなプログラムを書いてみる

   編集が終わったら、＜コントロールキー＞＋「S」（同時押し）で保存する．

   document.write("Hello, World!");
   

   

Web ブラウザでの表示

1. 実行したいので、index.html を右クリックし、「実行 (Run As)」→「サーバで実行 (Run on Server)」と操作する．
   
2. 「ローカル・ホストの HTTP プレビュー (HTTP Preview)」を選び、「次へ (Next)」をクリック

   ※ 使用しているプラグインによっては表示が変わる場合がある．

   
3. 「完了 (Finish)」をクリック
   
4. 実行結果の確認

   Web サーバは、Eclipse に組み込みずみのものが起動する（「HTTP Preview」を選んだので）．

   

   ※ サーバが起動しないときは、Eclipse のバグの可能性がある。 （下図のように、サーバビューで起動を試みても起動しない）．

   

   「サーバで実行」のあと、手動で、J2EEサーバを選ぶとうまくいく場合がある

   

JavaScript プログラムと実行結果例

メッセージ表示

先ほど作成した hoge.js を書き換え

document.writeln("<hr>");
document.writeln("<h1>hoge</h1>");

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

変数と式

先ほど作成した hoge.js を書き換え

var a = 100;
var b = a * 1.05;
document.writeln("a = ", a);
document.writeln("b = ", b);

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

関数定義

先ほど作成した hoge.js を書き換え

function area(x) {
  var a = x * x * 3.14;
  return a;
}
var x = 100;
document.writeln("x = ", x);
document.writeln("area(x) = ", area(x));

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

JSON

先ほど作成した hoge.js を書き換え

var x = 100;
document.writeln( "x =", x);
document.writeln( JSON.stringify(x) );

var M = [0, 1, 2]; 
document.writeln( "M =", M);
document.writeln( JSON.stringify(M) );

var t = {id:1, name:"hoge"};
document.writeln( "t =", t);
document.writeln( JSON.stringify(t) );

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．