2013年8月29日木曜日

ChromeアプリでlocalStorageを扱う簡単なサンプル

今回はHTML5仕様のlocalStorageをChromeアプリで使う方法をご紹介します。
今回使うAPIのchrome.storage.localは、設定などの小さなデータから大きめのデータまで、とても簡単に扱える便利なchrome実装です。
下の簡単なサンプルを見れば、その使い方はすぐに理解できるでしょう。

サンプルプロジェクトのファイル構成

  • manifest.json
  • main.html
  • background.js
  • app.js
  • 128.png
Chrome Packaged Appsの典型的なファイル構成です。

まずはmanifest.jsonから見てみましょう。
{
  "name": "WebStorage Test App",
  "description": "WebStorage sample app",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "128": "128.png" },
  "permissions": [
    "storage",
    "unlimitedStorage"
  ]
}
permissionsの所が重要です。localStorageを使う時はstorageを許可します。5MB以上のデータを扱いたい場合は、unlimitedStorageも許可しておきましょう。

次は画面です。
main.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h3>chrome.storage.local</h3>
  txt1:<input type="text" id="txt1"></input><br>
  txt2:<input type="text" id="txt2"></input><br>
  <button id="save_btn">save</button>
  <button id="load_btn">load</button>
  <button id="remove_btn">remove</button>
  <button id="clear_btn">clear</button>
</body>
<script src="app.js"></script>
</html>

そしてbackground.js
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('main.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

最後にお待ちかね、app.js
// コントロールのDOM取得
var txt1 = document.querySelector('#txt1');
var txt2 = document.querySelector('#txt2');
var save_btn = document.querySelector('#save_btn');
var load_btn = document.querySelector('#load_btn');
var remove_btn = document.querySelector('#remove_btn');
var clear_btn = document.querySelector('#clear_btn');

/**
 * saveボタンクリック
 */
save_btn.onclick = function(e){
  var item = {
    'txt1': txt1.value,
    'txt2': txt2.value
  };
  // localStorageへ保存
  chrome.storage.local.set(item, function(){
    console.log('item saved.');
  });
}

/**
 * loadボタンクリック
 */
load_btn.onclick = function(e){
  var keys = [ 'txt1', 'txt2' ];
  // localStorageから読込
  chrome.storage.local.get(keys, function(item){
    console.log('txt1: ' + item.txt1 + ', txt2: ' + item.txt2);
  });
}

/**
 * removeボタンクリック
 */
remove_btn.onclick = function(e){
  var keys = [ 'txt1', 'txt2' ];
  // localStorageから削除
  chrome.storage.local.remove(keys, function(){
    console.log('item removed.');
  });
}


/**
 * clearボタンクリック
 */
clear_btn.onclick = function(e){
  // localStorageをクリア
  chrome.storage.local.clear(function(e){
    console.log("localStorage cleared.");
  });
}


/**
 * onChangedリスナ登録
 */
chrome.storage.onChanged.addListener(function(changes, namespace) {
  for (key in changes) {
    var storageChange = changes[key];
    console.log('key "%s" in namespace "%s" changed. ' +
                'Old value was "%s", new value is "%s".',
                key,
                namespace,
                storageChange.oldValue,
                storageChange.newValue);
  }
});

ソースコードは以上です。
では、これを実行してみましょう。

まず、画面の二つのテキストエリア txt1 と txt2 に、それぞれ "hoge", "moge" を入力してsaveボタンを押してみます。
すると次のようにログ表示されます。
key "txt1" in namespace "local" changed. Old value was "undefined", new value is "hoge". app.js:50
key "txt2" in namespace "local" changed. Old value was "undefined", new value is "moge". app.js:50
item saved. 
これでlocalStorageにデータ(txt1:"hoge", txt2:"moge")が保存されました。
"item saved." の直前にonChangedイベントが呼び出されていることがわかります。

次にloadボタンを押して、先ほど保存したデータを呼び出してみます。
txt1: hoge, txt2: moge app.js:29
先ほど保存されたデータがログ出力されています。

次はtxt2の値を "foo" に変えて保存してみます。
key "txt2" in namespace "local" changed. Old value was "moge", new value is "foo". app.js:50
item saved.
txt2の値が変更される直前にonChangedイベントが呼び出されたことがわかります。今回はtxt2しか変更していないのでログもtxt2の変更分だけです。

もう一度loadボタンを押してみると、
txt1: hoge, txt2: foo app.js:29
ちゃんとtxt2の値が変更されていますね。

今度はremoveボタンを押して二つの値を削除してみましょう。
key "txt1" in namespace "local" changed. Old value was "hoge", new value is "undefined". app.js:50
key "txt2" in namespace "local" changed. Old value was "foo", new value is "undefined". app.js:50
item removed. app.js:40
ここでも削除が実行される直前にonChangedイベントが呼ばれています。

最後にもう一度loadボタンを押して確認してみると、
txt1: undefined, txt2: undefined app.js:29
ちゃんと削除されていますね。


chrome.storageの使い所

chrome.storage.localはアプリの設定などのちょっとしたデータ保存には威力を発揮すると思います。また、データを頻繁に更新するようなアプリのデータ保存にも、unlimitedStoragelocalStorageを使えば大概事足りそうです。
クラウド(Google Drive)と同期できるchrome.storage.syncもかなり便利です。APIはlocalのと殆ど同じですから学習コストもゼロです。ただ、書き込み頻度の制約が厳しいのでデータ更新頻度の高いアプリにはおすすめできません。

参考にしたサイト

chrome.storage - Google Chrome
ChromeのStorageモジュールで大規模データを扱う - monoの開発ブログ

0 件のコメント:

コメントを投稿