Webページ上に通知を表示するjQueryプラグインの紹介

「jQuery プラグイン」の利用（21）

　本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回は昨今のスマートフォンにおいてなじみ深い通知の表示をWebページ内で行うjQueryプラグインを紹介します。

はじめに

　利用者に短い文章などを提示して注意や操作を促す通知は、古くは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メソッドで通知を消去したりする操作が可能です。

リスト1　シンプルなnoty通知表示

var n = noty({text: "シンプルな通知"});

// 通知文言を書き換え
// n.setText("通知文言の書き換え");

// 通知を閉じる
// n.close();

　リスト1を実行すると表示される通知を図1に示します。

図1　リスト1を実行して表示される通知

　notyメソッドの引数にJavaScriptオブジェクトで通知のパラメータを指定することができます。主なパラメータを表1に示します。

表1　notyの主なパラメータ

パラメータ名	内容	初期値
text	通知に表示する文字列	""（空文字）
layout	表示位置	top（上）
type	通知の種類	alert
timeout	通知を自動消去する時間（ミリ秒）	false（自動消去しない）
buttons	通知に表示するボタン	false（表示しない）

　例えば、情報表示（information）の通知を画面中央に表示して、1秒後に閉じるようにするためにはリスト2のように記述します。

リスト2　1秒で自動的に閉じる通知（通知の種類＝information）

var n = noty(
  {text: "自動的に閉じる情報通知", 
   layout:"center", 
   type:"information", 
   timeout:"1000"}
);

　リスト2を実行すると表示される通知を図2に示します。

図2　リスト2を実行して表示される通知

　通知にボタンを表示する場合には、buttonsプロパティにボタンの文言や押下時の処理を記載します。OKとCancelの2個のボタンを表示する例をリスト3に示します。

リスト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に示します。

図3　リスト3を実行して表示される通知

　notyのWebページには通知のカスタマイズ例が多く掲載されているので、利用を検討する際に参考にするとよいでしょう。