Eclipse JSDT

2018年6月28日2019年5月12日

※この内容はかなり古いものです。

以下はeclipse indio + JSDTについて
JSDTはJavaScript Debug Toolkitの略だそうだ（Developmentではない）。

Table of Contents

参考

本家
JavaScript Development Toolkit の紹介
EclipseのJavaScript環境（JSDT）を快適に使う方法
イマドキのIDE事情 (63) マルチブラウザ対応のJavaScriptデバッガ「JSDT」を試してみよう!–http://s.mjws.mycom-csys.info/column/ide/063/index.html(リンク切れ)

Eclipsed

http://kellicker.wordpress.com/2010/08/17/jsdt-resources/
http://kellicker.wordpress.com/2010/08/18/javascript-eclipse-ide-jsdt-getting-started/
http://kellicker.wordpress.com/2010/08/19/eclipse-javascript-ide-jsdt-html5javascript-workarounds/
http://kellicker.wordpress.com/2010/09/03/using-jsdt-4-adding-third-party-library/
http://kellicker.wordpress.com/2010/09/08/using-jsdt-5-adding-3rd-party-library-redux/

インストール

他のバージョンのEclipseにプラグインとして道入することもできるが、どれを道入すべきかはわかりにくい。また、jsdtのみ道入しても使いづらいので、あらかじめweb関連のプラグインが道入済のeclipseを新たにダウンロードし、そこにjsdtをインストールした方が簡単である。

http://www.eclipse.org/downloads/の「Eclipse IDE for JavaScript Web Developers」をダウンロードして実行する。
上記本家に示されたupdate site「http://jsdt.googlecode.com/svn/trunk/org.ayound.js.debug.update」を指定してjsdtをインストールする。

※なお、Window>PreferencesメニューのGeneral/WorkspaceでText File EncodingをUTF-8にしておいた方が無難

antが使いたい場合、これはJDTに含まれているので、「Indigo – http://download.eclipse.org/releases/indigo」の「Eclipse Java Development Tools」をインストール。

Web Projectの作成と実行

上記「Eclipsed」に記述された手順に従う。

新規プロジェクト作成で、「Static Web Project」を選択する。ここで指定するのはプロジェクト名のみ。
プロジェクトを右クリックして新規ファイル作成で「HTML File」を選択して、名前を入力して、Nextでhtml5を選択する。<<BR>>ただし、この選択は単に自動作成されるテンプレートをhtml5にするだけ（らしい）。
- 上記「Eclipsed」で用いられているサンプルを入力

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>

    <!-- Pull in canvas support for IE -->
    <!--[if IE]><script src="excanvas.js"></script><![endif]-->

    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');

        // Is element in the DOM and does browser support canvas
        if (drawingCanvas && drawingCanvas.getContext) {
          // Init drawing context
          var context = drawingCanvas.getContext('2d');

          // Create 4 squares
          context.fillStyle =   "#00FF00";  // Green
          context.fillRect(0,0,100,100);

          context.fillStyle = "#0000FF";    // Blue
          context.fillRect(0,100,100,100);

          context.fillStyle = "#FF0000";    // Red
          context.fillRect(100,0,100,100);

          context.fillStyle = "#FFFF00";    // Yellow
          context.fillRect(100,100,100,100);
        }
      }
    </script>
   </head>
 <body>
   <h1>HTML5 Canvas</h1>
   <canvas id="canvas1" width="200" height="200">
     <p>Your browser doesn't support canvas.</p>
   </canvas>
 </body>
</html>

作成したhtmlファイルを右クリックしてRun As> Run On Serverを選択。
「Choose an existing server」の選択、「HTTP Preview at localhost」の選択になっているので、Finish
HTML5 Canvasと４つの色分けされた正方形が描画される。

※「Your browser doesn’t support canvas.」と表示される場合、Eclipseのwindow>Web Browserメニューから適当なブラウザを選択する。このメニューが無い場合は、window>Preferenceを開き、General/Web Browserにてブラウザを選択。

※ブラウザのキャッシュを切っておかないと、htmlファイルを編集しても変化が無いということになりかねないので注意。

html5の判別

IDEはhtmlファイルのDOCTYPEを見て、htmlバージョンを判断している。例えば、最初の

<!DOCTYPE html>

を

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

に変更すると、canvasタグについて「Unknown tag(canvas)」という警告が表示される。

ただし、いずれの場合でも実行してみるとcanvasは機能し、色分け正方形は表示される。

デバッグ

「Eclipse IDE for JavaScript Web Developers」のままではデバッガを使うことはできず（もしかしたらできるのかもしれないが方法がわからない）、jsdtを道入することによってJava等と同様のデバッグ環境になる。デバッガ利用の前提条件としては以下の通り（間違いかもしれないが、これ以外の方法では動作しなかった）。

実行するファイル（メイン）とできるのは、あくまでhtmlファイル。jsファイルを直接実行することはできない。
htmlファイル中にJavaScriptを記述しても、そこにブレークポイントを置くことはできない（なぜか行の右クリックメニューに出てこない）。ブレークポイントを置けるのは.jsファイル中のみ。

そこで、適当なhtmlを作成し、その中からjsファイル中の関数を呼び出すようなコードを記述してデバッグしてみる。

hello.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>

    <!-- Pull in canvas support for IE -->
    <!--[if IE]><script src="excanvas.js"></script><![endif]-->

    <script src='draw.js'></script>
    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');
        draw(drawingCanvas)        
      }
    </script>
   </head>
 <body>
   <h1>HTML5 Canvas</h1>
   <canvas id="canvas1" width="200" height="200">
     Your browser doesn't support canvas.
   </canvas>
 </body>
</html>

draw.js

function draw(drawingCanvas) {
    // Is element in the DOM and does browser support canvas
    if (drawingCanvas && drawingCanvas.getContext) {
      // Init drawing context
      var context = drawingCanvas.getContext('2d');

      // Create 4 squares
      context.fillStyle =   "#00FF00";  // Green
      context.fillRect(0,0,100,100);

      context.fillStyle = "#0000FF";    // Blue
      context.fillRect(0,100,100,100);

      context.fillStyle = "#FF0000";    // Red
      context.fillRect(100,0,100,100);

      context.fillStyle = "#FFFF00";    // Yellow
      context.fillRect(100,100,100,100);
    }
}

ここでhello.htmlを右クリックし、Debug As>JavaScript Debug Toolkitを選択する。次の画面でbrowserが勝手にIEになっているので、これをFirefoxに変更する（「c:\Program Files (x86)\Mozilla Firefox\firefox.exe」など）。少なくともIE9ではcanvasが使えない。

実行すると、正常に表示されることがわかる。あとは、Javaの環境と同様にブレークポイント等を設定するなり、ステップ実行するなりすればよい。

jsdebugとtempdir

なぜか上記を行うと、勝手にjsdebugというプロジェクトと、その中のtempdirというフォルダが作成される。これはいくら消しても必ず復活する。

トラブル

Eclipseがフリーズする

なぜかEclipseがフリーズしてしまうことがある。今のところ明確ではないが、JavaScriptエディタが原因らしい。JavaScriptのソースを表示させなければ（編集状態にしなければ）問題ない。

根本的解決法かどうかわからないが、eclipse.iniを変更すればとりあえず直った。「eclipse フリーズ　XX:MaxPermSize」で検索。

技術メモJavaScript

Posted by ysugimura

ディスカッション

コメント一覧

まだ、コメントがありません