ライフログをガントチャート風にグラフ化してくれるWebアプリを作った
＿人人人人人人人人人人人人人人＿
＞ LIFE LOG GRAPH GENERATOR ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
ざっくりとした説明
このような，`日時` と `内容` が記載されたライフログデータから．．．(折りたたまれています．)
October 15, 2019 at 11:24PM 就寝
October 16, 2019 at 06:03AM 起床
October 16, 2019 at 07:08AM 外出
October 16, 2019 at 08:17AM 開発を開始
October 16, 2019 at 10:49AM 開発を終了
October 16, 2019 at 12:30PM 帰宅
October 16, 2019 at 12:59PM 読書を開始
October 16, 2019 at 04:32PM 読書を終了
October 16, 2019 at 10:31PM 就寝
October 17, 2019 at 06:46AM 起床
October 17, 2019 at 07:29AM 外出
October 17, 2019 at 08:27AM 開発を開始
October 17, 2019 at 12:48PM 開発を終了
October 17, 2019 at 01:48PM 帰宅
October 17, 2019 at 02:35PM TVを開始
October 17, 2019 at 04:54PM TVを終了
このようなインタラクティブなグラフを作成してくれるWebアプリです．
動かしてみるよ！
どんな事が嬉しいの？
こんなことが期待されます．
- 自分の生活リズムが可視化 できるため，生活リズムを改めるきっかけになる．
- 記録した ライフログをコピペ するだけで，グラフ化してくれる．
- 円グラフではなく， ガントチャート 風に自分の行動を見られるため，別日の比較がしやすい．
そもそも，こんな モヤモヤ を持っていませんか？
- いまいち 自分の生活習慣(リズム) を把握できていない．
- ライフログアプリに，いちいち 手入力 で行動を記録するのが億劫．
- ライフログアプリでは， 円グラフ で表現されることが多いけど，ガントチャートみたいに表してほしい．
それを解決してくれる，そうこのアプリならねっ．
知っておいていただきたい注意点
- このWebアプリは地学系学部出身で現在機械系企業に務めるITに関してはド素人の私が趣味で作りました．
そのため，バグや技術的に不足している点などがあると思われます．
そこを考慮した上で試していただければと思います． - 初開発のWebアプリであり，私の中で全くのお試しなので現状は
Herokuの無料プランで動かしています．
そのため，30分スリープやDyno制限の影響が出るかもしれません．そこは許してください(泣)
参考
内部でどんなことをやっているのか？
python + Flask + Plotly + Heroku で運用しています．
ざっくり説明すると，
-
Flaskを使用して，入力フォームが設置されたindex.htmlを/にて表示． - 入力フォームにライフログ データが入力され，
グラフ作成ボタンが押されたら，データをcsv形式に整形し，ガントチャートのPlotlyインスタンスを作成． - 作成した
Plotlyインスタンスを埋め込んだgraph.htmlを/graphにて表示．
依存環境 (折りたたまれています．)
python==3.7.4
Flask==1.1.1
requests==2.22.0
gunicorn==19.9.0
pandas==0.25.1
plotly==4.1.1
ざっくりソースコード (折りたたまれています．)
import os
import re
import pandas as pd
from io import StringIO
from pathlib import Path
from datetime import datetime, timedelta
from plotly import figure_factory as pff
from plotly import offline
from flask import Flask, request, render_template
app = Flask(__name__)
# ガントチャート描写のmain処理
def main(フォームに入力されたデータ):
コード長すぎ かつ スパゲッティであるため，省略
return plotlyインスタンス
# フォームに入力されたデータをcsv形式に整形する．
def convert_input_data_to_csv(input_data):
temp_data = re.sub(r",", "", input_data)
conv_data = re.sub(r"(.+([AP]M|\d\d:\d\d))(\s+?)(\S+)", r"\1,\4", temp_data)
return conv_data
# メインページをレンダリングする．
@app.route("/", methods=["GET", 'POST'])
def render_main_html():
return render_template("index.html")
# setting ページをレンダリングする．
@app.route("/setting", methods=["GET", 'POST'])
def render_setting_html():
return render_template("setting.html")
# graph ページをレンダリングする．
# main関数がplotlyインスタンスを返し，htmlへ埋め込む．
@app.route("/graph", methods=["GET", 'POST'])
def render_graph_at_html():
if request.method == 'GET':
res = request.args.get('data')
elif request.method == 'POST':
res = request.form['data']
else:
res = None
res_conv = convert_input_data_to_csv(res)
df = pd.read_csv(StringIO(res_conv), sep=",", header=None).set_index(0)
df.index = df.index.map(pd.to_datetime)
return render_template("graph.html", fig=main(df))
if __name__ == '__main__':
app.run(debug=False, host='0.0.0.0', port=int(os.environ.get('PORT', 5000)))
私の運用方法を紹介
文明の利器をフルに活用した，ライフログ記録の処理フロー
私は，Google Home + IFTTT + Google Spread Sheetsを連携させ，声でライフログを取っています．
そして，そのSpread Sheetsに記録されたデータをコピペして，グラフ化しています．
(連携方法については，LIFE LOG GRAPH GENERATOR の setting ページにて説明しております．)
最後に
自分の生活リズムをグラフに可視化して振り返ることはとても有用であると感じました．
まずは， グラフを見てニヤニヤしているだけ でいいと思います．
「この日8時間も呑んでたんか！」とか「睡眠時間のばらつき大きいな」とか，自分の知らない自分を見ているようでとても楽しいです．
この 楽しいという感情がライフログの習慣化につながる とても重要な要素だと思います．
そしてニヤニヤ眺め続けていると，そのうち自ずと自身の行動の癖に気づきます．
その気づきから改善行動を取る？それとも様子見る？そんなことは後で考えましょう！
気づくことができれば，あとはなんとでもなります．(適当)
このWebアプリを使って，多くの人が自身のライフログ グラフを見てニヤニヤしてくれる，そしてその先の気付きや行動に発展していく，そんなきっかけを得ていただければ嬉しいなと，私は考えます．
最後まで読んでいただき，ありがとうございました．