27 November 2009

HTML5 TechTalk #2に行ってきた

前回に引き続き,html5-developers-jp主催の,HTML5 TechTalk #2 へ行ってきました.

Google Docs - create and edit documents online, for free.

「いま」を見つけよう

USTREAM: html5-developers-jp: "html5-developers-jp" is a community for HTML5 developers in Japan.Events of that community will be bloadcasted on this chan...


Web Forms 2 で healthy living!

最初はOperaのDanielさん.内容は,Web Form2で,開発にかかるストレスを減らし,健康的な生活をしよう!というものでした.印象としては,Web Form2は非常に便利そう.ただし細かい部分はまだ.特にどこまでをブラウザでやり,どこからをjsに任せるかがまだ議論中という印象でした.

スライドはこちら.

http://people.opera.com/danield/html5/forms/

以下メモです.

  • 従来
    • developer
      • design <-> usability のジレンマ
      • 時間がかかる(カップラーメン生活)
    • user
      • 見た目に統一性なし(メニューの位置とか)
  • ストレス
  • healthyじゃない!
  • XForms Basic
  • Web Forms 2.0 (Opera実装)
  • HTML5 Forms
  • input要素
  • typeがいろいろ
    • number
    • range
    • url
    • email
    • data
    • month
    • week
    • time
    • datetime
    • datetime-local
    • search
    • color
    • tel
  • 当然cssで指定可能
  • 旧ブラウザではtextになる
    • サーバでのチェックは必須
  • requireなフィールドや値のバリデーションは,ブラウザが行って,エラーメッセージもだしてくれる
  • people.opera.com/danield/html5/forms-demo_ja.html
  • people.opera.com/danield/css3/text-shadow/
  • ブラウザの対応の判定方法(要素)
// colorの対応をチェック
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";
// Modernizr の使い方(modernizr.com)
if (!Modernizr.inputtypes.date) {
// 対応していない場合
}
  • ブラウザの対応の判定方法(属性)
// autofocus 属性の判定
var i = document.createElement('input');
return 'autofocus' in i;
  • 開発者はhealthyに!
  • 質疑応答
    • type=colorの対応はまだ
    • 表示(formのui)の国際化はブラウザベンダの責任
    • type=date のポップアップは,まだあまりcssからいじれない
    • :invalid 疑似クラス
    • 複数エラーがあっても,エラーメッセージはひとつ.operaもwebkitも
    • validationのメッセージ,今はカスタマイズはできない,国際化はしている
    • validationが走るタイミング.jsから任意のタイミングでvalidationをかける事は可能か.まだ決まってない

HTML5 Show Case

HTML5.jp管理人の羽田野さん.内容はHTML5関係のクールなデモの紹介.

スライドはこちら

http://docs.google.com/present/view?id=0ATqZea7ST5XQZGY2NjNkYjNfNjQ5MzV0aHhkNw

以下メモです.

  • HTML5 Canvas and Audio Experiment by 9elements
  • Movement tracker by Paul Rouget (mozilla)
  • Subtitles by Paul Rouget (mozilla)

HTML5 Canvas and Audio Experiment by 9elements

http://9elements.com/io/projects/html5/canvas/

粒子が音楽に合わせて画面上をとびまわる.クリックするとtweetを表示.

  • HTML
    • だいじなのはこれだけ
<canvas id="theapt" width="100" height="100">canvas>

<div id="tweet">LOADINGdiv>

<div id="stuff">
    <audio id="audio">
        Your browser does not support ... 
    audio>
div>
  • canvasの実装チェック
    • Modernizr
  • Audioコーデック
    • Ogg-vorbis - fx, chrome
    • MP3 - Safari
  • canPlayType() で判定.返り値は文字列(maybeとか),これはhtml5標準
var canPlayType = $('#audio')[0].canPlayType("audio/ogg");
if(canPlayType.match(/maybe|probably/i)) {
     $('#audio').attr('src', 'thankyou.ogg');
} else {
     $('#audio').attr('src', 'thankyou.mp3');
}
  • 粒子の準備
var numParticles = 100;

var pixels = [];
for(i = 0; i{
    pixels[i] = {
        // 座標、サイズ、色、角度などを
        // ランダムにセット。
    };
    ...
}
  • 移動タイプが5種類.
    • 切り替えタイミングは事前定義.
      • しかも音楽に合わせてミリ秒で手打ちしてる.
  • 粒子の描画はProsessing.js
Movement tracker by Paul Rouget

http://people.mozilla.com/~prouget/demos/tracker/tracker.xhtml

jsでvideoの動体検出

<video id="v1" src="video.ogv"/>
<canvas id="c0" width="1" height="1"/>
<canvas id="c1" width="100" height="100"/>
<br/>
<canvas id="c2" width="1" height="1"/>
  • 3つのcanvasはそれぞれメニューや,動画本体!に使っている
    • videoじゃなくてcanvasで動画表示してた
  • setTimeout()でアニメーションのフレームを既定
  • ビデオフレームをcanvasに描く
this.outputCtx.drawImage(
    this.video,
    x, y,
    this.video.workWidth, this.video.workHeight
);
  • drawImage()でビデオから画をもってくる
  • 動きの検知
    • 計算はworker
    • 結果を矩形でdraw
Subtitles by Paul Rouget

http://people.mozilla.com/~prouget/demos/srt/index2.xhtml

字幕表示

  • 字幕ファイルはこんなフォーマット
time
script

time
script
  • XHRで字幕ファイル取得
  • パース
  • video要素にtimeupdateイベントリスナをセットして,video.currentTimeを取得
  • 現在時間に対する現在の字幕を探す
  • innerHTML.を使って、字幕用の div 要素のコンテンツを更新
その他のデモ

no title

no title

加速度センサの情報を使って,画面が揺れたりロゴが動いたりする.macbookをゆらしてデモしていました.このセンサはHDDを保護するために,衝撃や落下を検知するためのセンサらしいです.

Mac ノートブック:緊急モーションセンサーについて - Apple サポート



font dragr | A HTML5 web app for testing custom fonts | The CSS Ninja

フォントファイルをブラウザにドラッグアンドドロップして,ページ内のフォントを変更するデモ.この間のFirefox Developers Conferenceでも紹介されてました.


その他のリンク集