🍞
Toastr、何それ美味しいの?
状況
- 個人的に入社して最初の1週間目で出会った初めてのgem
- 今回久しぶりにポップとしてtoastrを採用することになり導入から携わったために復習
学び
toastr(トースト)とは
「toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.」(原文ママ)
- Toastrは、ウェブアプリケーションで使用される「通知メッセージ」を簡単に表示するためのライブラリ
- 通知メッセージは、エラーメッセージ、成功メッセージ、警告メッセージなどをユーザーに伝えるために使われる
例)「ログインに成功しました」や「データの保存に失敗しました」といったポップアップのようなもの
github
gemガイド demo(サンプルが見れます)導入方法(Railsの場合)
-
Gemをインストール
Gemfileに以下を追加(※):gem 'toastr-rails'
その後、以下のコマンドを実行してGemをインストール:
bundle install
-
Assetファイルの設定
ToastrのCSSとJavaScriptを使えるように-
CSSの読み込み:
app/assets/stylesheets/application.css
または.scss
に以下を追加:@import "toastr";
-
JavaScriptの読み込み:
app/javascript/packs/application.js
に以下を追加:import toastr from 'toastr';
-
-
JQueryの導入
ToastrはJQueryに依存している。Rails 6以上ではJQueryがデフォルトで含まれていないため、手動で設定が必要(別途記事にしたい)
Toastrの基本的な使い方
- Toastrを使って通知を表示するには、コントローラーでフラッシュメッセージを設定し、それをJavaScriptで表示する必要がある
1. コントローラーでフラッシュメッセージを設定
flash[:notice] = "ログインに成功しました!"
flash[:alert] = "エラーが発生しました。"
2. ビューでToastrを表示
app/views/layouts/application.html.erb
に以下を追加:
<script>
<% if flash[:notice] %>
toastr.success("<%= j flash[:notice] %>");
<% end %>
<% if flash[:alert] %>
toastr.error("<%= j flash[:alert] %>");
<% end %>
</script>
Toastrの便利な機能
-
メッセージの種類
-
toastr.success("成功メッセージ")
: 成功通知 -
toastr.error("エラーメッセージ")
: エラー通知 -
toastr.info("情報メッセージ")
: 情報通知 -
toastr.warning("警告メッセージ")
: 警告通知
-
-
カスタマイズ
Toastrは見た目や動作をカスタマイズできる。例えば、表示時間や位置が変更可能toastr.options = { "closeButton": true, "progressBar": true, "positionClass": "toast-top-right", "timeOut": "3000" }
注意点
-
JQueryが必要
- RailsプロジェクトではJQueryがデフォルトで含まれていないため、手動で導入が必要
-
セキュリティ
- フラッシュメッセージをJavaScriptで表示するときには、必ず
<%= j flash[:message] %>
のようにHTMLエスケープを行う必要がある
- フラッシュメッセージをJavaScriptで表示するときには、必ず
-
アセットのプリコンパイル
- 導入時にCSSやJavaScriptを忘れずにプリコンパイルすること
他にも、deviseと一緒に使う場合に使用が変更する点があるが、今回は省略
まとめ
- Toastrは、Railsアプリケーションに簡単に通知機能を追加できる便利なライブラリ
- Toastr-Railsを使うとさらに簡単に導入できる。ただし、JQueryが必要
所見
- やはり調べてみると理解が深まる。
- チャットGPTに聞いてみると
「トースト」という名前は、通知が画面上にポップアップして表示され、しばらくして消えるという動作が、ちょうど「パンがトースターからポンっと飛び出す」ように見えることから付けられたと言われています。
- 案外遊び心のあるgemなんだと思った
Discussion