続・先取り! Google Chrome Extensions

第9回Google Chrome拡張とHTML5 #3

こんにちは、太田です。今回はGoogle Chrome拡張に使えるHTML5関連技術の3回目をお送りします。

前々回はcanvas、ドラッグ・アンド・ドロップ、前回はECMAScript5やCSS3の一部を取り上げましたが、今回はHTML5関連APIのWeb Storageと、HTML5とは外れますが、Desktop Notificationsを紹介します。Web StorageはHTML5関連の中でもIE8でサポートされているなど、実装が進んでいるAPIの一つです。Desktop Notificationsはウェブページや拡張からユーザーに積極的な通知を出すことができるAPIです。MacではGrowlというアプリケーションが有名ですが、Growlに相当する機能をブラウザベースで実現しています。

Web Storage

Web Storageはブラウザ上で動作するキーバリューストアです。JavaScriptからデータを保存、参照できるシンプルなAPIですが、HTML5からみても、Chrome拡張からみても最も重要なAPIと言えます。

というのも、長い間ブラウザだけでのデータの永続化にはCookieを使用するしかありませんでした。Flash PlayerのShared Objectを使った方法やIE用にuserData behaviorを使った方法などのテクニックはありましたが、どれも環境に依存するところがあり一長一短でした。その点、Web StorageはCookieより簡単で、高速かつ大容量(Chrome 4では上限5MBなのでそこまで大きいわけではないのですが、Cookieの4KBに比べると大容量といえます)と、非常に優秀なAPIです。

なお、Web Storageはデータを永続化するlocalStorageと、ブラウザの起動中だけ記憶するsessionStorageの2つのAPIで構成されていますが、Chrome 4がサポートしているのはlocalStorageのみで、sessionStorageはChrome 5からサポートする予定です。

では、localStorageのインターフェースを見ていきます。といっても、localStorageは扱いやすいデザインになっており、JavaScriptの通常のオブジェクトを扱う感覚で操作できます。

localStorageのサンプル
localStorage.test1 = 'サンプル';
console.log(localStorage.test1) // サンプル
console.log(localStorage.length) // 1
localStorage.setItem('test2', 'サンプル2');
console.log(localStorage.getItem('test1'));
for (var i = 0;i < localStorage.length;i++){
    console.log(localStorage.key(i)) // test2 , test1
}
Object.keys(localStorage).forEach(function(key){
    console.log(localStorage.getItem(key));
    // サンプル2, サンプル
});
localStorage.removeItem('test1');
// もしくは delete localStorage.test1
console.log(localStorage.test1) // undefined
localStorage.clear();

setItem、getItem、removeItemといったメソッドが用意されていますが、基本的には . で直接参照してしまって問題ありません。ただし、これらのメソッドは例えばlengthをキーにしたいといった場合に必要となるので覚えておいて損はないでしょう。

また、下記のようにstorageイベントで値の変化を監視することもできます。

localStorageのイベント
window.addEventListener('storage',function(event){
  console.log(event);
  console.log(event.oldValue);
  console.log(event.newValue);
  console.log(event.storageArea === localStorage); // true
},false);
localStorage.test1 = 'サンプル';

localStorageはChrome拡張において、拡張用の設定を保存する際によく使用されます。そのほか、キャッシュして置きたいデータを保存しておくといったことにも使えます。

localStorageによる設定の保存と参照
var Config = {
  name:'sample',
  status:true,
  count:0
};
if (localStorage.Config) {
  Config = JSON.parse(localStorage.Config);
} else {
  localStorage.Config = JSON.stringify(Config);
}

Background Pageなどにおいて、localStorageにすでに設定用のキーを持っていればその値を復元、設定を持っていない(最初にインストールしたときなど)場合は初期値をlocalStorageに保存します。

このとき、上記ではJSONを介してデータを保存、参照しています。Chrome 4のlocalStorageは文字列をキーにして、文字列を保存する実装になっているので、オブジェクト、配列、真偽値や数値を生かすにはJSONを使うのが定石です(Web Storageの仕様は、any dataと修正されており、文字列以外も保存できる仕様になっていますが、Chromeをはじめ多くのブラウザは文字列で実装されています⁠⁠。

ただし、JSONは配列、オブジェクト、文字列、数値、真偽値、null値しか表現できない点には注意が必要です。例えば、undefined、NaNなどはJavaScript固有の値なので、そのままでは情報が失われてしまいますし、循環参照しているオブジェクトなどを渡すとエラーになります。JSON.stringifyでの出力結果は必ず確認するようにしましょう。

さて、localStorageはCookieと異なり、保存期限を指定するようなAPIは用意されていません。そこで、期限を設定できるようlocalStorageをラップしてみます。

localStorageのラッパー
(function(){
  if (!this.localStorage || this.Storage) return;
  var Storage = this.Storage = {
    get_data:function(key){
      var val = localStorage.getItem(key);
      if (val) {
        return JSON.parse(val);
      }
      return null;
    },
    get:function(key){
      var data = Storage.get_data(key);
      if (data.expire) {
        var expire = new Date(data.expire);
        if (expire.getTime() > new Date().getTime()) {
          return data.value;
        } else {
          localStorage.removeItem(key);
        }
      } else {
        return data.value;
      }
      return null;
    },
    has:function(key){
      if (!localStorage.hasOwnProperty(key)) {
        return false;
      }
      var data = Storage.get_data(key);
      if (data.expire) {
        var expire = new Date(data.expire);
        if (expire.getTime() > new Date().getTime()) {
          return true;
        } else {
          localStorage.removeItem(key);
        }
      } else {
        return true;
      }
      return false;
    },
    set:function(key, value, expire){
      var data = {value:value};
      if (expire) {
        if (expire instanceof Date) {
          data.expire = expire.toString();
        } else {
          var time = new Date();
          time.setTime(time.getTime() + expire);
          data.expire = time.toString();
        }
      }
      localStorage.setItem(key, JSON.stringify(data));
    }
  };
})();

こちらは以下のように扱えます。これで、7日間データをキャッシュすることができます。

期限付きでの設定の保存と参照
var data= [{},{}];
if (Storage.has('data')) {
    data = Storage.get('data');
} else {
    Storage.set('data', data, 7 * 24 * 60 * 60 * 1000);
}

Desktop Notifications

Chrome 4では、Windows版のみですがDesktop Notificationsをサポートしています。Mac、LinuxではChrome 5で正式にサポートする予定となっています。仕様はDesktop Notifications (The Chromium Projects) にあります。こちらは、拡張だけでなく通常のウェブサイトからも条件付きで使用できるAPIとなっています。

拡張からDesktop Notificationsを使用するためには、例によってmanifest.jsonのpermissionsに "notifications" という指定を加える必要があります。ウェブサイトから使用する場合は、ボタンなどをクリックした際に認証バーが表示され、そこでユーザーが許可を選択した場合、ウェブサイト側からデスクトップにポップアップを表示できるようになります。

図1 Desktop Notificationsによる通知
図1 Desktop Notificationsによる通知

まず、以下のようなmanifest.jsonを用意します。

Sample Notifyのmanifest.json
{
  "description": "Sample Notify",
  "name": "Sample Notify",
  "background_page": "background.html",
  "browser_action": {
    "default_title": "Show Notification",
    "default_icon": "icon.png"
  },
  "version": "0.0.3",
  "permissions": [
    "notifications"
  ]
}

続いて、Background PageでBrowser Actionをクリックした際にcreateHTMLNotificationで指定のURLを呼び出します。このcreateHTMLNotification(もしくはcreateNotification)で作られたオブジェクトは、showメソッドを実行するまで表示されませんので、ユーザーに何か通知をする必要があるタイミングでshowメソッドを呼び出します。

Sample NotifyのBackground Page
<!DOCTYPE html>
<html>
<head>
<script>
var list = [
  'chrome-extension://' + location.host + '/note.html',
  'http://www.google.co.jp/'
];
var notify = webkitNotifications;
chrome.browserAction.onClicked.addListener(function(tab){
  var url = list.shift();
  if (url) {
    var note = notify.createHTMLNotification(url);
    //or notify.createNotification(iconUrl,title,body);
    note.show();
  }
});
chrome.extension.onRequest.addListener(function(res){
  console.log(res);
});
</script>
</head>
<body>
</body>
</html>

note.htmlの中身は下記のようにしました。createNotificationで表示された拡張側のHTMLに含まれるJavaScriptはContent Scriptsのコンテキストで実行されるので、Background Pageと連携する場合はこのようにメッセージをやり取りする必要があります。

note.htmlのソース
<button onclick="chrome.extension.sendRequest('click');">
button
</button>

最後に、通常のウェブサイトなどから通知を行う場合は下記のようになります。拡張と違う点は、まずrequestPermissionでユーザーの承認を取ってから処理を行う必要があります。

ウェブサイトからのNotificationsの利用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webkitNotifications sample</title>
<body>
<button id="requestPermission">デスクトップへの通知</button>
<script>
document.querySelector('#requestPermission').
addEventListener('click',function(){
  var n, wn = webkitNotifications;
  wn.requestPermission(function(){
    n = wn.createNotification('icon.png','title','body');
    n.show();
  });
},false);
</script>
</body>
</html>

なお、requestPermissionを呼び出せるタイミングはクリックイベントの中からのみという制限があるので注意が必要です。

まとめ

今回はWeb StorageとJSON関連のチップスに、Desktop Notificationsを紹介しました。次回はこれまでの内容から要点となる部分をまとめて、総復習としたいと思います。

おすすめ記事

記事・ニュース一覧