自分にやさしく学ぶプログラミング

プログラミング学習記録、備忘録

Ruby on Rails : localhostで動かしているアプリをとりあえず日本語対応させる

概要

表題の通り、とりあえずアプリを英語と日本語対応させるためにI18nについて勉強した。 結構詰まったので、最終的に上手くいった方法をまとめる。

参考にした資料

やること

  1. 翻訳ファイルを用意する
  2. TLDからロケールを取得する機能を追加する
  3. 言語切り替えリンクをどこかしらのページに追加する
  4. viewファイルの中で翻訳したい箇所(例えばページタイトル、テーブルの項目名、’戻る’ボタンなど)のテキストをI18n.tメソッドに変更する

以下でそれぞれ詳しく述べる。

1. 翻訳ファイルを用意する

プロジェクトルート/config/locales/ 下に、日本語の翻訳ファイルja.ymlと、英語の翻訳ファイルen.ymlを作成する。(en.ymlがすでにある場合は適宜中身を書き換える) ja.ymlの中身はこんな感じ↓

    ---
    ja:
      books_app:
        title: '書名'
        memo: '内容'
        author: '著者'
        picture: '画像'
        show: '表示'
        edit: '編集'
        destroy: '削除'
        new_book: '新しい本を登録'
        back: '戻る'
        ・
        ・
        ・

en.ymlの中身はこんな感じ↓

    ---
    en:
      books_app:
        title: 'Title'
        memo: 'Memo'
        author: 'Author'
        picture: 'Picture'
        show: 'Show'
        edit: 'Edit'
        destroy: 'Delete'
        new_book: 'New Book'
        back: 'Back'
        ・
        ・
        ・

要は、抽象化したキーワード: その翻訳という感じで必要な翻訳ペアを記述しておく。 階層構造にしておくとわかりやすいと思われる。 ちなみに、一般的に必要なキーワードをまとめた翻訳文がGitHubで公開されている。 これを持ってきて、適宜自分で必要な翻訳を追加してやればいい。ありがたや。

2. TLDからロケールを取得する機能を追加する

プロジェクトルート/app/controllers/application_controller.rb 内に下記のように記述

  class ApplicationController < ActionController::Base

    before_action :set_locale

    def set_locale
      I18n.locale = extract_locale_from_tld || I18n.default_locale
    end

    def extract_locale_from_tld
      parsed_locale = request.host.split('.').first
      I18n.available_locales.map(&:to_s).include?(parsed_locale) ? parsed_locale : nil
    end
  end

before_action :メソッド名で、毎回メソッドを実行する。 実行するメソッドは、TLDを抜き出して、それがavailable_localesに含まれていればロケールを設定するというもの。 available_localesには、プロジェクトルート/config/locales/ 下に追加した言語が勝手に登録されているっぽい。 また、ロケールはデフォルトで :en が設定されている。

3. 言語切り替えリンクをどこかしらのページに追加する

どこかしらのviewファイルに下記を追加する。 <%= link_to_if request.host.split('.').first != 'ja', '日本語', "http://ja.localhost:3000#{request.path}"%> このリンクをクリックすればTLDにjaとつくようになる。

4. viewファイルの中で翻訳したい箇所のテキストをI18n.tメソッドに変更する

あとはviewページのなかで翻訳したい部分を書き換えていく。 例えば編集ページに飛ぶリンクを、デフォルトでは"edit"、日本語の場合は"編集"と表示したいなら、こんな感じ↓

<%= link_to I18n.t('books_app.show'), book %>

'books_app.show'のように、翻訳ファイルに記述されているシンボルを書いておくと、それに対応する翻訳文字列が表示される。階層構造は.で繋ぐ。

感想

最初はなんだかよくわからなかったけど、やってみると意外と単純に翻訳できる。 翻訳ファイルを用意すればいくらでも多言語化できるというのが嬉しい。