家計簿ならぬ支出簿なアプリを作ってみた(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月18日

 たまたま見かけたこちら

 北海道の大きさをなめていた・・・。
JR北海道が如何に大変なのかが、少し分かった気がした(^_^;)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 ↓「月計」の画面。

 ↓「年計」の画面。

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

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

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

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

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

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

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

JavsScriptは5種類の文字で書ける!?

 トピック
 公開日:2017年12月19日

5文字の記号だけで任意のJavaScriptコードを実装する手法
だそうです(^_^;)

 なんのこっちゃ!?
と思いましたが、こちらのスライドを読んだら納得しました。

 なんかスゲーよ!

 よくも思いついたものだと感心しましたが、
要するに難読化の一種と言えそうです。

 現状でも6種類の文字で任意のコードが書けるようです。
ちなみに alert(1)こんな感じになるそうです(^_^;)
具体的な実装はこちら・・・対応表が興味深い。

 んで、
将来的に実装されるかもしれない Pipeline operator を使えば、
6から5種類へ減らせるそうです。
もはや何が何やら。

KB4054517で0x800f0922なエラー

 つぶやき
 公開日:2017年12月16日

 ちょっと前にWin10をバージョン1709に上げたのですが、
というか自動更新で結局上げることになったわけですが(^_^;)
大規模更新はそこそこ時間を要するのがねぇ・・・。

 その後、さらに更新が来たようで
「更新してシャットダウン」とかやって寝たわけです。
次の日、起動すると更新の続きが始まり、
やれやれ少し時間かかりそうだなと見ていたら、
「更新の構成に失敗しました」みたいになって、
前回の構成に復帰するとかになってました。
ん、なんだろ? とか思いましたが、
とりあえずは起動したので、そのうち直るだろうくらいに考えてました。

 しかし、その後も毎回のように同じ現象になってしまい、
起動するのに数分以上かかるし、いっこうに直る気配がないので
更新プログラムの履歴を確認してみたところ、
KB4054517で0x800f0922なエラーになっていることが分かりました。

 ネットで調べてみると、エラーコードは異なるものの
KB4054517でエラーとなる現象が起きている情報は見つかりました。
ただ対策については情報が無いようで、どうしたものかと。
そこで0x800f0922なエラーについて調べてみたら、こちらを見つけました。

 ”how to fix Windows 10 update error 0x800F0922″
となっており、Option.1~4までの方法が提示されていました。
さっそくOption.1を試してみたところ、
どうやらうまく行ったようで、先の現象が起こらなくなったようです。

 そんなわけで備忘のために書いておきます。
1)管理者権限なコマンドプロントを起動。
2)sfc /scannow とやる。
  → なんか失敗してるとか言ってくる。
3)DISM.exe /Online /Cleanup-image /Scanhealth とやる。
  → 回復できるかも、とかのメッセージ?
4)DISM.exe /Online /Cleanup-image /Restorehealth とやる。
  → 回復できたっぽい。
5)再起動する。
  → 更新が無事に通る! やれやれ(^_^;)

 ということで参考までに。

1 2 3 4 5 6 99