AngularとFirebaseで作ったPWA対応アプリで家庭内の課題を解決した話 👏
イ ジュスン（@jslee_）
・株式会社Fusic エンジニア
・韓国出身（福岡4年目）
・無類のラーメン好き🍜
家庭内の課題
👀
お金の管理がうまくできてない
💸
現状
-
家のお金は奥さんがメインで管理
-
お小遣い制
昨日外食して、今日も外食 🍻
ガスが二重請求されても気づかない 🔥
帰省や旅行でかさむ飛行機代 ✈️
それでも、給料日は外食 🍻
いつどこにいくら使っているか分からない
節約の計画を立てることができない
⬇︎
課題 1
お互いに共有できていない
お金の流れが見えない
課題 2
⬇︎
ちゃんと管理できているか
このままで大丈夫か不安
お互いに見える化したい
結論
出費をちゃんと把握したい
あれ？これ作れそうなんじゃないかな？
Donn
韓国語で「お金💸」という意味
使った技術
Firebase
・アプリ開発に集中したい
・デプロイが簡単
（コマンド一発で可能）
・無料
Angular
・業務で使ったことない
言語を使いたい（技術向上）
・WEBの技術でネイティブ
アプリに近い体験を提供
・配信が簡単（審査不要）
・Push通知を
送信することができる
・個人的に好き
・Angular Material Design
主な機能
入力
履歴
集計
通知
奥さんフィードバック👂
積極的に使ってくれなかった
衝撃のフィードバック
入力が面倒 笑
もうちょっと簡単に
入力できないかな
１
２
３
４
５
６
７
カテゴリーを選択
入力フローをよりシンプルに
改善策①
（改善前）
「次へ」ボタンタップ
「金額」入力欄までスクロール
「金額」入力欄をタップ
「金額」入力
メモ入力（必須ではない）
登録
確かに面倒いな..
入力フローをよりシンプルに
改善策①
１
２
３
４
カテゴリーを選択
金額入力
メモ入力（必須ではない）
登録
（改善後）
Angular Lazy Loading に対応し、
アプリの立ち上がる速度を改善。
片手で操作できるように、
右側にボタンを配置（右手専用😇）
立ち上がる速度を改善
改善策②
ボタンの配置を変える
改善策③
少しずつ改善を行った結果、
積極的に使ってくれるように
なった！
良いフィードバック
・デザインがポップで好き。同僚に自慢した
・集計機能助かる！ うちは、食費ロスがすごいなあ。
・アプリの速度が本当に速くなってて、びっくりした！
その他フィードバック
・「やってほしいことは何でも言って」と言うので、言ったら
「わがままだね」と言われた（でもちゃんと作ってくれた）
・アプリの色を変えようとしていて、グラデーションが流行って
いるらしく取り入れてくれたが、卓球選手のユニフォーム
みたいになった
ログイン画面を少し変えたけど、いまだに気づいてない...
まとめ
・Angular + Firebase + PWA 最高です👍
・自分でサービスを作るのは楽しい！
・使っている人を身近な距離で見れる。
反応がすぐ見えて面白い。
・いくら家族でも、使いにくいと、使ってくれない。
ご静聴ありがとうございました
AngularとFirebaseで作ったPWA対応アプリで家庭内の課題を解決した話
By jslee
AngularとFirebaseで作ったPWA対応アプリで家庭内の課題を解決した話
「家庭内での課題も、ITで解決・改善できないか」という思いがあり、 PWA家計簿アプリをAngularとFirebaseを使って開発しました。実際に運用する中で、 家族からもらったフィードバックや、感じたこと、勉強になった点について話したいと思います。