【NoCode】SORACOM GPSマルチユニットのデータをglideで可視化した、LagoonもどきのPWA

NoCode

宮本たいきのNoCodeアプリ製作。

今回は、SORACOMのGPSマルチユニットで取得した各種データをNoCodeツール「glide」で可視化します。

ちなみにSORACOM製品については以前、SORACOM Summer Challenge 2020にて使用したことがあり、それ以来IoTで色々遊んでいます。

SORACOM Summer Challengeでは審査員特別賞を受賞することができ、副賞として3Dプリンターを頂きました🙌

その時の記事は▼コチラ▼

IoTを駆使してお年寄りの家を見守る「だけじゃない」システムを作った【SORACOM Summer Challenge 2020】 - Qiita
はじめに SORACOM Summer Challenge 2020の参加レポートです。 ネットでたまたま見つけたこのイベント、研究室でIoT向けの楕円曲線暗号の研究をしているものの、実際にIoTを使って何かを作ったことがなかっ...

というわけで少し余談が入りましたが、glideでゴリゴリNoCode開発始めて参ります。

この記事で学べる事

SORACOM GPSマルチユニットで取得したデータをGoogleスプレッドシートに保存する方法

glideでSORACOM Lagoonもどきを作製する方法

作ったもの

こんな感じで

  1. 現在の温度・湿度・測定した場所
  2. 過去数時間の温度・湿度の推移

が見られるようになっています。

ネイティブアプリではなく、PWA(Progressive Web Application)です。

SORACOM×glideアプリの作り方

SORACOM Beam

SORACOM Beamを使って、UDP to HTTPを行います。

SIMグループの設定 > SORACOM Beam設定に行き、UDP→HTTP/HTTPSエントリポイントを作成します。HTTPのエントリポイントは一旦空欄で構いません。

その他設定もデフォルトのままでOKです。

詳しいことは公式ドキュメントをご覧ください。

Pipedreamの設定

日本で使われている方をあまり見かけないんですが(気のせい?)、超絶便利なのがこのPipedreamです。

様々なワークフローを作成することができます。IFTTTに似てるっちゃ似てる感じ。

Event Listenerの作成

Event ListenerとなるURLをコピーし、先ほどのSORACOM Beamの転送先のホスト名に入力します。

先頭のHTTPSは要らないので注意!

ポート番号・パスは空欄でOKです。

Base64 Decoder

SORACOM Beamから送られてきたデータはBase64でエンコードされているので、Pipedream側でデコードしてあげます。

{{steps.trigger.event.body.payload}}

の部分が緯度・経度・温度・湿度などのデータ部になります。

Googleスプレッドシートへデータを格納

Google SheetsのAdd single row to sheetを選択

[0]に{{steps.trigger.context.ts}} ←タイムスタンプ

[1]に{{steps.base64_decode_string.data}} ←デコードされたデータ

残りのSpreadsheet ID, Sheet Nameなども適切に設定します。

上手くいくとこんな感じでGPSマルチユニットがデータを送信する度にスプレッドシートに格納されます。

Adalo用に整形

そのままのJSON形式では扱いにくいので、Adalo用に整形します。

新しいシートを作成し、こんな感じで行いました。

dateの部分に定義されている関数

=DATE(LEFT(data!A2, 4), MID(data!A2, 6, 2), MID(data!A2, 9, 2))

timeの部分に定義されている関数

=IF(A2<>"", TIME(MID(data!A2, 12, 2)+9, MID(data!A2, 15, 2), MID(data!A2, 18, 2)), "")

IF文を用いているのは、データが何もないときに9:00:00と表示されないようにするためです(日本時刻に合わせるためにTIME関数内で+9している)。

tempとhumiをJSONから取り出す方法についてはこの記事をご覧ください。

glideアプリの作成

お待たせしました、glideの登場です!

From Google Sheetから先ほど作成したスプレッドシートを選択します。

現在の温度・湿度・観測場所を測定するタブの作成

こんな感じのものを作ります

詳しい説明は割愛しますが、現在の気温・湿度・観測場所を表示するために別のシートを用意しています。

例えば、dateの部分ではこんな関数を書いています。

=INDEX(filter!A:A, COUNTA(filter!A:A))

filterというのが、前項の「Adalo用に整形」の部分のシートのことです。

filterのシートの中から最終行のデータを指定(COUNTA)し、INDEX関数で取り出すというようなことをしています。

time, temp, humi, lat, lonの部分も同じです。

temp(unit)の部分は℃つきで温度を表示するためのセルで、単純にCONCAT関数を使ってC2セルと”℃”を結合しています。

地図表示するための緯度・経度情報も単純にくっつけているだけです。

=IF(H2<>"", CONCATENATE(G2, ", ", H2), "")

すると、こんな感じで地図に表示もできちゃいます。

ちなみに、温度・湿度のバロメーターは標準機能のProgress Barです。

推移を表示するタブの作成

これも標準機能のChartsを使っているだけ。

ただ、あまりデータが多くても見にくくなるのでQUERY関数で最新の10行だけを表示するようにしています。

各値を非表示にした場合

てなわけで、完成!

製作時間

総製作時間はだいたい4~5時間ぐらい?

何をしたかかった時間備考
SORACOM Beamの使い方1時間強UDPtoHTTPでないとPipedreamにデータを送れないことに気付くのに時間がかかった
PipedreamでデコードしたJSONの扱い1時間色々なアドオンを試しつつ、独自関数を作れば早いと気付くのに時間がかかった
glideでUI作り2時間強30分ぐらいでとりあえず表示できるようにはなった
それからUIを整えるのに時間を使った

さすがNoCodeですね。

これをVue.jsで作ってPWA化なんてしたたらもうちょい時間はかかるでしょう。

まとめ

SORACOM LagoonもどきのPWAをglideで作ったというお話でした。

いや、おめえ独自関数作るためにGAS使っとるけんNoCodeじゃねえやん!

その通りです。

NoCodeってなんだかんだ言ってバックでいろんな関数使ってロジック組む必要があるんですよね。

そういう意味ではプログラミング的思考って依然必要なのかなって思ってます。

とはいっても、私みたいにフロントが得意でない人間からしたら、UIをNoCodeに任せられるのは大きいです。

これからも愛しています、NoCode

これからNoCodeを学びたいという方

NoCodeといっても、最初はそれなりに勉強する必要があります。

個人的には、2時間でサクッと学べるUdemyの下記の講座がおすすめです。

NoCode (ノーコード)入門講座 – Glide 編- プログラミングをしないでアプリを作ろう!

コメント

タイトルとURLをコピーしました