CPQと可視化ツールの統合

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：4分

    • CPQ がサードパーティのビジュアライゼーションエンジン (CDS、kBridge、Threekit) に接続して、構成入力にリアルタイムで応答する 2D/3D 製品ビューをレンダリングする方法について説明します。

    次の操作を実行できます。
    • ユーザーが設定するとライブビジュアルを表示:色、寸法、オプション、およびバンドルは、ビューアを即座に更新できます。
    • 座標 UI + 表示状況:レンダラーにフィールド値を公開し、行を設定し、選択した製品をレンダリングします。
    • (オプション)ビューアーからの書き戻し:サポートされているベンダーの場合、キャンバスのユーザーアクションでフィールドを更新できます。

    サポートされているベンダーの概要

    表 : 1. ベンダーのリスト
    ベンダー 方向 送信できる内容 書き戻せる内容 メモ
    CDS 1 方向および 2 方向 フィールド、セット (最初の 25 行)、製品ピッカー (最初の 25 行)、アクティブセットインデックス フィールド;リスナーフィールド JSON + ルール解析を介して設定します CAD / 2D / 3Dに適しています。柔軟なマッピングオブジェクト
    kブリッジ 1 方向および 2 方向 フィールド、セット (最初の 25 行)、製品ピッカー (最初の 25 行)、アクティブセットインデックス フィールド;リスナーフィールド JSON + ルール解析を介して設定します リッチイベント&リスナーモデルによるリアルタイム3D
    スリーキット 1 方向 フィールド、資産 ID (静的またはフィールド経由)、アクティブセットインデックス (視覚的なフォーカスのみ) サポート対象外 (ビューアー → Logik) 忠実度の高いビジュアルに使用します。フィールドと資産の選択をマッピング
    注:
    セットまたは製品ピッカーを送信する場合、 CPQ は最大 25 行/オプションを公開します。25 を超えるインデックスとオプションは送信されません。セットリピーターを使用する場合は、[アクティブセットインデックス] トリガーを公開して、ユーザーが編集中の行をビューアーに表示できます。

    統合の仕組み

    1. 詳細計画のレイアウトコンポーネントは、可視化パネルの位置とサイズを定義します。
    2. 接続設定により、トラフィック (スクリプトまたはアプリの URL、認証トークン、サブドメインなど) が許可され、ルーティングされます。
    3. マッピングブロックは、送信する CPQ データを選択します。
      • eventFields - フィールド変数名とそのビューアーキー
      • eventSets — 変数名を設定します (最初の 25 行はオブジェクトの配列として公開されます)
      • eventProductPickers — オブジェクトの配列として選択されたオプション (最初の 25 個)
      • setActiveTriggers :セットリピーター内のアクティブなインデックスを示すブールフィールド
    4. (双方向のみ)リスナーフィールド (CPQ テキストフィールド) は、ビューアーから JSON を受信します。
      • その JSON を解析し、フィールドを更新するか、行を設定するための決定ルール (または拡張) を追加します。
      • リスナーフィールドが存在する場合、双方向用に明示的に構成されたマッピングのみが書き戻されます。

    可視化ツールのサポートされている機能とサポートされていない機能を示す表形式。

    交換されるデータ

    • フィールド:スカラー値 (テキスト、数値、ブーリアン、選択リスト選択)。
    • セット:行オブジェクトのアレイ (最初の 25 個)。アクティブセットインデックスを使用して、リピーターで編集中の行とビジュアルの同期を維持します。
    • 製品ピッカー:選択したオプションオブジェクトのアレイ (最初の 25 個)。
    • 資産 (Threekit):Logik に静的 assetId または asset-ID フィールドを指定して、資産を動的に選択できるようにします。

    セキュリティと環境

    • 認証と作成元:本番と非本番に適したベンダートークンと URL を使用します。CPQ ランタイムクライアントのオリジンが呼び出し元ドメインと一致していることを確認します。
    • CSP (コンテンツセキュリティポリシー):埋め込みとメッセージングにベンダースクリプトまたはアプリホストを許可します。セキュリティチームおよび CPQ サポートと連携してドメインを追加します。
    • 関心事の分離:ベンダーの認証情報とトークンを環境間で共有レイアウトから除外します。昇格時にトークンをスワップします。

    ツールを選択するタイミング

    • キャンバスで双方向編集が必要な場合は、kBridge または CDS を選択し、リスナーフィールドと解析ルールを実装します。
    • 資産管理と一方向の更新を備えた忠実度の高い 3D が必要な場合は、assetId または assetId フィールド戦略を備えた Threekit を選択します。
    • セット駆動型 UX が重い場合は、双方向セット JSON 処理とアクティブ セット インデックスの同期に CDS または kBridge をお勧めします。

    一般的なガイドライン

    • 必要なもののみをマップする: eventFields、 eventSets、 eventProductPickers をパフォーマンスのために不可欠なデータに制限します。
    • 25 アイテムの上限に合わせた設計:ユーザーが 25 セット行または製品ピッカーの選択数を超える可能性がある場合は、ガードレール (検証、ページング、要約など) を追加します。
    • 双方向の正規化:リスナーペイロードの安定した JSON スキーマを定義し、解析ロジックを管理ルールまたは拡張に一元化します。
    • 安全に昇格:トークンや URL などの環境固有の値を外部化します。本番プロモーションの前に、テストでビジュアルを確認します。
    • 体系的なトラブルシューティング:
      • アドミンログでランタイムエラーまたはスクリプトエラーを確認します。
      • ベンダードメインへの CSP とネットワークアクセスを確認します。
      • ビューアーのコンソール/開発ツールを使用し、デバッガー入力を CPQ して状況を再現します。