taediumの日記

2012-05-23

[][] WinJS.Binding.Template.prototypeの拡張

WinJS.UI.ListViewのitemTemplateやgroupHeaderTemplateの中で、何番目のindexか? グループ内にいくつ項目があるか? とかを出力したいなあと思っていたのですが、適切なAPIが用意されていないみたいです。ドキュメントには書いていないですが、WinJS.Binding.Template.prototype.renderItemに渡ってくる引数にその情報が入っていて使えそう。

    var renderItem = WinJS.Binding.Template.prototype.renderItem;
    WinJS.Binding.Template.prototype.renderItem = function (item) {
        var data = item._value.data;
        data._index = item._value.index;
        data._groupSize = item._value.groupSize;
        return renderItem.apply(this, arguments);
    };
    <div class="headerTemplate" data-win-control="WinJS.Binding.Template">
        <h2 class="group-title" data-win-bind="onclick: click; textContent: _groupSize" role="link"></h2>
    </div>
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: _index"></h6>
        </div>
    </div>

2012-05-01

[][][] msIndexedDBのIDBDatabaseのプロパティにプロトタイプ経由でアクセスできない?

IndexedDBを触っていてどうにもAPIが使いにくいのでラッパーを作ろうと思っているのですが、IEでなんかよくわからないエラーに出会ってしまいました。

たとえば、IDBDatabaseのnameプロパティにアクセスしたいのですが、直接アクセスはもちろんOK。でも、Object.createなどでプロトタイプに設定して子供?からアクセスすると「SCRIPT65535: オブジェクトの呼び出しが無効です」と言われてしまうのです。

var req = msIndexedDB.open("MyDB");
req.onsuccess = function(event) {
    var db = event.target.result;
    console.log(db.name); // OK: 「MyDB」と出力される
    var db2 = Object.create(db);
    console.log(db2.name); // ERROR: 「SCRIPT65535: オブジェクトの呼び出しが無効です」というエラーが発生する
};

Chromeでは同様のコードが動くので、IEの問題かなぁ?(Chromeで動かす場合は、msIndexedDBをwebkitIndexedDBに変える必要ある)

直接はOKだけどプロトタイプチェインでの参照はNGって、不便すぎる。


Microsoft Connectにフィードバックしました。

https://connect.microsoft.com/IE/feedback/details/740085/indexeddb-idbdatabase

2012-04-29

[][][] セッション状態のシリアライズ/デシリアライズ

ドキュメント(http://msdn.microsoft.com/en-us/library/windows/apps/hh781225)にあるように、WinJS.Application.sessionState を使ってセッションを管理すると、suspendedな時とreactivatedな時にシリアライズ/デシリアライズを自動で行ってくれる。

ちなみに、これは、WinJS.Application.localのAPIを使ってファイルへの書き込みと読み込みを行っているので、保存フォルダはWinJS.Application.localを使って自分で読み書きする場合と同じ。

ファイルの名前は、_sessionState.json で固定です。

window.sessionStorageは使えるけど、使う理由が特になさそう(WinJS.Application.sessionStateのほうが自動のシリアライズ/デシリアライズがサポートされていて使い勝手がいい)。


[][][] HTML5のローカルストレージとWinRTのローカルストレージ

違いがよくわからないので調べました。

結論は

  • ローカルコンテキストでどちらも使える
  • Webコンテキストでどちらも使える(iframeで読み込んだのはローカルのhtmlだった。それ以外の場合はわからない。)
  • APIは別(どっちかがどっちかへデリゲートみたないなこともしていない)
  • 保存される場所は別

ドキュメント的には、local storageという用語でWinRTのローカルストレージを指している(というか、HTML5のローカルストレージへの言及無し)

コンテキストの話はここに書いてある


特に理由がない限り、WinRTのローカルストレージを使っておけば間違いない感じ。


APIや保存される場所の違いは以下のとおり。

HTML5のローカルストレージ

jsのコード
window.localStorage.test = 'hello, this is a window.localStorage value.';
保存される場所
  • C:\Users\ユーザー名\AppData\Local\Packages\a8b36c9d-7723-4dd2-8b50-5e9700fe6820_xmsjtxmjdarfg\AC\Microsoft\Internet Explorer\DOMStore\7OJEPND7\a8b36c9d-7723-4dd2-8b50-5e9700fe6820-xmsjtxmjdarfg[1].xml

(a8b36c9d-7723-4dd2-8b50-5e9700fe6820はPackage Nameです)

ファイルの中身
<root><item name="test" value="hello, this is a window.localStorage value." ltime="899616736" htime="30221859" /></root>

WinRTのローカルストレージ

jsのコード
WinJS.Application.local.writeText("test.txt", "hi, this is a WinJS.Application.local value.");
保存される場所
  • C:\Usersユーザー名\AppData\Local\Packages\a8b36c9d-7723-4dd2-8b50-5e9700fe6820_xmsjtxmjdarfg\LocalState\test.txt
ファイルの中身
hi, this is a WinJS.Application.local value.