Soracom

Users

ドキュメント

テンプレートを使用して Dashboard を作成する

このドキュメントでは SORACOM Lagoon (以降、Lagoon) の Dashboard をテンプレートから作成する手順を解説します。テンプレートを用いずに作成する方法は サンプルデータソースを使用して Dashboard を作成する を参照してください。いずれのドキュメントにおいてもサンプルデータソースを用いるためデバイスやデータが用意できていなくとも利用できます。

以下の画像のような Dashboard を簡単にテンプレートからインポートし、Lagoon による可視化を検証できます。

当ガイドの前提は以下のとおりです。

テンプレートをインポートする 

Lagoon では JSON 形式で記述されたモデルをインポートできます。すべてのパネルを自身で作成することも可能ですが、作成したいイメージに近いサンプルダッシュボードをインポートできれば作成の時間を短縮でき、その後カスタマイズできます。

テンプレートを作成する 

サンプルデータソース (1 台) サンプルダッシュボード を開き [このダッシュボードを使う] をクリックします。

[クリップボードへコピー][SORACOM Lagoon でインポート] をクリックすると、サンプルダッシュボードのテンプレートをコピーしたまま SORACOM Lagoon のインポート画面へ遷移します。なお、今後のために保存しておきたい場合は [JSON ファイルとしてダウンロード] を利用してください。

[SORACOM Lagoon でインポート] をクリックすると、Lagoon のインポート画面に遷移します。[Import via panel json] にて先ほどクリップボードにコピーした JSON を貼り付けてください。Windows の場合は Ctrl + V、Mac OS の場合は ⌘ (Command) + V で貼り付けできます。

JSON ファイルが貼り付けられなかった場合は、再度先ほどのサンプルダッシュボードのページよりコピーしてください。

インポートの詳細画面に遷移するので、[Import] をクリックします。

すでに Lagoon で Dashboard を作成している場合、「作成数の上限に達しています」と表示される可能性があります。不要な Dashboard があれば削除した後、再度インポートしてください。削除できる Dashboard がなければ、プランのアップグレードを検討してください。プランごとの料金は、SORACOM Lagoon のご利用料金 を参照してください。

インポートに成功すれば、Dashboard が表示されます。

次のステップ 

  • サンプルダッシュボードで使用している可視化の種類の解説 を参考に、実デバイスの可視化を設定してください。
  • 作成した Dashboard は同じオペレーター ID に所属する他の Lagoon ユーザーと共有したり Pro プランでは Snapshot として誰でも閲覧できる URL で共有できます。Dashboard の共有 を参照してください。
  • 温度や湿度の値が一定値に達した場合にメールによる通知ができます。Alert を設定する を参照し通知チャンネルとルールを設定してお試しください。

参考: サンプルダッシュボードで使用している可視化の種類の解説 

各パネルの設定について解説します。

温度・湿度: Graph (グラフ) 

設定方法は 可視化の種類: Graph も参照してください。

  • Override 機能 を用いて Query A の [Display name]温度、Query B の [Display name]湿度 と設定しています。
  • Display 設定にて [Area fill]0 にしています。
  • Series overrides 設定にて湿度の [Color][Y-axis]2 にしています。
  • Axes: Left Y/Right Y 設定にて [Left Y][Unit]Celsius (℃)[Right Y][Unit]Humidity (%H) としています。
  • Legend: Values 設定にて Avg を表示するようにしています。

電池残量: Gauge (ゲージ) 

設定方法は 可視化の種類: Graph も参照してください。

  • Display 設定にて Show threshold labels を有効にしています。
  • Field オプション にて以下を設定しています。
    • Standard options にて [Min]0[Max]1 と設定しています。
    • Threshold 機能 にて [0.7][0.3]オレンジ[Base] と設定しています。
    • Value mappings にて [0.7][1] の Range を [0.3][0.7] の Range を [0][0.3] の Range を と設定しています。

海抜: Stat (スタット) 

設定方法は 可視化の種類: Stat も参照してください。

  • Field オプションStandard options にて以下を設定しています。
    • [Unit]meter (m) と設定しています。
    • [Color scheme]Yellow-Blue (by value) と設定しています。

位置: SORACOM Map Panel (マップ) 

設定方法は 可視化の種類: SORACOM Map も参照してください。

  • [Map Visual Options][Max Circle Size]3 にしています。
  • [Query A Options][Show Line]Animated にしています。

データの履歴 : Table (テーブル) 

当サンプルダッシュボードではテーブルパネルをカスタマイズしていません。カスタマイズしたい場合は 可視化の種類: Table を参照してください。