高度な

高度なウィジェットカテゴリーは、以下のウィジェットで構成されています。

• Code Sandbox
• File Import
• Iframe

Code Sandbox

Code Sandbox ウィジェットは、ユーザーの独自のカスタムウィジェットを実装して、Slate の機能を拡張できるセキュアなサンドボックスです。独自のカスタム可視化を構築したり、サードパーティの JavaScript ライブラリを活用したり、高度なワークフローインタラクションを構築したりできます。ウィジェットのレンダリング、ウィジェットモデル、イベントインタラクションを定義して、ウィジェットがアプリケーション全体と統合されるようにします。外部 JavaScript ライブラリは、プロジェクトのフォルダーにロードして、ウィジェットで参照できます。

相互作用の概要

Slate との相互作用と使用できる関数の概要は以下のとおりです。

JavaScript タブ

このタブには、JavaScript のフィールドと、読み込む可能性のある JavaScript ライブラリがあります。

JavaScript

ウィジェットの読み込み時に実行される JavaScript の文字列です。この JavaScript を変更すると、ウィジェット全体がリロードされます。このフィールドの JavaScript は、ライブラリフィールドの JavaScript よりも後に実行されます。サードパーティライブラリの読み込み方法については、JavaScript ライブラリセクションを参照してください。

利用可能な関数

以下のネイティブ関数を使用して、Slate 固有の機能との相互作用ができます。これらの関数を使用すると、イベント、アクション、および状態変更を使用して、残りの Slate アプリケーションとの相互作用ができます。これらの関数は、ウィジェット内で実行される JavaScript に公開されます。詳細と例については、以下を参照してください。

• SlateFunctions.onAction
• SlateFunctions.watch
• SlateFunctions.getState
• SlateFunctions.setState
• SlateFunctions.triggerEvent

JavaScript ライブラリ

これは、プロジェクトのパスの配列で、ウィジェット内で順番にダウンロードして実行されます。また、CORS と CSP ポリシーで許可された URL の配列（混在させることができます）でもあります。

ブラウザーを使用してダウンロードするため、URL は CORS および CSP ポリシーで許可されている必要があります。Foundry 内でライブラリをホストしたい場合は、Blobster でホストして、クッキー認証付きの API を使用するか、アセットサーバーにスクリプトを配置します。このフィールドの変更は、ウィジェット全体のリロードと再読み込みを引き起こします（ライブラリ自体が SlateFunctions を呼び出すことができるため、Slate 固有の機能との相互作用が可能となります）。

例

d3.min.js ライブラリを使用するには、https://d3js.org/d3.v5.min.js からダウンロードして、Foundry ディレクトリにドラッグアンドドロップしてファイルを保存します。ファイルがアップロードされると、プロジェクトパスをコピーしてライブラリ配列に貼り付けます。

["/Users/admin/d3.min.js"]

リソースのプロジェクトパスは、ファイルのディレクトリを調べることで取得できます。また、フォルダー内のファイルを右クリックして、「場所」をコピーすることもできます。

HTML/CSS タブ

HTML

ウィジェットの読み込み時にレンダリングされる HTML の文字列です。

CSS

ウィジェットの読み込み時にレンダリングされる CSS の文字列です。

CSS ライブラリ

CSS ライブラリ機能を使用すると、CSS スタイル（例：Blueprint）を読み込んでカスタムウィジェットを作成できます。ウィジェットの HTML/CSS タブでアクセスできます。

CSS ライブラリは、Code Sandbox の JavaScript ライブラリと同様に機能します。CSS ライブラリは、ウィジェット内で順番にダウンロードしてレンダリングされるプロジェクトパスの配列を取得し、CORS と CSP ポリシーで許可された URL の配列（混在させることができます）でもあります。ブラウザーを使用してダウンロードするため、URL は CORS および CSP ポリシーで許可されている必要があります。Foundry 内で CSS ライブラリをホストしたい場合は、Blobster でホストして、クッキー認証付き API を使用するか、アセットサーバーにスクリプトを配置します。このフィールドの変更は、ウィジェット全体のリロードと再読み込みを引き起こします。

インタラクションタブ

これは、ウィジェットが Slate パラダイムと相互作用するためのコントロールです。Code Sandbox ウィジェットと Slate の残りの部分との間のすべての相互作用は、状態、イベント、アクションのいずれかを介して渡される必要があります。

状態

これは、ウィジェットの現在の設定を表す JSON ブロブです。これは、他のメタフィールドを許可するためにこのフィールドの下にネストされた、Slate の他のウィジェットが使用する状態と似ています。状態は、ウィジェット内部からまたは、状態に Handlebars を入れる通常の方法で変更できます。

ウィジェットから状態を変更するには、JavaScript 内で SlateFunctions.setState を使用します。ウィジェットに状態を渡す他の Slate 関数は、SlateFunctions.watch および SlateFunctions.getState です（以下の例を参照）。

イベント

これは、このウィジェットがトリガーできるイベントの名前の文字列の配列です。これらのトリガーは、以下で提供される関数を使用して、ウィジェット内の JavaScript から明示的に呼び出す必要があります。イベントは、イベントタブに表示される際に custom.{event_name} として名付けられます。イベント名は、triggerEvent パラメータに別途入力する必要はありません。

イベントをトリガーするには、JavaScript 内で SlateFunctions.triggerEvent(“event”) を使用します。以下の例を参照してください。

アクション

これは、このウィジェットが他のウィジェットからトリガーされるアクションの名前の文字列の配列です。ウィジェット内の JavaScript は、以下で提供される関数を使用して、アクションをリッスンする必要があります。アクションは、イベントタブに表示される際に custom.{action_name} として名付けられます。アクション名は、onAction パラメータに別途入力する必要はありません。

Slate コンテキストで作成されたアクションに対してウィジェットが応答するには、JavaScript 内で SlateFunctions.onAction(“action_name”,(value)=>{put JavaScript here}) を使用します。以下の例を参照してください。

Slate 関数

これらのネイティブ関数を使用して、Slate 固有の機能との相互作用ができます。これらの関数は、ウィジェット内で実行される JavaScript に公開されます。これらの関数を使用すると、イベント、アクション、および状態変更を使用して、残りの Slate アプリケーションとの相互作用ができます。

onAction

データの方向：Slate コンテキスト → ウィジェット

SlateFunctions.onAction を使用すると、ウィジェットでアクションが呼び出されたときにコールバックを登録できます。引数は、アクションの名前と、アクションが受信されたときに呼び出される関数です。関数は、アクションに伴って渡される「ボディ」を唯一の引数として呼び出されます。

次に、以下のインタラクションタブでアクションをリストする必要があります。

例

この例では、Slate Checkbox ウィジェットを使用して、クリック時に Code Sandbox ウィジェットが更新されます。

• Checkbox ウィジェットがクリックされると、イベントが Checkbox ウィジェットから発生します。
• Slate のイベントパネルでは、この Slate イベントが Code Sandbox ウィジェットでアクション（custom.checkbox）をトリガーするように登録されています。
• イベントパネルは、Code Sandbox ウィジェットのインタラクション Action ボックスでアクションが登録されているため、このアクションを検出できます。

JavaScript:

Copied!
1
2
3
4
5
6
7
8
9
// SlateFunctionsのonAction関数を使って、"checkbox"アクションを処理します
SlateFunctions.onAction("checkbox", (value) => {
    // div要素を作成し、checkbox変数に格納します
    var checkbox = document.createElement("div")
    // 作成したdiv要素にvalueを代入します
    checkbox.innerHTML = value;
    // 作成したdiv要素をbodyに追加します
    document.body.appendChild(checkbox);
});

インタラクション アクション:

Copied!
1
2
3
[
    "checkbox" // "チェックボックス"
]

新しいイベント-アクションペアが登録されました:

イベント: Slate_widget.selectedValues.changed

アクション: Code_Sandbox_widget.custom.checkbox

watch

データ方向: Slate コンテキスト → ウィジェット (連続的な監視)

SlateFunctions.watch は、AngularJS の監視と同様の方法で状態フィールドの変更を検出するのに役立つことを目的としています。SlateFunctions.watch は文字列と関数を引数として受け取ります。文字列で表される状態の一部が変更されると、提供された関数が新しい状態と古い状態を引数として呼び出されます。これはおそらく最も有用な関数で、Interaction タブに渡される Handlebars を使用してウィジェットにデータを渡す方法です (例: "First Argument": "{{handlebars}}").

例えば、状態が二つのフィールド - 高さと幅 - を持っていて、高さが変化したときに関数を呼び出したい場合、SlateFunctions.watch("height", <insert function here>) を呼び出します。初期文字列が空白の場合、関数は任意の状態変更に対して呼び出されます。

例

この例では、Slate の Input ウィジェットを使用して状態を Code Sandbox ウィジェットに渡し、それを表示します:

• Slate の Input ウィジェットは、データ出力としてテキスト状態を生成します {{w_widget2.text}}
• この状態は Code Sandbox ウィジェットの Interaction state ボックスに供給されたので、今では Code Sandbox ウィジェットで状態を使用できます。状態/データをウィジェットで使用するには、SlateFunctions.watch("State Name", (data) =>... を使用します。

JavaScript:

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// "div"要素を作成します
var el =  document.createElement("div")

// 作成した"div"要素に"id"属性を追加し、その値を"display"とします
el.id = "display"

// 作成した"div"要素をbody要素の子要素として追加します
document.body.appendChild(el);

// "Input State"という名前のSlateFunctionsを監視します。データが更新されると、この関数が呼び出されます
SlateFunctions.watch("Input State", (data) => {
    // 上で作成した"div"要素の内部HTMLを更新します。更新内容は、"Code Sandbox widget: "に、更新されたデータを連結したものです
    el.innerHTML = "Code Sandbox widget: " + data;
});

インタラクション アクション:

Copied!
1
2
3
{
  "Input State": "{{w_widget2.text}}" // 入力状態：w_widget2のテキスト
}

getState

データ方向: Slate コンテキスト → ウィジェット (連続的でない、1回限りの 'get')

この関数は、state フィールドによって最初に入力されるウィジェットの現在の状態を返します。

SlateFunctions.getState は、state フィールドによって最初に入力されるウィジェットの現在の状態である JSON オブジェクトを返します。オブジェクトの異なるプロパティ（つまり、異なる'状態'）にアクセスできます。

SlateFunctions.getState は、state フィールドの JSON オブジェクトを返し、オブジェクトの異なるプロパティ（つまり、異なる'状態'）にアクセスできます。

SlateFunctions.getState は、呼び出されたときに一度だけ状態を取得します。対照的に、SlateFunctions.watch は、状態フィールドの更新を常に "監視" します。この SlateFunctions.getState 関数を SlateFunctions.watch の中で使用して、完全な状態オブジェクトの特定の属性を取得できます。

例えば、状態が以下のような場合：

Copied!
1
2
3
4
{
  "a": "cat",  // 猫
  "b": "hat"   // 帽子
}

SlateFunctions.getState().aはcatを返します。

例

この例では、SlateのInputウィジェットを使用して、状態をCode Sandboxウィジェットに渡します。全体の状態は、getState関数を使用して呼び出されます（xに割り当てられます）。その後、この"全体の状態"オブジェクトの特定の属性が表示されます。この場合は"a"です。

JavaScript：

Copied!
1
2
3
4
5
6
7
8
9
10
// div要素を作成
var el =  document.createElement("div")
// 作成したdiv要素のidに"display"を設定
el.id = "display"
// 作成したdiv要素をbody要素の子要素として追加
document.body.appendChild(el);
// SlateFunctionsから状態を取得
var x = SlateFunctions.getState();
// 作成したdiv要素の中に、"Code Sandbox widget: "と状態の値aを表示
el.innerHTML = "Code Sandbox widget: " + x.a;

インタラクション・アクション:

Copied!
1
2
3
  "a": "{{w_widget2.text}}",  // w_widget2テキストの内容
  "b": "random_state"        // 乱数の状態
}

setState

データの方向：Widget → Slate コンテキスト

SlateFunctions.setStateは、Handlebars を使用してこのウィジェットの状態を参照する外部ウィジェットと、将来の getState 呼び出しの両方のウィジェットの状態を変更します。引数は2つあり、状態の変更を行う部分を表す文字列と、その部分の新しい値を表す JSON ブロブです。

例えば、ウィジェットのビューの高さを4に設定したいが、他のすべてのプロパティはそのままにしたい場合は、SlateFunctions.setState("view.height", 4)と呼び出します。全体の状態を上書きしたい（高さだけではない）場合は、最初の引数に"view.height"の代わりに""を渡すことができます。

例

この例では、Code Sandbox ウィジェットで生成されたボタンを使用して、Slate の "HTMLウィジェット" の状態を "初期ウィジェット状態" から "更新されたウィジェット状態" に更新します。

• ボタンがクリックされたときの Code Sandbox ウィジェットとのやり取りが SlateFunctions.setState をトリガーします。これにより、"outval" の状態が "初期ウィジェット状態" から "変更されたウィジェット状態" に更新されます。
• この更新された状態は、状態が Code Sandbox ウィジェットの Interaction "state" に登録されているため、Slate で検出することができます。

JavaScript:

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
// ボタン1を作成
var button1 =  document.createElement("button");
// ボタン1のテキストを設定
button1.innerHTML = "button1";

// ボタン1がクリックされたときの動作を設定
button1.onclick = () => {
    // SlateFunctionsを使って、ウィジェットの状態を更新
    SlateFunctions.setState("outval", "Updated widget state");
};

// ボタン1をページに追加
document.body.appendChild(button1);

インタラクション状態:

Copied!
1
2
3
{
  "outval": "Initial Widget State" // "outval": "初期ウィジェットの状態"
}

triggerEvent

データの方向：ウィジェット → Slate コンテキスト

SlateFunctions.triggerEvent はイベントをトリガーします。引数は2つあり、トリガーするイベントの名前とイベントの本文として渡されるメッセージです。

例

この例では、Code Sandbox ウィジェットがボタンのクリックによって操作されると、Slate Toast ウィジェットが Slate コンテキストで起動します。

• ボタンがクリックされると、関数 launchToast.onclick が実行され、これが SlateFunctions.triggerEvent をトリガーします。
• イベントが Code Sandbox ウィジェットから発生します。これは、このイベントが Code Sandbox ウィジェットの Interaction "event" にさらに登録されているためです。
• Slate のイベントパネルでは、この Code Sandbox ウィジェットイベントが Slate ウィジェット内のアクション (Slate_widget.open) をトリガーするように登録されています。

JavaScript

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
// "launchToast"という名前の新しいボタン要素を作成します
var launchToast =  document.createElement("button");
// ボタンのテキストを"launch toast"に設定します
launchToast.innerHTML = "launch toast";

// ボタンがクリックされた時の動作を定義します
launchToast.onclick = () => {
    // "toast"というイベントをトリガーします
    SlateFunctions.triggerEvent("toast");
};

// 作成したボタンをウェブページに追加します
document.body.appendChild(launchToast);

インタラクション イベント:

Copied!
1
2
3
[
  "toast" // これは単純なJSON配列で、一つの文字列"toast"を含んでいます。
]

新たなイベント登録：

イベント：Code_Sandbox_widget.custom.toast

アクション：Slate_widget.open

ロード順序

Code Sandbox ウィジェットは以下の順序でロードします：

1. Slate（ウィジェットを含む親フレームのコンテキスト）がロードされ、その後ウィジェットの iframe がロードされます。
2. Slate はウィジェットに "state" を送信します（詳細は下記の Interactions を参照）、その後に CSS、HTML、ライブラリ、JavaScript が続きます。
3. iframe は以下を受け取り設定します：
   • CSS と HTML が追加されます。
   • ライブラリが実行されます
   • JavaScript が実行されます
   • 適切な "SlateFunctions" がトリガーされます（入力）。
4. ユーザーがウィジェットフレームと対話します（state の更新、イベントのトリガー、アクションの作成など）。これらは、ウィジェットから親の Slate フレームに送信される "SlateFunctions" を変更または生成することができます。これらのウィジェットの出力は、Interactions（出力）として指定されている場合、Slate の他の部分で使用できます。

セキュリティ

このウィジェットのセキュリティモデルは、Slate の関数と非常に似ています。コードは、入力と出力が postMessage を使用して転送されるサンドボックス化された iframe 内で実行されます。これにより、信頼できない JavaScript コードを安全に実行できます。唯一の変更点は、iframe がページ上で可視化されていることで、セキュリティモデルに変更はありません。

デバッグのヒント

Chrome コンソールでは、デフォルトでトップに設定されているドロップダウンを選択し、codeSandboxIframe.html を選択できます。これにより、コンソールに入力した JavaScript がウィジェットの環境で実行されます。JavaScript フィールドへの変更がウィジェットのリロードを強制するため、ウィジェットの動作方法を把握しようとしているときに便利です。

サードパーティのコード

サードパーティのコードを使用するときは、以下の一般的なアプローチを推奨します：

• ライセンスを確認して、使用できることを確認します。
• 可能な限り少ない JavaScript のチャンクで例を見つけて、コードの複雑性を最小限に抑えます。
• JavaScript がライブラリを使用している場合、ソースから .js ファイルをダウンロードしてライブラリセクションにアップロードしたファイルの Foundry Project パスを入力します。また、URL を直接リンクし、CSP や CORS ポリシーと競合しないことを確認するためにテストします。
• HTML の <script> </script> タグ内のすべての JavaScript をリファクタリングし、JavaScript セクションに配置します。
• 対話のために Slate の関数を使用します：
  • 必要なデータを Slate からカスタム Code Sandbox に SlateFunctions.getState を使用して渡します。
  • ウィジェット内の対話を Slate の残りの部分に伝えるには、SlateFunctions.triggerEvent を関数にタグ付けできます。
  • ウィジェットが Slate の残りの部分から発生するアクションに対応するには、SlateFunctions.onAction を関数にタグ付けできます。

---

ファイルインポート

以下のテーブルは、File Import ウィジェットで利用可能なプロパティについての使用詳細を提供します。

プロパティ

---

Iframe

以下のテーブルは、iframe ウィジェットで利用可能なプロパティについての使用詳細を提供します。テーブルの後にはいくつかの例が続きます。

プロパティ

アクション

イベント