LoginSignup
1
1

More than 3 years have passed since last update.

@kaz2018(kaz)

DataPortalで燃費の可視化

Last updated at Posted at 2021-08-22

これなに

Google Form, Spreadsheet, DataPortalで車の燃費をメモ、可視化できる仕組みを作りました。
今回は非常に簡単な手順だけで作ることができ、コードは全く書きませんでした。（spreadsheetの関数は1つ使いました）

完成品は下記
燃費(DataPortal)

動機

DataPortal使えるようになりたいなーの第2弾です。
日頃から満タン法で自分の車の燃費はチェックしていて、ガソリン入れた時にスマホに走行距離とかメモってました。それを可視化してしまえばいいじゃないかと。

DataPortal使えるようになりたいなーの第一弾は下記
Qiita: ラズパイ + Google Data Portalで自宅の気温・湿度をグラフ化

※満タン法とは：
ガソリンを給油するとき、毎回満タンに入れます。
前回給油の時から何km走って何リットル給油したか計算することで、自分の車の実際の燃費を計算します。
例）前回給油時累積走行距離1000km、今回累積走行距離1500km、ガソリン購入量50リットル
　　→ ガソリン50リットルで500km走った
　　→ 燃費10km/L

概要

fuel_efficiency.png

作るもの
- Google Form: スマホでの入力を受け取り、Spreadsheetにデータを自動的に追記
- Google Spreadsheet: データの受け皿。手を加えるのは燃費計算の関数くらい。
- Google DataPortal: spreadsheetに溜まったデータをグラフ化。スマホでの閲覧を前提にレイアウトを検討。

使ったもの

無料のGoogleアカウントで使えるサービスのみ。

手順

Google Form

スマホからのデータ入力を受け取るフォームを作成。

Googleのサービスの中からFormを選択。
Screen Shot 2021-08-20 at 20.36.35.png

新しいフォームを作成
Screen Shot 2021-08-20 at 20.37.11.png

フォームのタイトルを編集
Screen Shot 2021-08-20 at 20.38.26.png

日付欄を作成
Screen Shot 2021-08-20 at 20.40.16.png

累積走行距離欄を作成
Screen Shot 2021-08-20 at 20.43.58.png

ガソリン購入量欄を作成
Screen Shot 2021-08-20 at 20.44.55.png

ガソリン単価欄を作成
Screen Shot 2021-08-20 at 20.46.05.png

ガソリンスタンド名欄を作成
Screen Shot 2021-08-20 at 20.52.20.png

回答シートに切り替えて、回答データを保存するspreadsheetを作成
Screen Shot 2021-08-20 at 20.50.08.png
Screen Shot 2021-08-20 at 20.49.15.png

Screen Shot 2021-08-20 at 21.01.24.png

Google Spreadsheet

spreadsheetを作成するとこんな感じのができます。
Screen Shot 2021-08-20 at 21.02.26.png

ここでFormに戻って試しに適当にデータを送ってみます。
Formのプレビューに切り替えて
Screen Shot 2021-08-20 at 21.03.37.png

適当に必要事項を入力して送信
Screen Shot 2021-08-20 at 21.04.54 1.png

Screen Shot 2021-08-20 at 21.05.33.png

適当なデータが自動的にspreadsheetに反映されました
Screen Shot 2021-08-20 at 21.05.57.png

反映されたデータを下の行にコピーし、数字を適当に変えて燃費計算のサンプルとして使います。
燃費はspreadsheet上で関数を使って計算する必要があるので手で追加します。
G1：燃費（km/L）
G3：=iferror((C3-C2)/D3,0)
Screen Shot 2021-08-20 at 21.09.13.png

Formからのデータが追加されたら燃費も自動的に計算したいので、計算式を表の一番下までコピー。
Screen Shot 2021-08-20 at 21.09.49.png
この辺り、もっといいやり方があるような気がするんですがわかりません。
データ追加されたら計算式の範囲も自動的に拡大されるみたいな。
もし知っている方いましたら教えていただけるとありがたいです。

適当に入れたデータを消して、spreadsheetの準備は完成

ちなみに今回使った自分のデータをサンプルデータとして晒しときます。
サンプルデータ（spreadsheetへリンク）

DataPortal

DataPortalの新しいレポートを作成
Screen Shot 2021-08-20 at 21.14.34.png

接続するデータソースを選択
Screen Shot 2021-08-20 at 21.15.19.png

Screen Shot 2021-08-20 at 21.16.16.png

タイトルを編集
Screen Shot 2021-08-20 at 21.19.20.png

編集画面の何も選択していない状態で全体の画面サイズを変更
Screen Shot 2021-08-20 at 21.20.34.png

Screen Shot 2021-08-20 at 21.21.04.png

図形の長方形とテキスト挿入でページのヘッダーを作成
Screen Shot 2021-08-20 at 21.23.00.png

期間設定を追加
Screen Shot 2021-08-20 at 21.24.27.png

Screen Shot 2021-08-22 at 21.22.39.png

テキスト挿入で「燃費の推移（km/L）」を追加

グラフの追加で時系列グラフを追加
スタイルで欠落データを「ゼロとして扱う」から「線形補間」にするのがミソ
Screen Shot 2021-08-20 at 21.25.35.png

Screen Shot 2021-08-20 at 21.27.41.png

Screen Shot 2021-08-20 at 21.28.08.png

Screen Shot 2021-08-22 at 21.43.34.png
だいたい8km/Lで推移してる感じ。
燃費悪いな。

上記と同様の手順でガソリン単価の推移のグラフを追加
内訳ディメンションにガソリンスタンド名を指定
Screen Shot 2021-08-22 at 22.56.38.png

Screen Shot 2021-08-22 at 21.43.45.png
スカイエナジーが安いかな。
ちなみにハイオクです。

燃費とは関係ないけど、ついでに累積走行距離のグラフも追加
Screen Shot 2021-08-22 at 21.33.19.png

Screen Shot 2021-08-22 at 21.43.53.png
田舎なので職場までガッツリ走ります。
フルリモートしたい。

元データを表示。
スマホむけのレイアウトにしたので横幅が狭いため、テーブル2つに分割して表示する。
テキスト挿入でテーブル名を入力。
グラフを追加で表を挿入する
Screen Shot 2021-08-22 at 21.36.27.png

Screen Shot 2021-08-22 at 21.38.54.png

Screen Shot 2021-08-22 at 21.44.03.png

同様に2つ目のテーブルを挿入
Screen Shot 2021-08-22 at 21.42.09.png

Screen Shot 2021-08-22 at 21.44.13.png

完成

燃費(DataPortal)

あとはガソリンを入れた時にスマホでFormの画面を開いて入力してやれば、自動的にチャートに反映されます。
元データはspreadsheetで確認や編集も可能。

まとめ

だんだんDataPortalの使い方に慣れてきました。
今回はpythonやGASを全然使わなかったので、プログラミングしたことない人でも作れるものができました。
これと同じようなものをdjangoやFlask使って作ろうと思うと結構覚えることが多くて大変だと思うけど、それを一切コード書かずに作れてしまうGoogleのサービスすごいなと思います。これ無料でいいんすかと。
便利なものはどんどん学ぶべきですね。

あと、車そろそろ買い替えた方が良さそう。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1