日英翻訳をPFに追加したい
今日において、、、グローバル化は避けられない！と思い
PFに日本語と英語の言語切り替えを実装しました。
少しめんどくさいけど、簡単に実装できたので
備忘録も兼ねて記録を残していくとします。
実装までの流れ
ステップ⓵：i18nのGemを追加
ステップ⓶：application.rbに記載
ステップ⓷：ymlファイルに翻訳内容を記載
ステップ⓸：viewファイルに翻訳内容を追加
ステップ⓹：Routingファイルにlocaleを追加
たったこれだけであなたのサイトはグローバル化に対応できるようになります！
ステップ⓵：i18nのGemを追加
まずやることとしては、
Gemを追加しちゃってください。
このGemがあることによって簡単に
日英(他の言語も追加可能)に対応できるようになります。
gem 'rails-i18n', '~> 5.1'
一応 ~>を記述することでバージョンを指定しています。
記載をしたらbundle installをしましょう。
ステップ⓶：application.rbに追加
application.rbにデフォルトの言語を追加します。
これ書くことによってデフォルトの言語を決められます。
module アプリケーション名
class Application < Rails::Application
# deviseを日本語化
config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
# Settings in config/environments/* take precedence over those specified here.
# Application configuration can go into files in config/initializers
# -- all .rb files in that directory are automatically loaded after loading
# the framework and any gems in your application.
end
end
この記述があることによって、デフォルトの言語を設定できるんですね。
config.i18n.default_locale = :ja
英語であれば、:jaの部分を:enとするといいですよ♪
ステップ⓷：ymlファイルに翻訳内容を記載
ymlファイルについて簡単に説明をすると、
ymlファイルというのは英語⇒日本語や日本語⇒英語
といったように言語の切り替えをサイトで行いたい時に
使用するファイルのことである。
実際にどのように書くか見ていこう。
application:
application:
# ヘッダーのログアウト時の翻訳
signup: " 新規登録"
signin: " ログイン"
# ヘッダーのログイン時の翻訳
workout_friends: " 筋トレ仲間"
workout_diary: " 筋トレ日記"
calendar: " カレンダー"
notification: " 通知機能"
mypage: " マイページ"
logout: " ログアウト"
partial_match: "部分一致"
perfect_match: "完全一致"
forward_match: "前方一致"
backward_match: "後方一致"
devise:
sessions:
new:
login_message: "友達を探してつながろう！"
login_message2: "SNSでつながる新しい形の筋トレ"
posts:
new:
date: "日付入力"
time: "時刻入力"
upload_picture: "画像アップロード"
workout_place: "筋トレ場所"
これは一例だが見方としてはこういう風にみる。
application: ← コントローラー
application: ← アクション名
signup: "新規登録" ← 翻訳したい内容
gemなどを使っている場合は少し記載が変わり
devise: ← gem名
sessions: ← コントローラー名
new: ← アクション名
login_message: "友達を探してつながろう！" ← 翻訳したい内容
login_message2: "SNSでつながる新しい形の筋トレ" ← 翻訳したい内容
注意してほしのはymlファイルは改行が非常に重要で
間違ったインデントをすると翻訳が反映されなくなる。
階層構造でインデントを区切って記載していくのがポイント！
日英の言語切り替えを入れたい場合は
en.ymlファイルも、config >> locales >> ja.yml
en.ymlファイルも、config >> locales >> en.yml
このように二つファイルを作成すればOK。
中国語など増やす場合もファイルを中国語用に増やせばOK。
ステップ⓸：viewファイルに記載する
最後にviewファイルに記述をするが
すこしだけ工夫が必要になってくる。
まず、言語切り替えをする場合は切り替えのリンクを
作成して言語が切り替えるようにしよう。
<%= link_to('日本語', :locale => 'ja') %>
<%= link_to('English', :locale => 'en') %>
私の場合はヘッダーにいれたかったので
ヘッダーに切り替えリンクを実装した。
どこにいれるかは自分のやりたいようにすればＯＫ。
上記のコードをいれたい箇所に追加しすれば
リンクを押したときに言語の切り替えができるようになる。
そして、言語の切り替えを行う箇所については
下記のようにtメソッドを使うことで言語の切り替えができるようになる。
<%= link_to t('application.application.logout'), destroy_user_session_path, method: :delete, class: 'fas fa-sign-out-alt nav-link text-light mt-1' %>
<%= link_to "Delete", post_comment_path(comment.post, comment), method: :delete, remote: true, "data-confirm" => t('comments.create.delete_confirm'), class: "btn-sm btn-danger" %></td>
railsの場合viewで表示する場合は<%= %>で囲うことになるが
t('コントローラー名.アクション名.翻訳したい名前')で記述をすればOK。
【ja.yml】
posts:
new:
date: "日付入力"
【en.yml】
posts:
new:
date: "date"
例えばこのような言語切り替えをする時は、
<%= t('posts.new.date') %>
上記のような記述をすることで、
下記のリンクを押したときに言語を自動で切り替えてくれる。
<%= link_to('日本語', :locale => 'ja') %>
<%= link_to('English', :locale => 'en') %>
ステップ⓹：routingに記載する
最後に...
重要なことを書き忘れてしまったので、
最初に記載すべきでしたが最後に記述をするとします(すみません)
下記のリンクの中にlocaleとあると思うのですが
言語の切り替えをするにはurlにlocaleを含ませないと
いけないんですね。
<%= link_to('日本語', :locale => 'ja') %>
<%= link_to('English', :locale => 'en') %>
ルーティングの記載例を紹介しますね＾＾
Rails.application.routes.draw do
# これをいれることでlocaleをパスに含められる
# scopeを使用するとurlパターンのみを変更可能
scope '(:locale)' do
devise_for :users
resources :posts
end
end
上記のようにlocaleをスコープでくくってください。
スコープとは簡単に説明するとurlだけに特定の文字などを
含ませたい時に使用をします。
今回の場合ですとlocaleをurlに言語切り替えのため
含ませる必要があるため全体をlocaleでくくりました。
localeをスコープに含ませるとurlが変わります。
こんな感じでurl patternの先頭部分だけが変わったでしょ？
これでlink_toでの切り替えができるようになります＾＾
終わり
いかがでしたでしょうか？
簡単に言語切り替えを実装できることが分かりましたか？
文字内容に誤りなどがあればコメントをいただければと思います。
それでは！チャオ！