mustache と lscache

このサイトでは Last.fm API からデータを取ってきて僕が最近よく聴いてるアルバムを表示する、っていうのをやってるんですが、このスクリプトを mustache と lscache というライブラリを組み合わせて書き直してみたところけっこういい感じになったので、簡単に紹介してみます。

mustache は様々な言語で利用できるテンプレート・エンジンで、ここで使っているのはその JavaScript 実装である mustache.js です。導入や使い方についてはまっはさんの記事がわかりやすくて参考になりました。

まず API から JSON データを取得し、これを整形して mustache 用のオブジェクトにします:

var data = {
        heading: 'This Week’s Top 10',
        albums: [
            {
                name:  'Solaris – Cliff Martinez',
                url:   'http://www.last.fm/music/Cliff+Martinez/Solaris',
                image: 'http://userserve-ak.last.fm/serve/64s/43127407.png'
            },
            {
                name:  'Marquee Moon – Television',
                url:   'http://www.last.fm/music/Television/Marquee+Moon',
                image: 'http://userserve-ak.last.fm/serve/64s/76164550.png'
            },
            ...
        ]
    };

そして mustache テンプレートを準備:

var template =
        '<h2>{{heading}}</h2>' +
        '<ol>' +
            '{{#albums}}<li>' +
                '<a href="{{url}}">' +
                    '<img src="{{image}}" alt="{{name}}">' +
                '</a>' +
            '</li>{{/albums}}' +
        '</ol>';

テンプレートはこのように文字列で定義します。{{key}} っていうのが mustache タグで、データの入る部分です。{{#albums}} から {{/albums}} まではループですね。このテンプレートとデータを Mustache.render() に渡せば HTML を生成してくれるので、これを DOM に挿入すれば完成です:

var html = Mustache.render(template, data);
$('#container').html(html);

で、このもとになる JSON データを毎回 API から取得するのは無駄なので、一度 HTML を作成したらそれをローカルにキャッシュして再利用しよう、というのが次のステップです。そこで lscache を使います。lscache は localStorage によるデータの取り扱いを簡単にしてくれるライブラリです。

lscache.set('lastfmHTML', html, 60 * 24);

このように lscache.set() メソッドでデータをローカルに保存します。データとして渡せるのは文字列またはオブジェクトです。ここでは 'lastfmHTML' というキーに先ほど生成した HTML 文字列を保存しています。データの保持期間が分単位の数値で指定でき、この例では 24 時間を指定しています。

このキャッシュされたデータを API 呼び出しの前にチェックして、データがあればそのまま使い、なければ API からデータを取得して HTML を生成してキャッシュ、というかたちにします。キャッシュされたデータを取得するには lscache.get(key) です:

var cache = lscache.get('lastfmHTML');

if (cache) {
    $('#container').html(cache);
} else {
    // データ取得、HTML 生成、キャッシュ
    ...
    $('#container').html(html);
    lscache.set('lastfmHTML', html, 60 * 24);
}

コード例がかなり雑ですが、だいたいこんな流れです。どちらのライブラリもシンプルで直感的に扱えます。

localStorage については、はじめて触ったけど簡単だしすげーいいじゃんっていうのと同時に、いままで考えたことのない領域なのでどう使っていけばいいのかいまいちわからんというか、問題提起されたりもしてるみたいだし慎重になっちゃいますねー、という感じですね (歯切れ悪い…)。