Slate 関数を定義して実行する

関数エディターでは、クエリ結果、グローバル変数、ウィジェットプロパティなど、Handlebars からアクセス可能な項目に対して JavaScript 関数を定義し、実行できます。

Slate 関数は Slate でのみ利用可能であり、プラットフォーム全体からアクセスできる Foundry 関数とは異なります。Slate では、Slate Platform Editor を使用して Foundry 関数にアクセスできます。詳細については、関数のドキュメントを参照してください。

関数は DOM や Slate のスペースにアクセスできず、状態も保存されません。データ変換にのみ使用できます。

関数は通常、文字列のパースなどの軽量なデータ処理タスクに使用します。関数は非同期構文（async、await キーワード、および Promise を含む）をサポートしています。

ドキュメント単位の関数ライブラリ

パラメーターを持つ再利用可能な JavaScript 関数を作成できます。これにより、コードのリファクタリングが容易になり、関数内でのコードのコピーと貼り付けを減らせます。また、すべての関数を再実行ボタンを使用して、関数ライブラリに依存するすべての関数を再実行し、更新できます。

デフォルトで利用可能な JavaScript ライブラリ

関数をより高度に活用できるよう、Slate には次の外部 JavaScript ライブラリがデフォルトで付属しています。Lodash ↗、Math.js ↗、Moment ↗、Numeral ↗、es6-shim ↗。関数を作成する際に、これらのライブラリを自由に使用できます。

すべてのユーザーに、ES6 構文の機能をサポートするブラウザーの使用が義務付けられている場合を除き、これらの機能を使用しないでください。

カスタムの外部ライブラリをアップロードする

Slate 関数で使用する外部 JavaScript ライブラリをアップロードできます。

• アプリケーションライブラリ：****関数パネルでライブラリを追加します。これらのライブラリは、その Slate アプリケーション内でのみ利用可能です。
• プラットフォーム全体のライブラリ：****管理パネルを使用して、Foundry インスタンス内のすべてのユーザーとアプリケーション向けにライブラリをアップロードします。

例

例1：2個のウィジェットプロパティを足し合わせる

この関数は、2個のドロップダウンウィジェットの値を足し合わせ、結果をテキストウィジェットに表示します。

関数エディターを開き、addNumbers という名前の関数を追加します。次の JavaScript を追加します。

Copied!
1
return {{lhs.selectedValue}} + {{rhs.selectedValue}};

次に、テキストウィジェットで、Handlebars の {{addNumbers}} を使用して関数名を参照し、戻り値を表示します。

例2：クエリ結果をパースする

この関数は、クエリ結果の各要素をパースします。asteroids という名前のクエリがあり、次の JSON を返すとします。

Copied!
1
{"id": [6, 7, 8],"name": ["Hebe", "Iris", "Flora"],"diameter": [185.18, 199.83, 135.89]}

次の関数は、名前と ID を組み合わせた結果を返し、新しい円周プロパティも追加します。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var asteroids = {{asteroids}};
var formattedNames = [];
var circumference = [];

for (var i = 0; i < asteroids.name.length; i++) {
  formattedNames.push(formatName(
    asteroids.name[i], asteroids.id[i]));
  circumference.push(asteroids.diameter[i] * 3.14);
}

return {
  name: formattedNames,
  diameter: asteroids.diameter,
  circumference: circumference
};

function formatName(name, designation) {
  return name + " (" + designation + ")";
}

結果の JSON は次のようになります。

Copied!
1
2
3
4
5
{
  "name": ["Hebe (6)", "Iris (7)", "Flora (8)"],
  "diameter": [185.18, 199.83, 135.89],
  "circumference": [581.4652,627.4662,426.6946]
}

例3：setTimeout と Promise を使用して一時停止を作成する

この関数は、5秒間隔の setTimeout を作成し、Slate 関数の実行前に5秒間一時停止します。

Copied!
1
2
3
4
5
return new Promise(resolve => {
  setTimeout(() => {
    resolve();
  }, 5000);
});

この関数は、5秒間の一時停止後に undefined を返します。