Template API
テンプレートの基本
文字の動きを定めたテンプレートは、JavaScriptのクラス(関数)として記述します。必ず function テンプレート名() { … } という形になっている必要があり、トップレベルに二つ function 文があったりするとエラーが表示されます。
最もシンプルな実装としては、例えば、発声が終わった文字を灰色に、今発声されている文字を赤色にする KaraokeColor があります。
実行時のコンテキストでは、以下の定数が定義されています。なお、 width と height は実際の動画プレイヤーのサイズとは異なります。このサイズのキャンバスの上にいろいろなものが配置され、それが実際の動画プレイヤーのサイズに拡大・縮小されて表示されるイメージです。したがって、 width はほとんどの場合に変わらず 1280 です。 height は外部ウェブサイト貼り付け時などに動画プレイヤーの縦横比が変わるため、それに応じて 720 以外の値も取ります。
table:constants
width 歌詞アニメーション解像度の幅 (通常は1280)
height 歌詞アニメーション解像度の高さ (通常は720)
プロパティを宣言する this.primaryColor = new Color('#ff0000') のような行の前に @ui で始まる特別なコメントを書くことで、テンプレートの内容をプログラマでない人でも調整できる直感的なユーザインタフェースを表示させることができます。この機能の詳細については コードエディタ のページをご覧ください。 テンプレートの編集
動画のタイムラインで適当なレンダリングユニット（フレーズ、単語、文字、グラフィック）を選択、編集パネルでテンプレートを選んで「プログラミング」ボタンをクリックするとコードエディタが表示され、テンプレートの実装を編集できます。
コードエディタの詳しい使い方は コードエディタ のページをご覧ください。 必須プロパティとメソッド
すべてのテンプレートは次のプロパティを持つ必要があります。
name : 名前（文字列）
type : 種類（数値、以下の定数の合計）
PUBLIC : このテンプレートが他のテンプレートから呼ばれる（requireで参照される）ことを許す
PHRASE : このテンプレートはフレーズに対して適用できる
WORD : このテンプレートは単語に対して適用できる
CHAR : このテンプレートは文字に対して適用できる
GRAPHIC : このテンプレートはグラフィックに対して適用できる
ALL : このテンプレートはすべての種類の文字ユニットに対して適用できる（CHAR + WORD + PHRASE）
また、何らかのユニットに適用できるテンプレートは次のメソッドを実装する必要があります。
animate(now) : 時刻 now における文字ユニットの動きやグラフィックの見た目を定義する
なお、テンプレートは、通常、割り当てられたレンダリングユニット（フレーズ、単語、文字、グラフィック）の発声区間および前後 500ms のみ animate(now) が呼び出され、画面に表示することができます。ただし、演出によってはこれよりも長い時間表示させたい場合もあるでしょう。そんなときは、以下のプロパティを宣言してください。
headTime : 指定された長さだけ発声区間より前にも表示される (number)
tailTime : 指定された長さだけ発声区間より後にも表示される (number)
例えば this.headTime = 1000 とすると、発声区間より1秒前から animate(now) が呼び出されるので、発声区間より1秒前からフェードインするようなテンプレートを作ることができます。具体例は RotateAndZoomWithBackground などを見てみてください。
さらに、以下のプロパティを指定すると発声区間に関わらず動画再生中ずっと animate(now) が呼び出されるようになりますが、動画再生が重くなるので利用は極力避けるようにしましょう。具体例は Tile を見てみてください。
insomnia : true なら animate(now) が毎フレーム呼ばれる (boolean)
プロパティとローカル変数
プロパティ（this.hoge）は、テンプレートの調整結果を保持するため、また、他のテンプレートからも呼び出し可能なメソッドを定義するために使われます。とくに @ui コメントがついたテンプレートの調整結果は動画のデータとして保存され、動画を読み込むときに復元されます。 テンプレートの状態（例えば計算の途中結果や初期化フラグ）を管理するためにはローカル変数（var hoge）を使ってください。
既定のメソッド
getAssignedUnit()
テンプレートの animate(now) 関数などで this.getAssignedUnit() を呼ぶことで、テンプレートに割り当てられた RenderingUnit のインスタンスを取得できます。 特別な関数
print(内容を確認したいオブジェクト)
オブジェクトの文字表現をブラウザのコンソールに出力します。このメソッドに限らず、インタプリタは問題発生時にコンソールへメッセージを出力することがあるので、テンプレートの開発中はコンソールを開いておくことをおすすめします。
findBeat(時刻)
指定した時刻のビート情報(Beat)を取得します。ビート情報がない場合は null が返ります。 findChorus(時刻)
指定した時刻のサビ情報(Segment)を取得します。サビでなければ null が返ります。 イージング関数
TweenJS の static なイージング関数をサポートしています。 require(“テンプレート名”)
テンプレートは、他のテンプレートを自身の中でインスタンス化して、そのメソッドを呼ぶことができます。これにより、同じようなエフェクトのコードを何度も書かずに済みます。
例えば、 DefaultAlignment テンプレートは内部で DrawCircle と KaraokeColor を使っています。
テンプレートの依存関係が循環するようなコードは無限ループになるのでご注意ください。例えば次のような2つのテンプレートは定義したとたんに無限ループになり、処理が重すぎると判断されて動きません。（この例に限らず、テンプレートのインスタンス化や animate の処理に時間がかかりすぎると、TextAliveはそのテンプレートを一時的に利用不可にします。）
code:sample.js
function TemplateA {
var b = require('TemplateB');
this.animate = function(now) { /* 略 */ }
}
function TemplateB {
var a = require('TemplateA');
this.animate = function(now) { /* 略 */ }
}