プロジェクトの作成

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

「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, "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」とし、内容の例を以下に示します。

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