【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 %>

 

プログラミング学習につまづいていませんか?

自分の力で勉強していく独学は大変です。ゼロからだとなおさら辛いはず。

一人でやっていると、誰かに教えてもらいたい、もっと効率的にプログラミングを学びたい、という場面が必ずあります。

ということならばスクールを検討してみてはいかがでしょう。

オンラインで完結するプログラミングスクール「TECH::CAMP」

TECH::CAMP

TECH::CAMPは人気・評判がともに高く、月額12,800円から受講できるオンライン対応のプログラミングスクールです。

TECH::CAMPでは、ネットで受講できて講師にも質問し放題なので、好きなときに必要な知識を重点的に勉強できます。
オンラインスクールを利用すれば、住んでる場所に関係なくプログラミングスキルが磨けますよ。

独学がちょっと苦しくなってしまった……という方は、オンラインでの受講を考えてみてはいかがでしょうか。

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

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