2024年度を振り返ると、銀行口座はいつもちょこちょこ引き出していて、あとから見ると、なんで残金がこれだけなのか？！とか、それぞれ何に使ったのか分からない！！*1となる。また、確定申告の時に苦労する。だったら、引き出した都度メモできるアプリを使ってマメに記録するようにしたい。できたら、内訳も見えると便利。家計簿アプリもあるようなのだけど、勉強を兼ねて小遣い帳アプリを作ることにする。
自分はiPhoneユーザなのだが、ネイティブアプリで作る場合、FlutterやらSwiftやらで勉強が必要なのと、開発者ライセンス取得の費用が発生する問題がある。ネイティブアプリでは作らずに、ブラウザベースで、Progressive Web App (PWA)として作るのでどうか。（仕様上、凝るのはサーバ側のJavaScriptやPythonであり、スマフォ側はブラウザが動くだけ）
PWAで作ると、修正や改良はサーバ側のJS/Python等を編集すればよく、アプリの再ビルドは不要。自分はデザインがまったく分かっていないので、Figma*2を使ってプロトを試作して、HTML/CSS/JavaScriptに吐き出して、それを画面データとしてAWS上のWebServer等に置いて使うと。自分しか使わないので排他制御は不要であり、データの永続化はDBを使わずともS3に入出金の記録をJSON形式のファイルとして置く程度で十分だろう。
デザイン案は以下
アーキは以下
上記以外に、一覧表示、分析、等も欲しいが、最低限、入出金の記録ができれば、S3から入出金ファイルをダウンロードしてExcel等で分析、グラフ化したらいいので。
■追記
figmaからHTML/CSSに変換するには、AppBuilderという他社のツールに投入するのか？
Copilitに聞いてみた
Q: figmaで作成した画面デザインやGUIの動きをHTML/CSS/JavaScriptに変換することはできますか？
A: はい、Figmaで作成した画面デザインやGUIの動きをHTML、CSS、JavaScriptに変換することができます。これを実現するためには、いくつかのプラグインやツールを使用することが一般的です。以下の方法があります：
- Figmaの開発モード: Figmaの開発モードを使用すると、デザインからCSSコードを取得することができます。
- Anima: このプラグインを使用すると、FigmaのデザインをHTML、CSS、JavaScriptに変換できます。特にReactやVueのコードにも対応しています。
- Codia: FigmaのデザインをHTML、CSS、JavaScript、React、Vueなどに変換することができるプラグインです。
- Locofy Lightning: FigmaのデザインをReact、HTML/CSS、NextJS、Gatsby、Vue、React Nativeなどのコードに変換することができます。
FramerというWebベースのデザインツールでデザインしてみた
モノトーンでかっこいいのだけど、これを実現するCSSは膨大になっていて、そこまでデザインに凝ってもらう必要ないのだが。。と思うのであった。
もし上記のデザインを手書きのCSSで実現しようとしたらどうなるのだろうか。。
■参考URL
Figmaの解説コース
Figma UI UX Design Essentials | Udemy
