まめ畑

ゆるゆると書いていきます

HTML5 3Days TechTalkに参加しました

HTML5 Google

html5-developers-jpの主催で行われたHTML5 3Days TechTalkに参加してきました。
グループ: html5j.org | Google グループ

  • HTML5でGoogleトレンドで検索すると韓国・日本の順
  • コミュニティの人数は2ヶ月で約2倍

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

  • オフラインでも利用出来るアプリケーション
  • Gearsを使用して開発されたアプリは数少ない
  • あまり普及していない理由
    • ブラウザプラグイン
    • ニーズが顕在化していなかった
  • しかし、以下のような理由で普及が進む可能性
    • ニーズが見えない→モバイル端末でのネット利用の普及
    • ブラウザプラグイン→ブラウザ自身でのサポート
    • 標準化による普及
  • アプリケーションキャッシュ
    • アプリケーションに必要なデータをキャッシュする
    • キャッシュマニフェストによりキャッシュを行いたいコンテンツを指定する
    • HTML5のタグにmanifes属性を追加
    • 文字コードはUTF8
    • マニフェストファイルを1Byteでも変更するとキャッシュがクリアされる
    • 開発はすごくやりづらい
      • コンテンツを変更してもキャッシュが使用されてしまう。回避するにはマニフェストファイルを変更する必要がある
    • アプリケーションキャッシュをJSで動的に制御する
    • 「applicationCache」グローバルで使用出切る変数
    • applicationCacheからのイベントを監視して動作を制御
  • Web Database
    • ドメインにより完全にDBが分かれる
    • 同期型・非同期型のAPIが提供されている
    • 非同期型のAPIを使用するとイベントハンドリングが面倒
    • Safari4やChromeの開発者コンソールにはDBタブがある
      • 補完がすごいよ！
      • Local Storage/Session Storageのカテゴリもある
  • Web Workers
    • 変数の共有が出来ない
    • DOMに触る事が出来ない(document, windowに触る事が出来ない)
    • Worker間のデータ共有
      • メッセージの送受信でデータのやりとりを行う
    • 現在のデバッガではWorkerの処理はデバッガで追えない
    • ログを表示したいだけなので、UI WorkerにメッセージをPOSTしないといけない
    • 「fakeworker.js」ライブラリを作った。WorkerのAPIを実装
  • HTML5時代のWebアプリアーキテクチャ
    • 理想的なオフラインWebアプリケーションを実現するにはWebのアーキテクチャを大幅に変更する必要がある
    • なぜか
      • クライアント内で処理を完結させる必要がある
      • ロジックの大部分がクライアントに存在する(Workerを使用して処理を軽くする)
    • スマートフォンやネットブック向けに最適化出来る
  • 問題点
    • 世界的にみてノウハウが少ない
    • ローカルDBのスキーマのデザイン
    • サーバ側のDBのスキーマの変更とクライアントのDBのスキーマの同期の方法
    • アップロードをバックグラウンドで行っている際にネットの接続が切れた場合の同期方法
    • 様々なクライアントやDBの状態に対応するための条件がかなり多い
  • Alexing Framework
    • サーバ側でデータの衝突の検知機構について
    • 衝突を起こした際の処理はアプリケーションによって異なるため、Frameworkとして責任を持つのはデータの衝突が起こった際にその事をクライアントに返す事

Canvasチュートリアル

  • Canvasとは
    • Webページに図を描くためのAPI
    • canvas要素にAPIが用意されている
  • SVGとの違い
  • Canvas
    • JSを使って描画
    • 描いてしまった図は個別に認識出来ない
    • 描画そのものは高速
    • ピクセル操作が可能
  • SVG
    • XML形式のマークアップで図を表現
    • JSから各要素にアクセス可能
    • 要素が多すぎると重い
  • Canvasは個々のピクセルを扱う描画が得意
  • IE以外は対応
  • ExplorerCanvasを使用すればIEでも使用可能(VMLを使用してエミュレート)
  • 描かれたテキストはビットマップとして組み込まれる
  • マイター限界比率
    • 線の半分の流さ * miterLimitで表される、マイターの限界
  • 変換マトリックス
  • ピクセル操作の注意点
    • imagedataオブジェクトを手作りしない
      • createImageData()やgetImageData()を使う
      • OperaはcreateImageData()未実装
    • RGBの値を指定する時はparseIntを使用する
      • 文字列を渡すとFxではエラーになる
  • Canvasにアニメーションに特化した機能はない
  • Canvasは非常に高速
  • ぱらぱら漫画を作る
  • Q＆A
    • Image Bufferは可能か？
      • その様な機能はないが、工夫次第で実装可能
    • Double Bufferingは可能か?
      • Canvas自身に機能は無いが、経験的では、よほど重い処理をしない限りちらつかない。これはブラウザで何かしらの処理を実装しているのかもしれない


今回のTech TalkはGoogleのオフィスで開催されました。
Google自販機や、キッチンみたいなスペースがある環境でGoogleらしい感じでした。


一緒に参加したid:Slightairのエントリ: HTML5 3days Tech Talk に参加してきた - にっき