KonifarPod

[Rails] i18n-jsを使って、必要な言語のみを読み込ませる方法

   

Pocket

Railsで多言語対応する時、localeのymlファイルをjavascriptで利用できる『i18n-js』というgemを利用するのが便利です。i18n-js については『Railsでi18n-jsを使ってJavaScriptの国際化』にわかりやすくまとめられています。ただ、このi18n-jsは工夫して使わないとパフォーマンスが劣化することがあります。

i18n-jsを普通に利用すると、全ての言語の翻訳がtranslation.jsという1つのjavascriptにまとめられます。ほとんど使わない言語のせいでリソースのファイルサイズが膨らんでしまうので、スマホで利用する場合は顕著にパフォーマンスに影響してしまいます。

今回パフォーマンス改善の一環でi18n-jsをlocaleごとに分割して必要な言語分の翻訳リソースのみを利用するようにしてみたので、やり方をメモしておこうと思います。

1)i18n-js.ymlに設定を記述する

まず、各言語ごとのファイルを出力するためにconfig/i18n-js.ymlを用意します。
下記のように書いておくと、app/assets/javascripts/i18nの中に、ja.yml、en.ymlといった言語ごとのlocaleファイルが出力されるようになります。

  translations:
  - file: "app/assets/javascripts/i18n/%{locale}.js"

2)rake i18n:js:exportで出力する

ターミナルで

rake i18n:js:export

と打つと、先ほど設定したディレクトリに各localeファイルが出力されます。

3)必要なlocaleファイルだけを読み込むようにviewを修正

ユーザーの必要なlocaleファイルのみを読み込むように、viewを修正します。
application.html.erb または application.html.hamlのapplication.jsを読み込んでいるあたりで、下記のように記述します。(hamlの場合を記述しています)

- if Rails.env.development?
  = javascript_include_tag "/assets/i18n/translations"
- else
  = javascript_include_tag "i18n/#{I18n.locale}"

developmentモードの場合はいちいちlocaleをlocaleを分割したりしないので、translations.jsを読むようにしておきます。それ以外の場合、先ほど出力したi18nディレクトリ以下のlocaleファイルを読み込むようにします。これで、ユーザーに必要なlocaleファイルのみが読み込まれるようになります。

4)production.rbを書き換えてasset pipelineに対応させる

各localeのjsファイルにハッシュ値をつけるために、出力したlocaleファイルがprecompileされるようにproduction.rbに設定を追加します。下記を記述することで、app/assets/javascripts/i18n/以下のjsファイル全てがprecompile対象になります。

config.assets.precompile += %w( application.js application.css )

files = Dir[Rails.root.join('app', 'assets', 'javascripts', 'i18n', '*.js')]
files.map! {|file| file.sub(%r(#{Rails.root}/app/assets/javascripts/), '') }
config.assets.precompile += files

5)rake assets:precompile を実行する

この状態でasset:precompile すれば完了です。capistranoなどを使ってデプロイする場合、rake assets:precompile の前に実行するようにタスクを組んでください。

いかがでしたでしょうか?
この方法で、日本語を設定しているユーザーにはja.js、英語を設定しているユーザーにはen.jsというように、必要なlocaleファイルのみが読み込まれるようになります。railsで多言語対応を行うにあたり、ファイルサイズを節約したい時はぜひ試してみてください。

Pocket

 - Develop , , ,