Please Sleep

From notes on my laptop

27 Nov 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でも紹介されてました．


その他のリンク集