Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

「jQuery プラグイン」の利用(21)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、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を実行して表示される通知
図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を実行して表示される通知
図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を実行して表示される通知
図3 リスト3を実行して表示される通知

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5