00:07
今日は、pywebviewで作っている家計簿アプリの改善話をします。 今回は、赤字の時は文字を赤く表示、さらに通貨を切り替えられるようにしたという、見た目と使い勝手を一段上げた話です。
まず、見た目の話から。収入より支出が多くなったら、数字が赤くなるようにしました。 これ、機能としては単純なんですが、今やばい状態だって一瞬でわかるので、
家計簿アプリではかなり大事な要素です。 もう一つが通貨選択。今回は日本円、米ドル、ユーロ、この3つを切り替えられるようにしました。
基本は日本向けですが、将来の勉強用という意味合いが強いです。 ちなみに通貨を書いているのに、基本は日本語じゃん!というツッコミは今回はスルーでお願いします。
ただし、正直に言うと、この時点ではまだ未完成です。 1ヶ月分の家計を集計するところまではまだ作れていません。
でも、個人開発では、まず動くものを作る。改善を重ねる。 この順番が大事だと思っています。
今回一番大事だったところは、プログラムよりデザインでした。
ブラウザでは綺麗に見えているのに、アプリにするとレイアウトが崩れる。 このブラウザとアプリの標準ズレを少しずつ直していくのが地味に大変でした。
この辺りはまた別でちゃんと語ろうと思っています。
実装自体は、Pythonで初期データを渡す。 HTMLとCSSで画面を作る。
JavaScriptで通貨の切り替え。 カンマ付き表示。赤字判定。という役割分担です。
特に今回は通貨と数値処理をモジュール化したことで、後から拡張しやすくなりました。
そしてここで今まで避けてきた問題に直面します。 ソースコードの管理どうする?
今まではコッペでバージョン管理していましたが、ファイルがどんどん増えて限界に。 そこでついにGitHubを導入しました。
完全に初心者だったので、セットアップはGoogle。 環境周りはAIに相談。という総力出戦で、何とかバージョン管理まで到達しました。
正直、今回の記事だけでコード量はかなり多くなりました。 なので、この家計部アプリの話は何回かに分けます。
今回はあくまで改善の前段階のお話。 GitHub奮闘機や集計機能の実装も順番に話していく予定です。
個人開発って、開発完成よりも改善の積み重ねが面白いんですよね。 また続きを作ったらその都度シェアしていきます。
気になる方はぜひフォローしてお待ちください。 次回はPiWebView、入門、PythonとJSの連携ポイントについてお話しする予定です。
ご静聴ありがとうございました。
