Javascriptライブラリ『Notyf』で「トースト通知」（通知バナー）を作る方法
トースト通知プラグイン「Noty」を紹介したいと思います。
Contents
Javascriptライブラリ『Notyf』の紹介
インストール方法
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>この２行を追加するだけです。CSSファイルとJSファイルを読み込めばいいだけです。
Notyf初期化
<script>
/* Notyf初期化 */
var notyf1 = new Notyf();
notyf1.success('<b>ようこそ</b><br />「Notyf」をご紹介いたします。');
notyf1.error('<b>ようこそ</b><br />「Notyf」をご紹介いたします。');
</script>
まず最初に「Notyf」をnewしてオブジェクトを生成します。
その後、デフォルトでは「success」または「error」関数をメッセージを付けて呼び出すだけです。
または、「open」にmessageを設定して呼び出せば、通知を表示させることもできます。
サンプル
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Notyf demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- filled-->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
<script>
var notyf2;
/* Notyf初期化 */
function initializeNotyf() {
var notyf1 = new Notyf();
notyf1.success('<b>ようこそ</b><br />「Notyf」をご紹介いたします。');
notyf1.error('<b>ようこそ</b><br />「Notyf」をご紹介いたします。');
notyf2 = new Notyf(
{
duration: 3000,
position: {
x: 'right',
y: 'top',
},
types: [
{ /* 「情報」を自作する */
type: 'info',
background: '#0D6EFD',
icon: {
className: 'material-icons',
tagName: 'span',
text: 'info',
color:'white'
}
},
{ /* 「警告」を自作する */
type: 'warning',
background: 'orange',
icon: {
className: 'material-icons',
tagName: 'span',
text: 'warning',
color:'white'
}
}
]
}
);
}
window.onload = initializeNotyf();
function openSuccess() {
notyf2.open({
type: 'success',
dismissible: true,
position: {x:'right',y:'bottom'},
ripple:true,
message: '<b>成功</b><br />「Notyf」が正しく動作いたしました。'
});
}
function openError() {
notyf2.open({
type: 'error',
dismissible: true,
position: {x:'left',y:'bottom'},
ripple:false,
message: '<b>エラー</b><br />予期せぬエラーが発生しました。'
});
}
function openInfo() {
notyf2.open({
type: 'info',
message: '<b>お知らせ</b><br />「Notyf」をご紹介いたします。'
});
}
function openWarning() {
notyf2.open({
type: 'warning',
dismissible: false,
position: {x:'center',y:'bottom'},
message: '<b>警告</b><br />入力内容が誤っています。'
});
}
</script>
<br />
<button type='button' onclick='openSuccess();'>成功(success)</button>
<button type='button' onclick='openError();'>失敗(error)</button>
<button type='button' onclick='openInfo();'>情報（カスタム）</button>
<button type='button' onclick='openWarning();'>警告（カスタム）</button>
</body>
</html>
デモ
オプション（コンストラクタ）
最後のオプションを紹介していこうと思います。
オプションはコンストラクタと「open」メソッドの引数であるINotyfNotificationOptionsの二つあります。
まずはコンストラクタです。
| オプション | デフォルト | 説明 |
| duration | 2000（２秒） | 通知表示時間（ミリ秒） |
| ripple | true | trueを指定した場合、通知が効果付きで表示されます |
| position | {x:’right’,y:’bottom’} | 通知の表示位置を指定できます。デフォルトは右下になります。 xは横の位置指定、yは縦の位置指定になります。指定できるのは以下の通りです。 x：right、center、left y：top、center、bottom 詳しくは、こちらをご覧ください。 |
| dismissible | false | trueにすると、通知の右に✖アイコンが表示されて、自ら通知を消せるようになります。 |
| types | Success または error | 通知のタイプを指定できます。 詳細は、次の「オプション（INotyfNotificationOptions）」をご覧ください。 |
オプション（INotyfNotificationOptions）
「open」メソッドを呼び出すときに指定できるのが「INotyfNotificationOptions」となります。
| オプション | デフォルト | 説明 |
| type | success、error または、独自に自作することもできます。 サンプルでは「warning」や「info」を自作しています。 | |
| className | トースト通知に適用するクラス名を指定できます。 | |
| duration | 2000（２秒） | 通知表示時間（ミリ秒） |
| icon | false | 通知ウインドウの左側に表示させるアイコンをHTMLのマークアップや、「INotyfIcon」型で指定します。 詳細は次の「オプション（INotyfIcon）」をご覧ください。 |
| background | 通知ウインドウの背景色を指定できます。 | |
| message | 表示するメッセージを設定できます。HTMLタグも設定可能です。 | |
| ripple | true | trueを指定した場合、通知が効果付きで表示されます |
| dismissible | false | trueにすると、通知の右に✖アイコンが表示されて、自ら通知を消せるようになります。 |
オプション（INotyfIcon）
| オプション | 説明 |
| className | アイコンエレメントに適用するクラスを指定できます。 「Font Awesome」であれば、「fas fa-xxx」という感じで指定したいアイコンのクラスを指定して、 「Google Fonts Icons」の場合には「material-icons」を指定してください |
| tagName | アイコンに使用するタグを指定します。 「Font Awesome」であれば「i」を指定し、 「Google Fonts Icons」であれば「span」を指定してください |
| text | 「tagName」のタグに設定する文字列を指定できます。 |
| color | アイコンの色を指定できます。 |
「Font Awesome」や「Google Fonts Icons」などのウェブアイコンについては、以下の記事をご参考ください。
ウェブアイコン
メソッド
dismiss
「dismiss」メソッドは通知ウインドウを閉じるメソッドです。
第１パラメータに「success」「error」または「open」メソッドの戻りオブジェクトを渡すだけで、対象の通知ウインドウは閉じられます。
const notyf = new Notyf();
const notification = notyf.success('Address updated');
notyf.dismiss(notification);dismissAll
「dismissAll」メソッドは表示中のすべての通知ウインドウを閉じるメソッドです。
const notyf = new Notyf();
notyf.success('Address updated');
notyf.error('Please fill out the form');
notyf.dismissAll();ご参考
関連ページ
