はじめに
プログラミングを始めて８ヶ月目でようやく、初アプリ『みんなの家計簿』をリリースしました！
『みんなの家計簿』は、家計簿や資産運用に興味があるひとたちに、お金と向き合う場を提供する家計簿＆資産公開サービスです。
開発期間は約２ヶ月です。
＼みんなの家計簿／
※停止中です
サービス概要
課題解決型のサービスを意識しました。
ターゲット層
Twitter資産運用アカウントの皆さん
ユーザーが抱える問題
- Twitterやブログ上で家計簿や資産額について公開する人が沢山いるが、それらの情報を集約した場がないため、情報が一過性のものとなり、勿体ない。
- お金の使い方を学ぶため、他人の家計簿を見て参考にしたい。
解決策
自分の代表的な月の家計簿を公開＆他人の家計簿を見られるアプリ
使いかた
とってもシンプルです。
プロフィールと家計簿を登録するだけです。
TOPページです。
ログイン後は家計簿一覧画面へ遷移します。
「初めてのログイン時、何をしたらいいか分からない」というユーザーさんの声を頂いたので、初回ログイン時に限り、プロフィールと家計簿登録の画面へリダイレクトされます。
総資産額順やいいね順でソートできます。
家計簿一覧画面から、気になる人の家計簿を詳しくみることができます。
支出の内訳は、メモも登録できます。
Twitterでログインした場合は、Twitterリンクでそのユーザーさんのプロフィールに飛べるので、そこでまた交流が広がったらいいなと思います。
My家計簿ページからは、Twitter上でのシェアもできます。
TwitterOGPはユーザー名と支出額の合計値が動的に出力されます。
使用技術
- Rails
6.0.3 - Ruby
2.7.2 - TailiwndCSS
- Bootstrap
- AWS
- CircleCI
- Capistrano
主要なgem
- sorcery (認証)
- cancancan (認可)
- rails_admin (管理画面)
- cocoon (ネストフォーム部分)
- kaminari (ページネーション)
- meta-tags (メタダグ)
- ransack (検索機能)
- chartkick (グラフ)
- ya_kansuji (日本円表記)
- bullet (N+1検知)
- rspec-rails (テスト)
インフラ構成図
AWSを使っています。
CircleCIでテストとリントチェックを自動で行っています。
Capistranoで自動デプロイしています。
苦労したところ
本番環境と開発環境でレイアウトが崩れる問題
これは現在進行系でもありますが、開発環境だとFontAwesomeもtoastr(フラッシュメッセージ用のgem)もブレイクポイントも正常に動いていたのに、本番環境だとぐちゃぐちゃになっていました。
webpacker周りの問題かなと思うのですが、Tailwindのbreakpointが本番環境だと反映されず、まだPC用のレイアウトは直せていません…
インフラ
知識０だったので、結局デプロイに１週間かかってしまいました。CircleCIの導入も難しくて泣きながらやっていました
AWSのこの講座がわかりやすいです。
https://www.udemy.com/share/1022o6AEIfeVdTRH4F/
N+1問題
gem 'bullet'で検知した部分について、controller層でincludesを使用し、関連テーブルのデータも同時に取得し、N+1問題を解消しました。
Twitterアイコン取得
ユーザー登録時にTwitterからプロフィール画像の情報を取得し、ActiveStorageへ保存しています。
保存する前に、画像のURLを正規表現を使って加工しています。（デフォルトサイズは小さく、大きいサイズで保存したいため。）
工夫したところ
UI/UXの向上
MVPの段階で見切りリリースし、約20人にユーザーインタビューを行い、ユーザーの声を元にUI/UXを改善していきました。
(例)
- 年収や総資産額のベタ打ちは面倒臭い→入力は幅を持たせた選択制に。
- 費目が少ない。メモ欄が欲しい→カラムを追加
Twitter OGPの動的出力
Twitterで共有するため、TwitterOGPで家計簿の支出とユーザー名を動的に出力できるようにしました。Cloudinaryという画像加工サービスと、meta-tagsで、家計簿の支出額とユーザー名をmeta情報として渡して画像を作成できるようにしました。
ドーナツグラフ
gem 'chartkick'でHighchartsを使用しています。
chartkick × chart-jsの組み合わせはよくみるのですが、Highchartsのほうが洗練されているデザインで個人的には好みです。
カスタム性もあるので、グラフの中に(title)文字も入れることができます。
Highchartsの日本語記事が少なかったので書いてみました↓↓
Highchartsの使い方
デザイン
TailwindCSS
Bootstrap臭を消したいけどCSSの知識も乏しいし…ということで、気になっていたTailwindCSSを使用してみました。
公式だけでも綺麗なサンプルが沢山あるので、それらを組み合わせつつ作りました。
ただ、ドロップダウンとかはBootstrapのほうが優秀なので、一部にBootstrapを使い、上からTailwindを重ねることでBootstrap臭を消しています。
Tailwindコンポーネント集1
Tailwindコンポーネント集2
チートシート
Canva
デザインを考えるときにおすすめなのが、Canvaです。
紙にデザインのラフ案を書いて、Canvaでデザインをあててみる→実装という流れで進めていました。
ロゴもこちらでつくりました。
その他
- フォントは
font-weight: 300;くらいが繊細で好みです。色は濃いグレーにしてます。 -
background-color: #F9F8F4;でメインカラーであるオレンジに合わせてうっすら色味をつけています。 - サービスの内容が内容なので、猫を使用しポップな印象にしてみました。
望む未来
数年前に投資に大失敗したことがきっかけで初めて家計簿をつけるようになりました。
お金と向き合うことで、毎月どのくらいの支出であればストレスなく生きていけるのか知ることができ、将来の漠然としていたお金の不安が少なくなったので、前職を辞めて、憧れだったエンジニア転職に挑戦する勇気を持つことができました。
このサービスをきっかけに、お金と向き合って将来への不安を軽減し、好きなことに挑戦できる人が増えていって欲しいと願っています。
おわりに
設計の段階からアドバイスしていただいたり、技術で詰まったときに質問に答えてくださったり、開発時点のユーザーインタビューに答えてくださったり…多くの方々に助けられて完成まで持っていくことができました。
本当に感謝しています。
今までは、「コード書くのって楽しいな」というレベルだったのですが、実際に使っていただいているのを見ると、「サービス作りって楽しい！」と新たな感情を味わうことができました。
サービスを０から作りだせる、エンジニアという職業は凄く魅力的だなとより一層思うようになりました。これから就活がんばります！
ここまでご覧いただき、ありがとうございました！