高度なウィジェット

高度なウィジェットのカテゴリーには、次のウィジェットがあります。

• Code Sandbox
• ファイルインポート
• Iframe

Code Sandbox

Code Sandbox ウィジェットは、Slate の機能を拡張する独自のカスタムウィジェットを実装するための安全なサンドボックスです。独自のカスタム可視化の作成、サードパーティーの JavaScript ライブラリーの活用、高度なワークフローのインタラクションの作成ができます。レンダリング、ウィジェットモデル、イベントのインタラクションを定義して、ウィジェットをアプリケーションのほかの部分と連携させることができます。外部の JavaScript ライブラリーをプロジェクト内のフォルダーに読み込み、ウィジェットから参照できます。

インタラクションの概要

Slate とのインタラクションおよび利用可能な関数の概要を以下に示します。

JavaScript タブ

このタブには、JavaScript と、読み込みたい JavaScript ライブラリーを指定するフィールドがあります。

JavaScript

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

JavaScript フィールドでは Handlebars を使用しないでください。JavaScript タブで SlateFunctions を使用してデータを渡し、インタラクションタブの状態とやり取りすることを推奨します。

利用可能な関数

次のネイティブ関数を呼び出して、Slate 固有の機能とやり取りできます。これらの関数を使用すると、イベント、アクション、状態の変更を通じて、Slate アプリケーションのほかの部分とやり取りできます。これらの関数は、ウィジェット内で実行される JavaScript に公開されます。詳細情報と例を以下に示します。

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

JavaScript ライブラリー

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

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

例

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

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

代わりに、リソースの RID を使用することもできます。例：

["ri.blobster.main.code.7a4a12a8-e9f5-46ef-8008-5c3f4bbd4abc"]

リソースのプロジェクトパスまたは RID は、そのファイルのディレクトリーで確認できます。または、フォルダー内でファイルを1回右クリックし、場所または RID をコピーすることもできます。

HTML/CSS タブ

HTML

ウィジェットの読み込み時に表示される HTML の文字列です。

CSS

ウィジェットの読み込み時に適用される CSS の文字列です。

CSS ライブラリー

CSS ライブラリー機能を使用すると、CSS を読み込み、CSS スタイル（Blueprint など）を使ってカスタムウィジェットを作成できます。この機能には、ウィジェットの HTML/CSS タブからアクセスできます。

CSS ライブラリーは、Code Sandbox の JavaScript ライブラリーと同じように機能します。CSS ライブラリーには、ダウンロード後にウィジェット内で順番に適用されるプロジェクトパスの配列、または CORS と CSP の両方のポリシーで許可された URL の配列を指定します（両者を混在させることもできます）。ダウンロードにはブラウザーを使用するため、URL は CORS と CSP のポリシーで許可されている必要があります。Foundry 内で CSS ライブラリーをホストする場合は、Blobster でホストして Cookie 認証の 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 ウィジェットのインタラクションのアクションボックスに登録されているため、イベントパネルで検出できます。

JavaScript:

Copied!
1
2
3
4
5
SlateFunctions.onAction("checkbox", (value) => {
    var checkbox = document.createElement("div")
    checkbox.innerHTML = value;
    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 は、文字列と関数を引数として受け取ります。文字列が表す状態の部分が変更されると、指定した関数が新しい状態と以前の状態を引数として呼び出されます。これは最も便利な関数かもしれません。インタラクションタブに渡した Handlebars（例："First Argument": "{{handlebars}}"）を使用して、ウィジェットにデータを渡せます。

たとえば、状態に height と width の2個のフィールドがあり、height が変更されたときに関数を呼び出したい場合は、SlateFunctions.watch("height", <insert function here>) を呼び出します。最初の文字列が空の場合、状態が変更されるたびに関数が呼び出されます。

例

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

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

JavaScript:

Copied!
1
2
3
4
5
6
7
var el =  document.createElement("div")
el.id = "display"
document.body.appendChild(el);

SlateFunctions.watch("Input State", (data) => {
    el.innerHTML = "Code Sandbox widget: " + data;
});

インタラクションのアクション：

Copied!
1
2
3
{
  "Input State": "{{w_widget2.text}}"
}

getState

データの方向：Slate コンテキスト → ウィジェット（継続的ではなく、1回限りの 「取得」）

この関数は、状態フィールドによって初期設定されたウィジェットの現在の状態を返します。

SlateFunctions.getState は、状態フィールドによって初期設定されたウィジェットの現在の状態を JSON オブジェクトとして返します。オブジェクトのさまざまなプロパティ（つまり、さまざまな「状態」）にアクセスできます。

SlateFunctions.getState は、状態フィールドを JSON オブジェクトとして返します。このオブジェクトのさまざまなプロパティ（つまり、さまざまな「状態」）にアクセスできます。

SlateFunctions.getState は、呼び出されたときにのみ状態を取得します。一方、SlateFunctions.watch は状態フィールドの更新を常に「監視」します。SlateFunctions.watch 内でこの SlateFunctions.getState 関数を使用すると、状態オブジェクト全体の特定の属性を取得できます。

たとえば、状態が次の場合です。

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
var el =  document.createElement("div")
el.id = "display"
document.body.appendChild(el);
var x = SlateFunctions.getState();
el.innerHTML = "Code Sandbox widget: " + x.a;

インタラクションのアクション：

Copied!
1
2
3
  "a": "{{w_widget2.text}}",
  "b": "random_state"
}

setState

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

SlateFunctions.setState は、Handlebars を使用してこのウィジェットの状態を参照する外部ウィジェットと、今後の getState 呼び出しの両方に対して、ウィジェットの状態を変更します。引数は2個あり、変更する状態の部分を表す文字列と、その部分の新しい値を表す JSON データです。

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

例

この例では、Code Sandbox ウィジェットで生成したボタンを使用して、Slate の「HTML ウィジェット」の状態を「Initial widget state」から「Updated widget state」に更新します。

• ボタンをクリックしたときの Code Sandbox ウィジェットとのインタラクションによって、SlateFunctions.setState がトリガーされます。これにより、「outval」の状態が「Initial widget state」から「Changed widget state」に更新されます。
• この状態は Code Sandbox ウィジェットのインタラクションの「状態」に登録されているため、更新された状態を Slate で検出できます。

JavaScript:

Copied!
1
2
3
4
5
6
7
8
var button1 =  document.createElement("button");
button1.innerHTML = "button1";

button1.onclick = () => {
    SlateFunctions.setState("outval", "Updated widget state");
};

document.body.appendChild(button1);

インタラクションの状態：

Copied!
1
2
3
{
  "outval": "Initial Widget State"
}

triggerEvent

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

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

例

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

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

JavaScript

Copied!
1
2
3
4
5
6
7
8
var launchToast =  document.createElement("button");
launchToast.innerHTML = "launch toast";

launchToast.onclick = () => {
    SlateFunctions.triggerEvent("toast");
};

document.body.appendChild(launchToast);

インタラクションのイベント：

Copied!
1
2
3
[
  "toast"
]

登録された新しいイベント：

イベント: Code_Sandbox_widget.custom.toast

アクション: Slate_widget.open

読み込み順序

Code Sandbox ウィジェットは、次の順序で読み込まれます。

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

セキュリティ

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

デバッグのヒント

Chrome コンソールでは、デフォルトが top のドロップダウンから codeSandboxIframe.html を選択できます。これにより、コンソールに入力した JavaScript がウィジェットの環境で実行されます。 JavaScript フィールドを変更するとウィジェットが強制的に 再読み込みされるため、ウィジェットを動作させる方法を 調べる際に役立ちます。

サードパーティーのコード

サードパーティーのコードを使用する際は、次の一般的な方法に従うことを推奨します。

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

---

ファイルインポート

ファイルインポートウィジェットを使用すると、ユーザーはファイルをアップロードし、Slate アプリケーションで参照および処理できます。これにより、アプリケーションはファイルベースのデータや機能を Slate 内に直接取り込めます。

プロパティ

---

Iframe

次のテーブルは、iframe ウィジェットで利用可能なプロパティの使用方法を詳しく説明しています。テーブルの後にいくつかの例を示します。

プロパティ

操作

イベント