BPStudy#24に参加しました

シェアする

  • このエントリーをはてなブックマークに追加

bpstudy#24に参加しました。

今日のお題

開発者のためのHTML5講座 白石さん@あゆた – Google API Expert – html5-developers-jp管理人 – Gearsの本をかいた人

HTML5?

  • main部分だけのPDFで900page以上の大作
  • 2009.10にfinal draft目標
  • W3Cの勧告になるのは2022年とか。。
  • 実装が出揃うのはもっと前 おおきく二つにわかれている
  • Markup
  • 冒頭に空のDOCTYPE宣言を書く→<!DOCTYPE html>
  • 空なのは「最新で」という意味だとかなんとか・・・
  • Web Application API

HTML5とXHTML

HTML5のボキャブラリを扱えるXHTML=XHTML5 XHTML5はXHTML1.0の置き換えを意図している

Markup

新タグ – divをもっとsemanticにする文書構造タグ – article, aside, nav, footer, header… – 埋め込み要素のタグ – fiture, source, video, autio, canvas, embed – form, webアプリ – keygen, output, inputに新しい要素 – インタラクティブ – テキスト強化 – ルビなど 特徴 – metaタグでcharsetを指定する→<meta charset="UTF-8"> ※XMLではないから閉じなくてよい – アウトライン構造を意識するようになった – 「セクション」の概念ができた – 各セクションに見出し(h1~h6)をつけることになる →セクションごとにh1を書くことができる。 ※body直下のh1と、bodyの中のarticleの中のh1を区別してもらえる

Canvas

実装が進んでいる要素。IE以外なら、すでに使える。 図形・テキスト・画像・動画などを描画でき、自由にトランスフォームできる。 – 現在は2D – 3Dも登場しつつある – O3D(Google), Canvas3D(Mozilla),Operaなど実装が登場しつつある 動画もプラグインなしで再生できるようになる(videoタグ) →JavaSciptから操作可能 動画の標準エンコーディングはHTML5に盛り込まれなかった→超残念

Form

inputのtypeが大幅に追加 – tel, search, url, email, datetime, datetime-local, date, month, week, time, number, range, color – 現時点ではFormについてはOperaが頑張っている バリデーションもできるように(submit時、JavaScriptでkickなど。) – required – pattern – typeでのチェック(email,urlなど) オートコンプリートが制御できるようになった 候補を提示できる

Drag and Drop

ネイティブサポートされる(ようになる)

その他

designModeとexecComman()が標準化されてWYSIWYGエディタを作れるように などなど

Open Web Platformを支えるAPI

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

オフラインWebアプリを実現するために、必要なリソースをローカルにキャッシュするしくみ キャッシュマニフェストファイルを作成することで実現する。 マニフェストが更新されていたら、ファイルを取得しなおす(if-modified-siceなgetをする) キャッシュというか、定義してくれたものを全部もってくる(pre load的な動作)

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

  • 異なるウィンドウ(document)間でのメッセージングを実現
  • クロスオリジンの通信も可能
  • 送信元の確認が重要

Web Workers

バックグラウンドスレッド workerとは変数など共有しない。元ウィンドウのコンテキストも触れない →メッセージングで情報をやりとり workerはデバッグできない。。。

Web Storage

KVS – LocalSorage ドメインごと、永続期間無制限 – SessionStorage ウィンドウごと、永続期間はウィンドウを閉じるまで – 同期APIと非同期APIがある – 同期APIはworker内でしか使えない

Web Sockets

非HTTPwで双方向通信を実現するためにAPI port: 81(ws), 815(wss)

まとめ

なかなか便利。 一通り把握するところからだなぁ。。。

ads

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

ads