【Rails】toastrで見栄え良くflashメッセージを表示する

toastrで見栄え良くflashメッセージを表示する

Railsのフラッシュメッセージは、デフォルトでは文字列を表示するだけの簡素なものです。

フラッシュメッセージの表示方法を適切に設定することで、アプリケーションを使うユーザーにわかりやすく通知することができます。

toastr

JavaScriptライブラリの「toastr」を利用すれば画面の右上にフラッシュメッセージを表示することができるので、今回はRailsアプリケーションでtoastrでフラッシュメッセージを表示する方法を紹介します。

toastrのデモ画面

toastrの動作デモはこちらから確認できるので、導入する前に試してみたい方は触ってみてください。
http://codeseven.github.io/toastr/demo.html
(Messageを設定してShow Toastボタンを押すとメッセージが画面右上に表示されます。)

toastr-rails(Gem)を利用する

Railsでtoastrを利用するためのGemが用意されています。

https://github.com/tylergannon/toastr-rails

導入方法は至ってシンプルです。

はじめにGemfileに toastr-rails を追加します。

gem 'toastr-rails'

bundle install してインストールしておきましょう。

次に app/assets/application.js に次のコードを追加します。

//= require toastr

そして app/assets/application.scss にも次のコードを追加します。

*= require toastr

あとは、 views/layouts/application.html.erbのbody閉じタグの前にtoastrの実行コードを追加して完了です。

<% unless flash.empty? %> //flashにメッセージがある時
    <script>
      toastr.sccess('更新しました')
    </script>
<% end %>

toastrの表示の種類は4種類

toastrは表示形式は4種類用意されています。

  • success (緑):投稿が完了したときなどの動作の成功を伝える際に利用。
  • info (青):通常の通知を行う場合などに利用。
  • warning (オレンジ):注意喚起の用途で利用。
  • error (赤):エラー通知に利用。

色によって意味が異なります。そこでRailsの通知に応じて利用したいところです。

そこで次にようにテンプレートに書くと、flashに応じて表示を変更できます。

<% flash.each do |type, msg| %>
  <script>
    toastr['<%= type %>']('<%= msg %>');
  </script>
<% end %>

コントローラーでflashのシンボルを指定している場合は、typeを判別して振り分けるようにしてあげると良いでしょう。

<% flash.each do |type, msg| %>
  <% type = 'info' if type == 'notice' %>
  <% type = 'error' if type == 'alert' %>
  <script>
    toastr['<%= type %>']('<%= msg %>');
  </script>
<% end %>

 

toastrで見栄え良くflashメッセージを表示する

更新情報はTwitterでも配信しています