無料でThingWorxに触ってみる

#はじめに
PTCが提供しているThingWorxの無料体験版である[ThingWorx Developer Portal](https://developer.thingworx.com/)を使用した、ThingWorxアプリケーション開発のワークフローを紹介します。ThingWorxに触れた事が無い方が無料体験版を使って開発のイメージを掴んでもらうのに役立てていただければ幸いです。ThingWorx Developer Portalの詳細とセットアップ方法は[ThingWorxの開発者ポータルサイトにアカウントをつくり、試用版サーバーインスタンスを立ち上げる](https://qiita.com/akiranishi/items/c986bbbae8efc00706c9)をご参考下さい。

#前提と準備
ステップに入る前に必要な準備と前提条件を記載しておきます。
###使用環境：
Windows 10 PC、ブラウザにGoogle Chromeを使用しています。
###アカウント登録とThingWorx環境のセットアップ：
[ThingWorxの開発者ポータルサイトにアカウントをつくり、試用版サーバーインスタンスを立ち上げる](https://qiita.com/akiranishi/items/c986bbbae8efc00706c9)を参考にPTCのポータルサイトへアカウント登録とThingWorx無料体験版のダウンロード、セットアップが完了している必要があります。
###対象バージョン：
ThingWorx 8.4をベースとしております。今後リリースされるものを含む異なるバージョンを利用する場合は手順や機能の互換が取れない可能性があります。
###対象のチュートリアル：
[Get Started with ThingWorx for IoT](https://developer.thingworx.com/ja/resources/guides/thingworx-foundation-quickstart)のステップを進めます。基本的に同じステップを辿りますが、この投稿では注意点や補足事項を加筆してあります。
###ステップを進めるにあたり注意点:
オリジナルのチュートリアルはページ遷移が英語と日本語で異なっていたり、ページ毎にThingWorxで扱う名前の統一が取られていないケースがあります。初めからオリジナルを進められる場合はこれらの理由で手順に躓いてしまう可能性があります。この記事ではそのような要因を可能な限り吸収出来るようまとめたので、初めてThingWorxに触れられる方はこの記事の手順を一通り進めた後ににオリジナルをご確認いただくのがスムーズかと思います。

#[ステップ１：データモデルの概要](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/data-model)
このステップではThingWorxが取り扱うデータモデルの概要を説明しています。ThingWorxはモデルベース開発機能を備え、"Thing Shape"、"Thing Template"、"Thing"という３種類の[エンティティ](http://e-words.jp/w/%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%83%86%E3%82%A3.html)を作成、拡張、再利用する事でアプリケーションを開発します。これらによりIoTデバイスやビジネスプロセス、作成したアプリケーションをThingWorxで表現します。エンティティの詳細説明は[英文ですがこちら](https://developer.thingworx.com/en/resources/guides/data-model)をご参照下さい（そのうち記事にします）。
###Thing Shape：
Thing Shapeは物理的な資産が共通で持っている特徴のグループを定義したものです。今回は["サーモスタッド"](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%BC%E3%83%A2%E3%82%B9%E3%82%BF%E3%83%83%E3%83%88)、"電力メーター"の特徴を持つThing Shapeを作成します。
###Thing Template：
Thing TemplateはThingが利用する基本機能を提供するテンプレートです。一度Thing Templateを作成するとThingはそれ引き継ぐ事ができるので、同じような設定を繰り返さず簡単に共通の特徴を持つThingを作成する事が出来ます。今回は電力メーターとサーモスタッドの特徴を備えた、"家"の特徴を持ったテンプレートを作成します。
###Thing：
ThingWorxアプリケーションで扱う実体です。今回は電力メーターとサーモスタッド、家の特徴を備えたThingの表現を作成します。


![datamodel.png](https://qiita-image-store.s3.amazonaws.com/0/386147/b7556880-8ab0-4a97-40fa-3e4e5237a53e.png)


#[ステップ２：モデルタグを作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/model-tags-foundation-quickstart)
ThingWorxのアイテムをグループ化し整理しやすくする為にモデルタグを作成します。後のステップで作成するエンティティにこのタグを付与しておく事でバージョン管理や検索、データの移行をする事が出来ます。

**Browse**の**MODELING**から**Model Tags**の**"+"**を選択します。
![foundation_QS_addTag.png](https://qiita-image-store.s3.amazonaws.com/0/386147/283080f5-7d5d-83e0-d07d-0f076b92554a.png)
**Name**に`FoundationQuickStart`を設定します。**Save**をクリックして保存します。
![foundation_QS_NameTag.png](https://qiita-image-store.s3.amazonaws.com/0/386147/f244ec99-7abf-a684-3b0c-8e57f34e07dc.png)
保存したモデルタグを開き、**Vocabulary Terms**タブを選択後に**"+Add"**を選択します。
![foundation_QS_addTerm.png](https://qiita-image-store.s3.amazonaws.com/0/386147/96081cae-c8f3-ed29-cd88-30f541c03dc4.png)
**Term**に`Home Application`を入力して✔をクリックします。**Save**をクリックして保存します。
![foundation_QS_saveTerm.png](https://qiita-image-store.s3.amazonaws.com/0/386147/07ed3e94-23dd-57d7-6aa5-c905d23b0028.png)

#[ステップ３：Thing Shapeを作成する](https://developer.thingworx.com/ja/resources/guides/thingworx-foundation-quickstart/create-thing-shapes)
電力メーターとサーモスタッドに関するプロパティとサービスを含むThing Shapeを作成します。
###電力メーター
電力メーターに関するThing Shapeを作成します。
**Browse**の**MODELING**から**Thing Shapes**の**"+"**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/2ec86ea1-1e45-c104-f57a-fd3388c2ae42.png)
**Name**に`MeterShape`を入力します。**Tags**に作成した**FoundationQuickStart:Home Application**を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/d831bb95-0268-e890-ada0-f25aa8198e8d.png)
**Properties and Alerts**タブを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/18a12a9c-8e8a-5dff-4a77-10424c72f623.png)
**"+Add"**を選択して下記の通り必要なプロパティを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/4a984a60-1e25-ce5a-117a-93a87bbcbe18.png)

| Name             |Base Type |Persistent?|Logged?|
|:-----------------|:---------|:----------|-------|
| meterID          |STRING|✔         |        |
| currentPower     |NUMBER    |           |✔      |
| costPerKWh       |NUMBER    |✔          |✔     |
| currentCost      |NUMBER    |           |　　　　|
**Persistent**に✔する事でシステム再起動時にその値がリセットされなくなります。個体識別IDや動かない物体の場所情報など、その値が更新される必要がない場合に有効化します。**Logged?**に✔する事でその値の変化が自動的に記録されます。その値を履歴表示したい場合に有効化します。

設定後は以下のようなプロパティイメージになります。**Save**をクリックして保存します。
![metershapeproperty.png](https://qiita-image-store.s3.amazonaws.com/0/386147/7a42a60b-9492-3e08-bae2-98f88eabb250.png)


###サーモスタッド
同様にサーモスタッドに関するThing Shapeを作成します。

**Browse**の**MODELING**から**Thing Shapes**の**"+"**を選択します。**Name**に`ThermostatShape`を入力します。**Tags**に作成した**FoundationQuickStart:Home Application**を設定します。**Properties and Alerts**タブを選択後、**"+Add"**を選択して下記の通り必要なプロパティを設定します。

| Name             |Base Type |Persistent?|Logged?|
|:-----------------|:---------|:----------|-------|
| thermostatID     |STRING|✔         |        |
| temperature     |NUMBER    |✔           |✔      |
| setTemperature　|NUMBER    |✔          |✔     |
| message     　　|STRING　　|　　         |✔　　　　|

設定後は以下のようなプロパティイメージになります。**Save**をクリックして保存します。
![thermostatproperty.png](https://qiita-image-store.s3.amazonaws.com/0/386147/88f7002a-5c5e-48a7-e0ca-4c54dd483a45.png)

#[ステップ４：Thing Templateを作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/template-foundation-quickstart)
家に関するプロパティとサービスを含むThing Templateを作成します。一度Thing Templateを作成すると同じ設定を繰り返す手間なく簡単に複数のThingをインスタンスとして作成する事ができます。Thing Template を拡張すると、そのプロパティとサービスは継承されます。継承は特性として表すことができます。Thingが持つ共通のプロパティ（特性）やサービス（振る舞い）を定義する事が出来ます。

**Browse**の**MODELING**から**Thing Templates**の**"+"**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/b2094c71-7b43-1adb-ae68-b194d63fd068.png)
**Name**に`Building Template`を入力します。**Tags**に作成した**FoundationQuickStart:Home Application**を設定します。**Base Thing Template**に**Generic Thing**を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/a0898658-bd98-e907-f897-8578ecf47f20.png)
**Implemented Shapes**に作成した**MaterShape**と**ThermostatShape**を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/c1f9483b-616f-2cdf-dd9c-40541bb91fad.png)
**Properties and Alerts**タブを選択後、**"+Add"**を選択して下記の通り必要なプロパティを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/be3be15f-0553-5cbd-6b88-8ad2ed3432fa.png)


| Name             |Base Type |Persistent?|Logged?|
|:-----------------|:---------|:----------|-------|
| buildingID     |STRING|✔         |        |
| building_lat_long     |LOCATION|✔           |      |
| watts　|NUMBER|✔          |✔     |
設定後は以下のようなプロパティイメージになります。**Save**をクリックして保存します。
![thingtemplate4.png](https://qiita-image-store.s3.amazonaws.com/0/386147/2d8c0fc9-b481-b1cc-c3fc-86c60e92bc43.png)


#[ステップ５：Thingを作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/thing-foundation-quickstart)
個々の家を表すThingを作成します。作成したThing Templateを活用する事で同じ情報を入力する手間が減り開発速度を向上する事が出来ます。

**Browse**の**MODELING**から**Things**の**"+"**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/283fe833-e65c-26e7-4b2e-37ea6bc08f5b.png)
**Name**に`MyHouse`を入力します。**Tags**に作成した**FoundationQuickStart:Home Application**を設定します。**Base Thing Template**に作成した**Building Template**を設定します。**Save**をクリックして保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/1ad52a74-19c7-67e3-ee4c-aa69b327d30f.png)


#[ステップ６：Value Streamにデータを格納する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/value-stream-foundation-quickstart)
**MyHouse**のプロパティの値を保存する為にはストレージを用意する必要があります。ストレージを担うエンティティであるValue Streamを作成し、それを使用するThing Templateに紐付けます。
###Value Streamを作成する
**Browse**の**DATA STORAGE**から**Value Streams**の**"+"**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/cf2fdc5f-c39b-3674-cdc1-427db38e73dd.png)
テンプレートの選択画面が表示されます、ここでは**ValueStream**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/14bdac97-e0ab-6bb3-01fc-8386846152c4.png)
**Name**に`Foundation_Quickstart_ValueStream`を入力します。**Tags**に作成した**FoundationQuickStart:Home Application**を設定します。**Save**をクリックして保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/2962ecb8-22cf-f3e4-8182-34bafc774997.png)
###Thing Templateを更新する
作成した**BuildingTemplate**を選択します。**General Information**タブを選択し、**Value Stream**に作成した**Foundation_Quickstart_ValueStream**を設定します。**Save**をクリックして保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/0a8e3484-9238-8f92-1836-12f5b934910e.png)

#[ステップ７：サービスを作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/create-custom-service)
ThingWorxはJavaScriptのカスタムサービスを作成し実行する事が可能です。またThing、Thing Template、Thing Shapeが利用できるサンプルコードや[スニペット](https://www.weblio.jp/content/%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88)が充実しているので、JavaScriptにあまり詳しくなくてもそれらを活用してコードを作成し、さらに開発を加速させる事が出来ます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/99ab54f2-9a08-44f4-f95c-e1d4db625645.png)

このステップでは電力メーターのThing Shapeで利用するカスタムサービスを作成します。このサービスは現在のメーター値に時間辺りの電力コストを掛ける事でコストを計算し、プロパティに保存する機能を提供します。

**Browse**の**MODELING**から**Thing Shape**の選択後、リストの中から作成した**MeterShape**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/b346b639-dfdc-1354-d8f8-cc8c3a3db16f.png)
**Service**タブを選択します。**"+Add"**を選択するとサービスタイプの候補が出てくるのでLocal(JavaScript)を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/4a52553f-a755-8595-67cb-ab3fc7c69053.png)
**Service Info**タブの**Name**に`calculateCost`を入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/8df5693d-03fa-f258-7fc2-bbbc9a1ac485.png)
**Me/Entries**タブを選択し、**Properties**の中から**currentCost**を検索し➡を選択します。このプロパティは前のステップでThing Shape作成時に設定したものですが、これを指定する事で右隣のスクリプトボックスに挿入されJavaScriptコードとして扱えるようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/c8726c37-9f11-3c1d-3477-c1d9dd910187.png)
同じ要領でプロパティを利用してスクリプトボックスに挿入し、下記の通り計算式を完成させます。

```javascript
me.currentCost = me.costPerKWh * me.currentPower;
```
✔を選択してコード編集を完了します。**Save**をクリックして保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/dffd9562-239d-0c89-4491-98fa58cf3eac.png)

#[ステップ８：アラートと購読を作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/create-alerts-and-subscriptions)

Thingのプロパティの値が特定値に達したケースなど、特定のユーザにメッセージを送信したりログに残すといった様々なサービスを実行する事が可能です。その為にはアラートと購読という要素を用います。アラートは意図したタイミングで発生させるイベントを意味します。購読は発生したアラートを監視し、それに対応したJavaScriptコードによるサービスを実行します。

###アラート
作成したThingの温度が32℃を下回った場合に発生させるイベントを作成します。

**Browse**の**MODELING**から**Thing Shape**を選択します。リストの中から作成した**ThemostatShape**を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/6f46ad02-1431-005e-7308-f29fa95e0852.png)
**Properties and Alerts**タブを選択します。プロパティの中から**temperature**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/8d33bb5b-0839-4011-a1ce-6d0a488d43e6.png)
**"+"**を選択し追加するアラートの設定をします。特定の値を下回った場合のアラートを設定したいので、**AlertType**に**Below**を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/4a35e06a-2861-b8a7-83a9-986a29ce1f81.png)
**Name**に`freezeWarning`を入力します。**Limit**に温度の閾値の32℃を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/19b63543-8d55-8a2a-0176-3267d21a13f2.png)
✔を選択し、**Save**をクリックして保存します。正しくアラートが追加されていると**temperature**の右側の**Alert**に1にカウントアップされているはずです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/e0b71e0b-2b96-54ca-a4d4-0c97ff032576.png)


###購読
作成したアラートを検出した時にエラーログの保存とメッセージ更新を実施するJavaScriptによる購読コードを作成します。

**Browse**の**MODELING**から**Thing Template**を選択します。リストの中から作成した**Building Template**を設定します。**Subscripton**タブを選択します。
![subscription1.png](https://qiita-image-store.s3.amazonaws.com/0/386147/21cc8d61-ece9-d9af-5131-ca5d246f7d79.png)
**"+Add"**を選択して新規の購読を作成します。
![subscription2.png](https://qiita-image-store.s3.amazonaws.com/0/386147/f570ffef-d0e3-b681-3daf-96ee937a8452.png)
**Name**に`freezeWarningSubscription`を入力します。
![subscription3.png](https://qiita-image-store.s3.amazonaws.com/0/386147/013ba9d3-4a1d-5ea6-cce4-e8eed08528ad.png)
購読コードと作成したアラートを紐づける必要があります。**Inputs**タブを選択し、**Event**に**Alert**を、**Property**に**temperature**を設定します。
![subscription4.png](https://qiita-image-store.s3.amazonaws.com/0/386147/7fdc5952-286a-787d-c854-a2812907feed.png)
更新するメッセージの中身を作成します。メッセージはプロパティの一つとして定義してあるので、**Me/Entities**タブを選択し、**Properties**を展開し、**message**の➡を選択する事でスクリプトボックスに挿入します。
![subscription5.png](https://qiita-image-store.s3.amazonaws.com/0/386147/72a19071-e23f-e869-f088-d352c0e0933b.png)
表示させるメッセージを入力し、以下のようにコードを完成させます。

```javascript
me.message = "Warning: Below Freezing";
```
次にワーニングメッセージをエラーログとして保存するコードを作成します。ここでは実装済みのスニペットを利用します。**Snippets**タブを選択後、`warn`で検索すると目的のスニペットが検出されます。➡を選択してスクリプトボックスへ挿入します。
![subscription6.png](https://qiita-image-store.s3.amazonaws.com/0/386147/a4b6cfaf-f15a-a168-fbba-7b064a593d05.png)
ワーニングメッセージを入力し、以下のようにコードを完成させます。スクリプトボックスの編集は完了したので**Done**を選択します。**Save**をクリックして保存します。

```javascript
logger.warn("The freezeWarning subscription was triggered");
```
編集画面が一度閉じるので再度**freezeWarningSubscription**をクリックして開きます。**Subscription Info**タブを選択し、**Enabled**に✔を入れてこの購読を有効化します。**Save**をクリックして保存します。
![subscription7.png](https://qiita-image-store.s3.amazonaws.com/0/386147/eeebd9b1-25eb-742a-d1d5-daf7febfe858.png)

実際にアラートが発生した時に購読機能が動作するかどうか確認します。**Browse**の**MODELING**から**Things**の**MyHouse**を選択します。**Property and Alerts**タブを選択し、**temperature**の右にある**Set value of property**アイコンを選択します。温度を閾値以下である30℃などに設定し✔します。
![alert.png](https://qiita-image-store.s3.amazonaws.com/0/386147/af8007c0-d521-e510-f7fd-58956a79b3de.png)
この時点でアラートが発生し、購読が正常に機能していればWarningメッセージがログ出力されます。**Monitoring**の**Logs**から**ScriptLog**を選択します。これまで出力されたログの履歴が表示されていますので、その中からプロパティを変更した日時のものを探します。履歴と**Log Message**に表示に設定したメッセージが表示されているはずです。
![alert2.png](https://qiita-image-store.s3.amazonaws.com/0/386147/1ca9daad-83b6-3f32-cf6e-1dff708735c8.png)


#[ステップ９：アプリケーションUIを作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/app-ui-foundation-quickstart)
ThingWorxの一つの大きな特徴として、グリッドやチャート、マップ、ボタンといったウィジェットを自由にキャンバスに配置し、そこに表示させたいIoTデバイスデータなどのデータソースを視覚的に関連付ける事でわかりやすくWEBアプリケーションを開発する機能を備えています。開発する為のツールを**マッシュアップビルダー**、完成したWEBアプリケーションを**マッシュアップ**と呼びます。このステップではマッシュアップビルダーを使って家の情報を表示する為のマッシュアップを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/1943be3e-2444-913f-3e8b-147224fd2586.png)

**Browse**の**VISUALIZATION**から**Mashups**の**"+"**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/ed47e7ab-073a-9145-47ca-4d937d772199.png)
マッシュアップのキャンバスタイプの選択画面が出現します。**Responsive**はブラウザのスクリーン幅によってスケールが変化します、今回は配置するウィジェットが少ないので固定幅の**Static**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/a6b9aca9-5b37-177c-1612-bc04a237cbf4.png)
**Name**に`quickStart`を入力します。**Save**をクリックして一旦保存します。保存すると**Design**タブが選択できるようになるので、クリックしてキャンバスの編集を開始します。はじめに電力メーターをゲージとして表示させる為のウィジェットを配置します。**Widgets**タブより`Gauge`を検索し、ドラッグ&ドロップでキャンバスの任意の場所に配置します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/3c52a578-ad26-d7f7-8816-b3cd99b06c2a.png)
ゲージのタイトル（凡例）を入力して表示出来るようにします。**Widget Properties**タブを選択し、**Legend**に表示したい文字列`Watts`を入力します。
![mashup.png](https://qiita-image-store.s3.amazonaws.com/0/386147/65cf3592-a3ab-338c-f077-2e7002da82c0.png)
次に、温度の時系列を表示させる為のTime Series Chartをキャンバスに配置します。Gaugeと同様に**Widget**タブを選択して`Time Series Chart`を検索、ドラッグ&ドロップでキャンバスの任意の場所に配置します。最後に家の地図情報を表示させる為のOpenStreetMapウィジェットをキャンバスに配置します。OpenStreetMapウィジェットはデフォルトでは検索しても存在しません、それを使用する為には[ThingWorx IoT Marketplace](https://www.ptc.com/marketplace)より[OpenStreetMap Extension](https://marketplace.ptc.com/apps/193952/openstreetmap-extension#!overview)をダウンロードし、ThingWorxにインポートしておく必要があります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/cfbf0b57-f648-19e1-5275-1f272c0025ba.png)
最後に配置したウィジェットが期待通り表示されるか確認する為、**View Mashup**を選択してマッシュアップを開きます。このままだと表示するデータがない空のウィジェットが配置されている様子がわかります。
![mashup2.png](https://qiita-image-store.s3.amazonaws.com/0/386147/f6167c7b-0c28-580d-0380-44a9640c2542.png)

#[ステップ１０：データを表示する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/display-device-data)
キャンバスに配置したウィジェットにデータを与え、接続されたデバイスのリアルタイムデータやデータの履歴表示が出来るようにしていきます。

###サービスをマッシュアップに追加する
データはThing、Thing Template、Thing Shapeのいずれかが備えるサービスから取得出来ます。必要なサービスをマッシュアップに追加する手順を紹介します。
マッシュアップビルダーの右上の**Data**マークを選択します。続けて**"+"**マークを選択します。
![data1.png](https://qiita-image-store.s3.amazonaws.com/0/386147/ee1da21b-31c2-58e5-2d4c-5b479bdcb695.png)
取得したいデータを含むエンティティを検索します。作成したThingのMyHouseが表示したいデータを持っているのでそれを検索します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/e5e61670-8910-ccc2-2f5d-913af69a298f.png)
Thingは予め便利なサービスを備えています。今回はThingのプロパティの履歴を出力するサービスであるQueryPropertyHistoryを追加します。`QueryPropertyHistory`を検索し、リストでヒットしたものの➡を選択して追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/e10bf9f0-82ab-062d-f58c-705af5ac3e42.png)
次に現在のプロパティを出力するサービスであるGetPropertyValuesを追加します。同様に検索し、リストでヒットしたものの➡を選択して追加します。どちらも**Mashup Loaded?**に✔を入れ、マッシュアップが起動した際にサービスが実行されるようにします。最後に**Done**を選択して追加作業を終了します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/561f728f-a079-1d73-e358-49526fc91d4e.png)
マッシュアップビルダーの**Data**タブには追加したサービスがThingからの階層形式で表示されている事がわかります。**Save**をクリックして編集内容を保存します。
![data2.png](https://qiita-image-store.s3.amazonaws.com/0/386147/727faec0-c58e-635e-d944-739c44917886.png)

###データをウィジェットにバインドする
サービスから得られるデータとキャンバスに配置されたウィジェットを紐づける作業を行います。はじめにGaugeウィジェットに現在の電力情報を紐づけます。**GetPropertyValues->Return Data->All Data**セクションまで拡張します。**All Data**配下にある**currentPower**をドラッグ&ドロップで**Gauge**ウィジェットに接続します。
![data3.png](https://qiita-image-store.s3.amazonaws.com/0/386147/cadc5599-91e9-c8ca-0e2b-51b92d96e7e8.png)
**Select Binding Target**ダイアログボックスが表示されるので、**Data**を選択します。
![data4.png](https://qiita-image-store.s3.amazonaws.com/0/386147/4c8459fb-83e9-9bf5-3e4f-51f204e584b3.png)

次にOpenStreetMapウィジェットに家の位置情報を紐づけます。**GetPropertyValues->Return Data->All Data**セクションまで拡張します。**All Data**をドラッグ&ドロップで**OpenStreetMap**ウィジェットに接続します。
![data5.png](https://qiita-image-store.s3.amazonaws.com/0/386147/bf748c1f-7fe3-3d90-dea1-5f6ddd266cca.png)
**Select Binding Target**ダイアログボックスが表示されるので、**Data**を選択します。
![data6.png](https://qiita-image-store.s3.amazonaws.com/0/386147/846f75ab-7838-93fa-769a-0a3f57178da9.png)
このままでは全てのプロパティが接続されている状態なので、表示するべきプロパティを指定する必要があります。位置情報を返すプロパティを表示するようウィジェットを設定します。**Widget Properties**タブを選択し、**Location Field**のリストの中から位置情報を返すプロパティの**buidling_lat_long**を選択します。
![data7.png](https://qiita-image-store.s3.amazonaws.com/0/386147/d28863fe-bbdb-fb23-5a40-57c17c505e54.png)

最後にTime Series Chartウィジェットに家の温度の履歴情報を紐づけます。**QueryPropertyHistory->Return Data->All Data**セクションまで拡張します。**All Data**をドラッグ&ドロップで**Time Series Chart**ウィジェットに接続します。
![data8.png](https://qiita-image-store.s3.amazonaws.com/0/386147/a68ef662-fd26-f817-40f7-4caa580993f0.png)
**Select Binding Target**ダイアログボックスが表示されるので、**Data**を選択します。
![data10.png](https://qiita-image-store.s3.amazonaws.com/0/386147/4ffc78c8-7e81-5c0e-cb9a-40bdef9a51c5.png)
全てのプロパティが接続されている状態なので、その内の表示するべきプロパティを指定する必要があります。X軸に時間を、Y軸に温度履歴を表示するようウィジェットを設定します。**Widget Properties**タブを選択し、**XAxisField**のリストの中から**timestamp**を選択します。同様に**DataField1**のリストの中から温度履歴を返すプロパティの**temperature**を選択します。

| Property|Value |
|:-----------------|:---------|
| DataField1     |Temperature|
| XAxisField|timestamp|![data12.png](https://qiita-image-store.s3.amazonaws.com/0/386147/a2b28e6a-3169-0fa0-59a8-91c6c2e500ff.png)


![data9.png](https://qiita-image-store.s3.amazonaws.com/0/386147/7feb556d-0107-e69c-e886-dc28b513d7e6.png)


###バインドされたデータを確認する
データとウィジェットが正しくバインドされているかどうかを視覚的に確認する事が出来ます。

**Data**タブの**GetPropertyValues**を選択した状態でマッシュアップビルダーの下部にある**Connections**を見てみると、**GetpropertyValues**サービスと紐づけられたウィジェットの接続関係を確認する事が出来ます。サービスが**Gauge**ウィジェットと**OpenStreetMap**ウィジェットに接続されている事を確認します。
![data11.png](https://qiita-image-store.s3.amazonaws.com/0/386147/5f297c5f-0ed0-ab74-ce8e-7b9edc849c7d.png)
**QueryPropertyHistory**を選択した場合も同様に接続関係を確認する事が出来ます。サービスが**Time Series Chart**ウィジェットに正しく接続されている事を確認し、**Save**をクリックして保存します。
![data12.png](https://qiita-image-store.s3.amazonaws.com/0/386147/7f7c950a-0fd2-5a52-40bc-80776b29c22d.png)

#[ステップ１１：シミュレーションデータを作成する](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/data-source-foundation-quickstart)
マッシュアップで接続されたデバイスから得られるデータを表示する準備は整いました。但し現在接続されているデバイスは固定値なのでマッシュアップ表示に変化を与える事が出来ません。それを実現する為にプロパティを疑似的に変化させるシミュレータを設定します。

[Things_House_data_simulator.xml](https://tpg-twxdevzone.s3.amazonaws.com/files/media/Foundation%20Quickstart/Things_House_data_simulator.xml)をPCにダウンロードします。ダウンロードしたXMLファイルを**Import Type: Entity**としてインポートします。**Import/Export**を選択しドロップダウンリストから**Import**を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/45660b75-9546-c653-d78a-9676d2d64904.png)
インポートが正常に完了するといくつかのエンティティが取り込まれている事がわかります。**House_data_simulator**というThingが作成されますのでその中身を確認します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/10b5bec7-f5ee-83bb-365f-bc80e3c11dcc.png)
Subscriptionタブを選択します。Event.Timerという購読が登録されている事がわかります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/386147/632d55a0-e585-8fb3-8eb9-d99bec55a26e.png)
この購読はアラートに紐づけられており30秒毎に実行される仕組みです。JavaScriptコードがセットされているスクリプトボックスを見てみます。初めのブロックでは初回は**Thing:MyHouse**の各プロパティに値を設定しています。

```javascript
// Populate properties for the house the first time the service runs only.
if (!Things["MyHouse"].buildingID) {
	Things["MyHouse"].buildingID = "12345";
	Things["MyHouse"].building_lat_long = "42.296375,-71.214556,0";
	Things["MyHouse"].temperature = 70;
}
```

次のブロックはサーモスタッドのロジックを記述しています。温度が72℃を超えるとサーモスタッドの電力を上げてACのフラグをONにします。温度が70.1℃を下回るとサーモスタッドの電力を下げてACのフラグをOFFにします。

```javascript
// Thermostat logic
//	If temperature is above 72, turn AC on, 
//	If temperature is below 70, turn AC off
var temp = Things["MyHouse"].temperature;
if(temp > 72){
    me.isACrunning = true;
    Things["MyHouse"].watts = 100;
}
if(temp < 70.1){
    me.isACrunning = false;
    Things["MyHouse"].watts = 0;
}
```

最後のブロックは温度のシミュレータです。サーモスタッドのACフラグがONの間はアラート検出の度に-0.5℃ずつ温度を下げます。ACフラグがOFFの間は0.2℃ずつ温度を上げます。

```javascript
// Simulate temperature change based on AC status
//	decrease temperature if AC is on,
//	otherwise increase temperature a small amount 
if (me.isACrunning){
	Things["MyHouse"].temperature = temp - 0.5;
} else {
    Things["MyHouse"].temperature = temp + 0.2;
}
```

**Subscription Info**タブを選択し**Enabled**に✔され有効化されている事を確認します。もし無効の場合は有効化します。**Save**をクリックして保存します。

#[ステップ１２：アプリケーションをテストする](https://developer.thingworx.com/en/resources/guides/thingworx-foundation-quickstart/test-application)
最後にシミュレータにより得たデータがマッシュアップに表示されるか確認します。**quickStart**マッシュアップより**View Mashup**を選択します。位置情報がセットされ、30秒後にRefleshすると温度と電力メーターの値が変化していればOKです。

**MyHouse**の**temperature**プロパティを30℃に設定したケース。電力メーター値が0ででサーモスタッドが動作していない様子がわかります。
![test.png](https://qiita-image-store.s3.amazonaws.com/0/386147/97cca6b6-2c03-ac34-0ec8-cc0a0d320aa2.png)
**MyHouse**の**temperature**プロパティを80℃に設定したケース。電力メーターが上がりサーモスタッドが動作している様子がわかります。
![test2.png](https://qiita-image-store.s3.amazonaws.com/0/386147/916454da-5245-10bd-4d7a-40a0a84abeb0.png)

#終わりに
**前提と準備**のセクションで既に触れていますが、作業と投稿にあたり以下の通り注意したい点がありました。

オリジナルのチュートリアルはステップを辿るとページによってデフォルト設定が英語<>日本語で混在しています。
日本語版は一部おかしな和訳が存在するのと、テーブルが壊れている箇所があります。オリジナルを使用される場合は英語で進められる事を推奨します。

試用版のダウンロードできるバージョンが英語ページと日本語ページで異なります。日本語は8.3に対し英語は8.4がダウンロード可能です。8.3で手順を進めた場合、[購読](https://qiita.com/mikamimajime/items/67540b08aac7fe052513#%E8%B3%BC%E8%AA%AD)セクションでSubscriptionにNameを与える手順がありますが、このName付与は8.4からの試用なので手順を進める事が出来ません。英語ページからダウンロードされる事を推奨します。

ページ毎にチュートリアルの作成時期が異なる場合があるようで、タグ名やThing Template名、プロパティ名の統一が図られていない箇所があります。基本的に任意の名前を設定して構いませんが、ステップ11で使用するThings_House_data_simulator.xmlファイルはプロパティ名がハードコードなので最低限その名前に合わせる必要があります。

/