jQueryのカレンダー(Datepicker)

jQueryのDatepickerを初めて使ってカレンダーを表示させてみました。
なかなか便利だけど、ハマったところもあり。
バージョンはこれ。

• Rails 3.2
• jQuery 1.8.23

最初は、'jquery-ui-rails' のGemを使ったのですが、ローカルのWEBRickのproductionモードでは動いたのに、Apacheにすると前月/翌月のアイコンが表示されない問題に遭遇。
画像ファイルは、Gemに入ってるのでどうにもならず、Gemを使うのをやめました。

さて、jQueryのファイルをどこに置くのか。
こちらのサイトを参考にしました。
http://www.ninxit.com/blog/2012/04/08/railsjqueryuidatepicke/

• JSファイルの配置

app/assets/javascripts/jquery-ui-1.8.23.custom.min.js

• JSファイルの読み込み

$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery-ui 
//= require jquery_ujs
//= require_tree .

• CSSファイルの配置 

app/assets/stylesheets/jquery-ui/jquery-ui-1.8.23.custom.css

• CSSファイルの読み込み

$ vi app/assets/stylesheets/application.css

*= require_self
*= require_tree .
*= require_tree ./jquery-ui 

• 画像ファイルの配置(ここ注意！ images/imagesになります) 

app/assets/images/images/*.png

• 日本語化対応のファイル配置

app/assets/javascripts/jquery.ui.datepicker-ja.js

• 日本語化対応のファイル読み込み

  • 下記からjaのファイルを取得します。 

  http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ 

$ vi app/assets/javascripts/application.js 

//= require jquery.ui.datepicker-ja

•  あとは、いつもどおり precompile。

$ bundle exec rake assets:precompile RAILS_ENV=production
$ rails s -e production

ハマったところは、上記の赤字にある画像ファイルのパス。
ググると皆いろいろなことを書いてます。
環境によるのかもしれませんね。
cssには、 url(images/ui-bg_glass_75_ffffff_1x400.png) のような定義をされているので、
imagesディレクトリの中のimagesディレクトリという読み方になってしまってます。
CSSの定義を変えても良いのですが、将来的のバージョンアップを考えると
あまり好ましくないということで、画像ファイルの配置場所を変えることにしました。
Rails3はややこしい(>_<)

railsのfavicon

faviconを初めて作ってみました。

以下、やったこと。

• faviconの作成
• ネットにごろごろ転がっているfaviconメーカーを使いました

• headタグ内に下記を追加

  <%= favicon_link_tag %>

• public/favicon.icoの差し替え

ブラウザのキャッシュとかが残ってると差し替えた時とかにうまく変わらなくて
キャッシュの削除と、ブラウザの再起動をいろいろやってなんとか変更（＾＾；

バリデーションメッセージの日本語対応

en.yml の locale ファイルのトップにも書かれていますが、下記のサイトにアクセスすると、言語ごとに用意されています。
https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale

デフォルトは、英語なので、例えばName欄が空欄だと、下記のようなエラーになります。
"Name can't be blank"

日本語対応にすると
"Name を入力してください"
になります。

しかし、"名前 を入力してください"にしたいところです。

では、どうすれば良いのでしょうか。

ja.ymlのロケールファイルに下記のように記載します。

 activerecord:
    attributes:
      user:
        name: "名前"

こう書くことで、UserモデルのNameカラムを"名前"にして表示します。

【参考】
http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models

バリデーションチェックのエラー表示場所

railsのscaffoldで生成したビューファイルにはエラーメッセージを表示する場所があります。

ここの部分ですね。

  <% if @admin_client.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@admin_client.errors.count, "error") %> prohibited this admin_client from being saved:</h2>

      <ul>
      <% @admin_client.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

ちなみに、このエラーメッセージ表示部をpartialで切り出して、@adminのところを引数で渡すようにすると、変更が容易になりました。

上記のメッセージ部とは別に、エラーが出ると、該当の項目が赤くなります。
しかし、この赤い部分は見た目的にもイマイチで、レイアウトが崩れることもあるので、
非表示する場合の設定がこちら。
config/application.rb に、下記を追加します。

config.action_view.field_error_proc = Proc.new {|html_error, instance| "#{html_error}".html_safe }

【参考】
http://techlog.knocking.co.jp/archives/1161

数値の3桁区切り

Railsにはさまざまな便利なヘルパーが用意されています。
例えば、数値を3桁ごとにカンマを入れたい場合は、number_with_delimiter() を使います。

詳細はこちら
http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html
他にも便利な数値系のヘルパーがあります。

3桁区切りでは、
Viewに下記のように書くと、

<%= number_with_delimiter(12345678, :delimiter => ",") %>

こんなふうに表示されます。

12,345,678

カンマ等の区切り文字は、ロケールファイルに切り出すのも良いでしょう。

Railsの画像表示

CSSに設定して表示する場合もありますが、ヘルパークラスから表示させる場合はimage_path()を使います。
相対パスを書いて、開発環境では動いてるのに、本番環境では動かず困ったことがありました。
その際にimage_path()について知りました。
http://railsdoc.com/references/image_path

こんなふうにヘルパークラスで書くと

content_tag(:img,"" ,:src=>image_path("test.png"))

こんなhtmlを生成してくれます。

<img src="/assets/test.png">