遅刻可視化ツールの紹介

はじめに

個人開発で遅刻可視化ツールを作って Dentoo.LT #19 で話してきたのでその紹介です.

遅刻可視化ツールの紹介 from mizdra

www.slideshare.net

遅刻がテーマということでアイコンはナマケモノをモチーフにしたポケモンである「ナマケロ」にしました. ちなみに「Slakoth」はナマケロの英名です.

「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