AWS IoT TwinMakerとAmazon Managed Grafanaでフロアマップを作成してみた

## はじめに
こんにちは！新卒1年目が展示会に使用するフロアマップを作成した内容を備忘録として残しておきたいと思います。この記事を通して、「こんな感じで取り組んだんだな〜」と温かい目で読んでいただけると嬉しいです☺️

今回は2Dのフロアマップを3Dに変換し、AWS IoT SiteWiseはデモのAWS IoT TwinMakerと同期してAmazon Managed Grafanaでフロアマップのオブジェクトの状態を表示する仕組みになります！


## PDFファイルをSVGファイルに変換
まずはじめにフロアマップが書かれたPDFファイルがあり、後のTwinMakerにアップロードするため、SVGファイルに変換したいと思います。
今回は[pdf2svg](https://formulae.brew.sh/formula/pdf2svg)というツールを使いました。
使い方としては、対象のPDFファイルと出力先のSVGファイルを以下のように指定します。
※MacBookのターミナル

```
pdf2svg <input.pdf> <output.svg>
```
ダウンロードしてない方はこちらから↓
https://cityinthesky.co.uk/opensource/pdf2svg/

## inkscape
inkscapeでは先ほどダウンロードしたsvgファイルを編集できます。
inkscapeは高機能なベクターグラフィックエディタで、ロゴデザイン、イラスト、図の作成など、幅広い用途で編集・作成ができます。


今回はこのような形でフロアマップのテキスト削除と背景を追加しました。
![スクリーンショット 2024-12-09 16.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/71c57767-f69c-8185-5ad1-36f06b199e13.png)

## Blender
inkscapeで編集したsvgファイルをBlenderのファイル→インポート→Scalable Vector Graphics(.svg)でインポートしたいsvgファイルを選択します。
Blenderは3Dモデルの作成、アニメーション、動画編集など、3DCG制作に必要な機能が総合的に備わっているツールです。

今回はBlenderで2Dのフロアマップを3Dにしたいと思います！

### 手順
* 各小間に高さをつけるため、オブジェクトを選んだら右の「レンチ/スパナのマーク」→「モディファイアーを追加」→「生成」「→ソリッド化」の順に選択（幅を変えることで高さを調節できます。）
![スクリーンショット 2024-12-09 17.44.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/15d9e44c-e320-d31c-700a-bf4482e358cc.png)

* オブジェクト全体を選択し、「変換」→「メッシュ」（以下のように逆三角マークになっていばOK）
![スクリーンショット 2024-12-09 18.15.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/9bb0c8bd-92f5-332c-9256-f7d4818a23f7.png)
![スクリーンショット 2024-12-09 18.17.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/6c0b4749-de08-f6b9-bf6e-936d40dab447.png)


* 完成したフロアマップをglTF2.0(.glb/.gltf)にエクスポート
![スクリーンショット 2024-12-09 18.19.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/e63733bb-9fde-d1eb-dc5a-6a348edd21ec.png)

## Amazon Managed Grafanaのワークスペースを作成
Grafanaのワークスペースを作成します！
### 手順
* ワークスペース名を設定をし次へ
![スクリーンショット 2024-12-10 14.50.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/dbd5edb6-f634-2573-7b26-1f8592435d95.png)

* 認証アクセスで少なくとも１つの認証方法を設定
* アクセス許可タイプはサービスマネージド
* 以下のオプションはそのままで次へ
![スクリーンショット 2024-12-10 14.50.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/29790c1a-34d5-dbdb-ac60-d6013238f4e8.png)

* IAM アクセス許可アクセス設定では、オプションのデータソースと通知チャネルで「AWS IoT SiteWise」にチェックを入れ、次へ
![スクリーンショット 2024-12-10 14.51.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/3eb22d97-f6f6-daeb-efa3-ffd843a5b687.png)

* 設定内容を確認したらワークスペースを作成


✨完成✨

## AWS IoT TwinMakerのワークスペースを作成
Twinmakerのワークスペースを作成します！
### 手順
* Twinmakerのワークスペースを新規で作成しS3バケットやIAMロールは、自動生成でOK！
※Grafana v10のTwinmakerプラグインは東京リージョン対応していないようなので今回はバージニアでワークスペースを作成しました。
![スクリーンショット 2024-12-09 18.26.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/fccd41cd-6345-4bc0-a991-569d390a8c45.png)

* Grafanaの認証プロパイダーではGrafanaのワークスペースを作成したときに自動的に生成されたGrafanaサービスロールを選択
![スクリーンショット 2024-12-10 15.36.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/7ec76ae2-a888-6c3a-c1ff-ac83a6c0c7ae.png)

* ダッシュボードポリシーを作成するで動画の許可なし
![スクリーンショット 2024-12-10 16.52.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/84f466ed-bc44-c94f-4242-68fe0ae31489.png)

* IAMでポリシーを作成をクリック→「新しいウィンドウでIAMに移動」→「JSONタブで許可ポリシーテンプレートをコピーする」→「IAMポリシー名は、Advent-Calendar2024DashboardRole」でポリシーを作成
![スクリーンショット 2024-12-10 15.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/8c9e4901-3844-4484-5a47-341b302d2a5d.png)

以下テンプレート↓
この IAM ポリシーは、特定の S3 バケットおよび AWS IoT TwinMaker のリソースに対して、読み取りおよびクエリ実行に関連するアクションを許可しています。
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::twinmaker-workspace-advent-calendar2024-XXXXXXXXXXXX-iad",
                "arn:aws:s3:::twinmaker-workspace-advent-calendar2024-XXXXXXXXXXXX-iad/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "iottwinmaker:Get*",
                "iottwinmaker:List*",
                "iottwinmaker:ExecuteQuery"
            ],
            "Resource": [
                "arn:aws:iottwinmaker:us-east-1:XXXXXXXXXXXX:workspace/Advent-Calendar2024",
                "arn:aws:iottwinmaker:us-east-1:XXXXXXXXXXXX:workspace/Advent-Calendar2024/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "iottwinmaker:ListWorkspaces",
                "iottwinmaker:GetWorkspace"
        
            ],
            "Resource": "*"
        }
    ]
}
```
※後で設定するGrafanaのデーターソース設定の際に
**iottwinmaker:GetWorkspace**が許可されてないというエラーが出たため、テンプレートに追加しています。

* Twinmakerに戻りダッシュボードロールを作成するため、「ダッシュボードロールポリシーの更新のコードをコピー」→「ダッシュボードロールを作成する」でIAMでダッシュボードロールを作成する
![スクリーンショット 2024-12-10 17.29.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/b0d026a8-0edf-1976-f2b2-fbb4e4cbbd22.png)
![スクリーンショット 2024-12-10 17.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/11d9a476-f3df-2a6a-2c60-5fb4e95ab68e.png)

* 新しいウィンドウの信頼されたエンティティタイプで「カスタム信頼ポリシー」を選択→「カスタム信頼ポリシー」に先ほどコピーしたコードを貼り次へ→「許可ポリシー」で作成したポリシーにチェックを入れ次へ→ロール名はAdvent-Calendar2024DashboardRoleでロールを作成

![スクリーンショット 2024-12-10 15.53.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/2730d7f1-525c-6ec5-8dc0-b99eb751d446.png)
![スクリーンショット 2024-12-10 15.55.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/92f5acc0-8c54-574c-1e30-bbad1981a9bf.png)

* ダッシュボードロールを作成するのダッシュボードは作成したAdvent-Calendar2024DashboardRoleを選択
![スクリーンショット 2024-12-10 15.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/6e52181e-b48b-bf66-c8ba-6d669792d324.png)

* 設定内容を確認したらワークスペースを作成

✨完成✨

## AWS IoT SiteWiseの設定
### 手順
* Sitewiseの左側のメニューから「ビルド」→「モデル」→アセットモデルを作成→モデルの詳細では名前を入力
* 定義では、以下のように属性を新しく追加→モデルの作成
![スクリーンショット 2024-12-11 12.51.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/8d50a959-a1f0-fd75-b688-c90d681a3ee0.png)

* 次はアセットにいき、「アセットの作成」→モデル情報ではモデルの「名前」を入力→アセットの情報でも「名前」を入力→アセットの作成
![スクリーンショット 2024-12-11 12.51.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/8180b0c1-abee-9a29-e391-d2f34819ac12.png)

✨完成✨

## AWS IoT TwinMakerに3Dのフロアマップをアップロード
Blenderで作成した3DのフロアマップをTwinmakerにアップロードします！

### 手順
* ソースライブラリのファイルを選択からBlenderで作成した.glbファイルを追加する
![スクリーンショット 2024-12-11 10.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/195a2e46-7143-396b-b1be-3e182110a777.png)

* シーンから「シーンを作成」→「ID」を入力し作成する
![スクリーンショット 2024-12-11 10.23.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/2a9996d0-40d1-c2d3-5823-56fd3025c892.png)

* 作成したシーン→「アクション」→「シーンコンポーザ」で開き、「+」 →「3D モデルを追加」→リソースを追加すると3Dのフロアマップがアップロードされる
![スクリーンショット 2024-12-11 10.25.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/e49fcf74-31d9-4835-2476-8325de5eb563.png)
![スクリーンショット 2024-12-11 10.38.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/fdc03b0d-d5ef-84ff-a79d-3b67427135cb.png)

✨完成✨

## Amazon Managed GrafanaにAWS IoT SiteWiseとAWS IoT TwinMakerをプラグインとデータソースの設定
### プラグインの手順
まず最初にAmazon Managed Grafanaのコンソールに行き、プラグイン管理-新規のところが**オン**になっているか確認（私はここの設定がオフになっていたためプラグインの権限がないと散々言われました...😭）
オンになっていない場合は、「編集」→「プラグイン管理をオン」にするにチェックをいれ保存
![スクリーンショット 2024-12-11 13.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/a0b7205b-9510-17dc-8366-2c496fa7ffb1.png)
![スクリーンショット 2024-12-11 13.10.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/cc370030-6967-6216-5c24-91df00eb33ec.png)

* ワークスペースにいき、「Apps」→「AWS Data Sources」→「AWS Services」から「IoT SiteWise」と「TwinMaker」を「Install now」からインストール
![スクリーンショット 2024-12-11 13.16.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/3bb2656e-7cb6-88cc-2937-a0c46d8cb0ed.png)

### データソース設定の手順
* 「Apps」→「AWS Data Sources」→「Data Sources」からサービスとリージョンを設定（Sitewiseも同様）
![スクリーンショット 2024-12-12 15.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/36ec96d1-154f-a72c-0b6a-b0b06b1370bc.png)

* GO to settingをクリック
![スクリーンショット 2024-12-12 16.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/4e8985a0-0cfe-9e3d-8837-d0fc279072f4.png)

* ARNはTwinmakerのワークスペースを作成したときの「IAMロールのARN」→「リージョン」→ワークスペースを設定
![スクリーンショット 2024-12-12 16.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/1a286f79-39e5-10a7-a82d-56abb59b4ef5.png)
![スクリーンショット 2024-12-12 16.18.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/68c600ef-c805-2493-b4a5-4d9309f39305.png)

* save & testで**successfully configured**になればOK

✨完成✨

## AWS IoT TwinMakerとAWS IoT SiteWiseの同期
* Twinmakerの実行ロールに以下の書き込みアクション許可のポリシーを追加する

>CreateEntity
UpdateEntity
DeleteEntity
CreateComponentType
UpdateComponentType
DeleteComponentType
ListEntities
GetEntity
ListComponentTypes

以下公式のテンプレート↓
```
// permissions - replace ACCOUNT_ID, REGION, WORKSPACE_ID with actual values
{
    "Version": "2012-10-17",
    "Statement": [{
            "Sid": "SiteWiseAssetReadAccess",
            "Effect": "Allow",
            "Action": [
                "iotsitewise:DescribeAsset"
            ],
            "Resource": [
                "arn:aws:iotsitewise:REGION:ACCOUNT_ID:asset/*"
            ]
        },
        {
            "Sid": "SiteWiseAssetModelReadAccess",
            "Effect": "Allow",
            "Action": [
                "iotsitewise:DescribeAssetModel"
            ],
            "Resource": [
                "arn:aws:iotsitewise:REGION:ACCOUNT_ID:asset-model/*"
            ]
        },
        {
            "Sid": "SiteWiseAssetModelAndAssetListAccess",
            "Effect": "Allow",
            "Action": [
                "iotsitewise:ListAssets",
                "iotsitewise:ListAssetModels"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Sid": "TwinMakerAccess",
            "Effect": "Allow",
            "Action": [
                "iottwinmaker:GetEntity",
                "iottwinmaker:CreateEntity",
                "iottwinmaker:UpdateEntity",
                "iottwinmaker:DeleteEntity",
                "iottwinmaker:ListEntities",
                "iottwinmaker:GetComponentType",
                "iottwinmaker:CreateComponentType",
                "iottwinmaker:UpdateComponentType",
                "iottwinmaker:DeleteComponentType",
                "iottwinmaker:ListComponentTypes"
            ],
            "Resource": [
                "arn:aws:iottwinmaker:REGION:ACCOUNT_ID:workspace/WORKSPACE_ID"
            ]
        }
    ]
}                      
```
　※REGIONやACCOUNT_ID:asset,asset-model,WORKSPACE_IDは変更する

　公式のドキュメントはこちらから↓
　https://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/tm-sw-custom-ws.html

### 手順
* Twinmakerの設定の「モデルソース」→「ワークスペースを接続」→接続したいワークスペースを選択
![スクリーンショット 2024-12-12 14.41.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/c84d5a45-548a-7813-dcf7-dce77c862d9a.png)


　※IAMロールではTwinmakerのIAMロールではなく、IAMロールの**ARN**の方を選択する
![スクリーンショット 2024-12-12 14.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/f247c164-aca1-a148-36a0-6e8efd088f23.png)

* エンティティモデルソースのステータスが**アクティブ**になっていたらOK
![スクリーンショット 2024-12-12 14.54.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/b17a5186-94c8-08e3-0e65-0d09691de251.png)

エンティティの一覧を見ると、エンティティとコンポーネントが自動生成されているはずです。
![スクリーンショット 2024-12-13 14.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/43bce248-4d93-73e7-9e38-be0438a0afe4.png)
![スクリーンショット 2024-12-13 14.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/394e1736-7271-00c7-50f4-2a71616edf75.png)

* 次にTwinmakerのシーンに戻り、 左側のルールタブで新規ルールの追加で新しくルールを設定
（これにより、Sitewiseのルールがデータの処理を行い、モデルシェーダーでその結果を可視化することができる）
![スクリーンショット 2024-12-12 15.30.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/89d6006b-defc-2eda-a3ac-6b9855c0b7bc.png)
* 設定したいオブジェクト（赤い丸で囲んだところ）を選択し、「＋」 →「モデルシェーダーを追加」→「検査者」のモデルシェーダーを以下のように設定
 ![スクリーンショット 2024-12-13 15.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/5a28e9df-b7a5-b08f-6041-a41e255a5bd1.png)

* エンティティIDは、SitewiseのアセットIDとTwinmakerのエンティティIDが同じになるようにする
![スクリーンショット 2024-12-13 14.59.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/3a45a4eb-1028-7eef-06db-763f97468b17.png)
![スクリーンショット 2024-12-13 15.01.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/662629dd-82e4-6003-cc14-7f89323546f3.png)
* コンポーネント名はSitewiseと同期した際に自動生成されたコンポーネント
* プロパティ名はSitewiseで設定した属性名
* ルールIDは、先ほど作成したルール名

✨完成✨

## Amazon Managed Grafanaのダッシュボード作成
* 「 + Create Dashboard」
![スクリーンショット 2024-12-12 16.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/953ff513-08cb-e850-44b9-9ce12a23de0f.png)

* 「+ Add Visualization」
![スクリーンショット 2024-12-12 16.45.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/89b3a35c-ea14-8b04-4500-2064639930db.png)

* Twinmakerを選択
![スクリーンショット 2024-12-12 16.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/bb870c36-5379-c086-7ace-318bfe941c6f.png)

* 左側のタブから「Visualization」にいき、「AWS IoT TwinMaker Scene Viewer」を選択
![スクリーンショット 2024-12-12 16.46.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/d595fae1-5ceb-9ade-da86-e7bef72c6098.png)

* 右側の「AWS IoT TwinMaker Scene Viewer」の欄で対象のWorkspaceとSceneを選択すると、パネルにTwinmakerで作成したSceneが表示される
![スクリーンショット 2024-12-12 17.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/517b1127-0eeb-1657-b68f-17e236a16c61.png)

* Queryでは、Querytypeを「Get propety value history」、Regionを「us-east-1」、Aseetを「Advent calender」、Propertyを「number1」に指定し、最後にApply
![スクリーンショット 2024-12-13 13.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/0e5b9bd1-33c6-4b8c-0c1d-8d248f14f6d9.png)

実際にデータが上がってくると、指定したオブジェクトに色がつきます。
![スクリーンショット 2024-12-13 13.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934246/59b5c88c-eff1-de87-795a-3bafcaff7def.png)


✨完成✨


## さいご
かなり長くなりましたがここまでお付き合いいただき、ありがとうございました🌟
今回は設定やエラー解決は、慣れるまでまだまだ時間がかかりますが、その分上手く動くと楽しいですね！
この記事が、同じようにチャレンジしている方々の参考になれば嬉しいです。