みなさんこんにちは。2月に入社した石本(通称:イッシー)です。会社ではスマートフォンのネイティブアプリを作ってます。\(^o^)/

さて、ご存知の方も多いと思いますが、Gmailに新しいオプションが付きました。「設定 > 全般」の項目の「デスクトップ通知」という項目です。この機能を”オン”にした場合、Google Chromeではデスクトップ右下(Macは右上)に、メール受信のお知らせが表示されるようになります。この通知機能によって、メールの受信に気づけるようになるわけです。

そこで本日は、スマートフォンのネイティブアプリには直接関係ないですが、Web Notifications(通知機能)について解説したいと思います。

サンプル

Google Chromeで以下のボタンを押すと、右下に小窓が表示されます。

※初回は「許可」を選択し、再度ボタンをクリックしてお試しください。

サンプルコード

以下のようにするとWeb Notificationsが使用できます。細かい解説はコードの中にコメントとして記述しました。

document.getElementById('button').addEventListener(
    'click',
    function(e){
        // 通知機能を実装していないブラウザを除外します
        if(typeof window.webkitNotifications == 'undefined'){return;}
       
        // 通知機能はユーザが許可したサイトでしか使うことができません。
        // そこでユーザのブラウザから許可を得ているかを取得します。
        var permission = webkitNotifications.checkPermission();
        switch(permission){
            case 0:// 許可されているとき
                var notification = webkitNotifications.createNotification(
                    '',                                   // アイコンの画像ファイル
                    '通知ですー',                           // 通知のタイトル
                    '(サンプル)お知らせが届きました!\(^o^)/'// 通知の内容
                );
                notification.show();// 通知の表示
                break;
            case 1:// 許可されていないとき
                webkitNotifications.requestPermission(function(){
                    // 「許可」もしくは「拒否」が押された後に呼ばれるコールバック関数。
                    //  但し、どちらが押されたかを取得することはできない。
                });
                break;
            case 2:// 拒否されているとき
                break;
        }
    },
    false
);

いかがでしょうか?意外と少ないコード量で実現することができました。上述の場合、通知機能は表示されたままですが、一定時間の表示後に消すこともできます。

        switch(permission){
            case 0:// 許可されているとき
                var notification = webkitNotifications.createNotification(
                    '',// アイコンの画像ファイル
                    '通知ですー',// 通知のタイトル
                    '(サンプル)お知らせが届きました!\(^o^)/'// 通知の内容
                );
                notification.ondisplay = function(){// 通知が表示されたときのイベント
                    setTimeout(
                        function(){
                            notification.cancel();// 通知を消す処理
                        },
                        2000// 2秒後
                    );
                };
                notification.show();
                break;
            case 1:// 許可されていないとき
                webkitNotifications.requestPermission(function(){});
                break;
            case 2:// 拒否されているとき
                break;
        }

その他のイベントハンドラやメソッドについては以下のようになってます。(参考:chromium Design Document

interface Notification : EventTarget {
 // メソッド
 void show();// 表示する
 void cancel();// 閉じる

 // イベントハンドラ
 attribute Function ondisplay;// 表示されたとき
 attribute Function onerror;
 attribute Function onclose;// 閉じたとき
}

以下のように、W3Cのthe Notification interfaceとは若干実装されているものが異なってるようですね。(参考:the Notification interface

interface Notification : EventTarget {
  void               show();
  void               cancel();
           attribute Function   onclick;
           attribute Function   onshow;
           attribute Function   onerror;
           attribute Function   onclose;
           attribute DOMString  replaceId;
           attribute DOMString  dir;
};

2011年2月現在では、Chromeと同じWebkitを採用しているSafariで、この機能を使用できませんでした。しかし、今後はSafariだけでなく、より多くのブラウザで今回解説した通知機能が使用できるようになるはずです。

参考

ちなみに去年のGoogle Developer Day 2010 Japanでも紹介されていました。

Post Navigation