htmlウィジェット開発

投稿日 / 投稿者名

2018.8.1 / 堀江亮佑

はじめに

本レポートは、Things Cloud の利用例をより知っていただくための実利用レポートとして作成したものです。
Things Cloud は極力後方互換性を持つよう開発されていますが、今後のリリースにより、一部画面やコマンド、手順などが変更となったり、利用できない可能性があることをあらかじめご了承ください。
なお、作成にあたり、以下バージョンを用いています。

ver.8.15.8（backend/UI）

難易度　★★

概要

本セクションでは、htmlウィジェットの実装方法についてご紹介します。
htmlウィジェットは、htmlを用いてwebページライクなウィジェットを作成しThings Cloud内のデータ表示などを行うことができます。

前提条件

次の言語を扱えること。
- HTML5
- JavaScript

推奨条件

次のフレームワークに関する知識があることが望ましい。
- AngularJS (1.x系)

所要時間（目安）

この手順に沿って、htmlウィジェットを開発する場合の所要時間。

約30分

つくるもの

今回はhtmlウィジェットを用いてデバイス名やデバイス数などの値を表示するウィジェットを作成します。

1. ウィジェット作成

コックピット->グループ->　から自身のグループのダッシュボードを選択してください。

ない場合は画面右上の歯車マークよりダッシュボードの追加を行ってください。

ウィジェットを追加検索欄にHTMLと記入し任意のアセット/デバイスを選択、今回はグループを選択します。

htmlコードの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
  <h1>hello html widget</h1>

</body>
</html>

変数の利用

htmlウィジェットには変数を用いることができます。 Things Cloud公式リンク説明/設定ガイド/ユーザーガイド/コックピット「HTML」ウィジェット

どの変数を用いることができるかはウィジェットを作成よりアセットプロパティまたはアセットテーブルを選び[+プロパティを追加] をクリックすることで、対象となるプロパティの一覧を表示することができます。今回はグループを選択しているため、device.nameを用いるとグループ名、deivcesCountを用いるとグループに属するデバイスの数がカウントされます。これらのウィジェットで新しく生成されたプロパティはHTMLウィジェットでは使用できません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
  <h1>hello html widget</h1>
  デバイス名:{{device.name}}<br>
  デバイス数:{{devicesCount}}<br>
</body>
</html>

また、この変数は{{}}の中であれば四則演算が可能なため変数として用意されていない値(オフラインのデバイス数など)も以下のようにして実装することが可能です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
  <h1>hello html widget</h1>
  オンラインのデバイス数:{{onlineCount}}<br>
  オフラインのデバイス数:{{devicesCount - onlineCount}}<br>
  デバイス数:{{devicesCount}}
</body>
</html>

発展

安全でない要素と属性の使用を許可 のチェックボックスをオンにするとさらに多彩な表現が可能になります。今回はJQueryを用いて簡易的な装飾を行ってみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html widget test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $("#offline").css("color","red")

  });
</script>
</head>
<body>
<h1>hello html widget</h1>
オンラインのデバイス数:{{onlineCount}}<br>
<p id="offline">オフラインのデバイス数:{{devicesCount - onlineCount}}</p><br>
デバイス数:{{devicesCount}}
</body>
</html>

これだけならhtmlでも実装することは可能ですがJQueryを用いることでもっとリッチな表現も可能になります。また他のJsライブラリを用いることも可能です。