プロジェクトの作成 |
アプリごとにプロジェクトフォルダを用意し、アプリ構築に必要なファイル一式を管理します。
「HelloWorld」アプリケーションを実際に作成しながら、プロジェクトの作成の流れを説明していきます。
(1)プロジェクトフォルダを作る |
まず、任意の位置に任意の名前のフォルダを作ります。プロジェクトトップになります。
次に、そのフォルダの中に、サブフォルダを次のように作ります。
プロジェクトトップ ├ htdocs │ └ res └ src |
・「htdocs」フォルダ
サーバーへアップロードするファイル一式のフォルダです。
・「htdocs\res」フォルダ
リソースファイル類を格納するフォルダです。
・「src」フォルダ
ソースファイルを格納するフォルダです。
以降は、このフォルダ構造を前提に説明していきます。
(2)HTMLファイルを「htdocs」フォルダに格納する |
アプリのメインとなるHTMLファイル「index.html」と、HTML5 Canvas をサポートしていないブラウザの場合に表示させるHTMLファイル「error.html」を以下の内容で作成します。文字コードはUTF-8を使用してください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="HelloWorld.js"></script> <script type="text/javascript"> window.onload = d2js_onload; window.onorientationchange = d2js_onorientationchange; window.onresize = d2js_onresize; </script> </head> <body> <div align="center"> <canvas id="canvas0" width="640" height="480"></canvas> </div> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>このブラウザは非対応です</p> </body> </html> |
(3)各種リソースファイルを「htdocs\res」フォルダに格納する |
PNG/JPEGファイルをこのフォルダ内に格納します。
「HelloWorld」アプリケーションでは不要です。
(4)各種ソースファイルを「src」フォルダに格納する |
このフォルダ内に格納するファイルは次のものです。
・D2JSファイル一式のコピー
・アプリのメインとなるソースファイル
「HelloWorld」アプリケーションでは、D2JSファイル一式の中の「_Graphics.js」と「_Main.js」をこのフォルダ内にコピーし、アプリのメインとなるソースファイルとして「HelloWorld.js」を以下の内容で作成します。文字コードはUTF-8を使用してください。
#include "_Graphics.js" #include "_Main.js" var g; var str; var w, h; var x, y; var dx, dy; function frameTime(){ return 1000 / 30/*フレーム*/; } function init() { } function start() { setCurrent( "canvas0" ); g = new _Graphics(); str = "Hello World !!"; g.setFont( 24, "MS ゴシック" ); w = g.stringWidth( str ); h = g.fontHeight(); x = 0; y = h; dx = 10; dy = 5; return true; } function paint() { x += dx; if( (x <= 0) || (x >= getWidth() - w) ) { dx = -dx; } y += dy; if( (y <= h) || (y >= getHeight()) ) { dy = -dy; } g.setColor( g.getColorOfRGB( 127, 127, 127 ) ); g.fillRect( 0, 0, getWidth(), getHeight() ); g.setColor( g.getColorOfRGB( 255, 0, 0 ) ); g.drawString( str, x, y ); } function processEvent( type, param ) { } function error() { launch( "error.html" ); } |
(5)ビルド用バッチファイルを作る |
プロジェクトトップの下に、ビルド用バッチファイルを作成します。ここでは、バッチファイル名を「build.bat」とし、内容の例を以下に示します。
set CPP=C:\MinGW\bin\gcc -E -P -x c cd src %CPP% HelloWorld.js > ..\htdocs\HelloWorld.js cd .. pause |
実際には、Cプリプロセッサのインストール先、ソースファイル名等、環境に合わせて変更する必要があります。バッチファイルの内容を解説していきます。
set CPP=C:\MinGW\bin\gcc -E -P -x c |
まず、1行目では、Cプリプロセッサの環境を指定しています。
cd src %CPP% HelloWorld.js > ..\htdocs\HelloWorld.js cd .. |
3〜5行目では、ソースをCプリプロセッサにかけて、「htdocs」フォルダへ格納しています。この例では、ソースファイルは「HelloWorld.js」になっています。
「Closure Compiler」を使用する |
「Closure Compiler」を使用する場合、プロジェクトトップの下のビルド用バッチファイルに、次のような記述を追加します。
set COMPILE=java -jar "C:\Closure Compiler\compiler.jar" cd htdocs %COMPILE% --js HelloWorld.js --js_output_file HelloWorld.compiled.js cd .. |
実際には、「Closure Compiler」のインストール先に合わせて変更する必要があります。
「Microsoft Ajax Minifier」を使用する |
「Microsoft Ajax Minifier」を使用する場合、プロジェクトトップの下のビルド用バッチファイルに、次のような記述を追加します。
call "C:\Microsoft Ajax Minifier\AjaxMinCommandPromptVars" cd htdocs del HelloWorld.min.js AjaxMin -enc:in UTF-8 HelloWorld.js -out HelloWorld.min.js cd .. |
実際には、「Microsoft Ajax Minifier」のインストール先に合わせて変更する必要があります。