i18nによる国際化
i18nによる国際化
Gemfileに以下を追記
gem 'rails-i18n'
※[rails-i18n]Gemは、基本の翻訳情報ファイルが最初から入っているもので、[config/locales/ja.yml]などに[rails-i18n]Gemの翻訳ファイルを記載する必要はない。
↓
bundle install
↓
[config/application.rb]に以下を記載。
donfig.i18n.default_locale = :ja #デフォルトでの言語を指定(指定しないとEnglishの翻訳ファイルが読み込まれる) config.i18n.load_path += Dir[Rails.root.join('config/locales/**/*.{rb,yml}').to_s] #複数のロケールファイルを読み込むように設定(参照するファイルのパスを設定している。)
↓
[config/locales]以下にデフォルト言語で設定した名前のyamlファイル(ja.yml)を作成。(翻訳ファイルの作成)
ex)
モデルに関する翻訳ファイル ja: activerecord: models: user: ユーザー #モデル名 attributes: user: #モデル名 last_name: 姓 #モデルの属性名 first_name: 名 email: メールアドレス password: パスワード password_confirmation: パスワード確認
上記のようにモデル名をactiverecord以下に記述することで、[human_attribute_name]や[Model.model_name.human]が使用できる。
ビューに関する翻訳ファイル ja: defaults: login: 'ログイン' logout: 'ログアウト' registration: '登録' user_sessions: #コントローラ名 new: #アクション名 forgot_password: 'パスワードをお忘れの方はこちら' title: 'ログイン' to_registration_page: '登録ページへ' users: new: title: ユーザー登録 to_login_page: 'ログインページへ'
[補足] ※form_withでモデルを渡してる場合は、railsが自動で対応の翻訳ファイルがあれば読み込んできて国際化してくれる。 ex)
<%= form_with model: @user, local: true do |f| %> <div class="form-group"> <%= f.label :last_name %> <%= f.text_field :last_name, class: 'form-control' %>
下記ファイルを自動で読んでくれる
ja: activerecord: models: user: ユーザー attributes: user: last_name: 姓 first_name: 名 email: メールアドレス password: パスワード password_confirmation: パスワード確認
form_withでモデルを渡していない場合は、自分で国際化する必要がある。(国際化の際にはhuman_attribute_nameやModel.model_name.humanを使用) ex)
<%= form_with scope: :session, url: login_path, local: true do |f| %> <div class="form-group"> <%= f.label :email, User.human_attribute_name(:email) %> <%= f.text_field :email, class: 'form-control' %>
国際化を記載する時は、lazy lookup記法を使う。(ビューだけでなくコントローラでも使えるため。)
・[ja.yml]ファイルのdefaultsを使う場合(t 'defaults.○○')の形にする ex)
<%= link_to (t 'defaults.logout'), logout_path, method: :delete, class: 'dropdown-item' %> <h1><%= t 'defaults.login' %></h1>
・[ja.yml]ファイルのdefaultsを使わない場合(t '.○○')の形にする ex)
<%= link_to (t '.to_registration_page'), new_user_path %> <a href="#"><%= t '.forgot_password' %></a>
config.i18n.load_pathの記述の意味
[config.i18n.load_path]の設定の記述は、以下のように実行されます。
irb(main):001:0> Rails.root => #<Pathname:/Users/higmonta/workspace/fishing_cooking> irb(main):002:0> Rails.root.join('config') => #<Pathname:/Users/higmonta/workspace/fishing_cooking/config> irb(main):003:0> Rails.root.join('config', 'locales') => #<Pathname:/Users/higmonta/workspace/fishing_cooking/config/locales> irb(main):004:0> Rails.root.join('config', 'locales', '**') => #<Pathname:/Users/higmonta/workspace/fishing_cooking/config/locales/**> irb(main):005:0> Rails.root.join('config', 'locales', '**', '*.{rb,yml}') => #<Pathname:/Users/higmonta/workspace/fishing_cooking/config/locales/**/*.{rb,yml}> irb(main):006:0> Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')] => ["/Users/higmonta/workspace/fishing_cooking/config/locales/en.yml", "/Users/higmonta/workspace/fishing_cooking/config/locales/ja.yml"]
[/]という記述は、ワイルドカード */ の0回以上の繰り返しを意味し、ディレクトリを再帰的にたどってマッチを行います。
例えば, foo//bar は foo/bar, foo//bar, foo//*/bar ... (以下無限に続く)に対してそれぞれマッチ判定を行います。
※注意
appファイル以下のコードやconfig/routes.rbなどのファイルは再起動しなくても反映されるが、他のファイルは基本的にはrails sでサーバーを起動し直す必要がある。
[ja.ymlファイル]にコントローラやアクション毎に階層的に記載しているのは、見やすくする為に整理して書いているだけなので、基本的にどこに翻訳データを記載しても、翻訳される。
参考記事
あなたはいくつ知っている?Rails I18nの便利機能大全! - Qiita
[初学者]Railsのi18nによる日本語化対応 - Qiita
sorcery GemとCookie,セッション
[sorcery]Gemの導入手順
・Gemfileに以下を記載
[Gemfile] gem "sorcery"
↓
$ bundle install
↓
$ rails g sorcery:install
※[rails g sorcery:install]を実行すると、以下のファイルが作成される。
・migrationファイル(db/migrate/〇〇〇〇_sorcery_core.rb)
・initializerファイル(config/initializers/sorcery.rb)
・Userモデル
※注意
create_tableの名称がUserになっているので、usersに訂正!!
↓
$ rails db:migrate
↓
下記のようにバリデーションを追加
class User < ActiveRecord::Base authenticates_with_sorcery! validates :password, length: { minimum: 3 }, if: -> { new_record? || changes[:crypted_password] } validates :password, confirmation: true, if: -> { new_record? || changes[:crypted_password] } validates :password_confirmation, presence: true, if: -> { new_record? || changes[:crypted_password] } validates :email, uniqueness: true end
※if: -> { new_record? || changes[:crypted_password] }
上記の意味は、 登録したユーザーがパスワード以外のプロフィール項目を更新したい場合に、パスワードの入力を省略させることができます。
また、passwordとpassword_confirmationはcrypted_passwordカラムに対する仮想属性となっている。
「validatesの使い方」
validates :カラム名, :カラム名, :カラム名, ヘルパー
[Confirmationヘルパー]
2つのフォームで入力された内容が完全に一致するかを検証します。
メールアドレスのフォームとメールアドレスの確認フォームが全く同じであるか検証したいときなどに利用します。
一致しているか確認したいもう一つのカラム名は末尾に_confirmationをつけます。
こちらはフォームでのみ使うカラムなのでデータベースにこのカラムを作成する必要はありません。
メールアドレスを例にすると下記のようになります。
validates :email, confirmation: true validates :email_confirmation
「sorceryで用意されているメソッド」
・[login]
認証処理が行われる。
以下のように使う
@user = login(params[:email], params[:password])
上記は、emailによるUser検索、パスワードの検証を行い、正常に処理できるとセッションデータにUserレコードのid値を格納する、という処理が行われている。
イメージは、下記と一緒
User = User,find_by(email: session_params[:email]) If user&.authenticate(session_params[:password]) session[:user_id] = user.id
・[logout]
ログアウトをする為のメソッド
以下のように使う
def destroy logout redirect_to root_path end
・[require_login]
その名前の通りログインを強制します。
ログインが必須の画面、コントローラにおいてbefore_action :recuire_loginを書きます。
以下のように使う
class ApplicationController < ActionController::Base before_action :require_login end
・[not_authenticated]
ログインしていなかった場合に呼ばれるメソッドが[not_authenticated]
ログインしていなかったら「フラッシュメッセージを表示する」、「ログインしていなかったらこのページにリダイレクトをする」のように使う。
以下のように使う
class ApplicationController < ActionController::Base before_action :require_login private def not_authenticated redirect_to login_url, info: (t 'defaults.please_login') end end
・[logged_in?]
現在のユーザーがログインしているかを判別する。
以下のように使う
<% if logged_in? %> <%= render 'shared/header' %> <% else %> <%= render 'shared/before_login_header' %> <% end %>
・[current_user]
cookieに保存されたユーザーidを元にユーザーの情報を取得するメソッド。
以下のように使う
@board = current_user.boards.new(board_params)
・[login_from_session]
user_class.sorcery_adapter.find_by_id(session[:user_id])とUser.find_byのような処理でユーザーのオブジェクトを取得している。)
※ポイント
フォームからログイン情報を受け取って[loginメソッド]を使ってログインする際は、以下のような形でparamsが送られてくる。
([loginメソッド]でフォーム欄から送られてくるparamsの形式が決まっているので、form_withでscopeなどを指定してログイン情報をグループかするとおかしくなる。)
# このようなparamsが送られてくる params: {email: xxxxxxxx@xxx, password: xxxxxxxx, 以下略} # こうではない # params: {session: {email: xxxxxxxx@xxx, password: xxxxxxxx}, 以下略}
[redirect_back_or_to root_path]
上記の記述でフレンドリーフォワーディングを実装できる。
ログインが必要なページAにアクセスして時に、ログイン画面に移動しログイン後にページAを表示させるという機能。
分かりやすくいうと、require_loginのときにセッションに格納されたURLまたはデフォルトのURLにリダイレクトする。
あるページにアクセスしたユーザをまずログインさせたいという場合に、そのユーザをログインページに誘導し、ログインが成功したら最初に訪れようとしていたページに戻ること。
[redirect_back_or_to root_path]の場合は、ページAが存在しなければroot_pathに飛ぶようになっている。
「Railsのcookieの設定」
Railsの場合、[config/initializer/session_store.rb]にて、セッション情報をどこに保存するのかが指定されています。
デフォルトでは、以下のようになっている。
Rails.application.config.session_store :cookie_store, key: '_○○_session'
これは、○○sessionというkeyで、cookieを用いてセッション情報を管理するといった意味。
参考記事
【Rails】 Railsのバリデーションの使い方をマスターしよう! | Pikawaka - ピカ1わかりやすいプログラミング用語サイト
awesome Gemとbootstrap Gemの注意事項
gemの注意事項
・Gemは、コメントなどで区切りのない段落では、gemの記載はアルファベット順にした方が良い。
ex)
[Gemfile] gem 'bootstrap', '~> 4.4.1' gem 'font-awesome-sass', '~> 5.12.0' gem 'jquery-rails'
[font-awesome]Gemの使い方
rails5系とrails6系ではfontawesomeの導入の仕方が異なります。
[rails5系に導入する方法]
Gemgileに下記のように追加する。
[Gemfile] gem "font-awesome-sass"
↓
$ bundle install
↓
[app/assets/stylesheets/application.scss]に下記のように追加する。
※[application.css]になっている場合は、[application.scss]に変換。
[app/assets/stylesheets/application.scss] @import 'font-awesome-sprockets'; @import 'font-awesome';
※注意
下記のように順番を入れ替えて記述するとアイコンが表示されなくなる。
[app/assets/stylesheets/application.scss] @import 'font-awesome'; @import 'font-awesome-sprockets';
[bootstrap]Gemの使い方
Gemfileに以下のように追加する。
[Gemfile] gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails'
※BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する必要がある。
↓
$ bundle install
※注意
sprockets-railsがv2.3.2.以上である必要がある。
sprockets-railsのバージョン確認は、以下で可能。
$ bundle show |fgrep sprockets-rails * sprockets-rails (3.2.1)
↓
[app/assets/stylesheets/application.scss]に下記のように追加する。
※[application.css]になっている場合は、[application.scss]に変換。
[app/assets/stylesheets/application.scss] @import "bootstrap";
※注意
・scssファイルには、*= requireなどのSprocketsディレクティブの記載が残っていると、@importで定義した内容がうまく読み込めずbootstrapが反映されない
↓
bootstrapとの依存関係を[app/assets/javascripts/application.js]に下記のように追加する。(Webアプリケーションではスタイル関連にJavaScriptが使われるのが一般的でありRailsやBootstrapも同様。そのため、JavaScript の設定についても、Rails標準の設定からBootstrap用に変更しなければいけない為。)
[app/assets/javascripts/application.js] //= require jquery3 //= require popper //= require bootstrap-sprockets
※注意
上記の追加するコードは、下記のように[//= require rails-ujs],[//= require turbolinks],[//= require_tree .]より上に追加しなければいけない。
[app/assets/javascripts/application.js] //= require jquery3 //= require popper //= require bootstrap-sprockets //= require rails-ujs //= require activestorage //= require_tree .
※ポイント
公式のGemを検索するのに以下のrubygemsがおすすめ。 ドキュメントやソースコードなどにもすぐ飛べる。
RubyGems.org | your community gem host
参考記事
Railsアプリで Bootstrap 4 を利用する - Qiita
【Rails入門説明書】Bootstrapについて解説 - WEBCAMP MEDIA
【Rails】 font-awesome-sassの使い方を徹底解説! | Pikawaka - ピカ1わかりやすいプログラミング用語サイト
Rails で Bootstrap を使う gem「bootstrap-sass」を導入する - Neo's World
layoutファイルの仕組み
layoutファイルの仕組み
webページを閲覧する際に利用されるChromeやSafariなどのソフトはブラウザと呼ばれており、HTMLやCSSなどの言語を解釈し人間が見やすいように、色を付けたり、文字を大きくしたりとレイアウトしてくれる。
ブラウザが認識できる言語は、[HTML,CSS,JS]の3種類。
Railsは、出力用のHTMLファイルを生成する際に[layoutファイル+テンプレートファイル]が足し合わさっている。
layoutファイルは、何も指定がなければ[application.html.erb]ファイルが選択されるようになっている。
HTMLでは、そのページで必要となる読み込みファイルをheadタグ内で読み込む。
Railsでは、CSSファイルの読み込みは[stylesheet_link_tag]、JSファイルの読み込みは[javascript_include_tag] というヘルパーメソッドを用いて行われており、それぞれ[layout/application.html.erb]に記載がなされているのですが、デフォルトで読み込んでいるのは、[application.css], [applicaiton.js]という2種類。
以下のように記載がある。
[app/views/layouts/application.html.erb] <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %>
また、[app/assets/stylesheets/application.css]と[app/assets/javascripts/application.js]に以下のような記載がある。
[app/assets/stylesheets/application.css] *= require_self *= require_tree .
[app/assets/javascripts/application.js]
//= require_tree .
それぞれの意味は、以下のようになる。
layoutファイルで読み込まれる時の流れ
[app/views/layouts/application.html.erb]のheadタグ内で、[app/assets/stylesheets/application.css],[app/assets/javascripts/application.js]を読み込む。
↓
[app/assets/stylesheets/application.css],[app/assets/javascripts/application.js]内で、どのファイルを読み込むかを取りまとめ(初期状態では同階層の全てのファイルと自身を読み込むように定義)、必要なファイルが読み込まれる。
[application.css],[application.js]のように、どのファイルを読み込むのかを取りまとめたファイルをマニフェストファイルという。
※注意
require_treeを使うと同ディレクトリのcssファイルをすべて読みこんでしまうため、ファイルを読み込む順番が分からなくなります。
それを防ぐために、@importを使って必要なファイルのみ読み込む方がファイル管理を安全にできます。
ex)
// BAD //= require_tree . // GOOD @import 'top';
参考記事
rails generateコマンド実行時の自動ファイル作成の制御
rails generateコマンド実行時の自動ファイル作成の制御
「アプリケーションが立ち上がるまでの流れ」
・サーバーを立ち上げる為の[rails s]コマンドや[rails c]コマンドを実行してから実際にアプリケーションが立ち上がるまでの間に初期化という作業を実行している。
↓
・初期化時には、下記の3種類のファイルが呼び出されており、それぞれ異なる初期化作業を行っている。
config/initializers以下の各ファイル: 特定のツールや機能に対する設定ファイルを、ファイル別に記述する。(assets.rb / aws.rbなど)
config/environments以下の各ファイル: 環境別に行いたい初期化作業を記述する(production.rb / staging.rb など)]
config/applicaiton.rb: [アプリケーション全体に関する設定を行う]
↓
・アプリケーションの立ち上げ
「ジェネレーターによる自動生成ファイルの制御」
railsには、[rails generate]というコマンドが用意されていて、rails generateで作成されるものに付随したファイルが自動生成される。この機能をジェネレーターという。
ジェネレーターによって自動生成されるファイルは、「applicaiton.rb」に記述することで制限できる。
module RunteqNormal class Application < Rails::Application config.generators do |g| g.assets false g.helper false g.test_framework false g.skip_routes = true end end end
上記は、assets、helper、testファイル、ルーティングが生成されないようにした例。
※注意
ブロックの中に記載する、helperなどはディレクトリ名とは無関係!!
generateコマンドで自動生成されるファイルを制御する書き方は、上記の例ように決まっている
※ポイント
※[rails generate]で利用できるジェネレーターの一覧が確認できる。
また、[rails generate ○○ -h]でgenerateのオプションを確認できる。
Rubocop(Rubyのコードの書き方や、改行、スペースなどのフォーマットをチェック)
Rubocop
Rubocopというgemを利用すると、Rubyのコードの書き方や、改行、スペースなどのフォーマットをチェックを行ってくれる。
bundle exec rubocop
上記を実行する事で、Rubyでの書式のフォーマットチェックを行ってくれる。
また、下記を実行するとスペースや括弧の有無やインデントなど自動で修正できる内容については、自動で修正することが可能です。
bundle exec rubocop --auto-correct
RubocopのGithub:
https://github.com/rubocop/rubocop
Rubocopの公式ドキュメント:
https://docs.rubocop.org/rubocop/index.html
GitHubの使い方(GitHubの内容を変えたい場合)
GitHubからも帰られるがローカルから変えるのが正しいやり方!
[vim 変えたいファイルの一文字目]をターミナルで打ってタブ
ex)ReadmeならRを打ってタブ
↓
予測が下記に出るので、選びたい方の文字の続きを入力してタブ押してエンターするとGitHubと同じ内容が出る
↓
最初は、移動モードになっているのでaを入力すると、入力モードになる(下にINSERTと出る)
↓
変えたい場所に文字を入れる
↓
escキーでINSERTモードを抜けられる
↓
保存するのにコロンキー
↓
wキーで書き込み
↓
エンター押すと下にwrittenと出る
↓
画面の下の方に:qを押してエンターを押すとvimが終わる
↓
ローカルで変えてるだけなので、githubには変わってない
↓
git status(変更したので、modifiedに変更したファイルが載ってる)
↓
[git add 変更したファイル](変更した時は変更したファイルだけをやるのが望ましい)
↓
git statusすると、addしたので、さっきの赤文字のmodifiedが赤じゃなくなる
↓
git commit -m “メッセージ”
↓
git log(変更加えた方は、pushしてないのでローカルのgitで止まっている)
↓
git push
↓
git logすると両方リモートに登録されてるのが確認できる