はじめに
個人開発で遅刻可視化ツールを作って Dentoo.LT #19 で話してきたのでその紹介です.
遅刻がテーマということでアイコンはナマケモノをモチーフにしたポケモンである「ナマケロ」にしました. ちなみに「Slakoth」はナマケロの英名です.
モチベーション
- 大学生活において1日の内最初の授業にどれくらい遅刻したかを可視化したい
- 生活習慣という面で1年を気軽に振り返りたい
- ちょっとしたデータ分析をしてみたかった
概要
「Googleロケーション履歴*1」の生データを利用して通勤, 通学の遅刻をチャートで可視化できます. ツールにロケーション履歴をJSON形式で読み込み, 始業時間や通勤先/通学先を設定すれば, それを元に遅刻回数/遅刻時間/遅刻率をチャートで可視化してくれます.
使い方
- 事前に 自分のデータをダウンロード からJSON形式でGoogleロケーション履歴の生データをダウンロードしておく
- I Found Slakoth!!! にアクセス
ロケーション履歴の読み込む
からJSONファイルをツールに読み込ませる始業時間を追加
から遅刻の基準となる1日の最初の授業開始時刻や始業時刻を入力する- 必要に応じて
始業時刻一覧
から 3 で入力した時刻を編集, 削除する 通勤先/通学先の設定
から図形ツールを使って通勤先/通学先の領域をポリゴンで囲う- 検索ボックスから場所を検索してそこに飛べる
- 頂点をドラッグで頂点を移動
- 頂点と頂点の間にあるグレーアウトした丸をドラッグすると頂点を追加
- 頂点を右クリックで頂点を削除
- ポリゴンをダブルクリックでポリゴンを削除
- ポリゴンは複数個作ることができる
- 右上のボタンを押せば全画面で図形ツールを操作できる
チャート
のチャートを出力
ボタンから入力したデータを元にチャートを生成- チャートで表示できるデータの種類は
遅刻回数/遅刻時間/遅刻率
の3つ 月ごと
,週ごと
,曜日ごと
の3つの分類方法が選択できる- 下に表示されているバーを弄ればチャートに表示するデータの期間を範囲指定できる
- チャートで表示できるデータの種類は
裏でロケーション履歴をどっかに転送して盗み見るなんてことは一切していませんが, 怖いなと思った方はオフライン環境下でやると良いです. まあそもそもツールを使わないというのが一番安全ですが.
応用
- 通勤先/通学先を職場や大学以外に設定してみる
- 例えば電車通勤・通学者であれば最寄り駅の先の駅をポリゴンで囲っておけば寝過ごし回数を数えることができる
- 北海道には何回行ったか, 海外には何回行ったかなどを調べることもできる
下の画像は僕のロケーション履歴を用いて可視化した「帰路における寝過ごし回数」です. この時期は試験で忙しかったんだなとか, この時期は余裕があったんだなとかが分かって便利です.
技術面
アプリケーションを作る上で利用したライブラリなどを書いておきます.
- View: facebook/react
- Vue.jsでも作れないことは無かったけど, 型が無くて辛かったのでReactを採用した
- 型があるって素晴らしい…
- 参考: Vue.js+TypeScriptを試した際の雑感 - mizdra's blog
- 状態管理ライブラリ: reactjs/redux
- 別にこのアプリケーションの規模なら必要無かったけど, Fluxの勉強のため使ってみた
- とは言ってもアプリケーションに入力する値が多かったのでzalmoxisus/redux-devtools-extensionのImport/Export機能をバリバリ使っていた. めちゃめちゃ便利でした.
- Types: Microsoft/TypeScript, aikoven/typescript-fsa
- 日付処理: date-fns/date-fns
- ポリゴンに対する点の内外判定: substack/point-in-polygon
- どうでも良いけど作者が tape とか browserify を作っている人と同じ人
- マップ: tomchentw/react-google-maps
- UIフレームワーク: ant-design/ant-design
- チャート: recharts/recharts
おわりに
遅刻可視化ツール, 作ったのは良いとして可視化されるデータが良いものではない…
— mizdra (@mizdra) 2018年3月14日
*1:AndroidやiOSでGoogleロケーション履歴を有効化しておくと, 自動で位置情報が時刻と共にGoogleアカウントに記録できるサービスです