トップページ -> プログラミング -> JavaScript と JQuery による Web プログラミング -> Eclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET あり)
[サイトマップへ], [サイト内検索へ]

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

VJET とは,次の機能を持つ Eclpse のプラグインです.Eclipse で JavaScript のプログラムを実行してみます

この Web ページで行うこと

VJET の要点


前準備

下記のソフトウエアをすべてインストールする。


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

  1. Eclipse を起動

    [image]
  2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウエアのインストール (Install New Software)」と操作

    [image]
  3. Work With のところを設定し、しばらく待つ

    ◆ Eclipse 4.2 (juno) での実行例

    [image]

    ◆ Eclipse 3.7 (indigo) での実行例

    [image]
  4. Web, XML, Java EE および OSGi エンタープライズ開発 (Web, XML, Java EE and OSGi Enterprise Development)」を展開

    [image]
  5. 必要なパッケージをチェックし、「次へ (Next)」をクリック

    [image]
  6. インストールされるパッケージの確認

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

    [image]
  7. ライセンス条項の確認

    [image]
  8. インストールが始まる

    [image]
  9. Eclipse の再起動

    [image]

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

参考 Web ページ: https://developers.google.com/eclipse/docs/install-eclipse-4.2

  1. Eclipse を起動

    [image]
  2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウエアのインストール (Install New Software)」と操作

    [image]
  3. Work With の右横の「追加 (Add)」をクリック
  4. 名前 (Name) とロケーション (Location) の設定

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

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

    [image]
  5. GWT ツールをインストールしたいので、次の2つをチェックし、「次へ (Next)」をクリック

VJET のインストール

Eclipse 4.2 系列

  1. Eclipse を起動
  2. インストールしたいので「ヘルプ (Help)」 → 「Eclipse マーケットプレース」と操作

    [image]
  3. Eclipse マーケットプレースのウインドウが開く

    [image]
  4. VJET」で検索

    [image]
  5. 検索結果について、確認の上、「インストール (install)」をクリック

    [image]
  6. インストールされるパッケージの確認

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

    [image]
  7. ライセンス条項の確認

    [image]
  8. インストールが始まる

    [image]
  9. インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動

    [image]

    Eclipse 3系列

    1. Eclipse を起動

      [image]
    2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウエアのインストール (Install New Software)」と操作

      [image]
    3. Work With の右横の「追加 (Add)」をクリック
    4. 名前 (Name) とロケーション (Location) の設定
      http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/
      

      [image]
    5. VJET」をチェックし、「次へ (Next)」をクリック

      [image]
    6. インストールされるパッケージの確認

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

      [image]
    7. ライセンス条項の確認

      [image]
    8. インストールが始まる

      [image]
    9. インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動

      [image]

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

    1. (オプション)テキストファイルエンコーディングの確認

      [image]
    2. 新規の静的 Web プロジェクトを作成したいので「File (ファイル)」→「New (新規)」→「Project (プロジェクト)」と操作する.

      [image]
    3. Static Web Project (静的 Web プロジェクト) を選ぶ

      [image]
    4. プロジェクト名の設定

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

      • プロジェクト名:hoge

      [image]
    5. オプションの設定

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

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

      はい」をクリック.

      [image]
    7. いま作成した 静的 Web プロジェクトが,プロジェクト・エクスプローラーウインドウに表示される

      [image]
    8. 試しに index.html を作成してみる
      1. いま作成した 静的 Web プロジェクトの 「WebContent」を右クリックし、 「New (新規)」→「その他」と操作する.

        [image]
      2. HTML ファイル」を選ぶ

        [image]
      3. ファイル名を index.html のように設定する

        [image]
      4. テンプレートを選ぶ

        [image]
      5. ファイルが作成される

        [image]

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

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

      [image]
    2. VJET JS」を選ぶ

      [image]

    VJET の設定

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

    1. VJET を有効にする設定

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

      [image]
    2. VJET のソースのパスに WebContent を含める設定
      1. プロジェクト を右クリックし、 「プロパティー (Properties)」と操作する.

        [image]
      2. VJET を展開.VJET Build Path で「ソース (Source)」を選び、「インクルード:(すべて) (included: (All))」をクリックし、 「編集 (Edit)」をクリックする.

        [image]
      3. 追加 (Add)」をクリックする

        [image]
      4. WebContent」を設定する

        [image]
      5. 完了 (Finish)」をクリックする

        [image]

    JavaScript ファイルの新規作成

    1. 今度は、 「WebContent」を右クリックし、 「New (新規)」→ 「JavaScript Source File (JavaScript ソース・ファイル)」と操作する.

      [image]
    2. JavaScript ファイル名の設定

      [image]
    3. 先ほどの index.html を編集し、いま作成した JavaScript を使うように書き換える

      ウインドウがエディタになっている。 編集が終わったら、<コントロールキー>+「S」(同時押し)で保存する.

      <!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>Insert title here</title>
      </head>
      <body>
      
      <script type="text/javascript" src="main.js"></script>
      
      </body>
      </html>
      

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

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

      編集が終わったら、<コントロールキー>+「S」(同時押し)で保存する.

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

      [image]

    Web ブラウザでの表示

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

      [image]
    2. ローカル・ホストの HTTP プレビュー (HTTP Preview)」を選び、「次へ (Next)」をクリック

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

      [image]
    3. 完了 (Finish)」をクリック

      [image]
    4. 実行結果の確認

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

      [image]

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

      [image]

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

      [image]

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

    メッセージ表示

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

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

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

    [image]

    変数と式

    先ほど作成した 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」と操作する.

    [image]

    関数定義

    先ほど作成した 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」と操作する.

    [image]

    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」と操作する.

    [image]

本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]


本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]