Unreal EngineでIoT、はじめる時の基礎（通信REST、グラフ描画、地図連携） 

# はじめに

この記事は、[NTTテクノクロス](https://www.ntt-tx.co.jp/column/trend_field.html?utm_source=qiita&utm_medium=ac2019&utm_campaign=12)のAdvent Calendar 2019の[12日目の記事](https://qiita.com/advent-calendar/2019/ntt-tx)です。

NTTテクノクロスの赤間(<font color="green">**AKM**</font>)です。普段はIoT基盤をクラウド上にアジャイルに開発・構築する仕事をしています。そして、最近、趣味で**Unreal Engine** [^1]をはじめました。
この記事では **Unreal Engine** を **IoTの可視化** に使うという視点で、基礎的な部品についてまとめてみたいと思います。

* 通信 (REST)
* グラフ描画 (棒グラフ、直交座標グラフ、時系列グラフ)
* 地図連携 (OpenStreetMap)

なお、この記事だけで上記3つを組み合わせた **IoT可視化システム** は構築できません。あしからず。



 



# 1. デジタルツイン

さて、**デジタルツイン** というキーワードをご存知でしょうか。


**現実(Real)** の世界とそっくりな **仮想(Virtual)** 世界を **対(つい)** として作ったものです。現実の世界を**物理(Physical)**、仮想の世界を**サイバー(Cyber)** と言ったりもしますね。物理世界は工場だったり、都市だったり。用語自体はたいぶ前からあるようです。

## 1.1. デジタルツインと物理世界を接続するIoT基盤
**デジタルツイン** の世界では、物理世界とサイバー世界が各種のセンサやアクチュエータで繋がって連動し、シミュレーションによって現実世界の挙動予測等に繋がることが期待されています。そう、**IoT基盤** を介して**デジタルツイン**というダイナミックな**仮想世界**と**現実世界**が繋がるのです。


<img width="80%" alt="fig-digitaltwin-with-iotpf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/aa9782aa-f0eb-3ea3-5c7c-fda0933acf7a.png">


このデジタルツインの世界をどうやったら容易に構築できるでしょうか。










# 2. リアリティの高いゲームが作れる**Unreal Engine4**

[Unreal Engine４](https://www.unrealengine.com/ja/features)は、Epic Games社が公開しているゲームエンジンです。**UE4** と略します。

## 2.1. UE4の特徴
 * **無料** で、誰でも使い始められます。
 （ただし、作ったゲームを販売して四半期で3,000ドル以上の売り上げを出した場合は5％のロイヤリティを支払う必要があります。ゲーム以外のB2Bのビジネスであれば[無料](https://www.slideshare.net/GTMF/gtmf-2017-ue4-epic-games-japan)とのこと。ただ、変化の可能性がありますので詳細は最新のライセンス[EULA](https://www.unrealengine.com/ja/eula)を確認しましょう。[参考訳](https://www.unrealengine.com/ja/eula-japanese)や[FAQ](https://www.unrealengine.com/ja/faq)もあります。）
 * **ソースコード(C++)にもアクセス**可能。C++で書かれた部品との密な連結も可能。
 * **プロも使用するゲームエンジン**。（[Unreal Engineを採用したゲームソフト一覧](https://ja.wikipedia.org/wiki/Unreal_Engine%E3%82%92%E6%8E%A1%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%BD%E3%83%95%E3%83%88%E4%B8%80%E8%A6%A7)）
 * **多彩なプラットフォーム**（各種PC、スマホ、ゲーム機）に対応。（Windows、Mac OS X、Linux、PlayStation 4、Xbox One、iOS、Android、VR、HTML5等）[^3]
 * **リアルタイムの物理**(落下, 光源等)**シミュレーション**でリアリティ実現。（GPUの活用）
 * 学習素材多数。（YouTube上にも多数あります）
 * ライバルのUnityより、**アジャイル開発**向き。（ざっと大枠から実現でき、徐々に精度を上げていける。性能面が気になる場合には、部分的にC++に置き換えていくことも可能）
 * **ゲーム以外への分野にも適用拡大**中。（メディア＆エンターテインメント、自動車、建築）

ソースコードも公開されていて、リアルタイムでリアリティの高い多数の商用ゲームが作られています。さらにマーケットプレイスを通じて多数の素材を入手することも可能です。**UE4**は、デジタルツインの構築（リアルタイムな可視化）としても十分使えそうです。

以下では、UE4のPluginが多数ある中、とりあえず無料で試せる中で代表的と独断で判断した通信・グラフ描画・地図のPluginを試してみます。


# 3. 通信(REST)

まずは**REST**のためにVaRest Pluginを試します。

## 3.1.  VaRest Plugin

<img width="60%" alt="icon-UE4-Plugin-VaRest.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/146153f7-6c9f-1a04-5732-523953b68f1b.png">




* 特徴 :
  * HTTP/HTTPs通信をBlueprint上から実行できます。C++は不要です。
* Author: [Vladimir Alyamkin](https://alyamkin.com/)
* License: MIT License
* 紹介ページ:
  * [VaRest Author](https://alyamkin.com/projects/nWE2E)
  * [Wiki](https://www.notion.so/VaRest-UE4-Plugin-40b98c54fc184033b60a42e0e4753536)
      * [Encoding and Decoding JSON](https://www.notion.so/2850a010d01d456997d3af00fe0abfc4)
      * [HowTo: Read top-level arrays](https://www.notion.so/5c6da7c25b044fb3b7de0c9e65d512f5)
      * [HowTo: Non-trusted connections (http)](https://www.notion.so/a311323230c34a73adcf1f44afbec205)
  * [GitHub](https://github.com/ufna/VaRest)
  * [UE4 MarketPlace](https://www.unrealengine.com/marketplace/en-US/slug/varest-plugin)
  * [UE4 Forum](https://forums.unrealengine.com/development-discussion/engine-source-github/9041-plugin-http-s-rest-blueprintable-json-and-parse-rest-api-manager-at-once-varest?13509=)
* 日本語参考文献:
  * 「Unreal Engine4 ブループリント 逆引きリファレンス」, [alwei](http://unrealengine.hatenablog.com/entry/2016/02/16/210000) 著, SHOEISHA, 2016.


## 3.2.  VaRestの全ノード(機能等)

UEエディタ上で全てのノードを検索したときの結果を示します。これらがVaRestで導入された機能と考えられます。

<img width="50%" alt="tx-VaRest-AllNodes.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/0727ba48-3b40-c152-0b89-df4178ef2bf0.png">


そして変数型も導入されています。

<img width="35%" alt="tx-VaRest-Object.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/bf6afabc-205b-06c9-d745-591303b14909.png">




この記事ではHTTP GETの簡単な例をUE4.23上で動作させます。


## 3.3.  使ってみる手順

### Step 1.  VaRestを使えるように準備する

**(1)** UE4.23起動⇒「ブループリント」⇒「Third Person」⇒「スターターコンテンツ無し」⇒保存名を付けて「プロジェクトを作成」。

**(2)** UEエディタが起動したら、「編集」⇒「プラグイン」⇒検索画面に`Va Rest`を入力⇒検索された`VaRest Plugin`をインストールし`Enabled`にチェック。

**(3)** UEエディタを再起動し、Pluginを有効化。

**(4)**「ブループリント」⇒「レベルブループリントを開く」。

### Step 2.  変数を用意する
 
**(1)** 以下の4つの変数を用意します。

<img width="25%" alt="My-VaRest-Vars.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/6fe36756-c964-6129-f4ed-e35c88dd15ea.png"> 

まず「マイブループリント」タブの「変数」の右の「＋」をクリックして変数を追加し名前`JsonRequest1`を入力します。最初は型が違うので左側のアイコンは違う型のものが表示されますが気にせず進めます。

**(2)** 「詳細」タブで、変数の型を`Va Rest`検索します。

<img width="35%" alt="tx-VarType-VaRestRequestType2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/5c674f34-ab93-f2e5-098f-e7a74b306cd6.png">

オブジェクトタイプとして、`Va Rest Request JSON`⇒`Object Reference`を選択します。

<img width="35%" alt="My-VaRest-var-JsonRequest1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/44e2f7e3-3ee6-233a-524b-5d4d48b4383f.png">

**(3)** 同様に、`JsonRequest2`、`JsonObject`、`Fieldname`を入力します。

<img width="35%" alt="My-VaRest-var-JsonRequest2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/eaae10a4-de29-d3c7-aec8-310e9027b18c.png">

`JsonObject`の入力ではオブジェクトタイプを`Va Rest Json Object`とします。

<img width="35%" alt="My-VaRest-var-JsonObject.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/0d3b098a-33e1-b00e-707e-0e1879f25c83.png">

`Fieldname`は普通の文字列型とします。

<img width="35%" alt="My-VaRest-var-Fieldname.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/5cc1eec1-7013-bb03-77da-9fcc3e6fa9b7.png">

Blueprintのプログラムを正しく入力するには慣れと技が必要ですが、その一つが変数を正しく用意しておくことのようです。正しい変数を最初にBlueprint中に配置することで、UEエディタが型に合った関数の入力をサポートしてくれるようになります。

### Step 3.  Blueprintプログラムを入力する

**(1)** レベルブループリント「 `ThirdPersonExampleMap` > `イベントグラフ`」に以下のBlueprintを入力します。

![My-VaRest-BP-PressX.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/c4a58ca9-6642-f038-b823-bf3b5d1f2793.png)

このBlueprintは、`"X"`キーの押下に応じて、HTTP通信テストサイト http://httpbin.org/get にGETを発行します。成功した場合にはレスポンス、結果コード、コンテンツ長を表示します。

**(2)** その下に次のBlueprintを入力します。

![My-VaRest-BP-PressY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/d03229a8-749c-fb89-6f29-81253f4e6695.png)

この一部を拡大したものが以下となります。

![My-VaRest-BP-PressY-ZoomParts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/478ab601-5606-9b5b-58f2-5d256a79b68a.png)

### Step 4.  動かしてみる

**(1)** 「コンパイル」⇒「保存」⇒「プレイ」。

**(2)** `"X"`キーを押すと、HTTP通信テストサイト http://httpbin.org/get から以下のJSONをGETします。

```JSON:GETの結果
    {
      "args": {}, 
      "headers": {
        "Accept": "*/*", 
        "Accept-Encoding": "deflate, gzip", 
        "Content-Type": "application/x-www-from-urlencoded", 
        "Host": "httpbin.org", 
        "User-Agent": "Projectname/++UE4+Release-4.23-CL-9631420 Windows/10.0.xxxxxxx.64bit"
       }, 
      "origin": "xxx.xxx.xxx.xxx, xxx.xxx.xxx.xxx", 
      "url": "https://httpbin.org/get"
    }
```

**(3)** その中身を以下のようにプレイ画面に出力します。この表示ではJSONはインデントされていません。表示はデバッグ用なので3秒程度で消えます。メッセージは上にスクロールしていきます。

``` :"X"キーを押下したときの画面出力
      ResponseCode=200, ContentSize=988
      {"args":{},"headers":{"Accept": "*/*","Accept-Encoding":"deflate,gzip","Content-Type": "application/x-www-from-urlencoded","Host": "httpbin.org","User-Agent": "Projectname/++UE4+Release-4.23-CL-9631420 Windows/10.0.xxxxxxx.64bit"  (以下、省略)
```

**(4)** 一方、`"Y"`キーを押すと、先ほどと同じJSONを取ってきて、JSONの中身を分解して画面にプレイ出力します。

``` :"Y"キーを押下したときの画面出力
      == json end ==
      String : https://httpbin.org/get
      Type : String
      Key : url
      String : "xxx.xxx.xxx.xxx, xxx.xxx.xxx.xxx"
      Type : String
      Key : origin
      Type : Object
      Key : headers
      Type: Object
      Key : args
```  










# 4. グラフ描画

つぎは、グラフ描画をKantan Charts Pluginで試します。

## 4.1.  Kantan Charts Plugin

<img width="60%" alt="icon-UE4-Plugin-KantanCharts.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/c7ba2b54-5d5c-3d73-7db3-05bf31d9714a.png">

* Kantan Chartsでは以下の形式のグラフが描画できます。
  * 棒グラフ (Bar Chart)
  * 直交座標グラフ (Cartesian Chart)
  * 時系列グラフ (Time Series Plot)
* Author: [Kantan Dev](hhttps://www.unrealengine.com/marketplace/ja/profile/Kantan+Dev)
* License: MIT License
* 紹介ページ: 
  * [Kantan Charts](http://kantandev.com/free/kantan-charts) 
  * [GitHub](https://github.com/kamrann/KantanCharts) 
  * [UE Forum](https://forums.unrealengine.com/unreal-engine/marketplace/86597-kantan-charts-free-umg-chart-graph-plugin?114387-Kantan-Charts-Free-UMG-chart-graph-plugin=)
  * [UE コンテンツ詳細 Kantan Charts](https://www.unrealengine.com/marketplace/ja/slug/kantan-charts) 
      * [ユーザガイド](https://kamrann.github.io/KantanCharts-Docs/UserGuide.html)
      * [ノード・リファレンス](https://kamrann.github.io/KantanCharts-Docs/noderefindex.html)
      * [プロジェクト例](https://www.dropbox.com/s/crtpa1e114gdg6n/KantanChartsExample.zip?dl=1) `KantanChartsExample.zip`
* 映像解説: [例@YouTube](https://www.youtube.com/watch?v=MQYPP-jekfc)


## 4.2.  Kantan Chartsの全ノード(機能等)

UEエディタ上で`kantan`に関する全てのノードを検索したときの結果を示します。これらがKantan Chartsで導入された機能と考えられます。


<img width="50%" alt="tx-kantan-AllNodes.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/da430588-424d-c68d-bd37-a48b9a38fc69.png">


`AddDatapoint`等、複数存在するものがありますね。マウスカーソルを持っていって噴出しのHELPを見るとそれぞれターゲット(グラフ種別)が違うようです。


## 4.3. 「プロジェクト例」を動かしてみる手順


上記の**プロジェクト例**の中には、棒グラフ描画、直交座標グラフ描画、時系列グラフの3つが含まれています。以下の手順で実行します。


### Step 1.  プロジェクトの環境を準備する

**(1)** [プロジェクト例](https://www.dropbox.com/s/crtpa1e114gdg6n/KantanChartsExample.zip?dl=1)からダウンロード (`KantanChartsExample.zip`)します。

**(2)** `KantanChartsExample.zip` をプロジェクトのフォルダ `Unreal Projects` 内に展開して配置し、 `KantanChartsExample / KantanChartsExample.uproject` をダブルクリックで実行します。

**(3)** UE4が起動するとコンパイルが実行されます。以下のようなプロジェクトのフォーマット更新確認が出ますので「アップデート」を実施します。

<img width="65%" alt="tx-KantanChartsExample-UpdateFormat.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/4b34e831-35c4-dec4-c0d1-136d9a3634dc.png">

### Step 2.  動作させる

**(1)** 「プレイ」するとThirdPersonCharacterの目の前に赤、緑、青のエリアが配置されます。

<img width="65%" alt="tx-KantanChartsExample-Start.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/f300f534-b47c-cda7-1ed8-ff1ad8b62ef3.png">

<img width="65%" alt="tx-KantanChartsExample-Play.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/eadae8a6-e3ed-bbee-6006-b98a426119fc.png">


**(2)** ThirdPersonCharacterが各色のエリアに滞在した時間がカウントされていきます。

* `"1"`キーを押すと **棒グラフの表示** ON/OFF
* `"2"`キーを押すと **時系列グラフの表示** ON/OFF
  
<img width="65%" alt="tx-KantanChartsExample-TimePlot2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/1e4f1245-050a-226b-c10a-4d59b41a8afd.png">


**(3)** レベル内を走り回ってエネルギーが無くなると、ThirdPersonCharacterが倒れこんで停止します。
   そのときの赤、緑、青エリアの各滞在時間が棒グラフ(左)で表示され、移動軌跡が直交座標グラフ(右)として表示されます。


<img width="65%" alt="tx-kantanChartsExample-BarAndPlot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/6560c974-70ab-979e-181b-068a879c5c47.png">




プロジェクト例を実行したときの映像は[YouTube](https://www.youtube.com/watch?v=MQYPP-jekfc)にもKantan Charts作者によって公開されています。


## 4.4.  プロジェクト例の Blueprint を覗いてみる

プログラムの構造とポイントと思われる部分を以下に示します。独自の記法で記載していますので、逆に混乱させてしまったらごめんなさい。

``` :BP_KantanChartsController&nbsp;Blueprint
    イベントグラフ
        Init Color Area Charts Widget 呼出す。
        Init Character Time Plot Widget 呼出す。

    Init Color Area Charts Widget
        Viewportを作成する。
        カテゴリを作る。 
            New Simple Category Datasource() 
            Add Category With ID (ID:Red, Name:Red) 
            Add Category With ID (ID:Green, Name:Green) 
            Add Category With ID (ID:Blue, Name:Blue)
        新しいDataSourceを使うチャートを設定する。
        チャートの色をオーバーライドする。

    Init Character Time Plot Widget

    Update Character Time Plot
        Add Datapoint Now(ExtensionSeriesID)
        Add Datapoint Now(EnergySeriesID )

    Register Events

    Chart Control Event Graph
        "1"キーなら、棒グラフの表示ON/OFF
        "2"キーなら、時系列グラフの表示ON/OFF 
```

``` :KantanChartsExampleCharacter&nbsp;Blueprint
    イベントグラフ
         キャラクタが生きていれば、
             Update Status Chart()
             Update Movement Datasource()
         キャラクタが死亡したら、
             Create Movement Plot Widget()

    Update Energy

    ...
```

``` :KantanChartsExampleMap&nbsp;Blueprint
    イベントグラフ
        イベント BeginPlay
        イベント Tick
             Update Color Area Datasource 呼出す。

    Update Color Area Datasource
        Update Color Area Datasource()
             Update Category Value (ID:Red)
             Update Category Value (ID:Green)
             Update Category Value (ID:Blue)
```

``` :ThirdPersonCharacter&nbsp;Blueprint
    イベントグラフ`
         ジャンプ、上下左右の移動、等
```

ダウンロードした「プロジェクト例」はリビルドしただけで簡単に動かせました。しかし当初、プレイしてもグラフを表示する方法がわかりませんでした。Blueprintプログラムを追いかけてはじめて、`"1"`や`"2"`キーによって棒グラフや時系列グラフを表示ON/OFFすること、移動し続けてエネルギー切れにならないと最後の移動軌跡を示す直交座標グラフが表示されないことなど、がわかりました。

## 4.5 その他のグラフ描画

**UE4** によるグラフ描画をYouTubeで見ていたら以下のようなものがありました。

 * [Charting in UE4 - line and bar graphs](https://www.youtube.com/watch?v=MTba2e1Dpfg)

Kantan Charts Pluginではこの3Dグラフは構築できません。これを実現するPluginは見つけられませんでしたが、独自にCubeのサイズを調整することで実現はできそうです。




# 5. 地図連携

最後に、地図(OpenStreetMap)をUE4に読み込むStreetMap Pluginを試します。

## 5.1.  StreetMap Plugin

<img width="60%" alt="icon-UE4-Plugin-StreetMap.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/e196cacc-63a9-dfba-da19-c01710ca9f57.png">




* StreetMap Pluginは、オープン地図([OpenStreetMap](https://www.openstreetmap.org) [^2])をUE4に読みます。
* Author: [Mike Fricker](https://twitter.com/mike_fricker)
* License: MIT License
* 紹介ページ: 
  * [GitHub](https://github.com/ue4plugins/StreetMap), 
  * [UE Forum](https://forums.unrealengine.com/community/released-projects/105486-plugin-openstreetmap-importer),
  * [UE Forum(抜粋版)](https://forums.unrealengine.com/development-discussion/engine-source-github/107292-plugin-openstreetmap-plugin)
* 日本語参考文献: アルゴンUE4＆アプリ開発日記, 「[よく使ってる便利なプラグインなどを紹介する。](https://argonauts.hatenablog.jp/entry/2018/12/24/000000)(2018.12)」の「その2」としてStreetMap Pluginが紹介されています。
* Pluginの制約:
    * OSM形式(XML)は最大2GBまでです。
    * UE4.19 + VS2017に対応しています。UE4.21までの対応方法もForumで議論されています。
    * 球面座標（緯度・経度）ではなく平面座標として読み込まれるようです。


## 5.2.  OpenStreetMapの全ノード(機能等)

UEエディタ上で全てのノードを検索したときの結果を示します。これらがOpenStreetMapで導入された機能と考えられます。

<img width="50%" alt="tx-StreetMap-AllNodes" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/5fc328c6-e87d-bca1-c9b0-ef969e040971.png">



## 5.3.  使ってみる手順

StreetMap Pluginは以下の手順で使います。

### Step 1.  動作のための環境を準備する。

**(1)** Visual Studio Community 2017を設定します。（Visual Studio 2019だと何故かダメでした。）

**(2)** Unreal Engine 4.19を使用可能にします。 （この版までしか確認できませんでした。これ以降の版では私の環境では最初のコンパイルに失敗してUEが起動しませんでした。Forum上では、もうちょっとだけ上の版に対応する議論に対応する方法もForumで議論されています。）

### Step 2. 地図データを[OpenStreetMap](https://www.openstreetmap.org)からエクスポートする。

**(1)** [OpenStreetMap](https://www.openstreetmap.org)にアクセスし、検索機能等を使用してエクスポートしたい場所に移動します。
    
<img width="60%" alt="osm-start.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/65520e42-28a4-e585-e466-aaf56dc20328.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors

**(2)** ページ上部のナビゲーションバーの「**エクスポート**」ボタンをクリックして、エクスポート・モードに切り替えます。

**(3)** エクスポートしたい領域がブラウザウィンドウいっぱいになるようにスクロールしてズームします。 エクスポートのサイズに制限がありますので、最初は小さい範囲をではじめましょう。

<img width="60%" alt="osm-minato-zoom.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/4ee0ae69-edc9-4bee-91e0-cfb35ae1c1f6.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors


下図のように一部の範囲を選択することもできます。

<img width="60%" alt="osm-minato-area.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/4c0bbcaa-df03-15f0-f017-7c1eb59fd002.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors


**(4)** 準備ができたら、左中段の「**エクスポート**」ボタンをクリックします。ダウンロードが開始され、XML形式の`map.osm`ファイルが生成されますので、そのままデスクトップ等に保存します。

**(5)** OpenStreetMap(OSM)の約束等

* エクスポートにアカウント登録は不要でした。また、1回にエクスポートするノード数の制限は50,000でした。
* OpenStreetMapでは高さの無い建物が多数あります。
* OpenStreetMapはユーザ登録して編集することが可能です。近所のデータを修正することができます。ただし、事実に基づいた編集に制限されます。
* OpenStreetMapは、[ODbL](https://opendatacommons.org/licenses/odbl/)(Open Data Commons Open Database License)ライセンスにより提供されます。他のコンテンツを載せていく場合には注意が必要です。
* 架空の地図を作成する場合には、[JOSM](https://wiki.openstreetmap.org/wiki/JA:JOSM)オフラインエディタを使用することでローカルなXMLファイルを作成できます。
* [OSMのフォーマット](https://wiki.openstreetmap.org/wiki/OSM_file_formats)に基づいた同一形式の地図を独自に作成することも可能です。
* [Wiki](https://wiki.openstreetmap.org/wiki/JA:Main_Page)に情報があります。
* 各種の地図のライセンス表示等については[地図の著作権表示のまとめ(2019 11)](https://qiita.com/lemondh/items/d1bbaf7f53a5579267e2)を参考にすると良いでしょう。




### Step 3.  PluginのソースコードをUE内に配置し、C++でPluginをリビルドする。

**(1)** 上記[GitHub](https://github.com/ue4plugins/StreetMap)からStreetMap Pluginのソースコード`StreetMap-master.zip`をダウンロードします。

**(2)** 一度Unreal Engine4.19で「新規C++プロジェクト」を作成します。この例ではプロジェクト名を「MyProject」とします。

**(3)** ファイル`StreetMap-master.zip`を解凍し、`Unreal Projects/MyProject/Plugins/StreetMap/`の下に`StreetMap.uplugin`を含むファイル群一式を配置します。

**(4)** UEエディタを起動すると、`StreetMapRuntime`と`StreetMapImporting`モジュールのバージョン違いでリビルドすることを求められます。「はい(Y)」で、新しいプラグインもVisual Studioでコンパイルされます。
    
<img width="60%" alt="tx-OSM21-RebuildNow.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/10fef175-25de-ff96-d4d6-9e17d56d34b6.png">
    
<img width="60%" alt="tx-OSM22-StartingRebuild.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/0ad24488-e073-62af-6d90-da291e6d533a.png">

**(5)** UEエディタが起動したら、「編集」＞「Plugins」＞「Project/Importers」に、StreetMapプラグインがEnabledチェックありで設定されていることを確認します。

<img width="60%" alt="tx-OSM23-PluginInstalled.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/34a87e56-60e0-29d9-414b-2367a7881d20.png">


### Step 4.  UEエディタに地図コンテンツを貼り付ける（レベルを作る）。

**(1)**  OpenStreetMap XMLファイル`map.osm`をUEの「コンテンツブラウザー」上にドラッグ＆ドロップすることでインポートします。

<img width="60%" alt="tx-OSM31-MapImport.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/747b9429-1cc8-f2b6-fc6c-f177ae5e0f5f.png">

**(2)** インポートした地図を「ビューポート」にドラッグ＆ドロップすると、`StreetMapActor`が生成され、3Dビューポートに道路や建物が表示されます。

<img width="60%" alt="tx-OSM32-MapSettoLVL.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/17094eaf-0402-4ad1-abab-17027da0b55d.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors


**(3)** 任意のビルを選び、「詳細」の設定から`CollisionSetting`の`Generate Collision`のチェックをしてコリジョンを有効にします。

<img width="40%" alt="tx-StreetMap-CollisionSettings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/e8fde7d4-71a3-28f2-bddb-f2874c5c0418.png">


**(4)** 完了した地図は以下のようなものになります。スターターコンテンツとして`ThirdPersonExample`を選択した上でインポートすれば、地図の中をThirdPersonCharacterが走り廻れます。

<img width="60%" alt="tx-map-minato.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/161c374b-c0d9-0459-d6fd-8bc272c9ea15.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors

「詳細」で、色を変えることもできました。ただし、個々の建物毎に調整することはできません。

<img width="60%" alt="tx-StreetMap-minato-color4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/d1b85bc1-e616-a061-5f0d-f1acfcdf5556.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors



### Step 5. ThirdPersonCharacterをビルの上までジャンプさせる。（おまけ）

ちなみに、ThirdPersonCharacterが町中を走り回る中で、ビルの屋上までジャンプするためには以下の設定が必要です。

* ジャンプしている時間を延ばす： コンポーネントから`ThirdPersonCharater(Self)`の「詳細」Characterの`Jump Max Hold Time`を増やす。

* 連続ジャンプできる回数を増やす： コンポーネントから`ThirdPersonCharater(Self)`の「詳細」Characterの`Jump Max Count`を増やす。


<img width="40%" alt="tx-Character-JumpSettings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/1b7b06d2-b14a-1601-55cc-d2deefe9ebf9.png">



<img width="60%" alt="tx-StreetMap-HighJump.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/6476785a-d824-ffaa-2ea5-6e951bc0c6b4.png">  (c) [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors





# まとめ

**Unreal Engine**(UE4) を使って **IoTの可視化** を行う場合に使いそうな3つの基礎的な部品を動かしてみました。

* 通信 (REST)として、**VaRest Plugin**
* グラフ描画 (棒グラフ、直交座標グラフ、時系列グラフ)として、**Kantan Charts Plugin**
* 地図(OpenStreetMap)連携として、**StreetMap Plugin**

UE4による可視化は、[Excel](https://products.office.com/ja-jp/excel)、[Kibana](https://www.elastic.co/jp/products/kibana)、[Tableau](https://www.tableau.com/ja-jp/products)、[PowerBI](https://powerbi.microsoft.com/ja-jp/)、[Yellowfin](https://www.ntt-tx.co.jp/products/yellowfin/?utm_source=qiita&utm_medium=ac2019&utm_campaign=12)といった代表的な可視化ツールに比べて、3Dを前提にする点で優位性があります。[^3]


UE4が提供するBlueprintというビジュアル・プログラミング環境とマーケットプレイスにある豊富な素材を使うことでリアリティの高い3D空間を使ったシステムの実現がアジャイル（俊敏）にできます。もしBlueprintというプログラミング環境を使うことで性能が不足することがあっても、UE4はC++との連携が容易なアーキテクチャであることを生かして進化的(徐々に性能を改善していく)実装改善が可能です。この特性はIoT可視化システムやAIシステムのPoC開発での強みとなります。
UE4は今後、**アジャイルなデジタルツインの実現**に活躍していくことが期待できますね。

明日の[NTTテクノクロス](https://www.ntt-tx.co.jp/column/trend_field.html?utm_source=qiita&utm_medium=ac2019&utm_campaign=12) [Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ntt-tx)の担当は[subutakahiro](https://qiita.com/subutakahiro)さんです。「Xcode 11.0で追加された便利機能」の予定です。お楽しみに。



[^1]: Unreal®, Unreal Engine®はEpic Games社の商標または登録商標です。
[^2]: OpenStreetMap® はOpenStreetMap財団 (OSMF)がOpen Data Commons Open Database License (ODbL) の下にライセンスするオープンデータです。
[^3]: その他の会社名、製品名などの固有名詞は、一般に該当する会社もしくは組織の商標または登録商標です。