Differences between revisions 25 and 26
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| = Eclipse JSDT = | この内容は以下に移転しました。 |
| Line 3: | Line 3: |
|
以下はeclipse indio + JSDTについて JSDTはJavaScript Debug Toolkitの略だそうだ（Developmentではない）。 == 参考 == * [[http://code.google.com/p/jsdt/|本家]] * [[http://www.ibm.com/developerworks/jp/opensource/library/os-eclipse-jsdt/|JavaScript Development Toolkit の紹介]] * [[http://d.hatena.ne.jp/s-ishigami/20110728/p1|EclipseのJavaScript環境（JSDT）を快適に使う方法]] * [[http://s.mjws.mycom-csys.info/column/ide/063/index.html|イマドキのIDE事情 (63) マルチブラウザ対応のJavaScriptデバッガ「JSDT」を試してみよう!]] === Eclipsed === * [[http://kellicker.wordpress.com/2010/08/17/jsdt-resources/|Using JSDT #1 : Resources ]] * [[http://kellicker.wordpress.com/2010/08/18/javascript-eclipse-ide-jsdt-getting-started/|Using JSDT #2 : Run First Project]] * [[http://kellicker.wordpress.com/2010/08/19/eclipse-javascript-ide-jsdt-html5javascript-workarounds/|Using JSDT #3 : HTML5/JavaScript Workarounds]] * [[http://kellicker.wordpress.com/2010/09/03/using-jsdt-4-adding-third-party-library/|Using JSDT #4 : Adding Third Party Library]] * [[http://kellicker.wordpress.com/2010/09/08/using-jsdt-5-adding-3rd-party-library-redux/|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」で検索。 |
https://www.gwtcenter.com/eclipse-jsdt |
この内容は以下に移転しました。