ページ)2012年末に“オフラインファースト”という言葉がジョー・ランバート氏のブログで取り上げられました。オフラインファーストを実現するための技術であるストレージ系APIを取り扱うライブラリについて、筆者が選んだ10個を紹介します。公開[仲裕介,@IT]はじめに2012年末に“オフラインファースト”という言葉がジョー・ランバート氏のブログで取り上げられました。日本では「html5とか勉強会」において、白石俊平氏が取り上げたことはまだ記憶に新しいと思います(参考記事:オフラインWebの活路はモバイルアプリにある)。オフラインファーストは、オフライン対応を仕様に組み込んだ上で、WebサイトやWebアプリケーションを作ろうという設計思想の1つです。Docsはその設計思想の下に作られています。オフラインファーストを実現するための重要な要素の1つとして、Webブラウザへのデータ保存技術があります。API」の3つを標準化しています。Databaseについては、2010年の段階で標準化活動は終了しており、実質的には前者2つのみとなります。これらのAPIは、Webブラウザの種類やバージョンにより対応状況がさまざまです。そのためラッパーライブラリが数多く出ています。本稿では、筆者が見付けたライブラリ10個を、簡単な使い方を交えながら紹介します。ストレージ系のライブラリは歴史が古いものも多く、長らく更新されていないものもWeb上に多々存在しています。そのため今回は、ライブラリのソースコード(GitHub)の最終更新日が比較的直近のものに限って取り上げています。最終更新日は、GitHubの最終コミット日を記載しています。これらのライブラリは数が多いため、前回更新日から時間が経過しているものは取り上げないようにしています。29.0.1547.57で動作確認を行っています。※4:公式サイトに詳細な対応表があるため参照のこと※5:公式サイトには動作確認ブラウザとしてしか記載がない※6:IEは10未満であればオフラインでのデータ保存ができないstore.jsLocalStorageのラッパーライブラリです。LocalStorageの使い勝手を向上するためのライブラリという位置付けでしょうか。LocalStorageは全てのデータをString形式で記録しますが、store.jsを利用して読み書きするとObjectや配列をそのまま扱えるため、自前で型変換する手間が省けます。こちらのライブラリはNode.js(node-localStorage)でも利用可能です。以下に、簡単なコードを紹介します。console.log('localstorageが有効です。console.log('localstorageが無効です。}})()コード実行結果LocalStorageにデータを書き込むとこのようになります。LocalStorageはサイトドメインごとにデータが分かれています。同一ドメインで複数のWebサービスを運用する際は、Keyの値が重複しないように考慮する必要があります。これらのライブラリを使用するとライブラリ専用のプレフィクスがKeyに自動的で付加される場合がありますが、このライブラリは何も付かないようです。lawnchairストレージとして利用するAPIを自由に選択できるラッパーライブラリです。上記サイトの情報によると、デフォルトアダプタとしてはLocalStorageが利用できると記載されていますが、筆者の環境ではバージョン0.6.1をアダプタ指定なしで利用すると“window-name”にフォールバックされてしまいました。“window-name”はwindow.top.nameオブジェクトにデータを保存するため、Webブラウザのリロードではデータは保持されますが、Webブラウザを再起動するとデータは消えてしまいます。その他、利用できるアダプタはこちらで確認してください。以下のコードはLocalStorageを利用する場合の例です。{adapter:'dom'}を指定してインスタンス作成(new)を行う必要があります。対応Webブラウザに関しては、公式Webサイトに明確な記載がありませんが、アダプタを変更することでIEからAndroidまで幅広く対応できるようです。})})()コード実行結果ここで注意点があります。lawnchairと書かれていますが、ライブラリ上の表記は全てLawnchairなので頭文字を大文字にしなければエラーになります。実行後の状態は図の通りです。Key-Valueの1ペアを書き込みましたが、実際にはindexとその値ということで2レコード使用されています。この辺りはindexedDBなどもアダプタとして利用できるため、そちらの仕様に合わせているのかもしれません。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。