Deletions are marked like this. | Additions are marked like this. |
Line 28: | Line 28: |
== プロジェクトの作成と設定 == |
== html5プロジェクトの作成と設定 == 上記「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と4つの色分けされた正方形が描画される。 |
Eclipse JSDT
以下はeclipse indio + JSDTについて JSDTはJavaScript Debug Toolkitの略だそうだ(Developmentではない)。
参考
Eclipsed
インストール
他のバージョンのEclipseにプラグインとして道入することもできるが、どれを道入すべきかはわかりにくいので、道入済のeclipseの新たにダウンロードする方が簡単である。
http://www.eclipse.org/downloads/の「Eclipse IDE for JavaScript Web Developers」をダウンロードする。
html5プロジェクトの作成と設定
上記「Eclipsed」に記述された手順に従う。
- 新規プロジェクト作成で、「Static Web Project」を選択する。ここで指定するのはプロジェクト名のみ。
プロジェクトを右クリックして新規ファイル作成で「HTML File」を選択して、名前を入力して、Nextでhtml5を選択する。
ただし、この選択は単に自動作成されるテンプレートを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と4つの色分けされた正方形が描画される。