devise 日本語化

初めに
・devise導入済み
エラーメッセージ、フラッシュメッセージなど日本語で出力されるように実装していきます

---

gemインストール

gem 'rails-i18n'
gem 'devise-i18n-views'

bundle install

gem 'rails-i18n'
Railsで提供されている多くのデフォルトエラーメッセージや日付のフォーマットなどを他の言語に翻訳するためのジェムです。このジェムを使用すると、さまざまな言語への対応がより簡単になります。

gem 'devise-i18n-views'
Deviseのビュー（ログイン画面、パスワードリセット画面など）を多言語化する際に使用します。エラーメッセージだけでなく、これらのビューのテキストも日本語化したい場合は、このgemを使用すると便利です。

アプリケーションの設定ファイル（config/application.rb）でデフォルトの言語を日本語に設定します。

config/application.rb

 # デフォルトの言語を日本語に設定
    config.i18n.default_locale = :ja

---

フラッシュメッセージ日本語表示

日本語化のgemを使用せずに日本語化する場合以下のような記述をアクションごとに指定する必要があります

 def create
    self.resource = warden.authenticate(auth_options)
    if self.resource
      flash[:notice] = 'ログインに成功しました。'
      sign_in(resource_name, resource)
      respond_with resource, location: after_sign_in_path_for(resource)
    else
      flash[:alert] = 'ログインに失敗しました。メールアドレスまたはパスワードが正しくありません。'
      redirect_to new_session_path(resource_name)
    end
  end

しかし、日本語化のgemを使用することで少ない記述で実装することが可能となります。

実装方法
まず、config/localesディレクトリ内にdevise.ja.ymlファイルを作成します。
そのファイルに、次のように日本語の設定を書きます。

devise.ja.yml

ja:
  devise:
    failure:
      invalid: メールアドレスまたはパスワードが正しくありません。
    sessions:
      signed_in: ログインに成功しました。
      signed_out: ログアウトしました。
    registrations:
      user:
        signed_up: "アカウント登録が完了しました。"
      signed_up: "アカウント登録が完了しました。"
  errors:
    messages:
      not_saved:
        one: '1件のエラーが発生したため %{resource} は保存されませんでした。'
        other: '%{count} 件のエラーが発生したため %{resource} は保存されませんでした。'

yelファイルはインデントなどが重要となるので
https://www.yamllint.com/ などで確認を行うと良い

ビューページにフラッシュメッセージを表示するためには、以下のようなコードを共通のレイアウトファイル（例：application.html.erb）に追加することで表示できます。

<% flash.each do |key, value| %>
  <div class="alert alert-<%= key %>">
    <%= value %>
  </div>
<% end %>

このコードは、フラッシュメッセージの各要素をイテレートし、そのキーと値に基づいてBootstrapのアラートクラスを使用してメッセージを表示します。キーが:noticeの場合は、alert-noticeクラスが適用され、:alertの場合は、alert-alertクラスが適用されます。

これを更にカスタマイズしてBootstrapのデザインに合わせたい場合、以下のように書くことも可能です。

<% flash.each do |key, value| %>
  <div class="alert alert-<%= key == 'notice' ? 'success' : 'danger' %>">
    <%= value %>
  </div>
<% end %>

このようにすることで、成功メッセージは緑色、エラーメッセージは赤色で表示されるようになります。

このコードをapplication.html.erbに追加すると、すべてのビューページでフラッシュメッセージが表示されるようになります。最適な場所に追加してください。一般的には、

タグの直下やナビゲーションバーの下など、目立つ位置に配置します。

---

参考