02 October 2009

HTML5 3Days TechTalk に行ってきた

HTML5-Developers-jp主催のHTML5 3Days というイベントに行き、話を聞いてきました。

HTML5 3Days 2009へご参加ください! - html5-developers-jp | Google グループ

公式ハッシュタグは#html5_dev_jpです。

プレゼンもわかりやすく、内容も興味深いもので、非常に面白かったです。特にクライアントサイドでかなりのことができてしまうため、webアプリのアーキテクチャ、作り方が今後がらっとかわってしまう可能性はあります。

HTML5は最近盛り上がっているとはいえ、まだまだ策定中でブラウザ実装もまちまちです。一般的にひろく使われるまでにはまだ数年かかると思います。また開発のノウハウもほぼたまっていない状態です。まだまだすべきこと、やれることがたくさんある領域(そしてその割には今後広まる可能性が高い領域)なので、今のうちからコミットしておく価値が非常にあると思います。わくわくしますね。

以下メモです。長いんですが、それぞれのスライドを見てもらった方がわかりやすいです。スライドに入っていない内容は質問の部分くらいだと思います…。

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

白石俊平さん 株式会社あゆた

スライドはこちら

Offline Html5 3days

イントロ
  • html5-dev-jp
  • 現在1304人
  • 日本、韓国で盛り上がり
    • なぜか目黒の人口が多い
オフラインWebアプリとは
  • オフラインでも動作するWebアプリ
  • 2007, Google Gearsで脚光
  • HTML5にはGearsからの影響も
  • 実装例あまり多くない
    • docs, gmal, reader, rtm, ...
  • 普及してない原因
    • ニーズが顕在化できていなかった。2007年当時、ネット常時接続という形態が多数
    • ブラウザプラグインというアプローチが普及を阻害
    • 開発の知識を持った開発者の付属
  • ニーズ顕在化->モバイル(オフラインが多い)が普及
  • ブラウザプラグイン->ブラウザ自身が実装
  • 知識人材の不足->標準化されるから人口増?
HTML5のオフラインアプリ関連のAPI
  1. アプリケーションキャッシュ
  2. Web Database
  3. Web Storage
  4. Web Workers
アプリケーションキャッシュ
  • アプリに必要なリソースをローカルにキャッシュする仕組み
  • 実現方法
    • キャッシュマニフェストを作成
CHACHE MANIFEST

# version: xxxxxx
hello.html
hello.js
...
    • これをtext/cache-manifestというmimeで公開
    • htmlファイルから、 で指定
  • manifestファイルとは
    • キャッシュするリソースを書き連ねたファイル
    • 文字コードはUTF-8オンリー
    • 1バイトでも変更があるとキャッシュがリフレッシュされる
  • でも、開発しづらい!
    • リソースを少し変更
      • リロードしてもキャッシュがあるから、ブラウザがキャッシュを表示しちゃう
    • いちいちmanifestファイルを少し変更して、キャッシュをリフレッシュする必要
    • 対策
      • 開発時はキャッシュを使わない
      • manifestファイルを動的生成
    • applicationCache.update();
    • addEventListener("checking", function ..)
    • 他にもいろいろイベント
Web Database
  • クライアント上で動作するRDBMS
  • SQLフルに使える
  • オフラインアプリを作る際の中心的テクノロジ
  • ドメインごとに違うDB
    • 他のサイトのDBにはアクセス不可
  • 非同期/同期APIがある
    • 非同期apiは常に利用可能だが、面倒
    • 同期apiは"ワーカ"でしか使えないが、使いやすい
  • safari4, chromeの開発者ツールにはデータベースっていうボタンがもうある
    • safariだとweb inspector
    • 補完がちょう便利!
Web Storage
  • key-value型
  • ドメインごとに領域が異なる
  • ストレージは2種類
    • LocalStorage
    • SessionStorage
    • ie8も対応
  • 簡単!
localStorage.key = "value";
var val = localStorage.key;
Web Workers
  • バックグラウンドで動作するスレッド
  • 長時間かかる動作はブラウザ固まる
    • 別スレッドで実行すればブラウザが固まらない
  • 注意点
    • スレッドとは微妙に違って、変数共有できない
    • window, documentも不可
      • フレームワークを使う際は注意
          • 白石さんはprototype.jsのコードを書き換えた
    • ワーカ間のデータ共有はメッセージングapi使用
    • ワーカからDOMは触れない!
  • 問題点
    • デバッグがつらい
      • ワーカ内のコードはデバッガで追うことができない
      • ワーカはdomを触れないから、ログも吐けない
      • fakeworker.js
    • メッセージングのコードはすぐ複雑になる
      • 巨大switch-caseになりがち
      • AlexService
HTML5時代のWebアプリアーキテクチャ
  • Open Web Platform
    • html5だと、タグとかの話になる。
    • dbなどapiの話も総括して、open web platformという言葉が生まれた
  • よいオフラインアプリを作るには、今までのやり方とはアーキテクチャを大幅に変更する必要がある。
    • ほとんどのロジックをクライアント上で実現する必要
  • 従来
    • サーバと直接データを送受信
    • ロジックの大半はサーバにある
  • 今後
    • ローカルdbとデータ読み書き
    • 任意のタイミングでローカルdbとの差分をdownload/upload
    • ロジックの大半はローカルに存在。重い処理はworker使用
  • メリット
    • ローカル内で処理が完結するため、オフラインでもほぼ完全に動作。
    • よって高速
    • アップロードダウンロードタイミングを制御可能
  • スマートフォン、ネットブックに最適
  • 可能性
    • オフラインでのweb利用
    • デスクトップアプリをwebベースに置き換え
    • AR的なアプリ
  • 問題点
    • ノウハウの蓄積がまだ少ない
  • 複雑さ
    • クライアント側のDBをどういうスキーマにする?
    • サーバのDB変更をローカルにどう反映?
    • 差分アップダウンロード処理の設計と実装
    • クライアントの状況に応じた処理の切り替え
      • オンライン/オフライン状態
      • ローカルDBの有無や状態
    • などなど
  • ソリューションは?
    • Alexing Framework
    • クラウド向けRESTfulライブラリ+HTML5 ORマッパライブラリ
    • 株式会社あゆたで制作
  • 予めクラウド上でデータモデルを定義
    • あとはクライアント上でそれを使うだけ
    • ローカルサーバ間の通信など、細かいところはalexingが担当
  • 2009年中にossとして公開
    • (これは使ってみたい)
  • 質問
    • ローカルdbとサーバdbのデータの衝突があった場合どうする?
      • アプリによって解決方法が違う。
      • そこはalexingの責任範囲外
    • 莫大な量のデータのビューイングはどうする?
      • 部分的な同期
      • ローカルdbをキャッシュとして使う

Canvasチュートリアル

羽田野太巳さん 有限会社futomi

スライドはこちら

HTML5 3Days Tech Talk 2009-10 Canvas Prasentation

Canvasとは
  • ウェブページに図を描く
  • canvas要素にapiが用意されている
  • jsから使う
CanvasとSVGとの違い
  • canvas
    • js使う
    • 描いた図を個別認識できない
    • 描画は高速
    • ピクセス操作可能
  • SVG
    • XMLで図を表現
    • jsから各要素にアクセス可能
    • 要素が多すぎると重い
    • ピクセス操作不可
デモ
得意/苦手
  • 得意
    • 個々のピクセルを扱う描画
  • 苦手
    • ウィジェット
      • canvasは絵をかきっぱなし
      • ボタンとかは認識できない
      • 絵のところだけをcanvas使おう
実装状況
マークアップをhtml5にすべき?
  • ブラウザがサポートしてれば(標準非準拠だけど)動作する

この辺で力つきる。詳しくはスライドで。

canvasのコンテキスト
  • コンテキストを取得
  • コンテキストを通じて絵を描く
パス
  • パスで一筆書きで図形を書く
  • 四角形を書くときは、
  • 宣言
  • 書きはじめの場所を指定
  • 終点を指定*3
  • パスを閉じる
  • 描画する
  • 座標系は普通の画像処理と同じ。(左上原点)
円弧
  • arc()
  • arcTo()
    • まだsafari, chromeでしか動かない
  • ベジェ曲線
    • bezierCurveTo
    • quadraticCurveTo
  • 矩形
    • rect
stroke()とfill()
  • 線を引くのはstroke()
  • 塗りつぶすのはfill()
  • デフォルトは黒
  • fillstyle, strokeStyle
アルファチャンネル
  • 半透明
  • fillstyleのrgba
  • globalAplpha = 0.5 (デフォルトは1, 0は透明)
テキスト
  • ビットマップ
ImageDataオブジェクト
  • rgba(4 channel)
  • デプスは256
質問
  • クリッカブルな領域の指定は可能?
    • canvasだけではできない
    • 上にdivかぶせるなど
  • アニメーション、ダブルバッファリングやちらつき防止機能はある?
    • サポートなし
    • 経験則からは、よほどのことをしない限りちらつきはでない
    • ブラウザがバッファリングしてくれてる?アンチエイリアスかけてくれてる?
  • デバッグツールやオーサリングツールは?
    • 海外に一個あるらしい
    • 日本では聴いたことなし
  • マンデルブロ集合のデモ。workersでどう描画しているか。(domにアクセスできないから)
    • 計算結果を全部配列につめこんでmessageで渡すという泥臭い方法

Dynamic Programming: From novice to advanced 続き

前回(Dynamic Programming: From novice to advanced - フリーフォーム フリークアウト)に引き続き、TopCoderのDPのチュートリアルを読んでいます。

Dynamic Programming: From novice to advanced

Intermediate

前章の内容から少し発展。2次元の問題にどう取り組むかです。stateの保存を2次元配列などにするだけで、あとの考え方はほぼ同じです。

練習問題