「HTML5 3Days Tech Talk 1」聴講メモ

行ってきた。先日の招待講演「HTML5 の過去、現在、未来」聴講メモ - 討論妄言録で文書モデルなどについて、今日のこれで API 周りを。ホットなところは、一通り聴いたことになるのかな。基本的には、あちこちで読んだりしていたけど、実際に使ってみての話は参考になるね。

個人的感想などは [かんそう] 形式で記述。一部、誤字の修正と返信関係への手入れあり。

イベント参加月間最後かな

08:03:08 nsiena: えぇと。今日は、あれとこれを済ませて。午後の出張の準備をして。出張しごと終わったら、その足で HTML5 3Days Tech Talk <http://bit.ly/4lAJV5> に行く、っと。
08:10:08 nsiena: HTML5 3Days Tech Talk は、参加者たくさんいるから、TL につぶやく人も多いに違いない。API とかデモとか中心だろうから、文章にするのもあれだし。期待する人もいないだろうし。というわけで、今日は聴く方に集中しよう。そうしよう。
| 09:38:09 bohnen: @nsiena があん、明日の方に申し込んじゃったですよ(T ^ T)
|| 11:20:11 nsiena: @bohnen おっと、行く予定でしたか。あんなに(謎)、木曜の夜ってアピールしてたのに ^^; 会えないのは残念ですにゃー。
08:17:08 nsiena: イベント参加月間は今日が最後だなぁ。しばらくはそれどころじゃなくなる予定。

開場前のハッシュタグ探し

18:06:18 nsiena: おしごとおしまい。がっくり、しょぼん。/ 軽くおひるごはんした。気を取り直して、HTML5 3Days の会場に向かおう。
18:55:18 nsiena: HTML5 3Days の会場に着いた。ちょっと暑いかも。 #hashtag ぷりーず。
19:00:19 nsiena: さすがに人が多い。これだけいると、完全にお客様な状態になっちゃうな。
19:07:19 nsiena: みつけた。ハッシュタグは #html5_dev_jp 。

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

概要

19:13:19 nsiena: 「HTML5で作るオフライン Web アプリケーション」: アプリキャッシュ, Web {Database,Storagr,Workers} 辺りの紹介と、それらを使うノウハウっぽいもの。 #html5_dev_jp
19:15:19 nsiena: 「日本と観国韓国の盛り上がりが他国に比べて異常。Google Trends にて。 #html5_dev_jp
19:18:19 nsiena: 「Gears オフラインウェブアプリは普及していない要因: 1) ニーズが顕在化してなかった, 2) ブラウザプラグインが障壁, 3) 開発人材不足 #html5_dev_jp
- 19:27:19 nsiena: 送信ミス: 「普及を見込める要因: 1') モバイル端末の普及, 2') ブラウザネイティブな実装, 3') 標準化による開発者増 : "オープンウェブプラットフォーム" だ #html5_dev_jp

HTML5 時代のウェブアプリアーキテクチャ: Open Web Architecture

19:54:19 nsiena: 「API の紹介は終了。以下、HTML5 時代のウェブアプリアーキテクチャ: (A) オフライン動作可能, (B) クライアント内で処理を完結, (C) 処理結果の永続化を含めて多くのロジックをクライアント上で実現する #html5_dev_jp
19:56:19 nsiena: いつぞや議論していた、RESTful ウェブサービスクライアントの話に通じるところがある。ある意味で自然な流れとも言える。 #rws
19:58:19 nsiena: 「(A') ネットに依存せずに動作可能, (B') 高速で省リソース (良好なユーザビリティ), (C') 差分アップロード/ダウンロードのタイミング制御可能 (回線やバッテリの状況に合わせられる) #html5_dev_jp
20:00:20 nsiena: 「可能性: ~~ア不ライン~~オフラインのウェブ利用, デスクトップアプリの置き換え, 拡張現実アプリでも応用, …… #html5_dev_jp
20:03:20 nsiena: 「Open Web Architecture 採用には, ノウハウの蓄積が少なすぎるのが最大の問題。DB 付きクライアントを含めた設計手法, 差分通信の設計・実装, クライアント状態に応じた処理の切替え, DB未実装のクライアントや容量不足時の対処, データ変更の衝突, ……
20:05:20 nsiena: 「Alexing Framework 作ってるよ。簡単に作れるようにするのが目標。クラウド上でデータモデルを定義するだけで, クライアントがデータモデルを操作でき、オフラインでも編集可能に! #html5_dev_jp
20:10:20 nsiena: デモなぅ。「サーバで採番される ID はオフラインでは NULL に。サーバを再起動して同期すると反映されて、ID も採番される」[ほうほう。なかなか良く出来てる印象。] #html5_dev_jp

質疑応答

20:15:20 nsiena: 一通り終了。Q&A に。「Q. オンラインかオフラインかをどう判別する? A. window.navigator のプロパティやイベントなど。でも、ブラウザがそう判断した後なので、確実ではない。」 #html5_dev_jp
20:17:20 nsiena: 「Q. シンクライアント化の流れからファットクライアントに移るように見えるが、リソースの少ない環境で動くものなのか? ケータイでも行けそうか? A. リソースは確かに消費する。重たいので、ネイティブにはかなわない。移植しやすさなどで勝負か。 #html5_dev_jp
20:21:20 nsiena: 「Q. Alexing の同期アルゴリズムは? 高速化の手法などは? 相手によっては索引を持ってたりするのを使うのか? A. 今は、アップロードはログをジャーナル化している。ダウンロードは難しい。全部は無理な事もある。データ特性による。 #html5_dev_jp
20:21:20 nsiena: 「(続) Q. 分散コンピューティングでのキューイングみたいな問題が? A. Alexing で隠蔽したい! #html5_dev_jp
20:25:20 nsiena: 「Q. セッションストレージのセッションって? A. セッションストレージは、ドメインごとに用意され、複数のウィンドウからアクセスできる。全ての関連ウィンドウが消えたら、消去される (アクセスできなくなる)。 #html5_dev_jp
20:28:20 nsiena: 「Q. データをサーバと同期できるという話だが、JS で? 電力残量などが見えないとできないけどできそう? A. 前者は yes。後者は現状では無理。UI で対処したり。将来的にできるようになるかも? #html5_dev_jp

休憩

20:29:20 nsiena: 休憩。 #html5_dev_jp
20:29:20 nsiena: あれ。聴くのに専念する宣言したのに、なんで打ち込んでるんだろぅ…… --;? #html5_dev_jp

「Canvas チュートリアル」

canvas 要素の概要

20:33:20 nsiena: 「Canvas チュートリアル: 抽象的な話でなく、開発者向けにどんな手段があるのか頭に入れられるようにするのが話の目標。途中からコードだらけになるよ。」 [予想通り、メモるの無理そうだ ^^;] #html5_dev_jp
20:37:20 nsiena: 「Canvas: 図を描くための要素。CanvasRendringContext2D API が用意されてる。 #html5_dev_jp
20:38:20 nsiena: Canvas: JS で描画, 描いた後で個別に認識不可能, 描画は高速, ピクセル操作可能。SVG: XML形式, JS で要素ごとに操作可能, 要素がお多すぎると思い, ピクセル操作不可能。」 [つまるところ、ビットマップ vs ベクター?] #html5_dev_jp
20:42:20 nsiena: 「Canvas はウィジットを作るのは苦手。HTML で実現して部分的に描くか、SVG で全体を作った方がいい。 #html5_dev_jp
20:43:20 nsiena: 「メジャーブラウザ中で IE のみ未実装。でも、ExplorerCanvas <http://excanvas.sourceforge.net/> が部分的に実装。VML で実現。 #html5_dev_jp
20:45:20 nsiena: 「HTML5 でなく、XHTML1.0 や HTML4.01 でも動いちゃうよ。妥当文書ではなくなるけれど。楽しもうよ。 #html5_dev_jp

canvasでの描画方法

20:47:20 nsiena: この辺からコード中心かな。「canvas 要素に id を個別に付けた方がいろいろ便利。JS で、描画前に canvas 要素のコンテキストを取得。ここで id 属性を利用。 #html5_dev_jp
20:49:20 nsiena: 「まず canvas 上にパスを作成して、図形を定義。beginPAth(), moveTo(), lineTo, closePath()。最後に storoke() で描画。 #html5_dev_jp
20:51:20 nsiena: 「左上が原点。x 軸は右方向。y 軸は下方向。ここから、描画メソッドのパレード。」 [省略する ^^;] #html5_dev_jp
20:57:20 nsiena: 「パス作成メソッド: 直線系, 円弧系, 三次/二次ベジェ曲線, 矩形。描画メソッド: 軌跡 storoke(), 塗り潰し fill()。描く前に {storoke,fill}Style プロパティに、 CSS の色リテラルを指定できる。 #html5_dev_jp
20:59:20 nsiena: 「canvas の描画コンテキスト。透過指定 globalAlpha プロパティがある。fillText() で、テキストもビットマップで描ける。文字の輪郭と文字色は {storoke,fill}Style プロパティで指定。 #html5_dev_jp
21:03:21 nsiena: 「線の端点のスタイル (lineCap)、接続スタイル (lineJoin)、マイター限界比率 (miterLimit) も!」 [細かいところでやけに高機能だな ^^;] #html5_dev_jp
21:06:21 nsiena: 「画像を重ね描画 drowImage()。トリミングもできるよ。JS の Image オブジェクトを作成しただけではだめで、ロードを待たなければならない。onload イベント。キャッシュを回避する工夫が必要。 #html5_dev_jp
21:08:21 nsiena: 「2次元画像の 3元数に対する変換行列でアフィン変換できる。線形代数を勉強してね。『プログラミングのための線形代数』(オーム社) をお薦め #html5_dev_jp
21:14:21 nsiena: 「ピクセル操作メソッド: {create,get,put}ImageData()。ImageData は、width, height, data (R,G,B,a ピクセル列) をプロパティとするオブジェクト。data を直接弄るのはお薦めしない。 #html5_dev_jp

デモ〜質疑応答

21:15:21 nsiena: 「デモ。お約束のマンデルブロ集合。2 秒程度で描けちゃう。拡大もできる。」 [速い……] #html5_dev_jp
21:18:21 nsiena: 「画像のエッジ抽出したり。アニメーションしている時計を、動くまま transform() で変形できたり。canvas はアニメーション用ではないので誤解なきよう。でも、高速なので、setTimeout() や setInterval() でパラパラアニメできちゃう。 #html5_dev_jp
21:19:21 nsiena: 「リファレンスサイトなどをいくつか。あとでウェブに公開する予定。以上でおしまい。 #html5_dev_jp
21:20:21 nsiena: 「Q. インタラクティブなアプリで、別スレッドで描画させたりできる? A. ワーカは描画できない。計算を別ワーカで行なうようにする。」 [DOM をいじれない、という制約から] #html5_dev_jp

しゅーりょー

21:22:21 nsiena: 「おしまい。ブログやつぃたぁに書いてね。」 [結局、いっぱい書いてしまった……。迷惑だったかも。] #html5_dev_jp
| 21:29:21 zakkas783: @nsiena 議題：しーなさんはホントに徹夜なのかについて超人すぎる…
22:53:22 nsiena: おうちついたー。あついよ、あついよ。今朝はあんなに涼しかったのに。しゃわるるるー。

イベント参加月間最後かな

開場前のハッシュタグ探し

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

概要

関連 API の紹介

HTML5 時代のウェブアプリアーキテクチャ: Open Web Architecture

質疑応答

休憩

「Canvas チュートリアル」

canvas 要素の概要

canvasでの描画方法

デモ〜質疑応答

しゅーりょー