こんにちは、なつまるです
引き続きアプリを作った話④をしていきます
そういえば、先日おひるご飯にチャーハンを作ろうと思ったんですが
お米が全然なくて、お米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のお力もあり（ほとんどがそう）
短時間での実装で済みました
まとめ
今回４回目ですが、まだ続きます
もう後半に入っていますので、もう少しお付き合いください。笑
もっとこうすればいいよ！とか
このライブラリおすすめ！とかあればぜひ教えてください
それでは、今回はこの辺で
最後までご覧いただき、ありがとうございました
まとめ
SHARE
