ソースコードエディタ

テンプレートの実装はJavaScriptで書かれており、動画編集画面内で直接書き換えることができます。

テンプレートの編集・新規作成

文字ユニットを選択し、編集したいテンプレートを割り当てたうえで「プログラミング」ボタンをクリックすると右の画面のようにコードエディタが表示され、実装を編集できます。

新しいテンプレートを作るための特別な操作はありません。既存のテンプレートのソースコード中でクラス(関数)名を書き換えてコミットすると、新しいテンプレートとして登録されます。

逆にいえば、既存のテンプレートのクラス名はそのままに、実装だけ変えてコミットすると、以降その名前のテンプレートを用いるすべての動画が影響を受けます。(既に保存されている動画は、既存のテンプレートを読み込んで再生されるので、影響を受けません。)

キーボードショートカット

Ctrl+F

ソースコード中の特定の文字列を検索・置換できます。

F12

require("テンプレート名") にカーソルを合わせてF12キーを押すと、そのテンプレートの定義を表示、編集できます。

更新とコミット

「更新」ボタンをクリックすると、テンプレートの実装が現在のエディタの内容に置き換わり、動画が更新されます。

「コミット」は、さらに、更新したテンプレートをTextAliveサーバにアップロードします。

パラメタ調整

プロパティの宣言文の直前に @ui から始まるコメント行を書いておくことで、パラメタ調整用のユーザインタフェースを表示させることができます。このユーザインタフェースは、テンプレートのデバッグに有用なだけでなく、JavaScriptを読み書きしないデザイナーやその他のユーザがテンプレートの見た目を調整するために利用できます。

プロパティの宣言文の直前に @title から始まるコメント行もあわせて書いておくと、 @ui で生成されるウィジェットにタイトルがつきます。タイトルがない場合は変数名が使われるので、ソースコードを読まない人には分かりづらくなってしまいます。 @title 行も書くことをおすすめします。

また、TextAlive v0.3.5からは、 @title から始まるコメント行に加えて @title @ja から始まるコメント行も書けるようになりました。両方書いておくと、TextAliveのインタフェースが英語の場合は前者、日本語の場合は後者のタイトルが使われるようになります。

@ui Slider(最小値, 最大値)

最小値~最大値の間で整数値を入力できるスライダーを表示します。右上の画面キャプチャでは this.bottomOffsetthis.zoom に関するスライダーが表示されています。

@ui Color()

色を選択できる色ピッカーを表示します。プロパティには Color 型の値が代入されます。

@ui Check()

ON/OFFを選択できるチェックボックス(トグルボタン)を表示します。プロパティには真偽値が代入されます。

Template API

ソースコード中で利用できる関数の詳細については TextAlive Template API のページをご覧ください。