Webページの上部にflashメッセージを表示させよう @TECH CAMP #22

　どうも、ひとつ山を越えたので少し余裕が出てきたとだです。

　今日はflashメッセージの表示のさせ方をアウトプットしようと思います。いつものようにアプリの開発環境はruby on railsを想定しています。
　自分の環境は

ruby 2.5.1
rails 5.2.3

です。

1.まずはflashメッセージ用のビューを用意する

　まずは実際にflashメッセージそのもののビューを用意します。部分テンプレートとして用意してもいいですし、app/views/layouts/application.html.hamlに直接記入しても良いです。今回は部分テンプレートとして、flashメッセージのファイルを「views/layouts」フォルダ内に「_notifications.html.haml」として用意します。以下のようにflashメッセージのビューを用意します。

.notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key

　2行目でflashオブジェクトを呼び出しています。flashオブジェクト内には、複数のメッセージがハッシュのように「キー」「バリュー」形式で保存されています。each文を使って、複数のメッセージを1つずつ取り出します。3行目でcontent_tagを使用してflashメッセージを表示させるためのdivタグを作成します。
　content_tagHTMLタグを生成するメソッドで、書き方は以下の通りです。

content_tag(作成するタグの種類□表示したい内容□class等のオプション）
 # □は半角スペース

2. flashメッセージが表示されるようにする

　上記で用意したビューを実際に表示されるようにします。ちなみにapp/views/layouts/application.html.hamlに直接記入した場合はこの工程はすっ飛ばします。
　部分テンプレートを用意した場合はapp/views/layouts/application.html.hamlファイルで以下のように記述します。

!!!
%html
 %head
   %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
   %title ChatSpace
   = csrf_meta_tags
   = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
   = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
 %body
   = render 'layouts/notifications'
   = yield

　10行目(下から2行目)にrenderで部分テンプレートを呼び出します。
　%bodyタグ内にある、11行目の

 = yield

について簡単にまとめておきます。
　このyieldは、ビューファイルの内容をここに埋め込むために使われています。例えば、コントローラーのindexアクションが実行され、ブラウザに「index.html.haml」が表示される場面を考えます。基本的な事ですが、まず「application.html」に書かれた内容は全て表示されます。その上で、yieldの部分に「index.html」の内容が埋め込まれ表示されます。
　今回はこの仕組みから、

= render 'layouts/notifications'

が、

 = yield

の上に記載されていることから、ビューの上部にフラッシュメッセージが表示されることになります。「1.まずはflashメッセージ用のビューを用意する」の内容を直接記述する場合には、このyieldの上に記述すればOKです。

3. CSS(sass/scss)でflashメッセージのスタイリングをしよう

　あとはCSSを当ててスタイルを綺麗にしてあげればOKです。「stylesheets/modules」フォルダに「flash.scss」を作成し設定していきます。
通信成功時等の通知用「notice」のメッセージと、通信失敗時等エラーが出た時のアラート用「alert」のメッセージでスタイルを分けていきます。

.notification {
 .notice {
   background-color: //好きな色;
   color: //whiteがオススメ;
   text-align: center;
 }
 .alert {
   background-color:  //好きな色;
   color: //whiteがオススメ;
   text-align: center;
 }
}

　基本的に色は好きな色を使いますが、UIを考え「notice」には青や緑系統の色、「alert」には赤やオレンジ系統の色を使うことをオススメします。また、文字色は背景色が濃い場合が多いので白を使うことをオススメします。さらに、文字の配置は「text-align: center;」で中央に配置することで見栄えを良くできます。

4. 自分で好きなタイミングでメッセージを出したい

　結論、コントローラーにflashメソッドやflash.nowメソッドを用いればOKです。例を見た方が早いので以下に列挙します。

#1
if @item.valid?
  @item.save
  flash[:notice] = '出品が完了しました'
  redirect_to root_path

#2
 else
   flash[:alert] = '出品するには、ログインするか新規会員登録をしてください。'
   redirect_to root_path
 end

#3
else
  flash.now[:alert] = 'メッセージを入力してください。'
  render :index
end

　flashとflash.nowの使い分けは以下の通りです。

・flash          redirectする時
・flash.now  renderする時

このことについてはredirect_toとrenderの違いと、そもそもflashとflash.nowの違いについてわかる必要がありますが、以下の記事がわかりやすいのでリンクを載せておきます。

【Rails】flashメッセージを使用して簡易メッセージを表示させる詳しい方法と解説 - Qiita

【Rails】renderとredirect_toの違いと使い分け - Qiita

一部引用させていただくと

メッセージ投稿成功時はリダイレクトしており、直後のリクエスト後(indexアクション後)にflashメッセージが参照可能となっているため、flashを使用しています。
また、メッセージ投稿失敗時には、同じリクエスト内でflashメッセージを表示したいので、flash.nowを使用しています。
(【Rails】flashメッセージを使用して簡易メッセージを表示させる詳しい方法と解説)

とあります。つまり、上記に挙げた3つの例で言うと、#1、#2ではリダイレクト先の場面でflashメッセージを表示したいため、#3ではrenderしているので同じリクエスト内でflashメッセージを表示したいため、と言うことですね。

5. メッセージを日本語化したい

　devise等を用いていると、デフォルトでは英語でメッセージが出てくる場面があるので、日本語で表示されるようにしたい時は以下の流れで実装します。

5-a. 「config/locales」フォルダに、「devise.ja.yml」および「ja.yml」という名前のファイルを新規作成する

　下記のサイトに記述内容が掲載されているので、それぞれ中身を丸ごとコピーして貼り付け、保存しましょう。

まず「devise.ja.yml」を作成して、中に以下のサイトに記載されている中身を丸ごとコピペします。

tigrish/devise-i18n

次に「ja.yml」を作成して、中に以下のサイトに記載されている中身を丸ごとコピペします。

svenfuchs/rails-i18n

5-b. application.rbを編集して、言語設定を変更する

　次にapplication.rbを編集して、言語設定を変更しましょう。

module アプリケーション名
 class Application < Rails::Application
   #〜省略〜
   config.i18n.default_locale = :ja  #ここを追加する
 end
end

これで日本語への言語設定ができました！

6. 実装成功例

　例えばdeviseを用いてログイン機能を搭載している場合、ログインした時に以下の画像のようにページの上部にメッセージが出てくれば成功です！

おしまい

　思ったより長くなってしまいましたが、備忘録としてまとめられたのではないかと思います。次は自分が苦労したgem 'ancestry'による多階層データを用いて、選択肢を動的に変化させる機能をjavascript（jQuery）とAjax(非同期通信)を用いて実装するやり方をアウトプットする予定です。ここまで読んでいただいてありがとうございました！