AjaxフレームワークのYUI2.8.0がHTML5ライクなクライアントストレージに対応
Ajax JavaScriptフレームワークのYUI (Yahoo! User Interface Library) が、最新版の2.8.0でHTML5ライクなクライアントストレージに対応していました。
YUI 2.8.0における注目の新機能は次のとおり。
- HTML5スタイルのローカルセッションストレージを提供するクライアントストレージメタコンポーネントStorage Utility (Matt Sinder氏提供)の導入。HTML5ストレージ、Google Gears、Flash共有オブジェクトをサポート
- さまざまな用途に適用できるプログレスバーコンポーネント ProgressBar (Daniel Barreiro氏提供)の導入
- 接続マネージャにおけるクロスドメインサポートの実現
- イベントデリゲーションサポートの実現
- カルーセルウィジェットにギャラリーモードを追加
- チャートにおける複数軸表示のサポート
細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、HTML5が注目されだしている昨今、非常にタイムリーで目を引きました。
とその前に、ざっとHTML5のおさらい（といっても理解が不十分だったのでこれを機に調べたのですがf^^;）。
HTML5 まとめ
HTML5の注目点は、新しいマークアップ（タグの整理）と新しいAPIの対応です。
■ 新しいマークアップ
- 検索インデックスされやすいように構造化
より構造的な文を生成できるように<nav>や、<section>といったタグが追加されました。
- マルチメディア対応
<audio>や<movie>といったマルチメディアタグにより、javascriptやFlashを使わなくても音声・動画の再生ができるようになりました。
- Flashのような自由な2D表現
<canvas>タグで簡単にJava Appletのような豊かな2D表現ができるようになりました。
■ 新しいAPI
- ドラッグ＆ドロップ
- 戻るボタン
- O3D
ブラウザのプラグインとして提供されているO3Dをjavascriptから制御できるようになります。例えばGoogle Earthがこれを使ってブラウザ上で3D表現を可能にしていまいす。
- Geolocation
1，2カ月程前に話題になりましたが、Firefox3.5でGoogle Mapを開くと現在地を表示できます。これはGeolocation APIを使っていて、javascriptから位置情報にアクセスできるからこそできる機能です。モバイルのブラウザのエンジンとして標準化しだしているWebkitでも実装が進んでいて、モバイル分野でかなり使われそうなAPIです。
- Web Storage
javascriptでクライアントにデータを保存することができるAPIです。このときデータベースのようにSQLを用いてデータを保存することもできるようです。こちらにサンプルコードが記載されています。
- Web Workers
バックグラウンドでjavascriptを動かせるようになります。いわばjavascriptスレッドです。繊細なUI処理に影響させることなく、重い処理を裏で行うことができるようになります。
- Web Sockets
サーバサイドプロセスと双方向に通信することを可能にするAPIです。
HTML5のより詳しい記述はこちらへ↓
» グーグルが賭けるHTML 5の未来 － ＠IT
» HTML 5 ― HTML 4 からの変更点 W3C 草案 (Working Draft)
YUI2.8.0 Storage Utility
さて、今回のYUI2.8.0のStorage Utilityですが、HTML5のWeb Storage (FireFox 3, Safari 4, IE 8以上必要) に対応しているだけでなく、HTML5未対応のブラウザのためにGoogle GearsやSWFファイル(Flash Player 9.0.115以上必要)を使って本機能を実装しています。もちろんセッションでの保存にも対応しています。
YUIのサンプルで動いているのを確認しました。ウィンドウを閉じても文章が保存されていて感動。
» Simple Storage Example — Saving In-Progress Text Entry
コードもstorageEngineオブジェクトを用意してゲッター/セッターで入れるだけというシンプルさ。色々な場面で使う機会が出てきそうです。
var storageEngine = YAHOO.util.StorageManager.get(
YAHOO.util.StorageEngineGears.ENGINE_NAME,
YAHOO.util.StorageManager.LOCATION_LOCAL,
{
order: [
YAHOO.util.StorageEngineGears,
YAHOO.util.StorageEngineSWF,
YAHOO.util.StorageEngineHTML5
],
force: false
}
);
～中略～
storageEngine.getItem("simple-storage-textentry");
storageEngine.setItem("simple-storage-textentry", YAHOO.util.Dom.get("textentry").value);
なお、容量としてHTML5は5～10MB、Google GearsはSQLiteを使用していて最大2GB、SWFは100KBまで利用できるようです。