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

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

SORACOM Lagoon でSORACOM Map Panelを設定する

SORACOM Map Panelを設定します。
SORACOM Map Panelではデータに応じて地図上に任意のアイコンや移動ラインを表示できます。

lagoon-soracommap_panel

メトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力し「Map」を選択します。

lagoon-soracommap_panel

次に「マップオプション」タブを設定します。

lagoon-soracommap_panel

lagoon-soracommap_panel

ソラコムでは利用可能なアイコンを公開しておりますのでご活用ください。(アイコンセットのURLは変更される場合がございますのでご了承ください)

lagoon-soracommap_panel

lagoon-soracommap_panel

以上でSORACOM Map Panelの設定ができました。

SORACOM Lagoon でSORACOM Image Panelを設定する

SORACOM Image Panelを設定します。
SORACOM Image Panelでは画像上の任意の場所にデータに応じたアイコンを表示できます。

lagoon-soracomimage_panel

まずはメトリックタブにHarvest にデータ通信したAir SIM のIMSI を入力し、今回は「temp」の値をセットします。

lagoon-soracomimage_panel

次に「images」タブを設定します。
「background」に背景として表示したい画像のURL を入力します。
今回はS3にアップロードした間取り図を使用します。

「+ Add Image」をクリックすると背景として表示した画像の上にクエリ結果に応じたアイコンを表示することができます。

lagoon-soracomimage_panel

次に「Labels」タブを設定します。
「+ Add Image」をクリックすると背景として表示した画像の上にクエリ結果のラベルを表示することができます。

lagoon-soracomimage_panel

以上でSORACOM Image Panelの設定ができました。

SORACOM Lagoon でSORACOM Dynamic Image Panelを設定する

SORACOM Dynamic Image Panelを設定します。
SORACOM Dynamic Image Panelではデータに応じて表示する画像を動的に変更できます。

lagoon-soracomdynamicimage_panel

Harvestのデータを準備します。 SORACOM Air の SIMの挿さったデバイスから以下のコマンドを実行してください。

curl -v -X POST -H 'content-type:application/json' -d '{"Battry":50, "Charging":0}' http://harvest.soracom.io

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

lagoon-soracomdynamicimage_panel

今回表示する画像データはAWS S3にアップロードして利用します。(ネットワーク経由でアクセスできる場所であればどこでも構いません。)

ファイル名を battery-{残りのバッテリー残量}-{充電しているか}.png としています。
充電しているかは0であれば充電されておらず、1であれば充電中という想定です。

lagoon-soracomdynamicimage_panel

次にSettingsタブを設定します。
「背景画像のURL」には先ほどAWS S3に保存した画像のURLを指定します。
今回はバッテリーの残量と充電しているかの変数に応じて表示する画像を出し分けたいので入力するURLは画像ファイル battery-0-0.png に対してbattery- までとなります。
今回pngファイルを指定していますがJPEG等の拡張子も選択いただけます。

また「+Add Variable」から変数を設定できます。
名前には1つ目の変数として「A-Battry」を指定します。
Minimum Valueを0、Maximum Valueを100とし、Intervalを50にしています。

クエリAの結果Battry の値が〜24のとき変数に0 がセットされ25~74の時変数に50がセットされ75~の時に100がセットされます。

lagoon-soracomdynamicimage_panel

「+Add Variable」から2つ目の変数を設定します。 名前には2つ目の変数として「A-Charging」を指定します。 Minimum Valueを0、Maximum Valueを1とし、Intervalを1と設定しON/OFFを1と0で表現します。

lagoon-soracomdynamicimage_panel

パネルに戻ると以下のように電池残量と充電されていない状態を表すことができました。

lagoon-soracomdynamicimage_panel

次に値によって画像が変化することを確認します。
以下のコマンドを実行しブラウザの再読み込みを実施してください。

curl -v -X POST -H 'content-type:application/json' -d '{"Battry":90, "Charging":1}' http://harvest.soracom.io

以下のように電池残量が増加し充電中の状態を表す画像が表示されました。

lagoon-soracomdynamicimage_panel

以上でSORACOM Dynamic Image Panelの設定ができました。


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

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