お祭り告知:HTML5 3Days Tech Talk & Hackathon開催決定！ - html5-developers-jp | Google グループ
http://groups.google.co.jp/group/html5-developers-jp/browse_thread/thread/398856a044c2174d#
Googleの会議室「花宴」が満員になってました。40人くらいでしょうか。
講演ありがとうございました。＞白石さん、羽田野さん
会議室提供ありがとうございました。＞Googleさん
canvasのレンダリングはWindowsの描画APIのOnPaintで書くようなものと似ているので、低レベルだけに早いよなあ、と思います。手を動かすのをさぼってきたので、久しぶりに取り組んでみようか、という感じで参加してきました。
体調が許せば土曜日のハッカソンに参加して、TracWikiSlides 系のアプリをもうちょっとゴニョゴニョしたいなあと思っています。
== HTML5 API ==
* applicationCache
* クライアントサイドにキャッシュする
* マニフェストファイルでバージョンをコントロール
* Google Gear -> HTML5
* applicationCache.addeventListner ... でイベントとれる
* Web Database
* ブラウザ組み込みのRDB
* SQLをフルに使える
* オフラインWebアプリの中核テクノロジー
* ドメインごとに領域が分かれる
* 他のドメインにアクセスはできない
* １つのドメインに複数のデータベースを作れる
* データベースには複数のテーブル/ビュー
* 非同期APIと同期API
* 非同期: SQL処理がバックグラウンドなのでUI固まらない
* 結果はコールバック関数で拾うのでコーディングは面倒
{{{
var db = open database(...)
db.transaction(function(tc) {
tx.executeSQL ( "...." [...] {
function onsuccess() {
}
}
}
}}}
* Web Strage
* Key Value ストレージ
* Local storage: セッション期間無制限
* Session Storage: 一時的領域。ウィンドウが開いている間だけ有効
{{{
localStorage.setItem( "key", "value" );
var val = localstorage.getItem("key");
}}}
* Web Workers
* バックグラウンドで動作するスレッド
* javaScript動作でUI固まる問題を回避
* ワーカスレッド注意
* 変数を共有できない
* window, document ですらダメなので注意
* ワーカ間のデータ共有にはメッセージングAPIを用いる
* create
* postMessage : ワーカに送る
* onmessage: ワーカからのメッセージの受信ハンドラ
* manipulate: DOM操作
* デバッガで追えない
* メッセージの種類が増えると 巨大な switch case に
* つかってみてね
* fakeworker.js
* AlexService
== HTML5 時代のWebアプリアーキテクテャ ==
* これまでの作り方ではダメだ。
* これまではロジックの大半がサーバにあった。
* クライアント内で処理が完結している必要がある。
* ローカルDBとのやり取りでアプリを組む
* サーバとのDB同期はワーカで行う
* => Open Web Architectureとよぶ
* Open Web Architecture のメリット
* オフラインでも動作
* クライアント内で完結するので早い
* ユーザビリティがよい
* 差分アップロード・ダウンロードのタイミングを制御可能
* => スマートフォン、ネットブック向けに最適化できる。
* デスクトップアプリとあんましかわんない
* ARなど、クライアント側で生成されるデータが多い場合にも便利。
* Open Web Architecture の問題点
* ノウハウの蓄積が少なすぎる
* Google Gears でアプリを作った人が少ない
* 技術的障壁
* DBスキーマ設計
* 差分アップロード/ダウンロード
* データ変更が衝突したら
* オンライン/オフライン状態
* ローカルDBがある/ない/あるけど容量いっぱい
* そんなあなたに Alexing
* クラウド前提のフレームワーク
* 準備作業は、クラウド上でデータモデルを定義するだけ
* アノテーション @OfflineCapable をつけるだけ！
* そうすると、クライアントでも操作可能になる
== Canvas チュートリアル ==
* Canvasさわったことないひとむけ
* Canvasの特徴
* Canvasは書きっぱなし。書いたら触れない
* ピクセル単位でいじれるよ
* IE以外は対応してる
* IEも ExplorercCnvas(excanvas.js) があるよ => canvasをvmlに変換してる
* <!--[if IE]><script type="text/hjavascript" src="excanvas.js"></script><[end IE]-->
* 100%エミュレートできてる訳じゃないよ。
* Flash, silverlight での実装例もあるらしい
* XHTML1.0/HTML4.01 でも動くよ
* マークアップのバージョン関係なし
* 使い方
* var ctx = canvas.getContext();
* このデバイスコンテキスト変数に対して書く
* パスをつかってかく。
* ctx.beginPath();
* ctx.moveTo(20,20);
* ctx.lineTo(120,120);
* ctx.closePath(); //線を直線で閉じる
* ctx.stroke(); //描画！
* 座標系
* 左上が (0,0)
* 他のメソッド
* arc: 中心/半径から円弧 -> startAngleとendAngleはラジアンなので Math.PI 使って
* arcTo: Pathっぽく円弧かける。WebKit系でしか実装されてない
* bazieCurveTo: ベジェ
* quadratioCurveTo: ２次ベジェ
* rect: 矩形
* stroke と fill
* ctx.fill() で塗りつぶす
* 色指定
* ctx.strokeStyle //線のスタイル
* ctx.fillStyle //塗り潰しのスタイル
* 色はCSS指定の色で rgb, rgba(半透明) もつかえる
* ctx.globalAlpha // その後は全部そのアルファ値になる
* テキスト
* 描かれたテキストはコピーできないので注意
* Safari, Chrome, FireFoxは対応。excanvas.jsは未対応
* maxWidthはFirefoxだけ実装
* strokeStyleはフォントの枠線。
* fillStyleはフォント内の塗り。
* 線の接続
* ラインキャップ: ctx.lineCap = ( butt | round | square ) //線の端の処理
* 接続 : ctx.lineJoin = ( bevel | round | miter )
* miterはデフォルト。線分の端をとんがって。roundは丸める。bevelはカットする
* miterLimit: マイターを途中でカットする
* 線幅 : ctx.
* 画像を組み込む
* ctx.drawImage
* 引数によって画像のトリミング表示も可能
* メソッドを使うときには非同期に注意
{{{
image.src = xxxx
image.onload = function ()
ctx.drawImage(image)
}
}}}
* 変換マトリックス
* ctx.transform(m11, m12, m21, m22, dx, dy )
* 線形写像で画像をねじる
* 「プログラミングのための線形代数」がわかりやすいよ！絵で描いてある。
* ピクセル操作
* ctx.createImageData: イメージデータを新規作成
* ctx.getImageData: canvasにあるイメージデータを取得
* ctx.putImageData: canvasにイメージデータを書き込む
* ImageDataの構造
{{{
{
width: 300,
height: 200
data: [0,0,0,255,0,0,0,255 ...]
}
}}}
* dataは横優先の配列
* 手で作っても動くけど手で作んない方がいいよ。
* ピクセルデータは Number型にして突っ込むべし。parseInt使え(FireFox向け)。
* エッジ検出サンプル
* アルゴリズムを自分で書けば何でもできるぜ。
* その他
* グラデーション
* シャドウ
* ...
* アニメーション
* アニメーション機能はないけど、パラパラ漫画でかけるよ
* 低レベル描画API的なもの
