プロジェクトの作成

アプリごとにプロジェクトフォルダを用意し、アプリ構築に必要なファイル一式を管理します。

「HelloWorld」アプリケーションを実際に作成しながら、プロジェクトの作成の流れを説明していきます。

| （1）プロジェクトフォルダを作る

まず、任意の位置に任意の名前のフォルダを作ります。プロジェクトトップになります。

次に、そのフォルダの中に、サブフォルダを次のように作ります。

プロジェクトトップ ├ htdocs │　└ res └ src

・「htdocs」フォルダ
サーバーへアップロードするファイル一式のフォルダです。

・「htdocs\res」フォルダ
リソースファイル類を格納するフォルダです。

・「src」フォルダ
ソースファイルを格納するフォルダです。

以降は、このフォルダ構造を前提に説明していきます。

| （2）HTMLファイルを「htdocs」フォルダに格納する

アプリのメインとなるHTMLファイル「index.html」と、HTML5 Canvas をサポートしていないブラウザの場合に表示させるHTMLファイル「error.html」を以下の内容で作成します。文字コードはUTF-8を使用してください。

index.html：

<!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>

error.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を使用してください。

HelloWorld.js：

#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, "ＭＳ ゴシック" ); 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」とし、内容の例を以下に示します。

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」のインストール先に合わせて変更する必要があります。