らくだ🐫のさいと
カテゴリー: Ruby on Rails、学習メモ

らくだ🐫にもできるRailsチュートリアル｜番外編・I18n

番外編では本編からちょっと外れた話なんかを書いていきます

エラーメッセージを日本語化したい！

だって英語で言われてもわからないじゃん？（？ なので 本文でバリデーションエラーのメッセージ云々が出てきたところで チャレンジしていきたいと思います。

作業用に、現状から新しくブランチ（i18n）を切ります （add-i18nとかのが良かったかもね？） （生やす場所ももっと考えた方が良かったかもね？） （masterから生やすとかね）

RailsガイドのRails 国際化 (i18n) APIのページ↓ [blogcard url=”https://railsguides.jp/i18n.html#ruby-on-railsにおけるi18nのしくみ”] 正直何をどうしたらいいのかわからないので参考ページを探します。 [blogcard url=”https://qiita.com/Ushinji/items/242bfba84df7a5a67d5b”] 一先ずこちらを参考に作業していきますよ

i18nを導入

Gemを導入

source 'https://rubygems.org'

（中略）
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'
gem "nokogiri", ">= 1.10.4"
gem 'rails-i18n'
・
・
・

ターミナル$ bundle install</pre> 設定する

・
・
・
module SampleApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.1

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
    config.i18n.default_locale = :ja
  end
end

→言語設定（default_local）を日本語に（:ja）をする おおー✨ 日本語になってる！（まだ作業は続きます）

ロケールファイルとは何ぞ

[blogcard url=”http://e-words.jp/w/%E3%83%AD%E3%82%B1%E3%83%BC%E3%83%AB.html”] 言語の設定ファイルと言う事かな 本来は各言語の設定ファイル（ロケールファイル）をDLしてきて導入しないとだけど Gem i18nを導入することで標準的な設定であれば別途用意しなくても使えるようになる 的な？

そもそもI18nとは何ぞ

国際化・多言語化を意味するinternationalizationを短縮したもの RubyとかRailsに限った言葉では無い（いろんな言語にある） 日本語にするためのものと思い込んでた節があるんだけど そうではなくて　国際化→その中の一つとして日本のフォーマットに合わせる　の方が合ってる感 そして他にも種類があると教えていただきました✨ [blogcard url=”https://trans-notes.net/whylocalize”] 奥が深い・・・

カラム名を日本語化する

modelの属性名はそのままでは変換されないので 日本語変換用のファイルを作って設定してあげる必要がある

#config/locales内にmodelsディレクトリを作る
$ mkdir config/locales/models
#config/locales/models内にja.ymlファイルを作る（model用の日本語変換設定ファイル）
$ touch config/locales/models/ja.yml
ja:
  activerecord:
    #設定したいモデル名を指定
    models:
      user: ユーザー
    #属性名を指定
    attributes:
      #設定したいモデル名
      user:
        #カラム名と表示したい日本語
        name: 名前
        email: メールアドレス
        password_digest: パスワード　#←後で修正します

ファイルの読み込み設定

config/application.rbにファイル読み込みのコードを追加

・
・
・
    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.yml').to_s]
  end
end

config.i18n.load_path ……　読み込むファイルのパスを設定する +=　……　演算子（設定に追加の意） Dir[]　……　パターンに合うファイル名を文字列の配列にして返す[ファイル名のパターン] Rails.root.join(‘config’, ‘locales’, ‘*’, ‘.yml’).to_s　……　Railsアプリのルートdir/config/locales/どんなフォルダ名も含むしあってもなくてもいい/どんな名前も含む.yml つまりこう→config.i18n.load_path = config.i18n.load_path+[ファイルまでのアドレスを文字列にした配列] これによりconfig/locales以下のymlファイル全てが読み込まれるようになる！

password部分の指定

DBの属性名がpassword_digestだったから何の疑いもなくpassword_digestにしちゃったけど validationのエラーなのでDBに書き込む前だね？と言う事で 属性名の指定をpassword_digest: →　password:に変更したらOKでした！

ここも日本語化したいの部分

最初は、単純に文字表示の部分はそのまま日本語でもいいんじゃね？の気持ちから下記の様に

<% if @user.errors.any? %>
  

    

      フォームには<%= pluralize(@user.errors.count, "個のエラーがあります") %>.
    

    
    
    <% @user.errors.full_messages.each do |msg| %>
      
  • <%= msg %>
    • 
    <% end %>
    

  

<% end %>

更に気になる部分・・・

使い分けを考える

上で一回書いたけど 単純に文字表示の部分はそのまま日本語でもいいんじゃね？の気持ちで進めようと思ったのだけど 上部の部分もI18nで日本語化できるよ！と、教えてもらいまして じゃぁ練習もかねて、って事で 今回は日本語化したい部分はマルっとI18nを使って日本語化することにしました。

ここも日本語化したいの部分再び

と、言う訳でいったんコードを元に戻しまして作業していきます。 まずは簡単そうなところから。

confirmation部分

ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user:
        name: 名前
        email: メールアドレス
        password: パスワード
        password_confirmation: パスワード（確認用）

と、言う訳でmodelsのja.ymlファイルを編集しました。 が、表示に変化なし。 はて？と思って見直したらviewファイルに答えがありました！

・
・
・
      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

ハイライト部分、第2引数で表示する文字列を指定しているのでした なのでその部分を削除 →希望の通りに表示されました✨

view用のファイルを作る準備

こちらを参考にフォルダとファイルを配置 [blogcard url=”https://qiita.com/shi-ma-da/items/7e5c3d75c9a9f51abdd5”] こんな感じになりました

ボタン部分

フォームのデータを送信するためのボタン部分（青いところ）

ja:
  #views/usersを指定している
  users:
    #views/users/new.html.erbを指定している
    new:
      Create my account: 'アカウントを作る！'
・
・
・
      <%= f.label :password_confirmation %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      #modelと違ってコードを書き換える必要がある
      #t(引数)の形で呼び出す　引数にはja.ymlで設定したキーが入る
      #「.Create my account」は「user.new.Create my account」の略
      #()も省略できるっぽいけど、省略したらCSSが崩れたので付けた。ので、付けるほうに統一
      <%= f.submit t('.Create my account'), class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

tって何？！ってなったんだけど translate（翻訳する）の頭文字のtでした！ 翻訳するためのメソッドって事ですね。 [blogcard url=”https://qiita.com/tiktak/items/a70ef7940fa4710f37cb”]

エラー数の表示の部分

この部分はnew.html.erbではなくエラー文用のパーシャルを編集するんだよ！（ちょっと探した）

ja:
  shared:
    #フォルダ名の頭の「_」は取る
    error_messages:
      #元のコードをマルっとキーにしようと思ってたけど長すぎて変なのでやめた
      #変数を使う事で動的な表示にも対応
      errors count: 'フォームに%{errors_count}個のエラーがあります'
<% if @user.errors.any? %>
  

    

      #第一引数に表示したい部分のキー　第二引数に変数名と値をハッシュで
      <%= t('.errors count', errors_count: @user.errors.count) %>
・
・
・</pre> 

できたっぽい！

ついでにやってみよう

日本語に直したいところを設定していきます
（これから）
（英語表記の方が雰囲気良くない？なところはそのままにしています）

時刻を日本時間に

コンソールのデータを見ていてタイムゾーンが違っているのがずっと気になっていたので設定します
[blogcard url="https://qiita.com/shi-ma-da/items/7e5c3d75c9a9f51abdd5"]

・
・
・
    #ActiveRecord（created_atなど）に影響する
    config.time_zone = 'Tokyo'
    #DBに読み書きされる時刻に影響する
    config.active_record.default_timezone = :local
    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.yml').to_s]
  end
end
 
[blogcard url="https://qiita.com/aosho235/items/a31b895ce46ee5d3b444"]
で、コンソールでデータを作ってみたところ、時刻表示が変わってないな？

cloud9の時刻を日本時間に

もしかしてcloud9でやってるから？
と思ったらそうっぽい。
下記ページを参考に時間を競ってします。
これ多分、一番最初にやった方がいいやつだよね。
[blogcard url="https://dot-blog.jp/news/cloud9-linux-changing-timezone/"]
出来ました！

まとめとか感想

時刻表示がcloud9の影響と言うのは盲点でした！
後は、今後も必要そうな部分を随時日本語にしていきたいと思います🐫
国際化という部分で考えたら、英語表示用のymlファイルも作らないとじゃね？って思うんだけど
そこには気が付いているよって事で良しとしたい！

らくだ🐫にもできるRailsチュートリアルとは

「ド」が付く素人のらくだ🐫が勉強するRailsチュートリアルの学習記録です。
自分用に記録していますが、お役に立つことがあれば幸いです。

調べたとはいえらくだ🐫なりの解釈や説明が含まれます。間違っている部分もあるかと思います。そんな所は教えて頂けますと幸いなのですが、このブログにはコメント機能がありません💧お手数おかけしますがTwitterなどでご連絡いただければ幸いです

タグ: らくだにも出来るRailsチュートリアル番外編、参考サイト