KikakuUIBuilder

概要

AEスクリプト用のライブラリ。簡単にScriptUIを作る用。callbackのthisは生成したUIBuilderのインスタンスにbindされる。
type: Startup (Startupフォルダに配置してお使いください。)
version: 1.0.0 (2015/01/04)

API

コンストラクタ

KIKAKU.UIBuilder(global, name, options)

UIBuilderのコンストラクタ。
@param {(global|string)} global - 基本的にglobalを与えれば良いが、'dialog'か'palette'を明示的に与えればそれらが作られる。
@param {string} name - スクリプトの名前
@param {object} options - オプション。
{
  version: string(default: '0.0.0'), - スクリプトのバージョン。
  author: string, - 作者の名前。
  url: string, - URL
  width: number(default: 200), - GUI全体の幅。
  titleWidth: number(default: 70), - パラメータのタイトルの幅。
  numberOfScriptColumns: number(default: 2), - スクリプトを実行するボタンが連続している場合に各行に最大何個まで表示させるようにするか。
  help: bool(default: true), - helpを明示的に追加しなかった際に自動的に生成させるかどうか。
  autoSave: bool(default: false), - 自動セーブ機能を用いるか。
  filetype: string(default: 'txt'), - 外部ファイルを使用する際のタイプ(txtかjson)。
}

GUIの生成関連

add, taskはbuildする前に呼び出す必要性が有る。

KIKAKU.UIBuilder#add(type, name, value, options)

パラメータを追加する。
@param {string} type - どの種類のパラメータを追加するか。
@param {string} name - パラメータの名前。名前は一意である必要がある。
@param {(number|bool|string|array|function)} value - 基本的には初期値(popup,listboxの場合はアイテムのリスト)を、タイプが'script'の場合は実行される関数を与える。
@param {(function|object)} options - (function) パラメータが変化した際に実行したい関数を与える。
(object) {
  callback: function, - パラメータが変化した際に実行したい関数を与える。
  title: bool(default: true), - タイトルを表示させるか決める。
  helpTip: (string|array), - ヘルプチップ。
  height: number, - タイプが'textarea'の際に高さを決定する。
  onDoubleClick: function, - タイプが'listbox'の際にダブルクリック時の関数を与える。
}
@return {KIKAKU.UIBuilder} - メソッドチェーン用。

typenamevalueoptions説明
headingstringstring-見出し表示用。
separatorstring--水平罫線。
spacestringnumber-空白。
panelstringstring-パネルを作る。
panelendstring--パネルを明示的に閉じる。
text/edittextstringstringfunction/object文字列を扱うパラメータ。
textsstringarrayfunction/object複数の文字列を扱うパラメータ。
textareastringstringfunction/object複数行に渡る文字列を扱うパラメータ。
statictextstringstringobject静的な文字列を扱うパラメータ。
statictextsstringarrayobject複数の静的な文字列を扱うパラメータ。
filestringstringobjectファイルのパス関連を扱うパラメータ。
folderstringstringobjectフォルダのパス関連を扱うパラメータ。
checkboxstringboolfunction/objectブール値を扱うパラメータ。
checkboxesstringboolfunction/object複数のブール値を扱うパラメータ。
radiobuttonstringarrayfunction/objectラジオボタンを扱うパラメータ。
popup/dropdownliststringarrayfunction/objectポップアップを扱うパラメータ。
popupsstringarrayfunction/object複数のポップアップを扱うパラメータ。
listboxstringarrayfunction/objectリストボックスを扱うパラメータ。
listboxsstringarrayfunction/object複数のリストボックスを扱うパラメータ。
numberstringnumber/objectfunction/object数値を扱うパラメータ。
numbersstringnumber/objectfunction/object複数の数値を扱うパラメータ。
sliderstringobjectfunction/objectスライダで数値を扱うパラメータ。
pointstringarrayfunction/object二次元の点を扱うパラメータ。
point3dstringarrayfunction/object三次元の点を扱うパラメータ。
colorstringarrayfunction/object色を扱うパラメータ。
colorsstringarrayfunction/object複数の色を扱うパラメータ。
script/buttonstringfunction/string-/functionスクリプト実行用のボタン。
hiddenstringany-共通変数、関数用のパラメータ。UIとして表示されない。
helpstringstring/function-ヘルプ用。

KIKAKU.UIBuilder#task(name, callback, interval, init)

指定した間隔で実行する関数を登録する。
@param {string} name - タスクに対して一意の名前を与える。
@param {function} callback - 実行したい関数。
@param {number} [interval=10000] - 間隔をミリセカンドで指定する(最小値1000)。
@param {bool} [init=true] - 予め実行状態にしておくかどうか。
@return {KIKAKU.UIBuilder} - メソッドチェーン用。

KIKAKU.UIBuilder#build(callback)

GUIを実際に生成する。パラメータの追加はこれを呼び出す前に終わらせておく必要がある。
@param {function} callback - GUIを生成した後に実行したい関数を与える。任意。

イベント関連(v1.1.0-)

単純なEventDispather。'init'イベントはビルド時に、'close'イベントはGUIが閉じられる際に自動的に発動されます。

KIKAKU.UIBuilder#on(event, callback)

イベントをバインドする。

KIKAKU.UIBuilder#off(event, callback)

イベントをアンバインドする。

KIKAKU.UIBuilder#trigger(event)

イベントを発動する。

スクリプトの情報関連

KIKAKU.UIBuilder#getName()

スクリプトの名前を取得する。

KIKAKU.UIBuilder#getVersion()

optionsで与えたバージョンを取得する。

KIKAKU.UIBuilder#getAuthor()

optionsで与えた作者を取得する。

KIKAKU.UIBuilder#getUrl()

optionsで与えたURLを取得する。

GUI関連

KIKAKU.UIBuilder#close()

GUIがpaletteかdialogの際に閉じる。

パラメータ関連

get, setに関してはtextsといった複数形のパラメータの際は取り扱いが少し異なるので、下記の個別にパラメータを説明している箇所を参照。

KIKAKU.UIBuilder#get(name)

パラメータの値を取得する。
@param {string} name - 値を取得したいパラメータの名前。
@return {(number|bool|string|array)} - 各パラメータの種類の応じた値。

KIKAKU.UIBuilder#set(name, value)

パラメータの値を設定する。
@param {string} name - 値を設定したいパラメータの名前。
@param {(number|bool|string|array)} value - 設定する値。
@return {KIKAKU.UIBuilder} - メソッドチェーン用。

KIKAKU.UIBuilder#execute(name)

基本的にはボタンを押せばスクリプトは実行されるが、意図的に実行したい場合に用いる。
@param {string} name - 実行したいパラメータ(typeがscriptに限る)の名前。
@return {KIKAKU.UIBuilder} - メソッドチェーン用。

KIKAKU.UIBuilder#enable(name)

パラメータのグレー表示を解除する。
@param {string} name - グレー表示を解除したいパラメータの名前。
@return {KIKAKU.UIBuilder} - メソッドチェーン用。

KIKAKU.UIBuilder#disable(name)

パラメータをグレー表示させる。
@param {string} name - グレー表示したいパラメータの名前。
@return {KIKAKU.UIBuilder} - メソッドチェーン用。

アイテムに関するパラメータ関連

パラメータの中のpopup(dropdownlist), listbox向けのメソッド。popups、listboxesといった複数形のものは少し異なるので下記の個別にパラメータを説明している箇所を参照。

KIKAKU.UIBuilder#getItems(name)

アイテムの一覧を取得する。
@param {string} name - 対象のポップアップパラメータの名前。
@return {array} - アイテム一覧。

KIKAKU.UIBuilder#addItems(name, items)

新たにアイテムを追加する。
@param {string} name - 対象のポップアップパラメータの名前。
@param {string|array} items - 追加したいアイテムの文字列もしくはその配列。

KIKAKU.UIBuilder#removeItem(name, item)

指定文字列のアイテムを取り除く。
@param {string} name - 対象のポップアップパラメータの名前。
@param {string} item - 取り除きたいアイテムの文字列。

KIKAKU.UIBuilder#replaceItems(name, items)

アイテムを入れ替える。
@param {string} name - 対象のポップアップパラメータの名前。
@param {string|array} items - 入れ替えたいアイテムの文字列もしくはその配列。

タスク関連

KIKAKU.UIBuilder#startTask(name)

タスクを実行状態にする。
@param {string} name - 実行状態にしたいタスクの名前。

KIKAKU.UIBuilder#cancelTask(name)

タスクを停止状態にする。
@param {string} name - 停止状態にしたいタスクの名前。

環境設定ファイル

KIKAKU.UIBuilder#getSetting(key, initial_value)

対象のキーの値を取得する。
@param {string} key - 対象のキー。
@param initial_value - 値が存在しない場合この値を返す。

KIKAKU.UIBuilder#saveSetting(key, value)

対象のキーに値を保存する。
@param {string} key - 対象のキー。
@param value - 保存したい値。

KIKAKU.UIBuilder#deleteSetting(key)

対象のキーを削除する。
@param {string} key - 対象のキー。

外部ファイル

使用するにはスクリプトによるファイルに対する書き込みを許可する必要がある。
ファイルタイプは'txt'と'json'の2種類で(これはコンストラクタにおいてoptionsで指定する)jsonの場合は自動的にパース等がされる。ファイル名は拡張子を除いた形で取り扱う。
ファイルはWinの場合は~/AppData/Roaming/Atarabi/KikakuUIBuilder/<<スクリプト名>>以下、Macの場合は~/Library/Application Support/Atarabi/KikakuUIBuilder/<<スクリプト名>>以下に保存される。

KIKAKU.UIBuilder#getFilenames()

ファイル名の一覧を取得する。
@return {array} -ファイル名一覧。

KIKAKU.UIBuilder#existsFile(fielname)

ファイルが存在するか調べる。
@param {string} filename - 調べたいファイルの名前。
@return {bool} - 存在すればtrue、しなければfalse。

KIKAKU.UIBuilder#getFile(fielname)

ファイルを読み込む。
@param {string} filename - 読み込みたいファイルの名前。
@return - ファイルタイプが'txt'であれば文字列、'json'であればパースされた値が返ってくる。もし存在しなければnullが返る。

KIKAKU.UIBuilder#saveFile(filename, data)

ファイルに書き込む。
@param {string} filename -書き込みたいファイルの名前。
@param data - 書き込みたいデータ。'json'の場合は自動的に文字列に変換される。

KIKAKU.UIBuilder#deleteFile(filename)

ファイルを削除する。
@param {string} filename - 削除したいファイルの名前。

パラメータの各種説明

add, get, set等時のパラメータの種類による差違。

heading

見出しを作る。

add('heading', name(, value))

@param {string} name - パラメータを識別する一意の名前。
@param {string} value - 表示させたい文字列。指定しなければ上記のnameが表示される。

get(name)

@param {string} name - パラメータの名前。
@return {string} - 表示している文字列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 表示させたい文字列を与える。

separator

水平罫線で区切る。

add('separator', name)

@param {string} name - パラメータを識別する一意の名前。

space

空白を作る。

add('space', name, value)

@param {string} name - パラメータを識別する一意の名前。
@param {number} value - 空白の高さ。

panel

パネルを形成する。

add('panel', name(, value))

@param {string} name - パラメータを識別する一意の名前。
@param {string} value - パネルに表示させたい文字列。指定しなければnameが表示される。

get(name)

@param {string} name - パラメータの名前。
@return {string} - 表示している文字列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 表示させたい文字列を与える。

panelend

パネルを明示的に終わらせたい際に用いる。

add('panelend', name)

@param {string} name - パラメータを識別する一意の名前。

text

文字列に関するパラメータ。

add('text', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {string} value - 初期値。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {string} - 入力されている文字列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 文字列を与える。

texts

複数の文字列に関するパラメータ。

add('texts', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 初期値。文字列の配列を与え、この配列の数によってUIが決定される。
@param {(function|array|object)} options - オプション。
function: 変化時に呼び出したい関数。1つめの引数に何番目のテキストボックスが変化したかのindexが与えられる。
array: 変化時に呼び出したい関数をテキストボックスごとに与えたい際に関数の配列を与える。
object: {
  callback: (function|array), - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: (string|array) - ヘルプチップ。
}

get(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のテキストボックスの値を取得したいか。
@return {string)} - 対象の文字列の値を返す。

set(name, index, value)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のテキストボックスに値を代入したいか。
@param {string} value - 文字列を与える。

textarea

複数行にわたる文字列に関するパラメータ。

add('textarea', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {string} value - 初期値。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string, - ヘルプチップ。
  height: number, - UIの高さ。
}

get(name)

@param {string} name - パラメータの名前。
@return {string} - 入力された文字列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 文字列を与える

statictext

静的な文字列に関するパラメータ。

add('statictext', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {string} value - 初期値。
@param {object} options - オプション。
object: {
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {string} - 入力された文字列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 文字列を与える。

statictexts

複数の静的な文字列に関するパラメータ。

add('statictexts', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 初期値。文字列の配列を与え、この配列の数によってUIが決定される。
@param {object} options - オプション。
object: {
  title: bool, - タイトル表示の有無。
  helpTip: (string|array) - ヘルプチップ。
}

get(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のテキストボックスの値を取得したいか。
@return {string} - 対象の文字列の値を返す。

set(name, index, value)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のテキストボックスに値を代入したいか。
@param {string} value - 文字列を与える。

checkbox

ブール値に関するパラメータ。

add('checkbox', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {bool} value - 初期値。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {bool} - ブール値を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {bool} value - ブール値を与える。

checkboxes

複数の文字列に関するパラメータ。

add('checkboxes', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 初期値。{name: string, value: bool}の配列を与え、この配列の数によってUIが決定される。
@param {(function|array|object)} options - オプション。
function: 変化時に呼び出したい関数。1つめの引数に何番目のチェックボックスが変化したかのindexが与えられる。
array: 変化時に呼び出したい関数をチェックボックスごとに与えたい際に関数の配列を与える。
object: {
  callback: (function|array), - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: (string|array) - ヘルプチップ。
}

get(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のチェックボックスの値を取得したいか。
@return {bool} - 対象のブール値の値を返す。

set(name, index, value)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のチェックボックスに値を代入したいか。
@param {bool} value - ブール値を与える。

radiobutton

ラジオボタンに関するパラメータ。

add('radiobutton', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 文字列の配列。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {string} - 選択されている項目の文字列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 与えた文字列の項目を選択させる。

popup/dropdownlist

ポップアップに関するパラメータ。

add('popup', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - アイテムの配列。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {string} - 現在選択されているアイテムを返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 選択したいアイテムの文字列を与える。

getItems(name)

@param {string} name - パラメータの名前。
@return {array} - 全てのアイテムの文字列を配列で返す。

addItems(name, items)

@param {string} name - パラメータの名前。
@param {array} items - 加えたいアイテムを文字列の配列で与える。

removeItem(name, item)

@param {string} name - パラメータの名前。
@param {string} item - 削除したいアイテムを文字列で与える。

replaceItems(name, items)

@param {string} name - パラメータの名前。
@param {array} items - アイテムを文字列の配列で与えて入れ替える。

popups/dropdownlists

複数のポップアップに関するパラメータ。

add('popups', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - アイテムの配列の配列。配列の個数によってポップアップの数が変わる。
@param {(function|array|object)} options - オプション。
function: 変化時に呼び出したい関数。1つめの引数に何番目のポップアップが変化したかのindexが与えられる。
array: 変化時に呼び出したい関数をポップアップごとに与えたい際に関数の配列を与える。
object: {
  callback: (function|array), - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: (string|array) - ヘルプチップ。
}

get(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のポップアップの値を取得したいか。
@return {string} - 現在選択されているアイテムを返す。

set(name, index, value)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のポップアップに値を代入したいか。
@param {string} value - 選択したいアイテムの文字列を与える。

getItems(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のポップアップのアイテムの配列を取得したいか。
@return {array} - アイテムの文字列を配列で返す。

addItems(name, index, items)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のポップアップにアイテムを加えたいか。
@param {(array|string)} items - 加えたいアイテムを文字列の配列で与える。

removeItem(name, index, item)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のポップアップのアイテムを削除したいか。
@param {string} item - 削除したいアイテムを文字列で与える。

replaceItems(name, index, items)

@param {string} name - パラメータの名前。
@param {number} index - 何個目のポップアップのアイテムを入れ替えたいか。
@param {array} items - アイテムを文字列の配列で与えて入れ替える。

listbox

リストボックスに関するパラメータ。

add('listbox', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - アイテムの配列。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  onDoubleClick: function, - アイテムをダブルクリックした際に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {string} - 現在選択されているアイテムを返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {string} value - 選択したいアイテムの文字列を与える。

getItems(name)

@param {string} name - パラメータの名前。
@return {array} - 全てのアイテムの文字列を配列で返す。

addItems(name, items)

@param {string} name - パラメータの名前。
addItems: @param {(array|string)} items - 加えたいアイテムを文字列の配列で与える。

removeItem(name, item)

@param {string} name - パラメータの名前。
@param {string} item - 削除したいアイテムを文字列で与える。

replaceItems(name, items)

@param {string} name - パラメータの名前。
@param {array} items - アイテムを文字列の配列で与えて入れ替える。

number

数値に関するパラメータ。

add('number', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {(number|object)} value - (number) 初期値。
(object) {
  value: number, - 初期値
  minvalue: number, - 最小値
  maxvalue: number, - 最大値
}
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {number} - 数値を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {number} value - 数値を与える。

point

二次元の点に関するパラメータ。

add('point', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 長さ2の数値の配列からなる初期値。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {array} - 数値の二次元配列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {array} value - 数値の二次元配列を与える。

point3d

三次元の点に関するパラメータ。

add('point3d', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 長さ3の数値の配列からなる初期値。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {array} - 数値の三次元配列を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {array} value - 数値の三次元配列を与える。

numbers

複数の数値に関するパラメータ。

add('numbers', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 初期値。数値もしくは{value: number, minvalue: number, maxvalue: number}の配列を与え、この配列の数によってUIが決定される。
@param {(function|array|object)} options - オプション。
function: 変化時に呼び出したい関数。1つめの引数に何番目の数値が変化したかのindexが与えられる。
array: 変化時に呼び出したい関数を数値ごとに与えたい際に関数の配列を与える。
object: {
  callback: (function|array), - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: (string|array) - ヘルプチップ。
}

get(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目の数値の値を取得したいか。
@return {number} - 数値を返す。

set(name, index, value)

@param {string} name - パラメータの名前。
@param {number} index - 何個目の数値に値を代入したいか。
@param {number} value - 数値を与える。

slider

スライダで数値を扱うパラメータ。

add('slider', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {object} value {
  value: number, - 初期値
  minvalue: number, - 最小値
  maxvalue: number, - 最大値
}
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {number} - 数値を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {number} value - 数値を与える。

color

色を扱うパラメータ。

add('color', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - 長さ3もしくは4の数値の配列からなる初期値(アルファは1で固定される)を与える。
@param {(function|object)} options - オプション。
function: 変化時に呼び出したい関数。
object: {
  callback: function, - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: string - ヘルプチップ。
}

get(name)

@param {string} name - パラメータの名前。
@return {array} - RGBA(長さ4からなる数値の配列)を返す。

set(name, value)

@param {string} name - パラメータの名前。
@param {array} value - RGBAを与える(アルファは1で固定される)。

colors

複数色に関するパラメータ。

add('colors', name, value, options)

@param {string} name - パラメータを識別する一意の名前。
@param {array} value - RGBAの配列を与え、この配列の数によってUIが決定される。
@param {(function|array|object)} options - オプション。
function: 変化時に呼び出したい関数。1つめの引数に何番目の色が変化したかのindexが与えられる。
array: 変化時に呼び出したい関数を色ごとに与えたい際に関数の配列を与える。
object: {
  callback: (function|array), - 変化時に呼び出したい関数。
  title: bool, - タイトル表示の有無。
  helpTip: (string|array) - ヘルプチップ。
}

get(name, index)

@param {string} name - パラメータの名前。
@param {number} index - 何個目の色の値を取得したいか。
@return {array} - RGBAの配列を返す。

set(name, index, value)

@param {string} name - パラメータの名前。
@param {number} index - 何個目の色に値を代入したいか。
@param {array} value - RGBAの配列を与える。

script/button

スクリプトを実行するボタン。

add('script', name, callback)

@param {string} name - パラメータを識別する一意の名前。
@param {function} callback - クリック時に実行される関数。

add('script', name, value, callback)

@param {string} name - パラメータを識別する一意の名前。
@param {string} value - ボタンに表示される文字列。
@param {function} callback - クリック時に実行される関数。

execute(name)

関数を実行する。
@param {string} name - パラメータの名前。

hidden

GUIには表示されないパラメータ。複数箇所で参照したい変数、関数用。

add('hidden', name, value)

@param {string} name - パラメータを識別する一意の名前。
@param value - なんでも良い。

get(name)

@param {string} name - パラメータの名前。
@return - setした何らかの値、関数。

set(name, value)

@param {string} name - パラメータの名前。
@param value - 何かを与える。

execute(name)

与えられたものが関数であった場合にその関数を実行する。
@param {string} name - パラメータの名前。

一連の流れ

以下全体を、 (function (global) {/** 中身 **/})(this); のように囲んでるものとします。

最初に var builder = new KIKAKU.UIBuilder(global, 'UIBuilder Example', {version: '1.0.0', author: 'Atarabi', url: 'http://atarabi.com/'}); のようにインスタンスを生成します。

次に、addでパラメータやスクリプトを追加していきます。メソッドチェーンで繋げて書くと楽です。 builder
  .add('heading', 'Heading', 'UIBuilder Example')
  .add('separator', 'Separator')
  .add('number', 'Number', 0)
  .add('point', 'Point', [0, 0])
  .add('point3d', 'Point3D', [0, 0, 0])
  .add('color', 'Color', [1, 0, 0])
  .add('script', 'Get', function () {/* 後で */})
  .add('script', 'Apply', function () {/* 後で */});

ここで試しに builder.build(); としてやって実行すると

このように立ち上がります。後はスクリプト部分を組めばよいだけです。

様々なパラメータを表示させたいという意図で適当にパラメータを追加していったので、とりあえず選択レイヤーの選択プロパティのタイプに応じてパラメータを選択し、'Get'の際は選択プロパティの値を対応するパラメータに設定し、'Apply'の場合は逆に選択プロパティにパラメータの値を代入するみたいな用途に困るものを作ります。

面倒なのでKikakuUtilsを使用して実装していきます。

'Get'の方は以下のように、 .add('script', 'Get', function () { var property = KIKAKU.Utils.getSelectedProperty(); if (property === null) { return; } switch (property.propertyValueType) { case PropertyValueType.OneD: this.set('Number', property.value); break; case PropertyValueType.TwoD: case PropertyValueType.TwoD_SPATIAL: this.set('Point', property.value); break; case PropertyValueType.ThreeD: case PropertyValueType.ThreeD_SPATIAL: this.set('Point3D', property.value); break; case PropertyValueType.COLOR: this.set('Color', property.value); break; default: break; } }) 基本的に与えたコールバックのコンテキストはUIBuilderのインスタンス(この例だとbuilder)になるので、this.set('name')でパラメータの値を取得できます。

'Apply'の方も概形は'Get'と同じで以下のように、 .add('script', 'Apply', function () { var obj = KIKAKU.Utils.getSelectedProperty(true); if (obj === null) { return; } var property = obj.property, layer = obj.layer; switch (property.propertyValueType) { case PropertyValueType.OneD: KIKAKU.Utils.setValue(property, layer.time, this.get('Number')); break; case PropertyValueType.TwoD: case PropertyValueType.TwoD_SPATIAL: KIKAKU.Utils.setValue(property, layer.time, this.get('Point')); break; case PropertyValueType.ThreeD: case PropertyValueType.ThreeD_SPATIAL: KIKAKU.Utils.setValue(property, layer.time, this.get('Point3D')); break; case PropertyValueType.COLOR: KIKAKU.Utils.setValue(property, layer.time, this.get('Color')); break; default: break; } }) こちらでは、this.get(name)でパラメータの値を取得しています。

後は語尾にbuildをつけて終わりです。

完成形。

MinimalTodo

自動セーブ機能の例。単純なTodo。Addで追加。左上チェック時に項目をダブルクリックで削除。

v0.0.0 - 2015/01/04

ExpressionStorage

外部ファイル利用の例。単純なエクスプレッション保管庫。Addで追加、Deleteで削除。Applyで選択プロパティに適用。要Utils

v0.0.0 - 2015/01/04

SketchBook

Sketchbookでも色々公開してるので参考に。

Download

KikakuUIBuilder-1.0.0.zip

v1.0.0 - 2015/01/04 UIの刷新、パラメータの追加、オートセーブ機能、環境設定ファイル、外部ファイルの扱いの追加。
v0.1.0 - 2014/10/19 enable, disableの追加、バグフィクス
v0.0.0 - 2014/08/17