HTML5 3Days Tech Talkにいってきました[html5][html5_dev_jp]

HTML5でつくるオフラインアプリケーション

  • html5-developers-jp管理人白石さん
  • 株式会社あゆた取締役
  • Google社公認APIExpert
  • Google Gearsの書籍出版
イントロダクション
  • html5-develpers-jp 2009/07/10日本と韓国で熱い！
  • 参加者数推移
    • 2009/07末 687
    • 2009/08末 1051
    • 2009/09末 1304
  • 国では韓国の方が盛り上がっているが、都市でいうと東京が熱い
オフラインWebアプリとは
  • オフラインでも動作するWebアプリケーションのこと
  • Gearsの発表で脚光を浴びる
  • HTML5関連のAPIではGearsの影響yを受けている
  • 実際にGearsで実装されたもの
  • 普及していない理由
    • ニーズが顕在化してない,PC常時接続のネット利用者が圧倒的
    • ブラウザプラグインというアプローチが普及を阻害(Gearsを入れないとだめ)
    • 開発者が少ない
  • 時代は変わりつつある
    • ニーズが見えない -> モバイルネット端末の普及
    • ブラウザプラグイン -> ブラウザ自身が実装
    • 知識、人材の不足 -> 標準化により開発者人口増加
オフラインWebアプリを実現するためのAPI
CACHE MANIFEST

# version:20909241054
hello.html
hello.js
<html manifest="hello.manifest">
  .
  .
  .
</html>
    • text/cache-manifestというMIMEタイプで公開
    • UTF8必須
    • 1バイトでも変更があるとリフレッシュ
      • 2回リロードが必要
      • 通常はコメント内にバージョン文字列を入れることで対応
      • Firefoxでバグがあってコメントないをいじっただけではキャッシュがクリアされない
    • Tips:アプリケーションキャッシュが聞いていると開発がやりづらい
      • マニフェストファイルの更新忘れ
      • アプリケーションキャッシュは開発時に使わない
      • manifestファイルをサーバサイドで動的に作る
    • Tips:JSで制御できる
      • 5秒毎に applicationCache.update()を実行
      • applicationCache.addEventListener("updateready",function(){...});で更新を検知してフックできる
      • アプリケーションキャッシュを利用して更新を検知してアップデート
  • WebDatabase 
var db = openDatabase();
db.transaction(function(tx){
  tx.executeSql("...",[...],
     function onSuccess(tx results){
     },
     function onError(tx error){
     }

});
    • 同期型のAPI(バックグラウンドでしか使えない)
var db = openDatabase();
db.transaction(function(tx){
  var results = executeSql(..);
});
  • WebStrage
    • http://journal.mycom.co.jp/special/2009/html5-2/006.html
    • キーバリュー型のストレージ,WebDataBaseに比較して簡単に使える
    • ドメイン毎に領域が完全に分かれる、他サイトのDBにはアクセス不可能
    • ストレージは二種類
      • LocalStrage .. 永続期間無制限
      • SessionStrage .. 永続期間Windowが開いている間
localStrage.setItem("key","value");
var val = localStrage.getItem("key");
localStrage.key = "value";
var val = localStrage.key;
  • WebWorkers
    • http://journal.mycom.co.jp/special/2009/html5-2/006.html
    • バックグラウンドで動作スレッド
    • 現状JSUI処理の一環として動作するため、長時間かかる処理を行うとブラウザが固まる
      • WebWorkersはかたまらない
    • Threadとは厳密に異なる
      • 変数を共有不可能
      • window,documentも共有されない
      • JSフレームワークを使用している場合は注意
    • ワーカ間のデータ共有にはmessaging API を用いる
    • ワーカを作ると別スレッドで動く
    • ワーカからDOMを触ることはできない
      • ログも出力が難しいわざわざUIスレッドにお願いしないといけない
    • ワーカ生成

var worker = new Worker(scriptUrl);

    • ワーカへ送信
    • worker.postMessage
    • ワーカから受信
    • worker.onMessage
    • Worker処理はデバッガで追えない
    • fakeworker.js evalとsetTimeoutでWorker実装
HTML5時代のWebApplication
  • 理想的なオフラインWebアプリを実現するためには、Webアプリのアーキテクチャを大幅に変更する必要がある
    • オフラインで動作する必要がある
    • クライアント内で処理が完結している必要がある
      • 処理結果の永続化含め
  • local DBとデータを読み書き
  • 任意のタイミングでローカルDBとの差分をダウンロード/アップロード
  • ロジックの大半はローカルに存在。処理が重くなるのでWorkerを使用
OpenWebArchitectureのメリット
  • ローカル内で処理が簡潔->オフラインでもほぼ完全に動作
    • ネットワークが不安定でもOK
  • 高速でリソース消費量も少ない
  • 差分アップロードでタイミングを制御
OpenWebArchitectureの利用例
  • RSSReader,blog,news
  • あらゆるデスクトップアプリと変わらなくなる
  • ARアプリなどでも応用
    • センサーやGPSから得たデータをすばやく記録し、後にアップロード
    • 近い地域サーバからまとめてデータをキャッシュしておき表示
      • 動かすたびにサーバに問い合わせは厳しい...
OpenWebArchitectureの問題点
  • ノウハウの蓄積が少なすぎる
  • 次のような要件が組み合わさるとスクラッチから設計、実装するのは非常に困難
    • サーバ+クライアントDBの設計技法
    • 差分アップロード/ダウンロードの設計と実装
      • 高速でネットワーク断でもフェールセーフ
    • クライアントの状態に応じた処理の切り替え
      • オンライン/オフラインの状態
      • ローカルDBがある/ない/容量いっぱい
    • 同じデータを複数人で変更してたら...!?
AlexingFramework
AlexingFrameworkコンセプト
  • 基本的な準備作業はクラウド上でデータモデルを定義するだけ
    • クライアントからそのデータモデルを操作できるだけでなく、オフライン編集も可能
Q&A
  • Online,Offlineの検知は
    • navigationオブジェクトに知らせられる、あとonxxx等のイベントも存在
  • 時代はシンクライアント<->ファットクライアントの繰り返しだが　貧弱なクライアントでもいける？
    • Gmail/GoogleDocsが動くかどうかが判断では？
    • Nativeの方が早いけどOpenWebは移植性が優れる
  • Alexingの同期アルゴリズム テーブルが大きくなったときに高速に同期する方法は?
    • gitのようにindexを持ってたりしてますか
    • serverからdlは未実装
    • clientからのアップロードはログをジャーナル化
  • 分散コンピューティングのqueueing問題は
    • Alexingで吸収予定!
  • ファットクライアントなのに低消費電力は本当!?
    • オンラインアプリonlyと比較して、高速で消費電力も少ないのでは？
  • Session Strageの生存期間
    • ブラウザを閉じると消える
    • ウィンドウをリロードしても消えない
    • 複数ウィンドウでも同一サーバ、同一リソースであれば永続化
      • 全部消すとアクセスできない

ここで電池切れ