HTML5 3Days TechTalk に行ってきた
HTML5-Developers-jp主催のHTML5 3Days というイベントに行き、話を聞いてきました。
HTML5 3Days 2009へご参加ください！ - html5-developers-jp | Google グループ
公式ハッシュタグは#html5_dev_jpです。
プレゼンもわかりやすく、内容も興味深いもので、非常に面白かったです。特にクライアントサイドでかなりのことができてしまうため、webアプリのアーキテクチャ、作り方が今後がらっとかわってしまう可能性はあります。
HTML5は最近盛り上がっているとはいえ、まだまだ策定中でブラウザ実装もまちまちです。一般的にひろく使われるまでにはまだ数年かかると思います。また開発のノウハウもほぼたまっていない状態です。まだまだすべきこと、やれることがたくさんある領域（そしてその割には今後広まる可能性が高い領域）なので、今のうちからコミットしておく価値が非常にあると思います。わくわくしますね。
以下メモです。長いんですが、それぞれのスライドを見てもらった方がわかりやすいです。スライドに入っていない内容は質問の部分くらいだと思います…。
HTML5で作るオフラインWebアプリケーション
白石俊平さん 株式会社あゆた
スライドはこちら
イントロ
- html5-dev-jp
- 現在1304人
- 日本、韓国で盛り上がり
- なぜか目黒の人口が多い
オフラインWebアプリとは
- オフラインでも動作するWebアプリ
- 2007, Google Gearsで脚光
- HTML5にはGearsからの影響も
- 実装例あまり多くない
- docs, gmal, reader, rtm, ...
- 普及してない原因
- ニーズが顕在化できていなかった。2007年当時、ネット常時接続という形態が多数
- ブラウザプラグインというアプローチが普及を阻害
- 開発の知識を持った開発者の付属
- ニーズ顕在化->モバイル（オフラインが多い）が普及
- ブラウザプラグイン->ブラウザ自身が実装
- 知識人材の不足->標準化されるから人口増？
HTML5のオフラインアプリ関連のAPI
- アプリケーションキャッシュ
- Web Database
- Web Storage
- 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をキャッシュとして使う
- ローカルdbとサーバdbのデータの衝突があった場合どうする？
Canvasチュートリアル
羽田野太巳さん 有限会社futomi
スライドはこちら
HTML5 3Days Tech Talk 2009-10 Canvas Prasentation
Canvasとは
- ウェブページに図を描く
- canvas要素にapiが用意されている
- jsから使う
CanvasとSVGとの違い
- canvas
- js使う
- 描いた図を個別認識できない
- 描画は高速
- ピクセス操作可能
- SVG
- XMLで図を表現
- jsから各要素にアクセス可能
- 要素が多すぎると重い
- ピクセス操作不可
デモ
- Mandelbrot set
- 計算が複雑
- ベンチマーキングで使われる
- エッジ検出
得意/苦手
- 得意
- 個々のピクセルを扱う描画
- 苦手
- ウィジェット
- canvasは絵をかきっぱなし
- ボタンとかは認識できない
- 絵のところだけをcanvas使おう
- ウィジェット
実装状況
- ie以外はok
- 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かぶせるなど
- アニメーション、ダブルバッファリングやちらつき防止機能はある？
- サポートなし
- 経験則からは、よほどのことをしない限りちらつきはでない
- ブラウザがバッファリングしてくれてる？アンチエイリアスかけてくれてる？
- デバッグツールやオーサリングツールは？
- 海外に一個あるらしい
- 日本では聴いたことなし
- オフラインアプリを作る際のuiにcanvasが使えるから重要ではないか。
- gmailのhtml5実装（参考になるのでは？）
- マンデルブロ集合のデモ。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次元配列などにするだけで、あとの考え方はほぼ同じです。