Archive

Posts Tagged ‘Web Storage’

AjaxフレームワークのYUI2.8.0がHTML5ライクなクライアントストレージに対応

9月 24th, 2009

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氏提供)の導入
  • 接続マネージャにおけるクロスドメインサポートの実現
  • イベントデリゲーションサポートの実現
  • カルーセルウィジェットにギャラリーモードを追加
  • チャートにおける複数軸表示のサポート

» Yahoo! UI最新版登場、クライアントストレージ | エンタープライズ | マイコミジャーナル

細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、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まで利用できるようです。

8maki Web, survey, テクノロジー , , ,