Ruby on Railsでカンマ付き金額を扱う


業務アプリケーションを開発していると、カンマ付きの金額を扱う場合が頻繁にある。なんでもよきにはからってくれるRails君だが、何故かこのカンマ付き数値の扱いについては、非常にイケてない。例えば以下のようなscaffoldがあったとして・・・

📄Gemfile
$ rails g scaffold Sale sold_on:date product:string amount:decimal

金額をカンマ付きで入力してみると・・・

カンマ付きで入力 → 登録できるけど

ああ、それ、一番やっちゃダメなやつだ・・・。これだとユーザーは「登録できたよ〜ん」って思っちゃって、後々まで間違いに気付かない可能性がある。

対応としては、以下の2通りがあると思う。

  1. カンマが入っていた場合は、バリデーションエラーにしてしまう
  2. カンマも受け入れてあげる

もちろんスマートなのは2の案。今回はこれをサクッと実現できるgemを導入して対応することにする。

環境

  • rails 4.1.7
  • autonumeric-rails 1.9.25.0

セットアップ

autoNumericというjqueryプラグインがある。これはテキストフィールドに自動的にカンマや通貨記号を挿入してくれる便利なプラグイン。デモサイトを見れば、その便利さは一目瞭然。このプラグインをgemにラップしたものを使用する。

gem 'autonumeric-rails'

bundle installしたら、application.jsに追記する。

📄app/assets/javascripts/application.js
//= require autonumeric

もちろんjqueryよりも下に定義すること。

動的にカンマ付きフィールドを生成する場合などに備え、用意されているrefreshトリガーを呼び出すようにしておく。どこぞやのcoffeeファイルに以下のコードを記述しておこう(turbolinksにも対応)。

📄app/assets/javascripts/sales.js.coffee
ready = ->
  $(document).trigger('refresh_autonumeric')

$(document).ready(ready)
$(document).on('page:load', ready)

これにて準備は完了だ。

ではカンマ付きテキストフィールドを

作ってみよう。text_filedメソッドにオプションを渡してあげるだけでよい。

📄app/views/sales/_form.html.erb
  <div class="field">
    <%= f.label :amount %><br>
    <%= f.text_field :amount, data: { autonumeric: true } %>
  </div>

どんなテキストフィールドができあがるかというと・・・

Amount

おお! 自動的にカンマが! しかしこれで喜んでいてはいけない。この状態で登録して、正しくデータが保存されるかが重要だ・・・

登録できた

グラシアス!autoNumeric!ちゃんと登録できたのは、紛れもなく君のおかげ。

その他、書式を細かく設定することができるので、色々と試してほしい。例えば日本円を整数で登録させたいなら次のようなオプションになる。

f.text_field :amount, data: { autonumeric: { aSign: '¥ ', mDec: 0 } }

日本円も

こんなに簡単に高機能なテキストフィールドが完成した。素敵です、autoNumeric。

参考リンク

関連する記事


コメントする

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください