ウェブテンプレート変数

ビルドプロセスの間、Unity はテンプレートファイルを前処理し、それらのファイルに含まれるすべてのマクロと条件付きディレクティブを評価します。このプロセスの一環として、Unity はすべてのマクロ宣言を検索し、Unity エディターが提供する値に置き換えます。Unity は、テンプレートフォルダー内のすべての .html、.php、.css、.js、.json ファイルを自動的に前処理します。

内部プリプロセッサー変数

以下の内部プリプロセッサー変数は、プロジェクト内のデータを参照しており、Unity はエディターが提供する値に従って、ビルド時に値を割り当てます。JavaScript のマクロや条件付きディレクティブは、これらの内部プリプロセッサー変数を使用できます。

JavaScript のマクロ

JavaScript マクロは、テンプレートファイルの中にある JavaScript コードのブロックで、3 つの中括弧で囲まれています。この JavaScript コードは、前述の内部プリプロセッサー変数を使用することができます。これらの変数は、エディターが指定した値に従って、ビルド時に割り当てられます。ビルド中、プリプロセッサーはすべてのマクロを評価し、変数の出力に置き換えます。

JavaScript のマクロを使って、エディターから送られてくる値を前処理することができます。これらのマクロはどれだけ複雑にしてもかまいません。複数の演算子、ループ、関数、その他のあらゆる JavaScript の構成要素を使用することができます。

以下の行例は、デフォルトテンプレートで使用されている index.html ファイルのものです。

<div id="unity-build-title">{{{ PRODUCT_NAME }}}</div>

Player 設定の Product Name の値が My WebGL Game に設定されている場合、内部プリプロセッサー変数 PRODUCT_NAME は My WebGL Game になります。出力される index.html ファイルの中で、この行は以下のように表示されます。

<div id="unity-build-title">My WebGL Game</div>

下は、同じ index.html テンプレートファイルからのより複雑な例です。

canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";

ターゲットのビルドフォルダーの名前が Let’s try WebGL で、Player 設定で背景画像を選択すると、内部プリプロセッサー変数 BACKGROUND_FILENAME が Let’s try WebGL.jpg の値になります。出力される index.html ファイルの中で、この行は以下のように変わります。

canvas.style.background = "url('" + buildUrl + "/Let%27s try WebGL.jpg') center / cover";

条件付きのディレクティブ

条件付きディレクティブ #if、#else、#endif は、前処理されたファイルの特定の部分を出力ファイルに保存するか、現在のビルドでは破棄するかを制御します。

#if ディレクティブで始まり、 #endif ディレクティブで終わるコードを条件付きグループと呼びます。条件付きグループには #else ディレクティブを入れることもできます。Unity は #if の後に記述された式を JavaScript 式として評価します。この式が、ブーリアンコンテキストで評価されるときに true に変換される真の値を持つ場合、Unity は出力ファイル内で #if ディレクティブの直後の行グループを維持します。#if 式が false で、#else ディレクティブが条件付きグループに含まれる場合、Unity は出力で #else ディレクティブの直後の行グループを維持します。条件付きグループの例を以下に示します。

#if EXPRESSION
  // this block is included in the output if EXPRESSION has a truthy value
#else
  // this block is included in the output otherwise
#endif

評価される JavaScript の式には、角かっこ、論理演算子、その他 JavaScript の構成要素を使うことができます。条件付きのディレクティブは、ネストにすることができます。

追加リソース

• ウェブテンプレートの使用
• カスタムウェブテンプレートの追加
• ウェブテンプレート構造体とインスタンス化
• ウェブテンプレートビルド設定とインタラクション