ThingWorx: マッシュアップで現在時刻を取得する方法

#はじめに

ThingWorx のマッシュアップで、クライアント側の現在時刻を取得・表示したいときにはどうすれば良いでしょうか？
本記事では、マッシュアップ内で現在時刻を取得する方法を説明します。

**対象バージョン**
この記事の紹介内容は、ThingWorx 8.4 以降で有効です。

**作成日**
この記事は2019年9月に作成しています。情報が古くなっている場合がありますので、ご注意ください。

#Expression Function を使う

Expression Function は ThingWorx 8.4 から導入された機能で、8.3 までは Expression ウィジェットとして同様の機能が提供されていました。本記事は ThingWorx 8.4 以降を対象とするので、Expression Function を用いた方法を説明します。

##1: Expression Function を追加する

まず、Expression Function を追加するところから始めます。まだマッシュアップを作っていなければ、マッシュアップをひとつ作成してください。
マッシュアップビルダーの右下に Expression Function を追加するボタンがあるので、クリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/59bbb6dc-c6fa-067b-6e60-09179255e975.png)

"New Function" ダイアログが表示されるので、必要事項を埋めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/cb07bff4-9222-a9eb-f057-f2a5b18a9c49.png)

- **Function Type** に "Expression" を選択
- **Name** に "CurrentDate" と入力

**Name** は他の Function と区別するためのものなので、"CurrentDate" でなくとも、

好きな文字列で大丈夫です。

Nextボタンをクリックすると、作成中の Function の詳細設定画面に遷移します。（次画像）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/8956bd93-8666-e5b3-6017-08ffd6ec7131.png)

いろいろと設定項目がありますが、必要なものは二つだけです。

- **Expression** に ``new Date()`` と入力
- **Output Base Type** に ``DATETIME``を選択

上記二つを設定したら、"Done" ボタンをクリックします。そうすると、マッシュアップビルダーの右下の部分に、新しく作った "CurrentDate" Expression が追加されていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/d8d86297-4801-dd20-63da-e41610b11cee.png)

##2.マッシュアップから CurrentDate Expression を使う

Expression Function はイベントを契機の呼び出され、Expression に指定した Javascript を実行し、その結果を Output として返します。今回、Expression には``new Date()``という JavaScript を指定しました。ですので、CurrentDate Expression が呼び出されれば、現在時刻を DATETIME 型の Output というパラメタで戻してくれれます。

では、CurrentDate Expression を呼び出すイベントはどうすればいいでしょうか？ 一番簡単なのは、Auto Refresh ウィジェットですね。

ということで、マッシュアップに Auto Refresh ウィジェットを追加し、下記のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/b254acea-cf14-cbd2-56d1-ac3a5f2db587.png)

- **RefreshInterval** を 1に設定

次に、Auto Refresh ウィジェットの Refresh イベントを、先ほど作成した CurrentDate Expression の ``Evaluate``入力パラメタにバインドして下さい。オブジェクト関係図は下記のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/6871d03d-8f87-64ec-ffdd-b09155c847e3.png)

これで、1秒おきに Auto Refresh ウィジェットの Refresh イベントが発行され、CurrentDate Expression が呼び出されるようになりました。

つぎに、CurrentDate Expression の Output をマッシュアップに表示します。Date Time Picker ウィジェットをマッシュアップに配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/a894f733-1309-ae89-444a-5640623430c9.png)

さらに、CurrentDate Expression の``Output``出力パラメータをを、いましがた配置した Date Time Picker の "DateTime" プロパティにバインドしてください。オブジェクト関係図は下記の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/e6778524-64b9-7c3e-ed5e-40e7df5b968f.png)

CurrentDate Expression の状態は次のようになっているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/447c9012-27a0-a57f-209d-896924676b63.png)

入力パラメータである``Evaluate``と、出力パラメタ〜である``Output``が両方ともバインドされていることがわかります。（白ではなく黒い矢印で表示されています）

ここまでできたら、マッシュアップを保存して実行してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/3a54d61b-8320-974d-9213-502ab44f8dd0.png)

1秒おきに Date Time Picker の表示が変わっていることがわかりますね。

##3.出力をStringで受け取る

ここからは余談ですが、現在時刻を String 型で受け取るにはどうすればいいでしょうか？
やりかたは簡単で、単純に TextBox ウィジェットなどの"String型を受けとるウィジェット"へ OutPut を渡してください。オブジェクト関係図は下記の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/74631ce8-2c4f-4e0e-3bec-1ed6392e6e4d.png)

マッシュアップを保存して実行すると、TextBox ウィジェットに現在時刻が表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119047/9056710b-fd13-ca1c-080e-f75d7caf58b0.png)


#時計で表示したい...

[ThingWorx ウィジェット開発](https://qiita.com/kanoloa/items/374281b7b6d3536795c9)にて詳細説明してますので、そちらをご覧ください。