>>前回

 IE9は、HTML5に対応していることも大きな特徴である。ただしFirefoxやChromeと比べると、IE9が対応している機能は少ない注3表1)。HTML5の規格の多くはドラフト段階であり、IE9は比較的仕様が固まってきたものに限って取り入れている印象がある。

表1●HTML5への対応状況
表1●HTML5への対応状況
*セキュリティの問題からデフォルト無効 SVG:Scalable Vector Graphics KVS:Key-Value Store CSS:Cascading Style Sheets

 今回はIE9に実装された機能のうち、多くの業務アプリケーションに役立ちそうな「Webストレージ」と「canvas」の二つを検証した。

 Webストレージは、キーと値のペアでデータを読み書きするシンプルなKVS(Key-Value Store)である。これを使って、データを読み書きする簡単なアプリケーションを動作させてみた(図7上)。データを正しく読み書きできることを確認できた。

図7●IE9でHTML5の機能を利用した例<br>クライアントサイドストレージである「Webストレージ」と、図の描画機能である「canvas」を利用した
図7●IE9でHTML5の機能を利用した例
クライアントサイドストレージである「Webストレージ」と、図の描画機能である「canvas」を利用した
[画像のクリックで拡大表示]

 Webストレージには、ブラウザーのウィンドウが開いている間だけデータが保持される「sessionStorage」と、ウィンドウ(またはブラウザー自体)を閉じたあともデータが保持される「localStorage」の2種類がある。試すと、どちらも想定通りに動作した。また同じアプリケーションが、Firefox4とChrome11でも同じように動くことが確認できた。

PC側でバックアップはできない

 Webストレージを使えば、ユーザーデータをPC側に保持できる。データサイズはブラウザーによって異なるがIE9の場合は10Mバイトだった。最大4KバイトであるCookieよりも大容量のデータを管理できる。

 ただしデータの保全性を考えると、Webストレージは、サーバー側DBのキャッシュとしての利用が中心になりそうだ。IE9は、データをローカルファイルに書き出すHTML5の機能である「File API」を備えていないため、Webストレージ上のデータをPC側でバックアップする手段がない。バックアップはサーバー側で行い、サーバー側のDBとWebストレージ上のデータを常に同期させるような使い方になるだろう。またlocalStorageは、ブラウザーでCookieを削除する操作をすると消えてしまうことも分かった。

 筆者としてはもう1歩進めて、HTMLやCSSのファイル全体をキャッシュする「オフラインWebアプリケーション」というHTML5の機能も搭載してほしかった。これも搭載すれば、アプリケーションのオフライン実行が可能になる。

 JavaScriptで図を描画できる「canvas」は、業務アプリケーションでも便利に使える機能である。例えば数値をグラフにして表示することができる。数値を円グラフにした例を図7下に示した。数値は配列オブジェクト(graphdata)に格納しており、その要素数や値を変えると、それに合わせてグラフも変化する。

 従来、こうしたグラフの表示をWebアプリケーションで実装するのは面倒だった。例えば、サーバー側で画像データを一時ファイルとして作成し、HTMLソースのimgタグでそのURLを指定する必要があった。一時ファイルを適切なタイミングで、消去するロジックも必要になる。