続・先取り！ Google Chrome Extensions
第9回 Google Chrome拡張とHTML5 #3
2010年2月8日
Google Chrome, Chrome拡張, JavaScript, Extensions, HTML5, Web Storage, Desktop Notifications
Storage, Desktop, HTML5, Chrome
こんにちは，太田です。今回は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);
}
太田昌吾（おおたしょうご，ハンドルネーム：os0x）
1983年生まれ。JavaScriptをメインに，HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。
![[改訂3版]図解でよくわかる ネットワークの重要用語解説](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138213.jpg){kind=small}
