LivebookのSmartCellのDBとMapを使ってGPSログデータを可視化してみた

はじめに

本記事は以下のことを行います

1. 自前で作成したGPSロギングシステムのDBにLivebookからコネクションを貼る
2. コネクションを貼ったDBからSQLクエリでデータを取得
3. SmartCellのMap上に可視化

Livebookの準備

こちらからインストールバイナリか

docker、livebookリポジトリからcloneお好きな方法で起動してください

日本語記事はこちら

SmartCellについて

SmartCellはLivebookののセルの１つで
Elixirを記述するCodeと
Blockにはセクション、マークダウン、図、画像があり
SmartCellには以下があります

• chart -> グラフ描画
• databae connection -> DBに接続
• map -> MapLibreを表示、データを描画
• neural network task -> 画像分類、画像生成、テキスト分類、テキスト生成等を行う
• sql query -> 接続したDBに対してqueryを発行する
• slack message -> 指定したチャンネルにpostする

今回はこの中で database connection, sql query, mapを使います

可視化するデータについて

今回は自前のGPSロギングアプリのDBにつないでいきます
データとしては　GPSログ単体をposition,それを束ねたのをrouteとしています
データとしては以下になります

routes

   Column    |              Type              | Collation | Nullable |              Default               
-------------+--------------------------------+-----------+----------+------------------------------------
 id          | bigint                         |           | not null | nextval('routes_id_seq'::regclass)
 name        | character varying(255)         |           |          | 
 description | character varying(255)         |           |          | 
 user_id     | bigint                         |           |          | 
 inserted_at | timestamp(0) without time zone |           | not null | 
 updated_at  | timestamp(0) without time zone |           | not null | 

positions

   Column    |              Type              | Collation | Nullable |                Default                
-------------+--------------------------------+-----------+----------+---------------------------------------
 id          | bigint                         |           | not null | nextval('positions_id_seq'::regclass)
 lat         | double precision               |           |          | 
 lng         | double precision               |           |          | 
 user_id     | bigint                         |           |          | 
 route_id    | bigint                         |           |          | 
 inserted_at | timestamp(0) without time zone |           | not null | 
 updated_at  | timestamp(0) without time zone |           | not null | 

それでは可視化を指定いきます

DB 接続

+Smart をクリックするとセットアップが必要とのことなので実行します

Database connectionを選んで、DBは今回はPostgreSQLなのでそれを選択します

パッケージの追加が必要と言われるので追加して再起動します

再起動が完了すると以下のフォームが出てくるので必要な情報をいれます

コネクションが無事はられると ASSING TO で設定してある connに値が入ります
これで完了です

SQL Queryの実行

+ SmartのSQL queryをクリックします

すると以下のフォームが出てきます

可視化可能なrouteを知りたいので全件取得します
table_nameをroutesに変えてlimitを消して実行すると以下の結果が得られました
結果はresultに入ります

次に route id: 13 のpositionを取得します
結果はresult2に入ります

地図上に表示するデータの準備ができたので次はMapを使っていきます

地図上に表示

+ SmartでMapを選択するとライブラリの追加と再起動を要求されるので実行します
完了すると以下のようなフォームが表示されます

ヘッダーの青い部分をそれぞれ

• MAP STYLE: default -> street
• CENTER: 130.55,33.32
• ZOOM: 0 -> 4

ボディの白い箇所をそれぞれ以下に設定します、
sourceをresult2に変えると他のフォームが差し替わります

• Source: Geocoding -> result2
• Coordinates format: Single lng, lat -> Two Columns
• Longitude(lng): lng
• Latitude(lat): lat
• Radius: 5 -> 2

実行すると以下のように地図上にGPSのログが表示されました！

レイヤーの追加

マップ右下のadd layerを押すと別の設定で他のデータを追加で表示できます
マップのセルの上にqueryのセルを追加して他のrouteのデータを取得し、result3とします

sourceをresult3にし、色を赤にして、似たような場所を通ってresult2のデータが見えないのでOpacityを0.1にして下の黒が見えるようにします

２つのデータを可視化できました！

おまけ１：本番サーバーのGigalixirのDBのデータ

こうやって行った所が全部表示されて徐々に開拓されていく感じがワクワクしますねぇー

おまけ２：スマートセルの裏側をみれる

セルをクリックすると右上にいろいろ出てくるので 左端のtoggle sourceをクリックすると実際のコードに変わります

２つめのconvert to code cellはチラ見だけじゃなくてコードセルに非可逆的に変更することができます
配布したり、コードブロックで表示したいときはこちらがいいかもしれませんね

最後に

Livebookの便利なSmartCellが徐々に増えていっていているので、
どんどんいろんな事ができそうで恐ろしい進化ですねー

KinoをPhoenixのLiveView上で動かすノウハウを得れば色々できそうで楽しみです
本記事は以上になりますありがとうございました！