Iframe

iframe ウィジェットは、Workshop内に外部のフルページアプリケーションを埋め込むことができるようにし、ビルダーにモジュールにカスタムビューを追加する方法を提供します。

iframesは追加のメモリと処理リソースを必要とするため、Workshopモジュールの安定性とパフォーマンスに影響を与える可能性があります。画面に複数の iframe ウィジェットを埋め込まないことをお勧めします。

設定オプション

iframeウィジェットは、Web URL または Slate を入力としてサポートします。以下のセクションでSlate入力オプションについて詳しく説明します。

URL

アプリケーションのURLを静的な文字列または文字列変数として入力します。

Slate

Slate設定オプションは、SlateアプリケーションをWorkshopモジュールに埋め込むことができます。パラメーターを使用して、埋め込まれたSlateアプリケーションとWorkshopモジュールが相互にやり取りできるようになります。

以下のセクションでは、iframeウィジェットでSlateアプリケーションを埋め込む方法について詳しく説明します。

Slateソース

Slateソースは、モジュール内の埋め込みSlateを参照する方法を定義します。Compass参照またはPermalinkをSlateソースとして選択することができます。

• Compass参照: Foundryリソースセレクタを使用して埋め込むSlateアプリケーションを選択できます。
• Permalink: 埋め込むSlateアプリケーションのパーマリンクまたはRIDを入力して選択します。Slate RIDは、URL内で見つけることができます: /workspace/slate/documents/\<slate-permalink>/latest。

URLパラメーター

URLパラメーターは、Slate URLに追加され、Slate内で変数を設定するために使用されます。URLパラメーターを変更するとページ全体がリロードされるため、変更する必要がほとんどない変数に対してのみURLパラメーターを使用することをお勧めします。SlateでURLパラメーターを参照するには、URLパラメーターと同じ名前の変数を設定し、ハンドルバーを使って参照します: {{username}}。

例: ユーザー名とIDに基づいて、埋め込まれたSlateアプリケーションの見た目を変更する。

入力パラメーター

入力パラメーターは、Workshopモジュールから埋め込まれたSlateアプリケーションに渡されます。入力パラメーターは、キーと値タイプによって定義されます。静的な文字列、文字列変数、数値、オブジェクトセットを埋め込まれたSlateアプリケーションに渡すことができます。

Slateアプリケーション内で、イベントパネルのSlate.getMessageイベントと以下のコード例を参照して、Workshopモジュールから情報を取得することができます。parameter_keyは、Workshop内のiframeウィジェットで定義したキーと一致する必要があります。

Copied!
1
2
3
4
5
// "payload"という名前の定数を定義します。その値は{{slEventValue}}です
const payload = {{slEventValue}}

// payloadの中から"<parameter_key>"というキーを持つ値を返します
return payload["<parameter_key>"]

例: 埋め込まれた Slate アプリケーションの表示を調整するために、Workshop のフィルターを設定します。

const payload = {{slEventValue}}
// ペイロードから "flight-alerts" を返す
return payload["flight-alerts"]

出力パラメーター

出力パラメーターは、Slateの埋め込みからWorkshopモジュールに渡されます。出力パラメーターは、そのキーと値のタイプによって定義されます。オブジェクトセット、オブジェクトセットフィルター、および文字列変数をWorkshopモジュールに渡すことができます。ユーザーのWorkshopモジュール内で、パラメーターにWorkshop変数を割り当てることで、ユーザーのSlateアプリケーションから情報を取得できます。ユーザーのSlateアプリケーション内では、下記のコードスニペットとSlate.sendMessageイベントを使用して情報転送を開始する必要があります。コード内のパラメーターキーは、ユーザーのWorkshopウィジェットで定義したキーと一致する必要があります。

return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",
    outputParameterKey: "<parameter_key>",
    value: {{<data_to_be_sent>}} // 送信するデータ
}

**例：**埋め込まれた Slate アプリケーションの選択状態を使用して、Workshop のフィルター処理するセット状態を変更します。

return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",  // アクションタイプを設定します
    outputParameterKey: "selected-objects",  // 出力パラメータのキーを設定します
    value: {{f_selection}}  // 値を設定します
}

トリガー可能なイベント

Slateからは、任意の Workshopイベント をトリガーできます。トリガー可能なイベントは、そのキーとイベントタイプによって定義されます。オーバーレイを開く、変数をリセットするなど、さまざまなイベントをトリガーすることができます。

ワークショップモジュール内で、トリガーしたい event_key とイベントを定義します。Slateアプリケーション内では、Eventsパネルと以下のコードスニペットを参考に Slate.sendMessage イベントを使用します。 event_key はiframeウィジェットで定義されたキーと一致しなければなりません。

return {
    type: "WORKSHOP//TRIGGER_WORKSHOP_EVENT",
    eventKey: "<event_key>",
    // タイプ: "ワークショップ//ワークショップイベントをトリガーする"
    // イベントキー: "<イベントキー>"
}

例: Slate からのボタンクリックで、Workshop の折りたたみ可能なセクションを切り替える。

Copied!
1
2
3
4
5
6
return {
    // "type"はアクションの種類を示します。"WORKSHOP//TRIGGER_WORKSHOP_EVENT"はワークショップイベントをトリガーするアクションを意味します。
    type: "WORKSHOP//TRIGGER_WORKSHOP_EVENT",
    // "eventKey"はトリガーするイベントを識別するためのキーです。"<event_key>"はプレースホルダーで、具体的なイベントキーに置き換える必要があります。
    eventKey: "<event_key>",
}