翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# ナレッジグラフシーンの統合
<a name="tm-knowledge-graph-scene"></a>

 AWS IoT アプリキットコンポーネントを使用して、ナレッジグラフを AWS IoT TwinMaker シーンに統合するウェブアプリケーションを構築できます。これにより、シーン内に存在する 3D ノード (機器またはシステムを表す 3D モデル) に基づいてグラフを生成できます。シーンから 3D ノードをグラフ化するアプリケーションを作成するには、まず 3D ノードをワークスペース内のエンティティにバインドします。このマッピングでは、 はシーンに存在する 3D モデルとワークスペース内のエンティティとの関係を AWS IoT TwinMaker グラフ化します。その後、ウェブアプリケーションを作成し、シーンで 3D モデルを選択し、グラフ形式で他のエンティティとの関係を調べることができます。

![\[3D モデル間の関係を示すナレッジグラフを含む TwinMaker シーン。\]](http://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/images/intro_kg_scene.png)


 AWS IoT アプリケーションキットコンポーネントを使用して AWS IoT TwinMaker シーンでグラフを生成する動作中のウェブアプリケーションの例については、github [AWS IoT TwinMaker のサンプル反応アプリケーション](https://github.com/awslabs/iot-app-kit/blob/3DKG_Demo/examples/react-app/src/components/index.tsx)を参照してください。

## AWS IoT TwinMaker シーングラフの前提条件
<a name="tm-knowledge-graph-prereqs"></a>

シーンで AWS IoT TwinMaker ナレッジグラフを使用するウェブアプリを作成する前に、次の前提条件を完了してください。
+  AWS IoT TwinMaker ワークスペースを作成します。ワークスペースは、[AWS IoT TwinMaker コンソール](https://console.aws.amazon.com/iottwinmaker/)で作成できます。
+  AWS IoT TwinMakerのエンティティコンポーネントシステムおよびエンティティの作成方法を理解します。詳細については、「[最初のエンティティを作成する](twinmaker-gs-entity.md)」を参照してください。
+ 3D モデルが入力された AWS IoT TwinMaker シーンを作成します。
+  AWS IoT TwinMakerの AWS IoT アプリキットコンポーネントに精通してください。 AWS IoT TwinMaker コンポーネントの詳細については、「」を参照してください[AWS IoT TwinMaker UI コンポーネントを使用してカスタマイズされたウェブアプリケーションを作成する](tm-app-kit.md)。
+ ナレッジグラフの概念と主要な用語に精通します。「[AWS IoT TwinMaker ナレッジグラフの主な概念](tm-knowledge-graph.md#tm-knowledge-graph-concepts)」を参照してください。

**注記**  
 AWS IoT TwinMaker ナレッジグラフと関連する機能を使用するには、**標準**または**階層バンドル**の料金モードのいずれかである必要があります。 AWS IoT TwinMaker 料金の詳細については、「」を参照してください[AWS IoT TwinMaker 価格設定モードの切り替え](tm-pricing-mode.md)。

## シーンで 3D ノードをバインドする
<a name="tm-knowledge-graph-scene-data-binidng"></a>

ナレッジグラフをシーンと統合するウェブアプリを作成する前に、シーンに存在する 3D ノードと呼ばれる 3D モデルを関連するワークスペースエンティティにバインドします。たとえば、シーンにミキサー機器のモデルがあり、 という対応するエンティティがある場合は`mixer_0`、ミキサーのモデルとミキサーを表すエンティティの間に**データバイン**ディングを作成し、モデルとエンティティをグラフ化できるようにします。

**データバインディングアクションを実行するには**

1. [AWS IoT TwinMaker コンソール](https://console.aws.amazon.com/iottwinmaker/)にログインします。

1. ワークスペースを開き、バインドしたい 3D ノードを含むシーンを選択します。

1. シーンコンポーザーでノード (3D モデル) を選択します。ノードを選択すると、画面の右側にインスペクターパネルが開きます。

1. インスペクターパネルで、パネルの上部に移動し、**\$1** ボタンを選択します。次に、**エンティティバインディングの追加**オプションを選択します。これによりドロップダウンが開き、現在選択されているノードにバインドするエンティティを選択できます。  
![\[Inspector パネルでプラス記号が選択され、エンティティバインディングを追加が強調表示されたシーン。\]](http://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/images/binding-step-4.png)

1. データバインディングドロップダウンメニューから、3D モデルにマッピングするエンティティ ID を選択します。**コンポーネント名**フィールドと**プロパティ名**フィールドで、バインドするコンポーネントとプロパティを選択します。  
![\[Inspector パネルでコンポーネント名とプロパティ名が選択されたシーン。\]](http://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/images/binding-step-6.png)

   **[エンティティ ID]**、**[コンポーネント名]**、**[プロパティ名]** の各フィールドを選択したら、バインドは完了です。

1. グラフ化したいすべてのモデルとエンティティに対してこのプロセスを繰り返します。
**注記**  
シーンタグでも同じデータバインディング操作を実行できます。エンティティの代わりにタグを選択し、同じ手順でタグをノードにバインドします。

## ウェブアプリケーションを作成
<a name="tm-knowledge-graph-scene-application"></a>

エンティティをバインドしたら、 AWS IoT アプリキットライブラリを使用して、シーンを表示し、シーンノードとエンティティ間の関係を調べることができるナレッジグラフウィジェットを持つウェブアプリを構築します。

以下のリソースを使用して独自のアプリを作成します。
+  AWS IoT TwinMaker サンプル react app github [ Readme](https://github.com/awslabs/iot-app-kit/blob/3DKG_Demo/examples/react-app/README.md) ドキュメント。
+ github のサンプル AWS IoT TwinMaker 反応アプリケーション[ソース](https://github.com/awslabs/iot-app-kit/blob/3DKG_Demo/examples/react-app/src/components/index.tsx)。
+  AWS IoT アプリキット[入門](https://awslabs.github.io/iot-app-kit/?path=/docs/overview-getting-started--docs)ドキュメント。
+  AWS IoT アプリキット [ Video Player コンポーネントの](https://awslabs.github.io/iot-app-kit/?path=/docs/components-videoplayer--docs)ドキュメント。
+  AWS IoT アプリケーションキット [Scene Viewer コンポーネントの](https://awslabs.github.io/iot-app-kit/?path=/docs/components-sceneviewer--docs)ドキュメント。

次の手順は、ウェブアプリのシーンビューワーコンポーネントの機能を示しています。

**注記**  
この手順は、 AWS IoT TwinMaker サンプル反応 AWS IoT アプリでのアプリキットシーンビューワーコンポーネントの実装に基づいています。

1.  AWS IoT TwinMaker サンプル反応アプリケーションのシーンビューワーコンポーネントを開きます。検索フィールドにエンティティ名または部分的なエンティティ名 (大文字と小文字を区別する検索) を入力し、**検索**ボタンを選択します。モデルがエンティティ ID にバインドされている場合、シーン内のモデルが強調表示され、エンティティのノードがシーンビューワーパネルに表示されます。  
![\[ナレッジグラフのシーンビューワーパネルが表示されたシーン。\]](http://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/images/search_select_kg_event.png)

1. すべての関係のグラフを生成するには、シーンビューワーウィジェットでノードを選択し、**Explore** ボタンを選択します。  
![\[関係のグラフを表示するナレッジグラフシーンビューワーパネルを持つシーン。\]](http://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/images/explore_select_kg.png)

1. **クリア**ボタンを押して現在のグラフ選択をクリアし、最初からやり直します。