GREE オープンソーステクノロジー勉強会#19に行ってきた．

##前説的な

  • 女性率高い？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)間でのメッセージング