スキップしてメイン コンテンツに移動

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

enter image description here

トーストって?

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

enter image description here

トースト を表示する 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] ボタンをクリックします。

enter image description here

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

サンプルコードの生成

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

$(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 では、以下の4種類のデザインでメッセージを表示する事ができます。

Success(成功)
成功(Success)のトースト
Info(情報)
Info(情報)のトースト
Warning(警告)
Warning(警告)のトースト
Error(エラー)
Error(エラー)のトースト

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

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

オプション

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

・toastr.options.closeButton

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

"closeButton": true
enter image description here

・toastr.options.newestOnTop

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

"newestOnTop": true "newestOnTop": false
enter image description here enter image description here

・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 で指定した時間経過後に、トーストが消えますが、
ユーザが、1回でもトーストの上でマウス移動した場合、
extendedTimeOut で指定した時間経過後に、トーストが自動的に消えます。

・toastr.options.showEasing

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

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

・toastr.options.hideEasing

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

非推奨のオプション

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

  • “showDuration”
  • “hideDuration”
  • “showMethod”
  • “hideMethod”
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…