Help us understand the problem. What is going on with this article?

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

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

image.png

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

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

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

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

image.png

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

  • Expressionnew Date() と入力
  • Output Base TypeDATETIMEを選択

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

image.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

  • RefreshInterval を 1に設定

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

image.png

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

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

image.png

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

image.png

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

image.png

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

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

image.png

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

3.出力をStringで受け取る

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

image.png

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

image.png

時計で表示したい...

ThingWorx ウィジェット開発にて詳細説明してますので、そちらをご覧ください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした