読者です 読者をやめる 読者になる 読者になる

Rails で JavaScript を国際化する

はじめに

RailsJavaScript を国際化するには、『i18n-js』という gem を使う。

自分が作っている Web アプリでそこまでやる必要性は無いかもしれないけど、 国際化せずに直接 HTML や JavaScript のメッセージに日本語を書き込むのは、何かに負けた気がするんで、やってみた。

i18n-js のインストール

Gemfile に

gem "i18n-js"

を追加し、シェルで

bundle

を実行すればインストールできる。

i18n-js を有効にする

Rails3.1 以降を使っていることが前提。 まず、app/assets/javascript/application.js に下記を追加する。

//= i18n
//= i18n/translations

当初はこれだけで上手くいくと思っていたけど、開発サーバーを起動してブラウザでアクセスすると

undefined method 'mtime' for nil:NilClass

ていうエラーが発生した。

上記のイシューはクローズされているんだけど、エラーはまだ発生する模様。 ひとまず、イシューに書いてある

bundle exec rake i18n:js:setup

を実行し、config/i18n-js.yml を生成して回避しておく。

JavaScript を国際化してみる

config/locales/en.yml が無ければ作成し、次の内容を記述する。

en:
  hello: "Hello World"
  greet: "Hello {{name}}"

日本語用のロケールファイルも作成しておく。config/locales/ja.yml を作成し、次の内容を記述する。

en:
  hello: "こんにちは 世界"
  greet: "こんにちは {{name}}"

あと、ApplicationController にロケールを切り替えるコードを記述。 今回は手っ取り早く、パラメータで切り替えるようにした。

class ApplicationController < ActionController::Base
  protect_from_forgery

  # ロケールを切り替える
  before_filter :set_locale

  private
  def set_locale
    if ["en", "ja"].include?(params[:locale])
      I18n.locale = params[:locale]
    end
  end
end

これで、次のように JavaScript で、現在のロケールの文字列を取得できる。

<script type="text/javascript">
    // Rails の設定と揃える
    I18n.defaultLocale = "<%= I18n.default_locale %>";
    I18n.locale = "<%= I18n.locale %>";

    // 現在のロケールファイルに無いキーの場合、デフォルトのロケールファイルから取得する
    I18n.fallbacks = true;

    ($function() {
        var hello = I18n.t("hello"); //=> Hello
        var greet = I18n.t("greet", { name: "Honda" }); //=> Hello Honda
        alert(hello + "¥n" + greet);
    });
</script>

ブラウザで表示してみる

開発サーバーを起動してブラウザで表示。

f:id:griefworker:20130316195058p:plain

URL の後ろに ?locale=ja を足して表示してみる。

f:id:griefworker:20130316195154p:plain

日本語でメッセージが表示された。

まとめ

i18n-js を使えば RailsJavaScript の国際化ができる。ただ、Rails3.1 移行を使っている場合、Asset Pipeline に対応しているので、application.js に書くだけのはずなんだけど、躓いてしまった。

JavaScript の国際化でも config/locales 下にあるロケールファイルを使えるのがいいね。同じ内容を2度書かずに済む。DRY だ。