##前説的な

  • 女性率高い？HTML5だから？
  • 白石俊平＠あゆた さん
  • トラックバックまでが勉強会です！
    • サイト見てください！

##デベロッパのためのHTML5入門

###自己紹介

  • html5-developers-jp 管理人
  • 株式会社あゆた 取締役
    • Gears のアプリ開発とかリッチクライアント開発とか

###HTML5ってなに？

  • HTML の最新版

  • 新要素盛りだくさん

  • 10月に最終ドラフトが出た

  • 勧告は 2022 年と言われている・・・・

  • 2つの仕様

    • マークアップ中心の仕様
    • ウェブアプリケーション用 API 中心の仕様
    • Gears 由来の API もある

  • HTML5 の基本

    • ファイルの拡張子，Content-type はこれまで通り
    • 先頭に空の DOCTYPE 宣言が必要
<!DOCTYPE html>
<html>
 <body>
  ...
 </body>
</html>
- ブラウザにできる最高のことをしてレンダリング仕様としてくれる
  • 新要素を使ったマークアップ

    • タグがいっぱい増える

      • 文書構造
      • 埋め込み要素
      • フォーム・ウェブアプリ
        • 日付とか色とか
      • インタラクティブ
        • プログレスバーとかメーターとかツールバーとか右クリックメニューとか
      • テキスト・その他

    • 使い方

      • セマンティックな意味合いを持つブロック要素が追加された
        • section / article / header / footer とか
      • section
        • アウトラインを構成する
        • div でアウトラインを区切っていた場合の代替
      • article
        • 独立した内容を保持
        • RSS で廃止しても言い内容を囲むのがいい
      • body / td も section を作る
      • ここのセクションは h1 とかももてる
      • 要するにマークアップのもともとの意味でのタグが追加された感じ
        • いままでは div でデザインの括りとしての区切りがあった
      • meta に charset が追加された
      • header > nav でサイトのナビゲーションメニュー
      • footer ページのフッター
      • section > article で記事内容

    • アウトラインが構成できる

      • セクションの入れ子構造
      • 目次がせいせいしやすくなる
        • 文書構造がマークアップで示されるので，プログラムで扱いやすくなる
          • いまは全部が div なので．そのタグの意味はわからない
          • 場所に意味がわかるので，プログラムで扱うときに操作しやすくなる
      • section > h1 で，アウトライン上のそのセクションの見出しを表現できたり

    • Canvas を使って自由にお絵書き！

      • 自由にお絵書きできるグラフィック要素
      • 動画まで描画でき自由に変形できる
<canvas id="canvas" width="200" height="100">
var ctx =$("canvas").getContext("2d"); // 2D 用の描画コンテキストを生成?

ctx.drawImage(image, 0, 0);
- ローディングのくるくる回るヤツを JavaScript で作ったデモ
  - MNG/GIF と違い止められる．JavaScript だから
  - WebKit の nightly build では 3D も使えるらしい

  • プラグインなしで動画を再生

    • 残念ながらコーデック・フォーマットが仕様に盛り込まれていない
      • 動画の形式はブラウザに依存してしまう

  • パワーアップしたフォーム要素

    • input の type が増えた
      • tel / search url /email / datetime / datetime-local / date / …
      • 全てデフォルトのコントロールがある
        • ブラウザ依存
        • いまは Opera のみ
      • required (必須) / pattern など
        • submit 時に自動的にチェックしてくれる
      • auto-complete
        • で指定して list=”???” で指定してやると， のリストが候補となる

  • ドラッグ・アンド・ドロップ API

    • もともと IE が持ってた API を標準化した
    • Explorer / Finder とシームレスに連携可能
      • アップロードするファイルの選択など

  • クロスドキュメントメッセージング

    • 異なるウィンドウ(document)間でのメッセージング

  • その他もろもろ

    • classList / getElementsByClassName
    • Microdata でよりセマンティックに意味が扱えるように

###Open Web Platform を支える API 郡

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

    • アプリケーションに必要なリソースをローカルにキャッシュするための仕組み
    • html に manifest 属性を追加すれば，指定されたファイルがキャッシュされる

  • Web Database

    • ブラウザがデータベースを持つ
    • SQL をフルに使える
    • ドメインごとに分かれている
      • インデックス・ビューも使えるそうだ
    • openDatabase(…)
      • 非同期型と同期型の API がある
        • 非同期型だと結果を全てコールバックで受けとることになる

  • Web Storage

    • ブラウザでストレージを持つことができる
    • 要するに KVS
      • localStorage.setItem / getItem
      • localStorage.hoge = “foo”
        • IE8 でも使える

  • Web Workers

    • バックグラウンドで動作する JavaScript スレッド

    • 長時間かかる処理を実行すると，ブラウザが固まってしまう．

    • バックグランドで処理をするように

    • 厳密なスレッドではなく，各スレッドは変数などを共有できない

    • window / document にはアクセスできない

    • ワーカ間のデータ共有にはメッセージングの API を用いる

      • worker.onmessage = function
      • postMessage()

    • Worker の処理をデバッガで往古とができない

      • いまのブラウザではできない
      • ログも残せないので，メッセージを送って UI スレッドにログを表示させる必要がある
      • message 内容の switch - case になってしまい，面倒
        • fakeworker.js
          • eval / setTimeout で worker を実装したもの
        • AlexService
          • オブジェクト指向フレームワーク

    • Web Sockets

      • 双方向通信を実現するための API
      • サーバ側の対応も必要
        • ws(http) / wss(https)
        • onmessage / postMessage()
      • commet の代替手段として利用可能か

    • まとめると

      • マークアップだけじゃなくて，ウェブアプリを開発するための仕様が盛りだくさん
      • オフラインウェブアプリとか
      • リッチインターフェイスをプラグインなしで
      • リアルタイム通信も可能に
      • これらが標準技術になる API だから，学習への投資が無駄になりにくいことが重要
      • Firefox / Safari / Opera / IE8 で使えるのが利点

##Q&A

  • カレンダーなどはレンダリングまで指定されているのか？
    • ブラウザの実装依存になる
    • コントロールのカスタマイズはできるのかは不明
      • CSS で制御できればいい気もするな

##懇親会

  • gom さんとマイレージの話とか
  • 世界は狭いねー，悪いことできないねーとか藤本さんと話したり