htmlウィジェット開発

投稿日 / 投稿者名

2018.8.1 / 堀江 亮佑

はじめに

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

難易度　★★


概要

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

前提条件

推奨条件

所要時間（目安）

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

つくるもの

今回は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ライブラリを用いることも可能です。