アプリ内で通知を表示する際、画面の隅に最前面にポップアップするようなUIを”トースト”と呼びます。
Javascriptで動くライブラリで、こういったトーストのWebアプリ上での実装を簡単にしてくれるものは結構あるのですが、Bootstrapやマテリアルデザイン系フレームワークなどの汎用的なライブラリの一部であったり、複雑な前準備が必要だったりする場合が多く、すぐに単体で使えなかったり、使えるようになるまでの手間がかかったりするものが多いように感じます。
最近、 Laravel の勉強もかねてWebアプリを作っていたのですが、組み込んだライブラリとの相性が悪く、bootstrap標準のトーストがうまく動かなかったため別のトーストが表示できるライブラリを探したところ、iziToastというライブラリを見つけました。
iziToastはプログラムをWebアプリのプロジェクトに配置した後、Scriptタグで呼び出すだけで トースト を実装できるという非常に便利なライブラリです。
画像は公式サイトで各種類のトーストを四隅に配置した場合の例です。
タイトルと内容、閉じるボタンとトーストが表示される残り時間が確認できる かなりリッチなトーストを標準で実装することができます。
また、メッセージの内容に合わせて、トーストのメッセージの種類を設定することができます。
設定できる種類は下記の通り
・info
・success
・warning
・error
・question
また、表示をある程度カスタマイズすることも可能なようです。
インストールは、npmコマンドでインストールを行うか、公開されているCDNのURLをscriptタグにセットすることで利用できるようになります。
npmを使用する場合は下記のようにします。
npm install izitoast --save
CDNで簡単に読み込ませる場合は下記のように指定します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" crossorigin="anonymous">
※バージョンは適宣変更してください。
あとは、トーストを表示させたいタイミング(例えば$.ajax().doneなど)に次のような一行を追記します。
iziToast.トーストの種類({ title: 'モーダルタイトル', message: 'メッセージ' });
例えは、次のように記述します。
iziToast.success({ title: 'アップロード', message: 'アップロードに成功しました。' });
これだけで、アップロード成功時のトーストを実装することができます。
とても便利なので、トーストを実装したいと考えている方はぜひダメしてみてください。
参考サイト:
jsプラグイン「iziToast」で超簡単にトースト(通知バー)を表示 – Qiita
オシャレなtoastが簡単に実装出来るjsプラグイン「iziToast」 – cupOF
izitoast – cdnjs
