Djangoで簡単なWebアプリを作ったので、どんなものができるのかなというのを紹介。
作り方の詳細は次回以降でUpします。まずは結果から。
正月に久しぶりに体重を測ったらかなり太っていてびっくり。
スマホに体重管理アプリを入れているものの、Webで色んな端末で見れて入力できるといいなと思って自分用にWebアプリを作成。
冒頭の画像のように、グラフを動的に出力するようにしました。
開発途中何回かエラーにハマりましたが、土日の夜数時間+平日ちょっと×数日で、この程度のWebアプリは作れてしまいました。覚えれば数時間でできると思います。
構成はいたってシンプルです。
（Djangoのチュートリアルで紹介されているものと比べても、いくつかの画面を省略）
以下の３つの画面で構成しています。
- ログイン画面：各ページはログインしないと参照できないように設定
- Topページ：冒頭の画像のようにグラフと体重のリストを表示
（体重は恥ずかしいのでぼかしました。。。） - 新規作成/編集画面
グラフは「matplotlib」を使って作成しています。ファイルは作成せず、Bufferへ1時的に作成して表示。（多人数利用で毎回この処理をすると重くなりそうなので今後工夫は検討）
Pythonのバージョンが古いと「matplotlib」がうまく動かなくてかなり苦戦しました。
レイアウトは「bootstrap4」と個別cssでレスポンシブ対応しました。
タイトル文字は画面幅で大きさを変えるように設定。
表も文字を折り返さずスクロールするようにしました。
下の画像の最下部を見ていただいたらわかるように10レコード毎にページネーションするようにしています。
テキストはちょっと恥ずかしいですね。ダイエット中なのにポテチとビール。
えぇ、この日は体重増えましたよやっぱり。
グラフの上にあった「New」ボタン押下時や、上の画像で「Date,Time」のハイパーリンクをクリックすると、下の画像のような新規作成/編集画面に行きます。
「Del」ボタンは警告無しでレコード削除です。
このページはPublished dateとWeight valueを必須フィールドにして、入力しないと怒られるようにしています。入力できる文字タイプも限定されています。
もうひとつのポイントは日付・時刻の入力を楽にしました。
手で数字を打たずに、選択式入力ができるようにしています。
これらを1から自分で作ると結構なコード量になって大変だと思います。
しかしDjangoならあまりコードを書かなくてもできてしまう。
開発作業は正直私は素人ですが、仕事しながら1週間足らずでできてしまった。
Djangoの中身をよくわからずに逆引きで色んなWebサイトを調べて対応しているのでエラーで何度もハマったせいで少し時間がかかりました。
Webアプリ作りは、そもそものプログラミング言語、DjangoのようなWebアプリフレームワーク、CSS（bootstrap）/HTMLのように色々な事を覚えて、色んな端末向けに表示できるように作り、かつセキュリティも考えなければいけない、と、考える事が沢山あって時間が足りないですね。
具体的な作り方は次回以降書いていきます。
今回の体重管理サイトは関数ビューで書いているので、少ないながらもそれなりにコードを書いていますが、汎用ビュー（Generic View）を使うと更に少ないコードで書けます。
汎用ビューを使った作り方についても追々書いていきますが
まずはどんなものが作れるかを簡単に紹介でした。