アクション

アクションとはイベントをトリガーとして実行される処理のことです。すべてのコンポーネントには原則として１つのイベントがあります。イベントは次のようなものです。

コンポーネント	イベント	イベント名
ボタン	クリックした	onclick
テキストフィールド	入力が終わり、カーソルが外れた	onchange
キャンバス	スクリーンのロードが完了した	onload

アクションとはイベントが発生したときに実行する処理のことです。イベント１つに対して、１つのアクションを記述できます。すなわち、コンポーネントに１つのアクションが設定できます。

エディタ起動

コンポーネントを選択して、右クリックからコンテキストメニューを開きます。
コンテキストメニューから[アクション]を選択します。
アクションエディタが起動します。

処理記述

アクションは、JavaScript 言語を使って処理内容を記述します。イベント発生後、記述された内容が実行されます。

記述にあたって次のサポートが用意されています。

$uiオブジェクトを使って、コンポーネントの値やプロパティを受け取ることができる。
$uiオブジェクトを使って、コンポーネントに値やプロパティを設定することができる。
ビルトイン関数とユーザ関数をステートメント中に記述することができる。

Tips

記述例

アクションエディタ内のアクションボードにJavaScriptを記述します。

簡単な記述例を示します。
キャンバスに数値フィールドを3つとボタン1つを配置します。

コンポーネント種類	コンポーネントID
数値フィールド	number_field_1
数値フィールド	number_field_2
数値フィールド	number_field_answer
ボタン	button_1

ボタンクリック時に、number_field_1 と number_field_2 の入力値の合計値を number_field_answer に出力する例になります。

ボタンコンポーネントのコンテキストメニューからアクションエディタを開きます。
アクションボードに次の記述を行います。

const input1 = $ui.number_field_1.value;
const input2 = $ui.number_field_2.value;
const answer = input1 + input2;
$ui.number_field_answer.value = answer;

解説

1行目は、$uiはUIスクリーンを示すオブジェクトで$ui.number_field_1と記述することでnumber_field_1 コンポーネントオブジェクトを参照しています。さらに.valueと続けることで、コンポーネントの値プロパティを参照しています。2行目も同様です。

3行目では、取得した変数の値を加算しています。4行目において、取得とは逆にコンポーネントの値プロパティに値をセットしています。

この記述により、スクリーンの数値フィールド(number_field_1, number_field_2)に数値を入力して、ボタン(button_1)をクリックすると、加算の結果を数値フィールド(ID：number_field_answer) に出力されることになります。

今後説明するアクション記述はすべて、この基本の流れに沿った形になります。