テンプレートの実装はJavaScriptで書かれており、動画編集画面内で直接書き換えることができます。
テンプレートの編集・新規作成
文字ユニットを選択し、編集したいテンプレートを割り当てたうえで「プログラミング」ボタンをクリックすると右の画面のようにコードエディタが表示され、実装を編集できます。
新しいテンプレートを作るための特別な操作はありません。既存のテンプレートのソースコード中でクラス(関数)名を書き換えてコミットすると、新しいテンプレートとして登録されます。
逆にいえば、既存のテンプレートのクラス名はそのままに、実装だけ変えてコミットすると、以降その名前のテンプレートを用いるすべての動画が影響を受けます。(既に保存されている動画は、既存のテンプレートを読み込んで再生されるので、影響を受けません。)
キーボードショートカット
Ctrl+F
ソースコード中の特定の文字列を検索・置換できます。
F12
require("テンプレート名")
にカーソルを合わせてF12キーを押すと、そのテンプレートの定義を表示、編集できます。
更新とコミット
「更新」ボタンをクリックすると、テンプレートの実装が現在のエディタの内容に置き換わり、動画が更新されます。
「コミット」は、さらに、更新したテンプレートをTextAliveサーバにアップロードします。
パラメタ調整
プロパティの宣言文の直前に @ui
から始まるコメント行を書いておくことで、パラメタ調整用のユーザインタフェースを表示させることができます。このユーザインタフェースは、テンプレートのデバッグに有用なだけでなく、JavaScriptを読み書きしないデザイナーやその他のユーザがテンプレートの見た目を調整するために利用できます。
プロパティの宣言文の直前に @title
から始まるコメント行もあわせて書いておくと、 @ui
で生成されるウィジェットにタイトルがつきます。タイトルがない場合は変数名が使われるので、ソースコードを読まない人には分かりづらくなってしまいます。 @title
行も書くことをおすすめします。
また、TextAlive v0.3.5からは、 @title
から始まるコメント行に加えて @title @ja
から始まるコメント行も書けるようになりました。両方書いておくと、TextAliveのインタフェースが英語の場合は前者、日本語の場合は後者のタイトルが使われるようになります。
@ui Slider(最小値, 最大値)
最小値~最大値の間で整数値を入力できるスライダーを表示します。右上の画面キャプチャでは this.bottomOffset
と this.zoom
に関するスライダーが表示されています。
@ui Color()
色を選択できる色ピッカーを表示します。プロパティには Color
型の値が代入されます。
@ui Check()
ON/OFFを選択できるチェックボックス(トグルボタン)を表示します。プロパティには真偽値が代入されます。
Template API
ソースコード中で利用できる関数の詳細については TextAlive Template API のページをご覧ください。