SORACOM Developers

SORACOM Lagoon Documents

SORACOM Lagoon を利用して様々なパネルを作成する

このドキュメントではSORACOM Lagoon を活用した様々な可視化方法いついて解説します。

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

SORACOM Lagoon とは

SORACOM Lagoon(以降、Lagoon)は、SORACOM Harvest(以下、Harvest) を使って収集・蓄積したデータに対し、目的に応じて複数のグラフ、テーブル、地図等を組み合わせたダッシュボードを作成し、それらを公開もしくは共有できるサービスです。

lagoon_overview

本サービスを活用することで、ダッシュボードのためのインフラを準備することなく、センサーなどのIoTデバイスが取得したデータを可視化できます。また、値が一定値を越えたらメールやSlackで通知を送るといったアラート機能や、作成したダッシュボードを第三者に共有することもできます。

Lagoon はOSS として提供されているGrafana をベースとしており、データソースとしてHarvest に蓄積されたデータを利用します。

Harvest を設定する

今回はユーザーコンソールからHarvest を有効化する設定を行います。

注意
Harvest は有料のサービスです。Harvest が有効になっていると SIM 1枚ごとにオプション料金が発生します。詳しくは料金表を確認してください。

ユーザーコンソールでの設定方法

Harvest の設定はグループ単位で行います。そのため、Harvestを使うには Air SIM をグループに登録する必要があります。今回は、動作確認として SORACOM Harvest 専用のグループを作成し、そのグループに Air SIM を登録してみましょう。

まず Air SIM 管理画面を開いて、SORACOM Harvest でデータ収集を行いたい Air SIM にチェックマークを付け、[操作] ボタンから [所属グループ変更] を選択します。

lagoon_creategroup01

Air SIM の所属グループを選択するためのダイアログが表示されたら、[新しい所属グループ] ドロップダウンから [新しいグループを作成…] を選択します。
今回は“Hello Lagoon Alert"というグループ名で作成しSIM を所属させます。

lagoon_creategroup02

先ほど作成した "Hello Lagoon Alert” グループに対し、SORACOM Harvest の設定を行います。設定を行うためには、グループ管理画面を開き、"Hello Lagoon Alert" グループを選択してグループ詳細画面を開きます。

[SORACOM Harvest 設定] グループの中にあるスイッチをONに設定し、保存ボタンをクリックしてください。

lagoon_settinggroup

HTTPでデータを送信する

サンプルデータとしてHarvestエントリポイント宛にHTTP POSTリクエストを送信します。今回は以下のような座標データと気温、湿度のデータを先ほどグループ設定したAir SIM から数秒ごとに送信します。

コマンド例:

$ curl -v -X POST -H 'content-type:application/json' -d '{"lat":35.4011, "lon": 139.4439, "temp": 27.2, "humi":43.0}' http://harvest.soracom.io
$ # 数秒待つ

$ curl -v -X POST -H 'content-type:application/json' -d '{"lat":35.40319, "lon": 139.44471, "temp": 28.0, "humi":48.0}' http://harvest.soracom.io
$ # 数秒待つ

$ curl -v -X POST -H 'content-type:application/json' -d '{"lat":35.40528, "lon": 139.44552, "temp": 29.2, "humi":49.0}' http://harvest.soracom.io
$ # 数秒待つ

$ # more...

ユーザーコンソールからHarvest で収集された JSON 形式のデータを可視化できます。

lagoon-panel_harvest

以上で「SORACOM Harvest を設定する」まで完了しました。 ここまでのHarvest の設定について不明点があれば、SORACOM Harvest でデバイスのデータをクラウドで収集・取得・可視化する をご確認ください。

SORACOM Lagoon を設定する

Lagoonの初期設定がお済みでない場合はSORACOM Lagoon を利用してダッシュボードを作成するに沿って設定を行ってください。

SORACOM Lagoon でテキストパネルを設定する

テキストパネルの設定についてです。
さっそくテキストパネルをクリックし、編集していきましょう。

lagoon-panel_newpanel_text

テキストパネルは主にダッシュボード全体やパネルを文章で説明するために利用します。 Modeプルダウンから「markdown」「html」のどちらかを記法を選択できます。

「markdown」では以下のように簡単に文章を作成できます。
「markdown」は後述の「html」に比べて直感的なフォーマットで、文章を記述するのに適しています。

lagoon-panel_textpanel_markdown

「html」では多彩な表現が可能です。 例えばstyleタグを応用しCSSでアニメーションをつけたりimgタグで外部から画像を表示したり等、様々なユースケースに対応することができそうです。  ※自身でアップロードした画像を表示してください。

lagoon-panel_textpanel_html

以上でテキストパネルの設定ができました。

SORACOM Lagoon でグラフパネルを設定する

グラフパネルの設定についてです。
グラフパネルは時系列でのデータの推移を可視化し、データがどのように分布しているのかをヒストグラム等で表示できます。

lagoon-panel_newpanel_text

まずはメトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力します。

lagoon-panel_graphpanel01

この時点でこのSIM のデータ全てが表示されますが、もしX軸(時間軸)が合わずデータが表示できない場合 右上の時計ボタンから表示するタイムレンジを選択できます。
また、より細かい調整が必要な場合はグラフを直接ドラッグし、表示範囲を指定することもできます。

lagoon-panel_graphpanel02

クエリを追加し複数の統計情報を合わせてグラフに描画できます。

lagoon-panel_graphpanel03

次に軸の設定を見てみましょう。 X軸の「モード」プルダウンから時系列データだけではなくシリーズデータ、ヒストグラムを選択することもできます。 温度と湿度のようなデータの分布範囲が異なる複数のデータを一つのグラフに表示したい場合に、複数のY軸を設定しそれぞれのグラフを見やすく表示したい事があります。その場合は、この画面からもうひとつのY軸を追加することができます。 (それぞれの軸にどのデータを割り当てるかはこのあと「表示」タブで設定していきます。)

lagoon-panel_graphpanel04

次に表示タブを設定します。 この画面では線グラフ、棒グラフ、点グラフ等の描画モードや線、点の表現を設定できます。

lagoon-panel_graphpanel05

表示タブの「系列のオーバーライド」から各データの設定が可能です。 グラフの色の変更や「Y-axis : 2」を選択することで、そのデータを右Y軸にマッピングすることが可能です。

lagoon-panel_graphpanel06

以上でグラフパネルの設定ができました。

SORACOM Lagoon でテーブルパネルを設定する

テーブルパネルを設定します。
テーブルパネルはデータを表形式で表示します。表上部をクリックすることでその列でソートできます。

lagoon-panel_newpanel_table

メトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力します。
クエリの順番でテーブルパネルに表示する列の順番を変えることができます。

lagoon-panel_tablepanel01

以下のように各列の表示スタイルを変更ししきい値ごとに色を変えたりすることでより直感的に可視化できます。

lagoon-panel_tablepanel02

CSVとしてエクスポートすることも可能です。

lagoon-panel_tablepanel03

以上でテーブルパネルの設定ができました。

SORACOM Lagoon でシングルスタットパネルを設定する

シングルスタットパネルを設定します。
シングルスタットパネルは単一のデータを表示します。例えばKPIや重要な指標の現在値を確認する用途にご利用いただけます。

lagoon-panel_newpanel_singlestat

まずはメトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力し、今回は「humi」の値をセットします。
数字が出てきました。(もし出てこない場合は、タイムレンジ内に表示できるデータが存在していない可能性があります。右上の時計ボタンから表示するタイムレンジを選択できます。)

lagoon-panel_singlestatpanel01

次にOptionsタブを設定します。

lagoon-panel_singlestatpanel02

以上でシングルスタットパネルの設定ができました。

SORACOM Lagoon でヒートマップパネルを設定する

ヒートマップパネルを設定します。
ヒートマップパネルはデータの多寡を色によって表現できます。データの時間分布を直感的に把握したい場合などにご利用いただけます。

lagoon-panel_newpanel_heatmap

まずはメトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力し、今回は「temp」の値をセットします。 この時点では点グラフのように表示されているはずです。

lagoon-panel_heatmappanel01

次にaxesタブの設定を行っていきます。
「Y Axis」のUnitからデータ種別を選択します。今回は温度なのでtemperatureからCelsius(℃)を選択します。またここから軸の対数表示、最大値、最小値も設定できます。
「Buckets」の「X Axis」「Y Axis」から表示するデータサイズを変更できます。例えば「X Axis」のサイズを30秒とし「Y Axis」を2℃とすることで30秒間に2℃間隔のデータがどのくらいあったのかを色の濃さで表現できます。

lagoon-panel_heatmappanel02

Displayタブから表示するグラデーションや凡例等の見栄えの調整ができます。

lagoon-panel_heatmappanel03

以上でヒートマップパネルの設定ができました。

SORACOM Lagoon でワールドマップパネルを設定する

ワールドマップパネルを設定します。
ワールドマップパネルでは地図上にデータを表示できます。

lagoon-panel_newpanel_worldmap

まずはメトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力します。
また、今回は「temp」の値をセットし「Map」を選択します。
現状この時点では地図にデータは描画されません。

lagoon-panel_worldmappanel01

次に「Worldmap」タブを設定していきます。
「Map Data Options」の「Location Data」のプルダウンから「json result」を選択してください。
この時点でデータが地図上にマッピングされるはずです。
「Map Visual Options」から地図のセンタリング座標の設定、初期ズーム値、表示円の最小値、最大値が設定できます。
 ※現時点では、位置情報と同時に保存したデータの値(温度など)を元に円の表示を変更したり、マウスオーバー時に表示する内容を変更したりする機能に対応しておりません。

lagoon-panel_worldmappanel02

以上でワールドマップパネルの設定ができました。

SORACOM Lagoon でクロックパネルを設定する

クロックパネルを設定します。
クロックパネルでは時刻を表示できます。

lagoon-panel_newpanel_clock

時間が表示されます。

lagoon-panel_clockpanel01

「Options」タブから文字の大きさや日付の表示が設定できます。

lagoon-panel_clockpanel02

以上でクロックパネルの設定ができました。

以上の設定でこのような多彩なパネルを含むダッシュボードが作成できました。
同じパネルでも設定次第で表現や伝えたいことは色々変わってきます。ぜひ色々な設定を試してみてください。

lagoon-panel_dashboard

Getting Started

SORACOM Air for セルラー

SORACOM Air for LoRaWAN

SORACOM Air for Sigfox

SORACOM Beam

SORACOM Canal/Direct/Door

SORACOM Endorse

SORACOM Funnel

SORACOM Gate

SORACOM Harvest

SORACOM Inventory

SORACOM Junction

SORACOM Krypton

SORACOM Lagoon

サービス機能詳細

Developer Tools

pagetop