トーストを表示する Javascriptライブラリ「Toastr」

スポンサーリンク

トーストって？

↓のイメージのように、画面の隅（主に右下）から
現れる小さな長方形の通知メッセージのことです。
一定時間が経過すると自動的にメッセージが消え、
メッセージが表示されている状態でも、
通常の操作が行える為、ノンブロッキング通知とも言います。

トースト を表示する Javascriptライブラリ「Toastr」

実際に使ってみて、手軽にトースト表示機能を導入できた、
Toastr という Javascript ライブラリを紹介して行きたいと思います。

まずはダウンロード

公式HP からダウンロードします。

解凍すると、以下のような構成になっているので、
必要なファイルを取り出します。

ルート/  
　├ build/
　│　　└ toastr.css       
　│　　└ toastr.js.map    ☆必要なファイル    
　│　　└ toastr.min.css   ☆必要なファイル   
　│　　└ toastr.min.js    ☆必要なファイル
　├ CHANGELOG.md
　├ demo.html
　~ 省略 ~

スポンサーリンク

自分のサイトに組み込む

Toastr は JQuery に依存している為、JQuery と、
先ほどダウンロードしたファイルを追加します。

<link rel='stylesheet' href='toastr.min.css' />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous"></script>
<script src="toastr.min.js"></script>

トーストを表示してみる

Toastr にはデモページがあり、表示イメージの確認、
さらに Javascript のコードまで生成してくれます。
これを使って簡単に実装してみたいと思います。

まずは、デモページにアクセスして、
メッセージ、オプションを指定して、[Show Toast] ボタンをクリックします。

ボタンを押すと、実際にトーストが表示され、
さらに画面左下の方に、↓のようなサンプルコードが生成されます。

あとは、作成されたサンプルコードを自分のソースに貼り付けるだけで、
トーストを表示する事ができます。

$(function() {

	//ドキュメントロード時に、toastr のオプションを設定する
	toastr.options = {
	  "closeButton": true,
	  "debug": false,
	  "newestOnTop": false,
	  "progressBar": true,
	  "positionClass": "toast-bottom-right",
	  "preventDuplicates": false,
	  "onclick": null,
	  "showDuration": "300",
	  "hideDuration": "1000",
	  "timeOut": "5000",
	  "extendedTimeOut": "1000",
	  "showEasing": "swing",
	  "hideEasing": "linear",
	  "showMethod": "fadeIn",
	  "hideMethod": "fadeOut"
	}

	$("button").click(function() {
		//トーストを表示したタイミングで、以下のコードを実行すると、トーストが表示されます
		toastr["info"]("まもなくタイムセールが終了！！！このチャンスをお見逃しなく", "お知らせ");
	});
});

スポンサーリンク

メッセージの種類

Toastr では、以下の４種類のデザインでメッセージを表示する事ができます。

Success（成功）	Info（情報）
Warning（警告）	Error（エラー）

各トーストのサンプルコードは以下の通り

toastr["success"]("Success（成功）", "タイトル");
toastr["info"]("Info（情報）", "タイトル")
toastr["warning"]("Warning（警告）", "タイトル")
toastr["error"]("Error（エラー）", "タイトル")

オプション

Toastrには、豊富にオプションが用意されており、
トーストの表示位置（トーストを画面右上・右下に表示）などはもちろん、
様々なオプション指定で、動作をカスタマイズできます。

・toastr.options.closeButton

トーストの右上に、通知を消す為の ×ボタンを表示する場合、true を指定します。

"closeButton": true

・toastr.options.newestOnTop

複数のトーストが同時に表示される時、新しい通知を上に表示する場合 true を指定します。
デフォルトは新しい通知は下に表示されます。

"newestOnTop": true	"newestOnTop": false

・toastr.options.progressBar

true を指定するとトーストが消えるまでの残り時間を、プログレスバーで表示します。

・toastr.options.positionClass

トーストの表示位置を、CSSクラス名で指定します。

class名	トーストが表示される位置
“toast-top-right”	右上
“toast-bottom-right”	右下
“toast-bottom-left”	左下
“toast-top-left”	左上
“toast-top-full-width”	画面上（横幅100%）
“toast-bottom-full-width”	画面下（横幅100%）
“toast-top-center”	画面上に中央寄せ
“toast-bottom-center”	画面下に中央寄せ

・toastr.options.positionClass

同じ内容のメッセージを、重複表示しないようにする場合 true を指定します。

・toastr.options.onclick

関数を指定すると、トーストがクリックされた時に、
独自の処理を実行する事ができます。

・toastr.options.timeOut

トーストが自動的に消えるまでのタイムアウト時間をミリ秒単位で指定します。

・toastr.options.extendedTimeOut

通常は timeOut で指定した時間経過後に、トーストが消えますが、
ユーザが、１回でもトーストの上でマウス移動した場合、
extendedTimeOut で指定した時間経過後に、トーストが自動的に消えます。

・toastr.options.showEasing

トーストが表示される時のアニメーションを指定します。
[*] "linear"と"swing"以外のアニメーションを使用する場合、
jQuery Easing Plugin が必要です。

指定できるアニメーションは、jQueryに準拠します。
Easing早見表

・toastr.options.hideEasing

トーストが消える時のアニメーションを指定します。

非推奨のオプション

以下のオプションは非推奨となっており、
最新版では指定しても無視されます。

• “showDuration”
• “hideDuration”
• “showMethod”
• “hideMethod”