rails-i18nを利用したwebサイトの英語対応

webサイトに英語と日本語の切り替え機能を作ります
ほかの言語も基本的な仕組みは同じなので、好きな言語でアレンジしてみてください！

1.gem 'rails-i18n'の導入

Gemfile

gem 'rails-i18n'

コマンドプロンプト

$ bundle install

2.言語切り替えのための設定を記述

config/apprication.rb

  module Geektwitter
    class Application < Rails::Application
      # Initialize configuration defaults for originally generated Rails version.
      config.load_defaults 6.1

    #ここから追記する
      # 言語ファイルを階層ごとに設定するための記述
      config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
      # アプリケーションが対応している言語のホワイトリスト(ja = 日本語, en = 英語)
      config.i18n.available_locales = %i(ja en)
      # 上記の対応言語以外の言語が指定された場合、エラーとするかの設定
      config.i18n.enforce_available_locales = true
      # デフォルトの言語設定
      # config.i18n.default_locale = :en
      config.i18n.default_locale = :ja
    #ここまで追記
　
    end
  end

3.routingを設定

config/routes.rb

scope '(:locale)', locale: /#{I18n.available_locales.map(&:to_s).join('|')}/ do
    resources :tweets
end

4.動的に切り替えるための設定

controllers/application_controller.rb

class ApplicationController < ActionController::Base
　
  before_action :set_locale

  def set_locale
      I18n.locale = locale
  end

  def locale
      @locale ||= params[:locale] ||= I18n.default_locale
  end

  def default_url_options(options={})
      options.merge(locale: locale)
  end
　
end

5.言語切り替え用のボタンを作成

今回はheaderに切り替え用のボタンをつけたいと思います。

views/layout/apprication.htm.erb

<header>
    <% if I18n.locale.to_s == "en" %>
        <%= link_to('日本語', locale: 'ja') %>
    <% else %>
        <%= link_to('English', locale: 'en') %>
    <% end %>
</header>

6.訳語を設定

日本語の訳語は、"ja.yml"に書き、英語の訳語は、"en.yml"に書いていきます。書き方には、ルールがあるのでインデントなども同じように書いていきましょう。

config/locals/en.yml

（例）
en:                                        #言語名
  vegans:                                  #コントローラー名
    index:                                 #アクション名
      hello_html: <h2>What's Vegan?</h2>   #htmlタグを用いる場合
      gm_html: <h3>Your Compass!</h3>

    new:
      love_html: <h3>New Post</h3>
    
    show:
      about_html: <h1>Post Details</h1>

  submit_button:                           #submit_button
    save: Search                           
    post: Post                            
    comment: Add comment
    logout: Log Out
    edit: Edit

  links:                                   #link_to
    join: "Sign up"
    back: "Log in"
    new: "New post"

  activerecord:                            #モデルについて
    attributes:                            #カラムについて
      vegan:                               #モデル名
        name: "Name"                       #カラム名1
        genre: "Genre"                     #カラム名2

日本語も同様に訳語をja.ymlに書いていきます。もしファイルがない場合は、新しく手動で作りましょう。

config/locals/ja.yml

（例）
ja:                                        #言語名
  vegans:                                  #コントローラー名
    index:                                 #アクション名
      hello_html: <h2>ヴィーガン？</h2>    #htmlタグを用いる場合
      gm_html: <h3>新たな旅へ！</h3>

    new:
      love_html: <h3>新規投稿</h3>
    
    show:
      about_html: <h1>投稿詳細</h1>

  submit_button:                           #submit_button
    save: 検索する                         
    post: 投稿する                           
    comment: コメント
    logout: ログアウト
    edit: 編集する

  links:                                   #link_to
    join: "新規登録"
    back: "ログイン"
    new: "新規投稿"

  activerecord:                            #モデルについて
    attributes:                            #カラムについて
      vegan:                               #モデル名
        name: "名前"                       #カラム名1
        genre: "ジャンル"                  #カラム名2

一般化するのであれば、こんな感じでしょう。

config/locals/○○.yml

○○:
  コントローラ―名:                 #htmlタグを用いて翻訳を入れる
    アクション名:
      呼び出し語: <h1>訳語</h1>

  submit_button:                   #submit_buttonに翻訳を入れる
    呼び出し語: 訳語

  links:                           #link_toに翻訳を入れる
    呼び出し語: "訳語"

   activerecord:                   #モデルに翻訳を入れる
    attributes:                    #カラム名に翻訳を入れる
      モデル名:
        カラム名: 訳語

7.viewに呼び出し語を入れる

いよいよ最後です。en.ymlやja.ymlで皆さんが考えた訳語を実際のviewページで呼び出してみましょう。

○○.html.erb

<%= t(".hello_html") %>       #htmlタグを用いて翻訳を入れるとき
<%= t(".gm_html") %>          #<%= t(".呼び出し語") %>

<%= submit_tag t("submit_button.post")%> 
                              #submit_tagに翻訳を入れるとき
                              #<%= submit_tag t("submit_button.呼び出し語") %>

<%= link_to t('links.list'), vegans_path %>
                              #リンクに翻訳を入れるとき
                              #<% link_to t('links.呼び出し語'), ○○_path %>

<%= f.label :name %>          #カラムに翻訳を入れるとき
                              #<% f.label :カラム名 %>

こんな感じで手間を加えることで、headerのボタンの切り替えて英語と日本語の切り替えをすることができました！！

参考

おわりに

参考の記事で自分ではできないところをアレンジしてみました。
自分も1から作れるように日々精進したいと思います。
最後まで読んでいただきありがとうございました！