はじめに
利用者に短い文章などを提示して注意や操作を促す通知は、古くはWindowsのタスクバー（標準では右下）に表示されるバルーン表示、最近ではiOSやAndroidにおけるプッシュ通知の表示など、さまざまなシーンで利用されています。
本記事では、このような通知をWebページの内部に表示することができる以下のjQueryプラグインを紹介します。
- noty（多機能な通知表示）
- Notific8（Windows 8風通知表示）
- CFToaster（AndroidのToast風通知表示）
notyは通知にボタンを配置できるなど多機能であるのに対し、Notific8はWindows 8の通知を再現することに特化したシンプルな内容になっています。CFToasterはさらにシンプルで、AndroidのToastのようにメッセージ文字列を表示するだけのプラグインです。利用目的や表示スタイルにより使用するプラグインを検討するとよいでしょう。
対象読者
- Webサイトの利用者にちょっとした情報をお知らせする方法を探している方
- スマートフォンのような通知をWebサイトで表示したい方
- JavaScript標準のalert()やconfirm()がカッコ悪いと思っている方
必要な環境
PC向けページではjQuery 1.11.0、スマートフォン向けページではjQuery 2.1.0とjQuery Mobile 1.4.2を使用します。jQuery 2.xはInternet Explorer 6～8との互換性を切り捨てることでコードサイズを縮小しているため、PC向けにはjQuery 1.x系、スマートフォン向けにはjQuery 2.x系を使用します。なお、Internet Explorer 6～8を考慮しなくてよいならば、PC向けでjQuery 2.x系を利用することもできます。
今回は以下の環境で動作を確認しています。
-
Windows 7 64bit版
- Internet Explorer 11
-
iOS 7.1
- iPhone 5 32GB SoftBank版
- Safari
-
Android 4.2.2
- Xperia Z SO-02E
- Google Chrome 34.0.1847.114
多彩なカスタマイズが可能な「noty」
notyは、http://ned.im/noty/においてMITライセンスで配布されています。ダウンロードしたファイル一式を展開してWebサイト内に配置し、jquery.noty.packaged.js（通常版）またはjquery.noty.packaged.min.js（縮小版）をHTMLから参照させます。
notyで通知を表示させるにはnotyメソッドをコールします。最もシンプルな通知表示の処理はリスト1で実現できます。この時返り値nには通知に対応するJavaScriptオブジェクトが返却されます。このオブジェクトに対してsetTextメソッドでテキストを書き換えたり、closeメソッドで通知を消去したりする操作が可能です。
var n = noty({text: "シンプルな通知"});
// 通知文言を書き換え
// n.setText("通知文言の書き換え");
// 通知を閉じる
// n.close();
リスト1を実行すると表示される通知を図1に示します。
notyメソッドの引数にJavaScriptオブジェクトで通知のパラメータを指定することができます。主なパラメータを表1に示します。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| text | 通知に表示する文字列 | ""（空文字） |
| layout | 表示位置 | top（上） |
| type | 通知の種類 | alert |
| timeout | 通知を自動消去する時間（ミリ秒） | false（自動消去しない） |
| buttons | 通知に表示するボタン | false（表示しない） |
例えば、情報表示（information）の通知を画面中央に表示して、1秒後に閉じるようにするためにはリスト2のように記述します。
var n = noty(
{text: "自動的に閉じる情報通知",
layout:"center",
type:"information",
timeout:"1000"}
);
リスト2を実行すると表示される通知を図2に示します。
通知にボタンを表示する場合には、buttonsプロパティにボタンの文言や押下時の処理を記載します。OKとCancelの2個のボタンを表示する例をリスト3に示します。
var n = noty(
{text: "処理を続けてよろしいですか？",
type:"confirm",
buttons:[
// OKボタンの定義
{text:"OK",
onClick:function($noty){
$noty.close();
noty({text:"OKが選択されました"});
}
},
// Cancelボタンの定義
{text:"Cancel",
onClick:function($noty){
$noty.close()
noty({text:"Cancelが選択されました"});
}
}
]
});
リスト3を実行して表示される通知を図3に示します。
notyのWebページには通知のカスタマイズ例が多く掲載されているので、利用を検討する際に参考にするとよいでしょう。
