つい最近 「何か通知するのにトースト的なものを表示したい」 という場面があったので便利そうなライブラリがないか探していたらいいのを見つけました。
それが toastr.js というトースト通知用のjQueryライブラリ
使ってみたらかなり便利だったので、この使い方をまとめてみようと思います。
toastr.jsでトースト表示する手順
この toastr.js が便利なのは４種類のトースト表示（ info 、 success 、 warning 、 error ）に対応していて、オプションとかも色々指定できるところですね。
その基本的な導入と表示手順は次の通りです。
１．jQuery と toastr.js の読み込み
まずheadタグ内などで次のようにjQueryを読み込み
|
1 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
toastr.js はjQueryを利用しているので必ず先に読み込んでおかないといけません。ちなみにバージョンについては特に指定はないです。
そうしたら次に toastr.js のJSファイルとCSSファイルを読み込み
|
1 2 |
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> |
ただしJSファイルについては必ずjQueryより後で読み込むことが必須です。
ちなみに上の例だとCDN経由で呼び出してますが、次ページからダウンロードもできます。
https://codeseven.github.io/toastr/
上ページからzipをダウンロードして展開し、直に読み込んでもOK。自分自身はCDNは使わず直リンクして使うことが多いです。
２．トースト通知してみる
あとはボタンが押されたときなど好きなタイミングでトースト通知ができます。
呼び出せるトーストの種類は全４種類でそれぞれのコード例と見た目は次の通りです。
まず１つめは簡単な情報を表示するinfo型のトースト
|
1 |
toastr.info('これはinfo型のトーストです'); |
▼表示されるトースト例
２つめは成功時にメッセージが表示できるsuccess型のトースト
|
1 |
toastr.success('これはsuccess型トーストです'); |
▼表示されるトースト例
３つめは警告メッセージが表示できるwarning型のトースト
|
1 |
toastr.warning('これはwarning型トーストです'); |
▼表示されるトースト例
そして４つめはエラーメッセージを表示するerror型のトースト
|
1 |
toastr.error('これはerror型トーストです'); |
▼表示されるトースト例
以上の４つからトーストの呼び出しが可能
分かりやすいメッセージ表示をするのに結構重宝しそうです。呼び出し方が簡単なのも便利ですね。
トースト通知にオプションを指定するには
そして、表示したトーストには色々オプションとかも付けることができます。
やり方は toastr.options プロパティに連想配列形式のオプションを渡すだけです。
例えば次がトースト表示位置と表示時間のオプションを渡しているコード例
|
1 2 3 4 5 |
/// オプション変更 toastr.options = { "positionClass": "toast-bottom-right", "timeOut": "10000", }; |
上の例だとトースト表示位置がブラウザ右下（ "positionClass": "toast-bottom-right" ）、表示時間は１０秒（ "timeOut": "10000" ）になります。ただし時間指定の単位は秒ではなくミリ秒なことに少し注意
ちなみに指定可能なオプションについては次のデモページをどうぞ
デモページ ： https://codeseven.github.io/toastr/demo.html
というか toastr.js には公式リファレンスがないので、上のデモが実質リファレンスページみたいなものですね。入力値とか選択値を変えればどういうオプションが指定できるのか調べられます。
ここまでのまとめ
今紹介したみたいに toastr.js は本格的なトースト通知にかなり便利です。オプションも必要最低限なものが揃っていて、余計な機能が付いていないのも使う側としては嬉しい機能です。
以上、jQueryでトースト通知できるライブラリ toastr.js についてでした。
