(1/3)容量制限やセキュリティの課題があった、従来のクッキーはもう古い。Storage」を活用しよう。4.1以前)のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。Storage」と呼ばれる機能を利用できる。Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。Storageとクッキーの機能の差異は、以下の表のとおりだ。Storageを使用することで、開発者が受けられる恩恵」ともいえる。クッキーよりもデータ保存容量が大きくなり、有効期限もないので、クライアントサイドでのデータ管理を行いやすくなる。クッキーのようにすべてのリクエストに対してデータを自動で送信しないので、クッキーよりはセキュアに利用できる。ブラウザによっては、データの保存容量が5MBytesより大きいものもあるが、クロスプラットフォームを意識した場合、W3C勧告に従った5MBytesを上限とした利用を推奨する。Storageは、次の表のとおり、現在、リリースされている主要なブラウザでは実装済みで、デスクトップ端末/スマートフォン/タブレット端末など、多くのデバイス上で役に立つ機能といえるだろう。Storageは十分に実用できる環境にあるといえる。Storageの詳細について触れていく。Storageは、以下の2種類のストレージのことを指し、目的に応じて用途が分けられている。(1)sessionStorageウィンドウごとのセッションで有効なストレージ。ウィンドウやタブが開いている間、Webアプリケーション利用に関するデータをそれぞれの単位で保存し、ウィンドウ/タブが閉じられると、データは失われる。ウィンドウ/タブ間では異なるsessionStorageとなり、共有はできない。(2)localStorageWebアプリケーション利用者のブラウザ内に永続的にデータを保存するストレージ。保存は「http://www.atmarkit.co.jp:80/」のように「ドメイン:ポート番号」の組み合わせの「オリジン」単位で実施される。オリジンが同じであれば、ウィンドウやタブ間でデータを共有でき、また、一度、ブラウザを閉じて、再度アクセスしたときでもデータを共有できる。次の図は、sessionStorageとlocalStorageの特徴を、図にまとめたものだ。Storageを利用しているWebアプリケーションで有名なサイトは、以下のとおりだ(ブラウザの下部に表示されているツリーや一覧は開発者ツールで、これを使ってストレージの利用状況を確認している)。Amazon.co.jpお勧め商品の一覧ページ「この商品を買った人はこんな商品も買っています」のページ番号をsessionStorageで保存している。Shodo[Write](=書道の文字を書く)の初回実行時に動作するムービーの閲覧情報フラグをsessionStorageで保存している。サイト内の音量設定やミュート設定の保存にlocalStorageを使用している。Storage使用例sessionStorageの利用方法として、例えば、「ブラウザ起動後の初回アクセスのみ、アプリケーションのチュートリアル部分をムービーで表示したい」というシナリオもあるだろう。そこで、「ムービーを表示した」という情報をsessionStorageに保存することで簡単なフラグ分岐などができる。localStorageの利用方法として、例えば、Webページ閲覧・利用者が選択した背景色や文字色のテーマなどをlocalStorageに保存することで、Webアプリケーションでありながら、エンド・ユーザー環境をレジストリのように維持することもできる。このようにsessionStorage/localStorageは、「セッション接続の間だけ利用したいか」「永続的に情報を保持したいか」という用途に応じて使い分けることになるだろう。Storageを実装しているが、ストレージに保存された情報の内容を(開発者が)確認する手順はブラウザにより異なる。Storageに保存された情報を確認する方法が提供されていない。Firefoxはアドオン「Firebug」を入れることなどで確認ができる。それ以外のブラウザは、標準搭載している開発者ツールで確認することが可能だ。確認手順は以下のとおりだ。開発メニューで確認バー上[一般設定のメニュー]ボタンから[設定]を実行。表示されるダイアログで[詳細]タブを開き、[メニューバーに"開発"メニューを表示]チェックボックスにチェックを入れ、ダイアログを閉じる。インスペクタを表示]を実行。Dragonfly]を実行。Storage以外にも各要素のチェックやCSSの適用状況、JavaScriptコードのエラー検出機能なども保有しているので、HTML5開発のサポートに活用するといいだろう。Storageの利用方法について説明する。メールマガジンをご購読ください。Japanスマートジャパン3Dモデラボキャリア@IT自分戦略研究所エンジニアライフディルバートアプリITmediaねとらぼねこらぼついトピ!ITmediaはアイティメディア株式会社の登録商標です。