‘MoneyTrack’ タグのついている投稿

家計簿ならぬ支出簿なアプリを作ってみた(2)

 プログラム
 公開日:2018年1月22日

 前回の投稿からちょっと間が空いてしまいましたが、
プログラムの中身について書いてみたいと思います。

 まずは、使用しているライブラリについて。

mithril

 仮想DOMを採用しているフレームワークです。
Angular とか React とかが有名どころだと思いますが
(自分は使ったこと無かったりします)
mithril は view に特化してシンプルな感じなのが気に入って使っています。

msgpack-lite

 JSONなデータを圧縮・展開してくれます。
というかバイナリ化したJSONのような感じ。
msgpack は各種言語に対応しているようです。

pikaday

 カレンダーをいい感じに表示してくれます。
ただし今回は独自に改造して使っています。

handsontable ( + numbro + pikaday )

 今回の肝。
このライブラリが無かったら作るのあきらめたかも(^_^;)
表計算のような見た目とUIを提供してくれるライブラリです。
無償版(CE)には full版 とそうでない版 があります。
full版は pikaday および numbro を内蔵しているのですが、
外部からは参照できないようになっています。
pikaday を直接的に使う必要があったため、
bareなhandsontable + numbro + pikaday という構成になっています。
なお、handsontable は日本語特有な対処が必要だったため、
独自に改造しています。

jaconv

 ひらがなカタカナ変換とかしてくれるライブラリです。

・calenderJp

 日本の祝日や元号とかに対応したカレンダーな自前ライブラリです。
拙作の「PDFなカレンダーを生成」で使ったPHPのを
JavaScriptで書き直したやつです。

 ときに、
支出簿なアプリの作成に着手したのは昨年の9月か10月頃だったりします。
handsontable は高機能な反面、結構バグが多いような印象です。
着手した頃は、特にIMEによる日本語入力周りで悩まされました。
この問題とか、autocompleteな入力において
「あいう」と入力したのに「ああいあいう」とか謎な事になったり。
ソースを読んで試行錯誤した結果、listen というAPIが怪しい・・・。
IMEが有効中に blur とかやるのが問題な感じ?
という所までは至ったのですが、結局改善できませんでした。

 そんなわけで、
どうにも埒が明かない感じなので、作るのを止めてしまいました。
数ヶ月ほど放っておいたのですが(^_^;)
ふと思い出してhandsontableの最新バージョンで試してみたら
日本語入力周りがうまく動くようになってました!

 おお! これは!!
ということで俄然ヤル気が起きて、また作業を開始しました。
しかしまだ色々問題が発覚し苦労したりしました。
例えば、あれこれそれ
CSSを書き換えたり、代替なオプションを試してみたりして
改善できたのもありますが、
いまだうまく行かないのもあったりします・・・。
内部的にCSSのoverflowを色々いじっているようなのですが、
これの副作用が潜在的な問題をはらんでいるような気がします。
handsontable は使いこなすのが大変ですわ(^_^;)

 その他にも、
仮想DOMなフレームワークと実DOMの整合性とか、
色々なんか苦労した感じですが、
最終的には結構使いやすい感じになったのではと、
個人的には思っています。

 次回は、
handontable や pikaday を独自に改造した部分について
書いてみたいと思います。

なお、
支出簿なアプリを試すにはこちらからどうぞ。

家計簿ならぬ支出簿なアプリを作ってみた

 プログラム
 公開日:2018年1月11日

 ふと、数ヶ月くらい前ですが、
何にどのくらいお金を使っているのかが気になり始めました。
ムダ使いとかしているつもりはないのですが、
なおざりな感じになっているなぁと・・・(^_^;)
1ヶ月にいくら、1ヶ年にいくらぐらい使っているのだろうか。
逆に言えば、どのくらいあればやっていけるのか分かれば、
使うべき所には使い、締めるべき所は締めるように
管理できたりして良さげではないかと。

 ということで、
家計簿なフリーソフトを探して使ってみたりしたのですが、
どうも自分にはしっくり来ない感じ。
表計算のような見た目で品目単位に入力するような
UIを大抵採用しているようなのですが、
個人的には領収証単位に入力したい。
あと、外税な場合は消費税を自動で計算してほしいし、
ポイント還元とかを使った場合の分類分けとかもしたい。

 そんなわけで、
支出の管理に重きを置いた、
家計簿ならぬ支出簿なアプリを作ってみました(^_^;)

特徴としては以下のような感じ。

・JavaScriptで作ってるのでブラウザがあればOK。
 サーバーに保存しないのでクライアント側だけで完結します。

・領収証単位の入力。
 店・施設等の名称を入力 ➔ 品目の入力 の流れになります。

・店名や品名の入力時に既存と部分一致する選択候補を随時表示。
 いわゆる、auto-complete な入力に対応してます。

・単価の入力時に過去の参考値を選択候補として随時表示。
 同じ品が過去にどの店でいくらだったのかを参照できます。

 ↓入力画面はこんな感じ。

↓領収証「店・施設等の名称」の入力画面。

 ↓「店・施設等の名称」入力と部分一致する選択候補を随時表示。

 ↓「品目」入力と部分一致する選択候補を随時表示。

 ↓「単価」入力時に過去の参考値を選択候補として随時表示。

 ↓「月計」の画面。

 ↓「年計」の画面。

 ↓「年計」画面でヘッダをクリックするとソートされます。

 ↓日付をクリックするとカレンダーが出て、任意の日へジャンプできます。
領収証を入力した日はアンダーバー表示されます。

 大体の見た目は以上です。

 「分類」の種類は現状固定です。
内部的な都合で変更や追加はできません。
ただ、いずれどうにかしたいとも思っています。

 なお、WindowsのChromeで動作確認できたら、
OKとしてしまっていますのでご了承ください。

 ということで、
支出簿なアプリを試すにはこちらからどうぞ。

 プログラムの中身については、おいおい書いてみたいと思います。