4859.html

[edit]

HTML5 3Days Tech Talk †

HTML5 3Days Tech Talk の勉強会にいってきました。

2009年10月1日 19:00～、2009年10月2日 19:00～で、私は2日目に行きました。
渋谷のGoogle 東京オフィスです。

↑

[edit]

目次 †

HTML5 3Days Tech Talk
始まる前に
では、はじまりはじまり～
オフラインWebアプリ
- HTML5について、オフラインアプリに関して。
- アプリケーションキャッシュ
- Web Database
- Web Strage
- Web Workers (ワーカ)
- HTML5時代のwebアプリ
- まとめ
Canvasチュートリアル
- Canvasとは
- canvasの使い方
- 描画とちらつき
- つかいどこ
- まとめ

↑

[edit]

始まる前に †

実は HTML5 の仕様はぜんぜんノーチェックのまま行きました^^;
「オフラインアプリケーション」の文字があったので、その辺をチェックしたい感じです。

行く直前に HTML5 日本語化のサイトを確認してからいきました

HTML5.JP
http://www.html5.jp/trans/

下記のように、なにやらソレっぽいAPIが見つかってわくわくです。

WAHTWG - HTML5 Working Draft 『4.11 クライアント側のデータベースストレージ』
http://www.html5.jp/trans/whatwg_html5_4_11.html

WAHTWG - HTML5 Working Draft 『4.10 クライアント側のキー/値ペアーのセッションと永続ストレージ』
http://www.html5.jp/trans/whatwg_html5_4_10.html

↑

[edit]

では、はじまりはじまり～ †

勉強会は二部構成です。

オフラインWebアプリ by 白石俊平氏
- gearsの本を書いたヒトらしい
- マイコミで HTML5 の記事を書かれていたらしい
  http://ayuta.co.jp/html5-samples/index.html

Canvasチュートリアル by 羽田野太巳氏
- 上記、HTML5.JP の運営者

以下、「タ：」は私のコメントです。

↑

[edit]

オフラインWebアプリ †

「HTML5」での検索は
- 韓国と日本が多い
  タ：韓国はアクセシビリティでも活性化しているとか。そういうのも関係してるかな?

オフラインWebアプリ
- Gears開発者ってほとんどない
- 世界的にも少ないんだって。
  タ：Remember The Milk くらいなら使ったことあるけど。
- 分析1：ニーズがない?!
  タ：ヽ(´▽`)ノうぇーい。携帯でgears使えないシナー
- 分析2：ブラウザプラグインだったから
- 最近は変わりつつある
  - ニーズとして、スマートフォン、ネットブック的な端末がある
    タ：むぅ。i-phoneもAndroidも専用の環境が必要なので、楽に開発するには docomo から Adobe AIR がでるのを待つしかないかな。

HTML5のオフラインアプリに関して。

↑

[edit]

アプリケーションキャッシュ †

HTMLファイルとかをローカルに落としてくるもの。

やりかた：
- キャッシュマニフェストファイルを作る
  →必要なファイルを羅列しておくとキャッシュされる
  →text/cache-minifestを指定して↓こうする
```
<html manifest="hello1.manifest">
```

ブラウザごとに若干異なるらしい
- FireFox は「キャッシュしますか？」と先に聞いてくれるらしい

つかいどこ：
- 開発中はイラナイ子。
  →HTMLを変えてもmanifestが変わらないと内容が変わらないからね。

応用：
- JavaScript で manifest の差分を確認する
  →サンプル：http://ayuta.co.jp/html5-samples/appcache/hello/hello.html
- APIを使う。 applicationCache.updateメソッド
  →applicationCache.addEventListenerで、updateready イベントを取得して、更新する?
  詳細はマイコミのサンプル参照とのこと
  http://journal.mycom.co.jp/special/2009/html5-2/002.html

↑

[edit]

Web Database †

これ重要。
タ：はい

ドメインごとに領域が分かれている
- 質：サブドメインは? JavaScriptのクロスドメイン制約と同じかな?

API
- 非同期APIは、結果をコールバックで受ける
  タ：AIRと同じね。mixiアプリとも同じね。Deferredとか使うといいね。
- 同期APIは Web Workers の中でしか使えない

タ：関係ないけど、こういうのできるとサイトを保存するときに「メニュー」から「名前を付けて保存」とかってできない?
　DBごとローカルにコピーとか? アレ? DBはローカルにあるから動くのか?
　いや、むりか。ドメインが違う。

↑

[edit]

Web Strage †

key = value 型のデータストレージ
- cookieより簡単！
  タ：Flashの SharedObject ね。

つかいかた：

localStrage.key = "value"; // 例：localStrage.foo = "var";

種別が2つある
- LocalStrage: 無制限
- SessionStrage: ウィンドウごと。ウィンドウ閉じたら消える。
  タ：ウィンドウ? ブラウザではなく?

↑

[edit]

Web Workers (ワーカ) †

バックグラウンドで動作する
- メリット: 重い処理を実行させてもブラウザが固まらない
  タ：羽田野氏のマンデルブロ集合のサンプルをワーカを使ったヤツを見る限り、バックグラウンドにすると重いかも? (5倍くらい?)
  　CPUがあまり使えなくなるのかも??←あてずっぽうです

つかいどこ：
- JavaScriptで重い処理をする場合に利用する

変数を共有できないらしい。
- DOMを触れないらしい
  →prototype.jsとかつかえないらしい…

ワーカ同士のデータ共有はAPIを使う

問題点：
- 現状デバッガで追えない(;; ログも吐けない

fakeworkers.jsってのを作ったよ。Web Workersじゃないけど。

AlexServiceというのも作ったよ。Javaです。
http://code.google.com/p/alexframework/wiki/AlexService_ja

↑

[edit]

HTML5時代のwebアプリ †

オフラインアプリの特徴
- クライアント側で処理を完結する必要がある
- サーバとの差分が出る
- クライアント処理が重いのでworkerを使う

メリット：
- オフラインで動く。高速です。
  タ：gitっぽいなー。いやポイじゃないゎな。まさにgit。

つかいどこ：
タ：↓このブログ参照で。AIRがApolloと呼ばれていたころの記事ですが^^;
▼Adobe Apollo：いよいよオンラインとデスクトップが本格的につながるかも？
http://www.ark-web.jp/blog/archives/2007/03/adobe_apollo.html
タ：その他、オフラインアプリは、携帯のFlash Liteアプリくらい。
▼モバＨＡＲＵとは、どういうものか。どうして作ったか。
http://pinoxox.com/gura/mova_haru/about/why_develop_it.html

問題点：ノウハウが少ない
- DBのバージョンが変わってスキーマを変更せねばとか、サーバーとの情報差分とか。
  タ：ノウハウが少ないのはしょうがない。AIRにしよう！(何

対策：Alexing Framework というのを作ったよ
- クラウド向けRESTfulライブラリと HTML4 O/Rマッパーライブラリ
- クラウド側はJavaで動くよ。クライアント側はjavascriptで、クライアント側はalexingが自動的に作っているんだ。
  タ：関心は薄いげ^^; ほらAIRで(ry

質問：Alexingでオフライン同期のコンフリクトはどう解決しますか?
- 衝突の有無だけ。
質問：サーバーのデータのviewing方法は?
- クラウドのデータをクライアントでどうやって持たすか。
- サイズとか次第? 部分的に取ってくるべき。
  タ：そだね。
- ページング的なモノ。サーバから得た値をクライアントにキャッシュする
  タ：ふむふむ。データが古かったら削除。みたいな?

↑

[edit]

まとめ †

AIRみたいなことがHTMLベースでできるようになるのが HTML5時代のwebアプリ。
HTML標準でサポートすれば、開発者層もグッと増え、デファクトになる可能性が高い。つまり、いま覚えておくのは得策かもしれない。

とりあえず、白石さんのマイコミの記事をみて勉強するところから始めよう！

詳解! HTML 5と関連APIの最新動向 - 新タグ&API編
http://journal.mycom.co.jp/special/2009/html5-1/

↑

[edit]

Canvasチュートリアル †

Canvasの詳細は実はあまり聞いてませんでした^^;
もう少し、Canvasのメリットをあらかじめ知っておくと興味持てたかもしれません。
たとえば、↓こういうサンプルを HTML5.JP で提供しています。グラフ描画とかはCanavsの魅力ですね。

Canvasを使った Javascript ライブラリー
http://www.html5.jp/library/index.html

Canvasで、どういうことができるのか、というポイントだけ抑えときました。

↑

[edit]

Canvasとは †

図を描く
- HTML5でcanvas要素で API を提供している
- 注意：描いたら描きっぱなし
  - ただし、描画は高速
    タ：全クリアしてから描画を繰り返してアニメーションする?

ピクセルを描ける
→カラーパレットとか、写真編集とか、マンデルブロ集合とか

ブラウザーの実装状況
- IE以外は Canvas が動く
- IEは ExplorerCanvas が動く

↑

[edit]

canvasの使い方 †

moveToとかlineToとかを使う。
タ：あれ？Flashと同じかー。

半透明の扱いも可能
タ：半透明が重さに与える影響は不明。

外部イメージを取ってきて編集とかできる
タ：なんだ！全部1から描画するんじゃないのか！編集アプリ的な使い方の方が多そうなきがする。

行列計算ができる
タ：3Dとかに使えるね

↑

[edit]

描画とチラツキ †

その昔、DirectXのDirectDraw4とか勉強していた時の描画は
描画→全削除→描画→全削除→…という繰り返しでした。

結果、画像がデカいとディスプレイの水平同期線でチラチラするでしょ?
対策として、ダブルバッファリングというのがありまして。
実描画領域と描画領域Aと描画領域Bがあって、
現在Aを実描画領域で表示している時は、次に表示する内容はBに予め描画しておいて、
AからBへの再描画は実描画領域をFlip(差し替え)するだけ。これにより高速に表示されチラツキ防止となる。
→これがダブルバッファリング…だったはず^^;;