こんにちは、なつまるです

引き続きアプリを作った話④をしていきます

 

そういえば、先日おひるご飯にチャーハンを作ろうと思ったんですが
お米が全然なくて、お米1合 + 木綿豆腐を1丁丸ごと(笑
入れてかさましてみたんですが
夫は気づかず美味しい!と食べてたので
案外人間の舌ってあてにならないですね🍚(夫だけかも)

 

それでは、さっそく紹介していきましょう~

 

資産グラフ

こちらが、資産グラフ画面です

2022年がまだデータがないため、2021年のデータで説明します
また、チャート部分と一覧の1~4月はテストデータのため公開しています
(7月が赤字なのがばれてますが、まあいいです。笑)

 

このアプリを初回リリースしたのが2021年2月なので、それ以前のデータはありません
なので、1月のデータはなし、2月の比率が【–】となっています

 

チャートだけでなく、一覧に内訳を表示することで
年間の資産の動きと、その内容が分かり易くていいですね~

 

チャート部分ですが、タップすると内容がtooltipで表示されます

chart.jsの機能ですが、表示内容はカスタマイズしています

 

tooltipのカスタマイズソースはこんな感じ

詳しい内容はchartjsの公式サイトなどをお読みください
なかなか奥が深くて面白いですよ♪

無料のライブラリなのにものすごく優秀なので、ぜひ使ってみてください。笑

 

 

小ネタ(Pull-to-Refresh)

終わろうと思ったんですが、中身少ないので小ネタ紹介します

このアプリの更新は、上から引っ張ったら更新(Pull-to-Refresh)という仕組みを採用しています

 

Pull-to-Refreshというと、iOSのブラウザやTwitterのタイムライン、メールなどが採用していますね
Yahooショッピングのアプリも採用していますが、デザインが凝っていて流石という内容です

 

上記アプリと比べるとドシンプルですが、家計簿アプリの実装はこんな感じです

まずは上から引っ張って・・・

 

指を離すと更新中になります

 

他の画面も同様です

 

PulltoRefresh.jsというjsライブラリを使用しています

公式サイト:https://www.boxfactura.com/pulltorefresh.js/

 

このアプリ、実は(お気づきだと思いますが)PWAです

もしPWAでアプリを作ろうと思っている方がいらっしゃいましたら
このライブラリの導入をお勧めします

 

ソース部分は、こんな感じ

 

省略していますがjsライブラリを読み込んで、上記ソースで完了です
IDもしくはクラスの指定ができるので(if文ですが。笑)、必要な画面のみ設定ができます

また、日本語化も簡単にできるので日本人にはありがたいですよね~

 

 

気になる工数

デザイン:3人日
コーディング:3人日
設計など:2人日
実装:3人日

比較的シンプルな画面ということと、chart.jsのお力もあり(ほとんどがそう)
短時間での実装で済みました

 

 

まとめ

今回4回目ですが、まだ続きます
もう後半に入っていますので、もう少しお付き合いください。笑

もっとこうすればいいよ!とか
このライブラリおすすめ!とかあればぜひ教えてください

 

それでは、今回はこの辺で
最後までご覧いただき、ありがとうございました

まとめ

SHARE

TEXT BY なつまる

RECOMMENDED POSTこの記事もおすすめ!