AndroidのToastを再現する「CFToaster」
CFToasterは、https://github.com/pyuan/cftoasterにおいてMITライセンスで配布されています。ダウンロードしたファイルのうち、jquery.cftoaster.1.0.1.min.jsおよびjquery.cftoaster.1.0.1.cssをHTMLから参照させます。Notific8よりさらにシンプルで、AndroidにおけるToast表示のようにテキストを画面中央に表示するだけのプラグインです。
CFToasterで通知を表示させるには、通知を表示させるjQuery要素に対してcftoasterメソッドをコールします。最もシンプルな通知表示の処理はリスト6で実現できます。
$("#main").cftoaster({
content: "シンプルな通知"
});
リスト6を実行して表示される通知を図6に示します。
cftoasterメソッドの引数にJavaScriptオブジェクトで通知のパラメータを指定することができます。主なパラメータを表3に示します。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| content | 表示する文言 | "This is a toast message eh" |
| animationTime | フェードイン・フェードアウト時間（ミリ秒） | 150 |
| showTime | 通知の表示時間（ミリ秒） | 3000 |
| maxWidth | 通知の最大幅（px） | 250 |
| backgroundColor | 背景色 | "#1a1a1a" |
| fontColor | 文字色 | "#eaeaea" |
| bottomMargin | 下部マージン（px） | 75 |
例えば、表示時間を1秒にし、背景色を青、文字色を黒にするためにはリスト7のように記述します。
$("#main").cftoaster({
content:"パラメータ指定例",
showTime:1000,
backgroundColor:"#80b3ff",
fontColor:"#000000"
});
リスト7を実行して表示される通知を図7に示します。
本記事ではjQueryプラグインを用いて画面内に通知を表示する方法を紹介しましたが、Web Notifications APIと呼ばれるHTML5のAPIを利用すると、ブラウザの外部に通知を表示することができます。Web Notifications APIを使用した例はダウンロードできるサンプルコードに含まれています。
Web Notifications APIは将来的にHTML5の一部として広く利用されることが想定されますが、現状ではサポートされるブラウザが限られ（Chrome、Firefox、Safari。Internet Explorerは未サポート）、サポートされていてもブラウザごとの方言がまだ存在する状態で、使い勝手が良い状態とは言えません。
また、Web Notifications APIは（少なくとも現状では）ブラウザ画面の外部に通知が表示されるため、ブラウザ画面内にWebコンテンツの一部として表示される通知とは性質が異なります。その意味でWeb Notifications APIが実用的になったとしても、今回紹介したjQueryプラグインによる通知の表示はその価値を失わないものと考えられます。
まとめ
本記事では、Webページの画面内に通知を表示するプラグインを3種（noty、Notific8、CFToaster）紹介しました。JavaScript標準のalert()やconfirm()によるメッセージ表示の代わりに利用すれば、利用者から見てよりスマートな使い勝手を提供できるのではないでしょうか。
