ある日麦汁さんは出費をひたすら記録するだけのRailsアプリを作っていました。
彼は基本的にケチなので いつも一つの商品に対して1,000円に満たない程度の物しか購入していませんでした。
しかしある時、気前良く10万ほどの出費をしました。本当はしてませんけどしました。 そんな大きな出費をしたわけですから、記録しないわけにはいきません。
そんなわけで彼は自作のアプリに出費項目として登録しようとしました。
ところがなんということでしょうか。 10万なんていう数字は、あまりにも「0」の数が多過ぎて 麦汁さんの頭では 10000が正しいのか1000000が正しいのかがわかりません。
「せめて、せめてカンマ区切りにさえなってくれれば!!」
そんなわけで実装します。
環境は rails3.2.8で適当に
$ rails new cashbook
して、さらに適当に
rails g scaffold item name price:integer
したところから始めます。
とりあえずは、inputがカンマ区切りにさえなればいいので http://www.decorplanit.com/plugin/ から「autoNumeric」というjQueryのプラグインを拾って来ます。
普通にDLしたらautoNumeric-1.7.5.js.txtとかなってるので 拡張子の.txtを削除して 適当にRAILS_ROOT/app/assets/javascriptsにでも放り込みましょう。
で、そんでもって RAILS_ROOT/app/assets/javascripts/items.js.coffeeに 以下の記述を付け加えましょう。
$ ->
$('input[type=number]').autoNumeric()
やったね! これで普通に数字を入れるだけで勝手に簡単にカンマ区切りになるよ!!
でもフォーカスを外したらケツに勝手に「.00」とか付けてくるよ! 許せないね!
ってことで記述を
$ ->
$('input[type=number]').autoNumeric(aPad: false)
に変更。 これで余計な「.00」はついてこないよ! やったね! でも数値なんだから右寄せ表示がいいよね!
ってことで RAILS_ROOT/app/assets/stylesheets/items.css.scssを
input[type=number] {
text-align: right;
}
に書き換え。 これでinputの表示にはとりあえず満足。
さあ。いざ登録しよう! Nameには「大きな出費」、 Priceには「100,000」(カンマは自動入力)と入力して、submitボタンを押そう!!
すると、なんということでしょう!
Item was successfully created. Name: 大きな出費 Price: 100
なんで100が入っとんねん(怒) どうやらRailsがカンマは小数点だと思い込んでる模様。くそったれええええええ。
そこでおもむろにGemfileに以下の記述を追加しました。
gem "ar_strip_commas"
そうしてbundleコマンドを実行しました。 bundleを実行したのでサーバも当然再起動します。
さらにapp/models/item.rbを以下の様に書き換えました。
class Item < ActiveRecord::Base attr_accessible :name, :price strip_commas_from :price end
よし。これで大丈夫のはず! というわけで改めて Nameには「大きな出費」 Priceには「100,000」(カンマは自動入力)と入力して update!
今度は
Item was successfully updated. Name: 大きな出費 Price: 100000
む。登録したらカンマの区切りがなくて「0」の数がわからん!
まあここは大人しくapp/views/items/show.html.erbを以下のように編集。
<p id="notice"><%= notice %></p> <p> <b>Name:</b> <%= @item.name %> </p> <p> <b>Price:</b> <%=number_with_delimiter @item.price %> </p>
price のところに number_with_delimiter というhelperを適用しただけ。 あとindex.html.erbも同様にしておいた方がいいですねっと。
以上で、カンマがないと0の数が数えられないかわいそうな麦汁さんは救われました。 やったね!
ちなみにChromeでinput type='number'しているところにこれをやろうとしたら 4桁以上の数値を入力できなくなるので大分悲しい。
$('input[type=number]').autoNumeric({aPad: false})
にしないといけないですね……。
後で修正しよう。