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

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

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

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

mithril

 仮想DOMを採用しているフレームワークです。
Webアプリのためのフレームワークとしては、
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の最新バージョン(0.35.0)で試してみたら
日本語入力周りがうまく動くようになってました!

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

 その他にも、
仮想DOMなフレームワークと実DOMの整合性とか、
色々なんか苦労した感じですが、
最終的には結構使いやすい感じになったのではと、
個人的には思っています。
実際、家計簿なフリーソフトは止めて、こっちを使っています。
検索機能がまだ無いけど(^_^;)

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

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

タグ:

コメント投稿

CAPTCHA