フラッシュメッセージ（I18n(国際化) + bootstrap）

はじめに

現在私はポートフォリオを作成しています。今回の記事では、現在進行形で理解ができていない、フラッシュメッセージについて理解したことを備忘録として記録しておきたいと思います。

現状

Google認証を行った後に、ログイン・ログアウトは実行できるようになったのですが、フラッシュメッセージの設定で戸惑ってしまったため、今回はI18n（国際化）とbootstrapでのフラッシュメッセージを実行していきたいと思います。

流れ

まずはbootstrapの導入についてはこれらの記事を参考に実施しました。

I18n(国際化)について

フラッシュメッセージ自体は表示されるのですが、英語表記でわかりづらかったので、こちらを導入しました。

Gemfile

gem 'rails-i18n'

Gemの追加を行いbundle installを実行してください。

config/application.rb

~中略~
config.i18n.default_locale = :ja

上記の記述をファイルの下にendが2つあると思うので、その上に記述をしてください。

これで基本的な準備は終わりです。あとは自分の現状に合わせたymlファイルを作成してください。
私の場合は、deviseのGoogle認証のフラッシュメッセージが必要だったので、config/locales/devise.en.ymlという自動で作成してくれている英語表記のファイルをChatGptに日本語表記で作り替えてもらい、同じフォルダ内にdevise.ja.ymlを作成しました。

フラッシュメッセージ

これは使用頻度が多いと思うため、パーシャルでファイルを用意します。views/shared/_flash_message.html.erbに記述していきます。

_flash_message.html.erb

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

上記のコードは、flashが起こったら、flashの中にハッシュの形でデータがあるため、それらをeachを活用して取り出します。class='alert alert-<%= key %>"はbootstrapの機能の一つで、keyに入ったものによってカラーを変えてくれます。これは公式を参考に実施してみてください。

omniauth_callbacks_controller.rb

omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
 skip_before_action :verify_authenticity_token, only: :google_oauth2

 def google_oauth2
   @user = User.from_omniauth(request.env['omniauth.auth'])

   if @user.persisted?
     sign_in_and_redirect @user, event: :authentication
     set_flash_message(:notice, :success, kind: "Google") if is_navigational_format?
   else
     session["devise.google_data"] = request.env["omniauth.auth"].except(:extra)
     redirect_to new_user_registration_url
   end
 end

 def failure
   redirect_to root_path
 end
end

Googleのログイン機能でユーザーのデータをもとに、ログインなど行うcontrollerです。今回はこの中のフラッシュメッセージに関わる部分がbootstrapで上手く反映させることができなかったため、ただフラッシュメッセージが出力されるだけの形でした。ですので、このコードを理解していこうと思います。

set_flash_message(:notice, :success, kind: "Google") if is_navigational_format?

これがflashにどのようにデータが渡るのか理解できていなかったため、まずはそれを勉強しました。
set_flash_messageというdeviseのメソッドを活用することで、devise.ja.ymlの以下のコードを自動的に検索してくれる。

omniauth_callbacks:
    failure: "%{kind} での認証に失敗しました。理由：%{reason}。"
    success: "%{kind} アカウントでログインしました。"

なので、今回はsuccess:の方の記述が_flash_message.html.erbのコードのmessageとして、
:noticeは_flash_message.html.erbのコードのkeyとしてflashのハッシュに保存されていることが理解できた。

その後、公式を見たところ、_flash_message.html.erbにある、class="alert alert-<%= key %>"では、keyの部分がsuccessになる必要があるとわかったため、以下のように修正をした。

omniauth_callbacks_controller.rb

- set_flash_message(:notice, :success, kind: "Google") if is_navigational_format?
+ set_flash_message(:success, :success, kind: "Google") if is_navigational_format?

これによりフラッシュメッセージが日本語で出るようになり、さらにbootstrapによりデザインされていました。

おわりに

今回のフラッシュメッセージで詰まってしまった時に、記事に書いてあることコードを打つばかりではなく、自分で解決策についえ考えながら、公式をよく見てみることの大切さがわかりました。生成AIが当たり前の時代ですが、プログラミング思考力を身につけつつ、ポートフォリオを作成していきたいと思います。