ヘルスチェックアプリ
日々の健康チェックの数値を記録・確認できるアプリ
数値の変動をグラフで確認できる
使用技術
バックエンド（フレームワーク）：Python (Django)
フロントエンド：HTML/CSS、Bootstrap、JavaScript
RDBMS：SQLite
IDE：VSCode
Linux環境：WSL2（Windows Subsystem for Linux）
Linux ディストリビューション：Ubuntu
ソースコード：https://github.com/MasahiroOgata/healthcareapp
制作や使用技術についての所感
・Bootstrap
これまで制作したほとんどのWebアプリケーションで利用しており、正直なところ、Bootstrapなしでフロントエンドの開発をするとなるとかなり大変そうだと思うほどです。HTMLタグに特定のクラスを付与するだけで該当するデザインが適用されるので、CSSファイルで細かい設定をすることなく、統一感のある見た目で、配置の整ったサイトにすることができます。
特にレスポンシブデザインへの対応が便利で、画面の幅に応じた各要素の配置や表示・非表示の設定がクラスの記述だけで実現できるので、メディアクエリでブレークポイントを設定する手間が大きく省けます。
難点としては、CSSに対して強力に作用するため、例えば部品の一部だけ色を変えたいといったケースであっても、Bootstrapと開発者の間でCSSの書き換え合戦のような状態に陥ってしまい、思い通りの変更がなかなかできないことがあります。このようなときは、同じような部品を一から作ってしまったほうが早いという場合もあります。
・苦労した点
このアプリでは、将来的なデプロイを見越してLinux環境を利用することにしました。WSLを導入して有効化し、さらにディストリビューションのUbuntuをインストールするなど、一連の設定作業にかなり手間取りました。ただ、今後予定しているデプロイ作業では、それ以上に苦労するのではないかと想像しています。
・工夫した点
ユーザーが健康チェックの数値を入力するさい、input type=”number”の欄に数字を直接入力するだけでなく、input type=”range”のスライダーを動かすことでも入力できるようにしました。そのために、入力欄の数値とスライダーの値が常に連動するように処理を記述しています。
登録した数値の傾向をより視覚的に把握できるように、グラフ描画ライブラリであるChart.jsを導入しました。折れ線グラフで各測定値の推移を確認できるようにするとともに、散布図を用いて血糖値と時間帯の相関を確認できるようにもしています。
・今後の課題
今後は実際のデプロイ作業に進む予定です。開発はすべてPCで行っており、各種デバイスでの表示についてもPC画面上で確認しているのみなので、無事にアプリが公開できたときは、スマートフォンなどの実機で使用感を確認し、UIや操作性に関しての改善を試みたいと思います。