HTML5 + CSS3 = 次のWeb標準?


概要

  • Webブラウザベンダが参加するWHATWGコミュニティによって作成が進められていた仕様
  • 以下が可能になる
    • 2D/3Dグラフィックス操作
    • 動画や音声の再生
    • オフラインWebアプリケーション(Web Applications 1.0)
    • クロスドメイン通信
    • クライアントサイドデータベース(SQLストレージAPI)
    • バックグラウンドプロセス
    • サーバからのデータプッシュ
    • 多様な入力フォーム(Web Forms 2.0)
  • 一部の機能はすでに最新のWebブラウザに実装されている
  • スケジュール
    • 2009年3月にワーキングドラフトの最終版を発表
    • 2009年6月に準備リコメンデーションを発表
    • 2010年6月にプロポーザルリコメンデーションを発表
    • 2010年9月にHTML5をW3C勧告として公表

HTML5

  • フォームの強化
    • input要素のtype属性に指定できる型の追加
    • フォームに入力された値を検証する仕組みの追加
      • 入力が必須である事を表すrequired属性
      • 入力値のパターンを表すpattern属性 (正規表現で指定)
  • canvasタグ
    • 任意のグラフィックを自由に描画できる領域として、canvas要素が利用できる
    • 幅と高さを指定したcanvasを定義し、あとはJavaScriptコードを用いて矩形や円、画像などを自由に描画できる
  • メディア要素(videoタグ、audioタグ)
    • JavaScriptコードを用いて操作し、再生・停止・頭出しなど、細かい操作を行うことが可能
  • 文書構造をより明確に表すsectionやarticleといった要素
  • メニュー項目を作成するためのmenuタグやcommandタグ
  • progress(進捗バー), meter(メーター)

機能

Web Storage

  • 日本語訳
  • クライアント内にデータを永続化するための機構。StorageとDatabaseの2つがある。
  • Storage
    • キー/バリューの形式で永続化できる
    • キーと値はどちらも文字列である必要がある
    • localStorage ... ドメインごとに保存され、永続化期間は無制限だ。
    • sessionStorage ... ウィンドウごと保存され、永続化期間はそのウィンドウを閉じるまでとなる
  • Database
    • SQLを用いてアクセスする事の出来る永続化領域
    • 非同期APIと同期APIの双方を用いてアクセスすることができる
    • 非同期APIは扱いにくい分、データアクセスがバックグラウンドで行われるため、UI操作の妨げにならない
  • 大きなデータを蓄積できるので、ユーザーエクスペリエンスの向上やサーバー負荷の低減に役立てることができる

Web Workers

  • バックグラウンドで動作するJavaScriptスレッド
  • 「重い」処理を行うJavaScriptコードも、ワーカで実行するようにすれば、UIをブロックする事なく処理を行える
  • メインページのJavaScriptとワーカ、もしくはワーカ同士はJavaScriptオブジェクトを「メッセージ」として送受信することにより、ワーカ間の協調を実現
  • SharedWorker? ... 複数のウィンドウ間で共有
  • Persistent Worker ... ブラウザのウィンドウを閉じても動作を続ける(策定中?) 」

The Web Sockets API

  • 日本語訳
  • JavaScriptからサーバーとの双方向通信を行いメッセージ交換を実現するAPI
  • サーバ側でもWeb Socketsへの対処を必要とされるが、HTTPを用いずに効率的な双方向通信を実現可能

Offline Web Applications

  • 日本語訳
  • 次の2つで実現
    • SQL-based database API ... ローカルにデータを保存する
    • offline application HTTP cache ... ユーザーがネットワークに接続していないときでもアプリケーションが確実に利用できるようにする

ブラウザ

IE9

ブラウザ補完計画

ライブラリ・フレームワーク

HTML5 サンプル

HTML5 活用事例


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-06-28 (月) 20:23:28 (1032d)