デスクトップ通知｜jQuery x HTML5｜Ajax

TOP Ajaxデスクトップ通知

デスクトップ通知（Web Notifications）とは
デスクトップ通知を表示する〔プレーンテキスト、HTML〕
Chromeのデスクトップ通知設定
指定したユーザーの最新ツイート3件をデスクトップ通知する〔プレーンテキストタイプ通知例〕
指定したHTMLページをデスクトップ通知する〔HTMLタイプの通知例〕
HTML5 DESKTOP NOTIFICATION〔デスクトップ通知を実装するjQueryプラグイン〕
DESKTOPIFY〔デスクトップ通知を実装するjQueryプラグイン〕
Firefoxでデスクトップ通知を有効にする方法

デスクトップ通知（Web Notifications）とは

2011/6/22

Web Notificationsは、Webページの外、つまりデスクトップ上にユーザーへ通知を行うことができるAPIです。まだドラフト段階で仕様は確定していません。 2011年6月時点では、Google Chromeブラウザのみサポートされています。今のところ、一度に表示できる通知は3つまでのようです。

デスクトップ通知がサポートされているかどうかは、「window.webkitNotifications」で確認できます。下記のサンプルでは、閲覧ブラウザのサポート状況を表示します。

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                if(window.webkitNotifications){
                    $("#res").html("このブラウザでは、デスクトップ通知がサポートされています。");
                }else{
                    $("#res").html("このブラウザでは、デスクトップ通知がサポートされていません＞＜ GoogleChromeブラウザでおためしください！");
                }
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
<!-- CODE -->
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

デスクトップ通知を表示する
プレーンテキスト、HTML

2011/6/22

デスクトップ通知には、「プレーンテキスト」と「HTML」の2タイプあります。

【プレーンテキストタイプ】
window.webkitNotifications.createNotification(icon, title, message)

通知する内容を3つのパラメータで指定します。
第1引数にアイコン画像のURL、第2引数にタイトル、第3引数にメッセージを指定します。

プレーンテキストタイプの設置例はこちら。

【HTMLタイプ】
window.webkitNotifications.createNotification(url)

指定したURLのHTMLページを通知ウィンドウ内に表示します。通知ウィンドウの高さと幅は固定ですので、それよりあふれる場合は下図のように縦横スクロールが適宜表示されます。

設置イメージ

HTMLタイプの設置例はこちら。

Chromeのデスクトップ通知設定

2011/6/22

デスクトップ通知の許可はドメイン毎に設定されます。

デスクトップ通知はデフォルトでは「サイトがデスクトップ通知を表示しようとしたときに確認する」になっているため、通知を許可していないサイトでは、下図のような「{ドメイン名}でデスクトップ通知の表示を許可しますか？」という通知許可確認バーが表示されます。このバーにある【許可】ボタンを押すとそのサイト（ドメイン）でのデスクトップ通知が有効になります。

デスクトップ通知

通知許可確認バー

すべてのサイト（ドメイン）でデスクトップ通知を無効にする場合

［Google Chromeの設定］→［オプション］→［高度な設定］→プライバシーの【コンテンツの設定】ボタンの順にクリックし、通知の「どのサイトにもデスクトップ通知の表示を許可しない」を選択します。

［Google Chromeの設定］

通知

※あるいは、通知ウィンドウの右上にある「設定」アイコンをクリックし、「{domain}からの通知を無効にする」を選択してもOK。

通知ウィンドウ

デスクトップ通知を有効にする場合

［Google Chromeの設定］→［オプション］→［高度な設定］→プライバシーの【コンテンツの設定】ボタンの順にクリックし、通知の「すべてのサイトにデスクトップ通知の表示を許可する」または「サイトがデスクトップ通知を表示しようとしたときに確認する（推奨）」を選択すれば、通知が有効になります。

通知

デスクトップ通知の例外サイトを設定する場合

デスクトップ通知の許可/ブロック状況は、［Google Chromeの設定］→［オプション］→［高度な設定］→プライバシーの【コンテンツの設定】ボタン→通知の【例外の管理...】ボタンをクリックすると確認できます。

通知の例外

※あるいは、通知ウィンドウの右上にある［設定］→［設定...］をクリックしてもOK。

通知ウィンドウ - 設定 - 設定...

デスクトップ通知の表示位置を設定する場合

デスクトップ通知の表示位置は、デフォルトだとPC画面の右下に表示されます。位置を変更するには、通知ウィンドウの右上にある［］→［位置の選択］から、左上、右上、左下、右下、デフォルトを使用するのいずれかを選択します。

通知ウィンドウ - 設定 - 位置の選択

指定したユーザーの最新ツイート3件をデスクトップ通知する
プレーンテキストタイプ通知例

unknown

プレーンテキストタイプ通知の設置例です。
指定したTwitterユーザーのタイムラインから最新3件のツイートをJSONPで取得し、各ツイートをデスクトップに通知表示します。

$.getJSONP(
  /* 指定したユーザーのTwitterらイムラインから最新3件取得 */
  'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+username+'&count=3&callback={callback}',
  function(json){
    for(var i in json){
      /* 通知を表示 */
      window.webkitNotifications.createNotification(
        /* icon: プロフィールアイコン */
        json[i].user.profile_image_url,
        /* title: スクリーンネーム */
        json[i].user.screen_name,
        /* body: ツイート内容 */
        json[i].text
      ).show();
    }
  }
);

そのため、閲覧ブラウザでHTML5のデスクトップ通知がサポートされていない場合、あるいは、Chromeのオプション設定で、通知が「どのサイトにもデスクトップ通知ンの表示を許可しない」にチェックが入っている場合は、エラーメッセージを表示します。

設置イメージ

また、通知がサポートされていても、当サイトのドメイン（phpjavascriptroom.com）に対し、通知の表示権限が許可されていない場合は、確認バーを表示します。【許可】ボタンを押すと、通知ウィンドウが画面右下に表示されます。なお、【拒否】ボタンを押すと、通知は無効になりますので、再度許可する場合は、Chromeのオプション似ある高度な設定←コンテンツの管理化られ以外サイトの管理よりブロックを解除してあげる必要があります。

設置イメージ

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
        <script type="text/javascript">
            $(function(){
                /* デスクトップ通知がサポートされていないの場合 */
                if(!window.webkitNotifications){
                    $("#res").html("このブラウザでは、デスクトップ通知がサポートされていません＞＜　Google Chromeでお試しください。");
                }
                /* 【通知】ボタンをクリックした時 */
                  $("#show_html_notification").click(function() {
                      /* 入力されたTwitterユーザー名を取得 */
                      var username=$("#username").val();
                      /* 未入力の場合はアラート表示 */
                      if(!username){
                          alert("Twitterユーザー名を指定してください");
                          return;
                      }
                      /* 通知を表示する権限がある場合 */
                    if (window.webkitNotifications.checkPermission() == 0) {
                        $.getJSONP(
                            /* 指定したユーザーのTwitterらイムラインから最新3件取得 */
                            "http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+username+"&count=3&callback={callback}",
                            function(json){
                                for(var i in json){
                                    /* 通知を表示 */
                                    window.webkitNotifications.createNotification(
                                        /* icon: プロフィールアイコン */
                                        json[i].user.profile_image_url,
                                        /* title: スクリーンネーム */
                                        json[i].user.screen_name,
                                        /* body: ツイート内容 */
                                        json[i].text
                                    ).show();
                                }
                            }
                        );
                    /* 通知を表示する権限がない場合 */
                    } else {
                        /* 通知確認バー表示 */
                        window.webkitNotifications.requestPermission();
                      }
                  });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
<!-- CODE -->
            <p id="res" style="color:red;"></p>
            <p>
                指定したTwitterユーザーの最新のツイート3件を通知ウィンドウに表示します。<br>
                <label for="username"><input type="text" id="username" value="cocoism" /></label>　
                <button id="show_html_notification">HTML通知を表示</button>
            </p>
<!-- / CODE -->
        </div>
    </body>
</html>

指定したHTMLページをデスクトップ通知する
HTMLタイプの通知例

unknown

HTMLタイプ通知の設置例です。
指定したURLのHTMLページを通知ウィンドウ内に読み込み表示します。

URL指定の場合は、HTMLページをそのまま通知ウィンドウ内に読み込むので、プレーンテキストタイプより自由度が高いです。スクリプトなども記述できるので、動的にウィンドウ内の内容を変えることもできておもしろいですね。

HTMLページ内にあるリンクは、target属性に「_blank」を指定しないと、通知ウィンドウ内にリンク先が表示されますので、別窓で開く場合は、「_blank」を指定しておきましょう。

設置イメージ

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
        <script type="text/javascript">
            $(function(){
                /* デスクトップ通知がサポートされていないの場合 */
                if(!window.webkitNotifications){
                    $("#res").html("このブラウザでは、デスクトップ通知がサポートされていません＞＜　Google Chromeでお試しください。");
                }
                /* 【通知】ボタンをクリックした時 */
                  $("#show_html_notification").click(function() {
                      showNotification();
                  });
                /* 通知表示 */
                  function showNotification(){
                      /* 入力されたURLを取得 */
                      var url=$("#url").val();
                      /* 未入力の場合はアラート表示 */
                      if(!url){
                          alert("URLを指定してください");
                          return;
                      }
                      /* 通知を表示する権限がある場合 */
                    if (window.webkitNotifications.checkPermission() == 0) {
                        /* 通知ウィンドウ作成 */
                        window.webkitNotifications.createHTMLNotification(
                            "/content/demo/notification.html"
                        ).show();
                    /* 通知を表示する権限がない場合 */
                    } else {
                        /* 通知確認バー表示 */
                        RequestPermission(showNotification);
                      }
                  }
                  function RequestPermission(callback){
                      window.webkitNotifications.requestPermission(callback);
                  }
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
<!-- CODE -->
            <p id="res" style="color:red;"></p>
            <p>
                指定したURLのHTMLページを通知ウィンドウ内に表示します。<br>
                notification.html内の「遊びに来てね」リンクを押すと、別窓でトップページを開きます。
            </p>
            <p>
                <label for="url"><input type="text" id="url" value="/content/demo/notification.html" size="50" /></label>　
                <button id="show_html_notification">HTML通知を表示</button>
            </p>
<!-- / CODE -->
        </div>
    </body>
</html>

HTML5 DESKTOP NOTIFICATION
デスクトップ通知を実装するjQueryプラグイン

unknown

HTML5 DESKTOP NOTIFICATION

Chrome

MIT＆GPL

jquery.js、jquery.jwNotify.js

HTML5のデスクトップ通知を実装するjQueryプラグイン。

パラメータで、通知ウィンドウ内に表示する「画像URL」「タイトル」「内容」（テキストのみ）、通知ウィンドウ表示時間を指定できます。通知ウィンドウ内に、HTMLページを読み込ませて表示させたい場合は「URL」パラメータに、HTMLページのURLを指定します。

通知ウィンドウをクリックした時、通知ウィンドウが閉じられた時などのイベントをコールバックで受け取れるので、通知ウィンドウをクリックしたら、任意のURLに飛ばすといったことも可能です。

設置サンプル - 画像URL＋タイトル＋内容を指定

例）当サイトのRSS新着3件を取得し、デスクトップ通知してみました。同時に3つの通知ウィンドウが表示されます。通知ウィンドウをクリックすると、トップページを開きます。

設置イメージ

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jparse-0.3.3.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jwNotify.js"></script>
        <script type="text/javascript">
            $(function(){
                // RSS取得
                $('div#recent').jParse({
                    ajaxOpts: {url: 'index.xml'},
                    elementTag: ['title'],
                    output: 'jpet00\n',
                    callback: finish,
                    limit:3
                });
            });
            function finish(){
                /* 例1 */
                $('#simple_notify_button').click(function(e){
                    e.preventDefault();
                    var tmp=$('div#recent').html().split("\n");
                    for(var i=0; i<tmp.length-1; i++){
                        $.jwNotify({
                            image: "/content/img/pjr.png",
                            title: "PHP & JavaScript Room 新着情報",
                            body:  tmp[i],
                            timeout: 10000,
                            onclick:function(){
                                window.open("http://phpjavascriptroom.com/");
                            }
                        });
                    }
                });
            }
        </script>
        <!-- CSS -->
        <style type="text/css">
            #recent { display:none; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：<a href='http://plugins.jquery.com/project/desktop-notification' target='_blank'>HTML5 DESKTOP NOTIFICATION</a></p>
            <p>ボタンをクリックすると、当サイトのRSS新着3件をデスクトップ上に通知します。通知ウィンドウをクリックすると、トップページを開きます。</p>
            <p>※Chromeで動作。</p>
<!-- CODE -->
            <form action="#" id="simple_notify" onSubmit="false">
                <div id="recent"></div>
                <p><button id="simple_notify_button">デスクトップ通知</button></p>
            </form>
<!-- / CODE -->
        </div>
    </body>
</html>

設置サンプル - HTMLページのURL

このHTMLページを通知ウィンドウ表示してみました。

設置イメージ

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jwNotify.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#html_notify_button').click(function(e){
                    e.preventDefault();
                    $.jwNotifyHTML({
                        url: "/content/demo/notification.html",
                        timeout: 10000,
                        onclick:function(){
                            $("#res").append("通知ウィンドウがクリックされました\n");
                        },
                        onerror:function(){
                            $("#res").append("エラーが発生しました\n");
                        },
                        onclose:function(){
                            $("#res").append("通知ウィンドウが閉じられました\n");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：<a href='http://plugins.jquery.com/project/desktop-notification' target='_blank'>HTML5 DESKTOP NOTIFICATION</a></p>
            <p>ボタンをクリックすると、指定したURLの内容をデスクトップ通知します。    「ドキドキする」を押すと、画像が変わります。「遊びに来てね」を押すと、当サイトを別窓で表示します。</p>
            <p>※Chromeで動作。</p>
<!-- CODE -->
            <form action="#" id="html_notify" onSubmit="false"> 
                <p><button id="html_notify_button">デスクトップ通知</button></p>
                <p><textarea id="res" cols="50" rows="5"></textarea>
            </form> 
<!-- / CODE -->
        </div>
    </body>
</html>

DESKTOPIFY
デスクトップ通知を実装するjQueryプラグイン

unknown

desktopify v1.0

Chrome、Firefox4＋ff-html5notifications

GNU一般公的使用許諾

jquery.js、desktopify.js

HTML5のデスクトップ通知を実装するjQueryプラグイン。こちらは、Firefox4にも対応しており、アドオン「ff-html5notifications」をインストールすれば、Firefoxデモデスクトップ通知が確認できます。

デスクトップ通知がサポートされているかどうかは、コールバックで受け取れます。サポートされていない場合の処理はunsupported、サポートされている場合の処理は、callbackに指定します。その他、アイコン画像URL、タイトル、表示時間などをパラメータで指定できます。

2つのイベントが用意されており、clickイベントは、デスクトップ通知の許可を得ようと試みます。 notify(body[,title[,icon]])イベントは、通知ウィンドウを表示します。 3つの引数を取り、内容、タイトル、アイコン画像URLの順に指定します。

設置イメージ

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jparse-0.3.3.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/desktopify.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#desktopify").desktopify({
                    /* 通知の表示時間 */
                    timeout: 5000,
                    /* 通知タイトル */
                    title:"PHP & JavaScript Room",
                    /* 通知アイコン */
                    icon:"/content/img/pjr.png",
                    /* デスクトップ通知がサポートされている場合 */
                    callback: function(){
                        $('#demo input[type="button"]').click(function(){
                            $('#desktopify').trigger('notify', [
                                /* 通知内容 */
                                $('[name="body"]').val()
                            ]);
                            return false;
                        });
                     },
                    /* デスクトップ通知がサポートされていない場合 */
                     unsupported: function() {
                        $('<p id="error">このブラウザでは、デスクトップ通知がサポートされていません。Chromeでお試しください。<\/p>').appendTo('#demo');
                        $('#desktopify, form').hide();
                     } 
                }).trigger('click');
            });
        </script>
        <style type="text/css">
            #image, #title, #body {
                width:300px;
                margin:0; padding:5px;
            }
            #body { height:40px; }
            #error { color:red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：<a href='http://plugins.jquery.com/project/desktopify' target='_blank'>desktopify v1.0</a></p>
            <p>ボタンをクリックすると、下記の内容をデスクトップ通知します。<br>アイコン画像とタイトルはスクリプト側で指定しています。</p>
<!-- CODE -->
<div id="demo">
    <button id="desktopify">デスクトップ通知を有効にする</button>
    <form>
        <p>
            <label for="body">内容：</label><br>
            <textarea name="body" id="body">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</textarea>
        </p>
        <p><input type="button" class="btn" value="デスクトップ通知を表示する" /></p>
    </form>
</div>
<!-- / CODE -->
        </div>
    </body>
</html>

Firefoxでデスクトップ通知を有効にする方法

unknown

Firefoxアドオン - ff-html5notifications

このアドオンを入れるとFirefox4でもChromeのようにHTML5のデスクトップ通知を行えるようになります。通知の見た目はChromeとは異なります。

ダウンロードページから、最新版のxpiファイルをデスクトップ等にダウンロードし、ダウンロードしたxpiファイルをFirefox上にドラッグ＆ドロップするとインストールされます。

jQuery plugin QRコードイメージ生成

jQuery x HTML5 canvasアニメーション

jQuery x HTML5デスクトップ通知

デスクトップ通知（Web Notifications）とは

デスクトップ通知を表示する
プレーンテキスト、HTML

Chromeのデスクトップ通知設定

デスクトップ通知の設定

すべてのサイト（ドメイン）でデスクトップ通知を無効にする場合

デスクトップ通知を有効にする場合

デスクトップ通知の例外サイトを設定する場合

デスクトップ通知の表示位置を設定する場合

指定したユーザーの最新ツイート3件をデスクトップ通知する
プレーンテキストタイプ通知例

指定したHTMLページをデスクトップ通知する
HTMLタイプの通知例

HTML5 DESKTOP NOTIFICATION
デスクトップ通知を実装するjQueryプラグイン

HTML5 DESKTOP NOTIFICATION

設置サンプル - 画像URL＋タイトル＋内容を指定

設置サンプル - HTMLページのURL

DESKTOPIFY
デスクトップ通知を実装するjQueryプラグイン

desktopify v1.0

Firefoxでデスクトップ通知を有効にする方法

Firefoxアドオン - ff-html5notifications

関連コンテンツ

jQuery x HTML5デスクトップ通知

デスクトップ通知（Web Notifications）とは

デスクトップ通知を表示するプレーンテキスト、HTML

Chromeのデスクトップ通知設定

デスクトップ通知の設定

すべてのサイト（ドメイン）でデスクトップ通知を無効にする場合

デスクトップ通知を有効にする場合

デスクトップ通知の例外サイトを設定する場合

デスクトップ通知の表示位置を設定する場合

指定したユーザーの最新ツイート3件をデスクトップ通知するプレーンテキストタイプ通知例

指定したHTMLページをデスクトップ通知するHTMLタイプの通知例

HTML5 DESKTOP NOTIFICATIONデスクトップ通知を実装するjQueryプラグイン

HTML5 DESKTOP NOTIFICATION

設置サンプル - 画像URL＋タイトル＋内容を指定

設置サンプル - HTMLページのURL

DESKTOPIFYデスクトップ通知を実装するjQueryプラグイン

desktopify v1.0

Firefoxでデスクトップ通知を有効にする方法

Firefoxアドオン - ff-html5notifications

関連コンテンツ

デスクトップ通知を表示する
プレーンテキスト、HTML

指定したユーザーの最新ツイート3件をデスクトップ通知する
プレーンテキストタイプ通知例

指定したHTMLページをデスクトップ通知する
HTMLタイプの通知例

HTML5 DESKTOP NOTIFICATION
デスクトップ通知を実装するjQueryプラグイン

DESKTOPIFY
デスクトップ通知を実装するjQueryプラグイン