構成をビジュアル化する方法

ユーザー・インタフェースのエレメントを定義すると、構成セッション中に実行するアクションに応じて、オブジェクトがどのように視覚的に変化するかをエンドユーザーが視覚的に確認できます。

コンフィギュレータ・モデル内のオブジェクトを視覚化するには:

ビジュアライゼーション・モデルの設計
IFrame要素を追加して、モデル・ノードの変更を受信できるようにします
モデル・ノードの変更を外部ビジュアライゼーション・ツールに伝達

ビジュアライゼーション・モデルの設計

ビジュアライゼーションでは、外部の2Dまたは3Dビジュアライゼーション・ツールでモデルを指定する必要があります。このビジュアライゼーション・モデルは、エンド・ユーザーが構成している製品のコンフィギュレータ・モデルのすべてまたは一部に対応している必要があります。

ユーザーが製品を構成している間はコンフィグレータ・モデルの多くの部分が変更される可能性があるため、ビジュアライゼーションをサポートするために必要なモデル・ノード変更の範囲を決定することが重要です。ビジュアライゼーションでモデルのコンポーネントのみがサポートされている場合は、モデル・ノードの変更の範囲をそのコンポーネントのみに減らし、モデル全体には減らさないでください。

IFrame要素の追加および有効化によるモデル・ノード変更の受信

ビジュアライゼーションは、ユーザー・インタフェースのインライン・フレーム内で行われます。 IFrame基本UI要素を使用してインライン・フレームを作成します。デフォルトでは、インライン・フレームにはアクセス可能な内部または外部のwebサイトが表示されます。構成済オブジェクトをビジュアル化するには、IFrame要素でモデル・ノードの変更を受信できるようにします。

IFrame基本UI要素の追加の詳細は、ユーザー・インタフェースの変更に関する関連トピックを参照してください。ビジュアライゼーションを追加する場合、いくつかの特別な操作があります:

IFrame要素を追加するロケーションを選択します。現在選択されているページ要素の下に追加されます。
リソース・ペインの「UI要素」タブのリストから、IFrame要素を選択し、「ページに追加」をクリックします。
「IFrameの追加」ダイアログ・ボックスで、IFrameに関連付けられたモデル・ノードを選択します。ノードのスコープによって、IFrameに渡されるモデル・ノードの変更が制御されるため、慎重に選択してください。
「モデル・ノードの変更を受信」を選択します。
モデルに対する変更をIFrameに通信するスコープを選択: 関連付けられたモデル・ノードとサブツリーまたは関連モデル・ノード。
「内容」グループのURLフィールドに、統合する外部ビジュアライゼーション・サイトのURLおよびパラメータを入力します。たとえば:
```
https://myserver.com/viewer.html?scs=model_data/mountainbike_blue.scs
```
URLが現在のドメイン外にある場合は、Cross-Origin Resource Sharing (CORS)を使用する必要があります。
「内容」グループに他の必要なプロパティを入力します。

ヒント:

ユーザー・インタフェースに複数のUIページがある場合は、各ページにIFrameを追加して、エンド・ユーザーが構成セッション全体でビジュアル化されたオブジェクトをビューに保持できるようにすることができます。ユース・ケースに応じて、様々なUIページにモデルの異なるコンポーネントを表示するか、各ページにモデル全体を表示するかを決定できます。

IFrameに渡されるモデル・ノードの変更

エンド・ユーザーがIFrameの関連付けられたモデル・ノードまたはサブツリーの品目を選択するか、品目の値を入力すると、コンフィギュレータは特定の属性の値の変更を標準の名前/値ペアのJSONペイロードとしてIFrameに渡します。これらのモデル・ノード変更ペイロードがIFrameによって受信されると、IFrameのURLで識別される外部ビジュアライゼーション・ツールに値が渡されます。 IFrameからコンフィギュレータ・モデルに情報が戻されないことに注意してください。

これらの静的属性は、関連するすべてのモデル・ノードまたはサブツリー・ノードのIFrameに渡されます:

NodeType
DisplayNamePath
HasTransactionalAttributesFlag (製品情報管理作業領域からインポートされたノード・タイプの場合のみ)

ここに示すコード・フラグメントに示すように、IFrameに渡される属性と、そこから外部ビジュアライゼーション・ツールに渡される属性を知っておくと便利です。これらの属性は、コンフィギュレータ・モデル・ノードとビジュアライゼーション・モデル・ノードを照合するJavaScriptコードで使用できます。

NodeTypeは、IFrameに渡される動的属性を決定します:

NodeType	SelectionState	数量	InstanceCount	値
OPTION_CLASS_ITEM	Yes	Yes	No	No
STANDARD_ITEM	Yes	Yes	No	No
MODEL_ITEM	Yes	Yes	No	No
ROOT_MODEL_ITEM	Yes	Yes	No	No
COMPONENT_PORT	No	No	Yes	No

モデル・ノードの変更の外部ビジュアライゼーション・ツールへの伝達

コンフィギュレータは、名前と値のペアの標準JSONペイロードのモデル・ノード変更をIFrameに内部的に通信し、JavaScriptメソッドwindow.postMessage()を使用します。これらのペイロード・メッセージは、ビジュアライゼーションIFrameでモデル・ノードの変更を正しく表示するために、ビジュアライゼーション・ツールによって解釈される必要があります。

たとえば、自転車のコンフィギュレータ・モデルに、次の表示名を持つオプション区分と標準品目が含まれているとします:

Mechanical Options.Brakes
    Basic Alloy Bicycle Brake Set
    Dual Compound Side Pull Bicycle Brake Set
    Delux Cantilever Brake System

ビジュアライゼーション・ツール(IFrameのURLフィールドで指定した)で使用されるHTMLファイルでは、コンフィギュレータ・モデル・ノードの表示名と、構築したビジュアライゼーション・モデルの対応するノードに一致するように、次のJavaScript文を記述できます。次のサンプル・コードでは、構成セッションでエンド・ユーザーが一致するコンフィギュレータ・モデル・ノードを選択したときに、ビジュアライゼーション・モデルのノードの色を設定します。

...
if (displayNamePath.startsWith("Mechanical Options.Brakes")) {
     if (selectionState === "SELECTED") {
         if (displayNamePath.includes("Basic Alloy Bicycle Brake Set")) {
             var color = new Communicator.Color('255','255', '255');
             model.setNodesFaceColor([18, 19, 20, 21], color);
         } else if (displayNamePath.includes("Dual Compound Side Pull Bicycle Brake Set")) {
             var color = new Communicator.Color('100','100', '0');
             model.setNodesFaceColor([18, 19, 20, 21], color);
         } else if (displayNamePath.includes("Delux Cantilever Brake System")) {
             var color = new Communicator.Color('200','100', '100');
             model.setNodesFaceColor([18, 19, 20, 21], color);
         }                                     
     } else if (displayNamePath === "Mechanical Options.Brakes" && selectionState === "SELECTABLE") {
         model.unsetNodesFaceColor([18, 19, 20, 21]);
     }
 }
...