• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5/Web標準オーバービュー
 

HTML5/Web標準オーバービュー

on

  • 3,557 views

Chrome+HTML5 Conference

Chrome+HTML5 Conference

Statistics

Views

Total Views
3,557
Views on SlideShare
3,516
Embed Views
41

Actions

Likes
5
Downloads
48
Comments
0

2 Embeds 41

http://paper.li 38
https://cybozulive.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5/Web標準オーバービュー HTML5/Web標準オーバービュー Presentation Transcript

    • HTML5/Web標準オーバービュー
      ver. 2011年8月15日
      W3C/Keio
      慶應義塾大学大学院特任助教深見嘉明
      @rhys_no1
      Chrome+HTML5 Conference
      〜第20回記念HTML5とか勉強会スペシャル〜
    • アンケートや情報共有にご協力ください!
      • カンファレンス全体についてのアンケート
      • http://bit.ly/toka20
      • HTML5/Web標準オーバービューについてのアンケート
      • http://bit.ly/toka20-A1
      • Twitter(実況中継用にお使いください)
      • #html5j
      • Facebookページ(質問用にお使いください)
      • http://www.facebook.com/html5j
    • 前半:HTML5 & Web標準の基礎
    • HTML5,,,,,
    • HTML5!
      http://www.w3.org/TR/html5/
    • HTML5を少し細かく見てみる
      HyperText
      Markup
      Language
      (Ver. 5)
      (C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ
      5
    • そもそもHTMLとは
      サイトA
      ウェブサイトを構成するを作成するための規格
      ハイパーリンク
      ハイパーリンク付き文章ファイル
      サイトB
    • HTMLの歴史
      HTML
      1989年
      SGML->XML
      IEFT標準化
      HTML2
      XHTML1.0
      1994年
      2000年
      携帯端末
      2000年
      モジュール化
      XHTML Basic
      HTML3
      XHTML1.1
      1995年
      2001年
      XMLらしく
      拡大機能集約
      XHTML2.0
      HTML3.2
      1997年
      IBMを中心に、イントラネットやDB用向けとして推進中。
      ※XHTML2.0は、厳密な仕様化により、古いHTMLコンテンツも許容するブラウザを提供すること難しく、Public用のブザウザでは実装されていない。
      正しいHTML
      HTML4
      1997年
      1999年
      HTML4.01
      2007年開始
      HTML5
      目的:Web利用の容易化と拡張性の向上
      Public 向けとして仕様化推進中。MS,Opera, Mozila, Google, Appleなどが中心に推進。2010年10月にDraft、2012年にCRを目指す。
    • HTML5の正式な定義
      W3Cで策定している
      HTML4.01
      XHTML1.0
      DOM2 HTML
      の次期バージョン
    • HTML5の由来
      WHATWGによる提案
      Web Applications 1.0
      Web Forms 2.0
      アプリケーションの実行環境としてのWebを実現
    • HTML5
      ウェブサイト記述のためのマークアップ規則
      マシンリーダビリティの向上(HTML5はXHTMLの後継でもある)
      表現の幅を拡大
      API仕様群
      Webをアプリケーションの実行環境に進化させる技術
    • HTML5,,,,,
    • 新世代ウェブの構成要素
      HTML5
      CSS3
      JavaScript
      WebGL
      (C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ
      12
    • 広義のHTML5
      ウェブアプリケーションの動作環境
      リッチコンテンツの取扱が容易に
      デバイスとの連携に用いられる多様なAPI
      多様な端末(モバイル、そして、、、、)に適したUIの実現
      (C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ
      13
    • HTML5!
      http://www.w3.org/TR/html5/
    • ウェブ標準を作っている場所
      World
      Wide
      Web
      Consortium
    • HTML5!
      http://www.w3.org/TR/html5/
    • HTML5!,,,,,!?
    • というわけで、
      フルスペックの
      HTML5が
      使える環境は
      ありません
    • なぜなら
      現在策定中の
      規格だから
    • 仕様策定プロセス
      特徴:
      1, 実装主義
      2, Consensus方式
      3, Director判断
      Recommendation
      勧告
      Directorの判断
      Proposed
      Recommendation
      ACによる投票
      Candidate
      Recommendation
      実装例を待つ
      Last Call
      Working Draft
      他のグループとの
      整合性を取る
      Working Draft
      Coordination Group
      Interest Group
      Working Group
      Incubator Group
    • では、今日
      学べることは
      何なのか?
    • 仕様策定プロセス
      特徴:
      1, 実装主義
      2, Consensus方式
      3, Director判断
      Recommendation
      勧告
      Directorの判断
      Proposed
      Recommendation
      ACによる投票
      Candidate
      Recommendation
      実装例を待つ
      Last Call
      Working Draft
      他のグループとの
      整合性を取る
      Working Draft
      Coordination Group
      Interest Group
      Working Group
      Incubator Group
    • W3C標準化プロセスの特徴
      W3C≠デジュール標準
      実装主義
      • 各社の採用・実装をコントロールしていない
      • 実装が進んではじめて標準にいきつく
    • 標準が必要な理由
      同じ仕様(データフォーマット、プロトコル…………)を使わないと、互いにデータをやり取りできない
      共通して用いられる仕様がないと、状況(ネットワーク環境、ハードウェア、ソフトウェア)が異なると、同じようにコンテンツが使えない
      ブラウザ戦争
    • キーワード
      ネットワーク外部性
    • 身近な例
    • メカニズム
      みんなが使う
      その仕様を採用する
    • ウェブ標準とは?
      Loyalty Free/ Open Usage
      Open Process
      One Web, One Network
      設計書であり、ルールでもある
      策定中、だけど実装済み
      強制力なし、でも実効力がある
    • ポイント
      実装主義だから、みんなが使う仕様が標準になっていく。
      既に広く使われている仕様=勧告になる可能性が高い
      ポイントを抑えることが大切
    • 後編:HTML5のAPIが
      実現すること
    • よりセマンティックな
      コンテンツ
      プラットフォーム
      +
      よりリッチな
      アプリケーション
      プラットフォーム
      HTML5=
    • よりセマンティックなコンテンツプラットフォーム
      • HTML5の新要素で<div>だらけのWebページとはおさらば!
      • セクション要素(section/article/aside/nav...)
      • その他の新要素(header/footer/time/command...)
      • 既存要素の意味も変化(strong/small/b/i/address/menu...)
      • HTML5 Formsで、よりセマンティックかつリッチな入力フォームが実現する
      • マイクロデータなどのリッチスニペット技術
    • 詳しくはこのあと、羽田野さんのセッションで!
    • よりリッチなアプリケーションプラットフォーム
      • JavaScript APIが次々に考案、標準化され、プラットフォームが拡大しつつある。
      • ->APIとは?
    • APIって、なんだ?
      • ->Application Programming Interface
      • 低レベルのレイヤの機能を利用するための、機能の入り口(=インターフェース)のこと
    • Webアプリにできることが、なぜ少なかったか?
      • ->APIが足りなかったから
    • どんなAPIが増える?何が出来るようになる?
      • Webアプリをオフラインでも利用可能になる。
      • デバイスの機能をフル活用できるようになる。
      • より高速で自由度の高いネットワーク処理が可能になる。
      • マルチメディアを自由自在に操れるようになる。
      • Webページの表現力が大幅に向上する。
    • オフラインWebアプリケーション
      • アプリケーションキャッシュ・・・オフライン利用可能なキャッシュ(デモ)
      • Web Storage・・・簡単に利用出来るストレージAPI
      • Indexed Database API・・・ブラウザ組み込みのKVS
      • File API・・・ファイルの読み書き
    • デバイスの機能へのアクセス
      • Contacts API・・・アドレス帳へのアクセス
      • Calendar API・・・カレンダーへのアクセス
      • Media Capture・・・メディアデータの取り込み
      • Messaging API・・・SMS/MMS/E-mailの送信
      • Battery Status API・・・バッテリー状態へのアクセス
      • Network Information API・・・ネットワーク情報へのアクセス
      • DeviceOrientation Events・・・デバイスの向きや傾きを検知する(デモ)
      • Gallery API・・・メディアギャラリーへのアクセス
      • Geolocation API・・・位置情報取得(デモ)
      • 音声入力・・・音声でテキスト入力を行える(デモ)
    • より高度なネットワーキング
      • WebSocket・・・リアルタイム性の高い、新たな通信形式
      • Server-Sent Events・・・HTTPベースのサーバプッシュ
      • Cross Document Messaging・・・Webページ間のメッセージ通信
      • Cross Origin Resource Sharing・・・オリジンを超えたHTTP呼び出し
      • Cross-Origin Resource Embedding Exclusion・・・img,scriptなどに対するクロスオリジン機能を制限する仕様
      • XMLHttpRequest Level2・・・パワーアップ!!(デモ)
    • マルチメディア
      • video要素・・・動画再生
      • audio要素・・・音声再生
      • API for Media Resource 1.0・・・メディアのメタデータを取得するAPI
      • Audio Data API・・・Firefoxで実装済みの音声操作API
      • Web Audio API・・・Chromiumで実装済みの音声操作API
      • HTML Media Capture・・・<input type="file">を拡張して、メディア取り込みを可能に
      • Media Capture API・・・JavaScriptでメディア取り込み
      • Web VTT・・・動画に字幕やトラック情報を付与するためのフォーマット
      • Peer Connection・・・P2P接続も可能に
    • マルチメディアの取り扱いも容易に
      • 音声や動画をWebページ上で取り扱うのが非常に容易に
      • CSSやJavaScriptとも組み合わせて、高度な表現を簡単に実現
      • デモ: Picture in Picture (HTML5Rocks)
      • デモ:字幕入り動画のデモ
    • Webページをよりグラフィカルに
      • canvas要素・・・ビットマップグラフィックの描画領域(デモ)
      • HTML5 Canvas 2D Context・・・canvasに2次元グラフィックを描画するAPI
      • WebGL・・・canvasに3次元グラフィックを描画するAPI
      • SVG・・・ベクターグラフィックAPI
      • requestAnimationFrame API・・・JavaScriptアニメーションをより効率よく行うためのAPI
    • その他も続々増加中
      • Navigation Timing/Resource Timing・・・Webページやリソースの読み込みに要した時間を取得するAPI
      • Web Workers・・・バックグラウンドスレッドを実現するAPI
      • setImmediate・・・setTimeout(fn, 0);をより効率的に実行
      • Page Visibility・・・Webページの表示状態を取得するためのAPI
      • Web Notifications・・・通知メッセージを表示するためのAPI
      • フルスクリーンAPI・・・Webページのフルスクリーン化を可能にするAPI
    • HTML5の各要素を組み合わせると、こんなことができる!
    • Blowing apart fragments of Video
      • 使用しているHTML5要素
      • Video
      • Canvas
      video要素とcanvas要素2つ(作業用と表示用)を準備し、タイルに分割
      一定時間ごとに、不可視のvideoからcanvasに画像を表示
      マウスクリックされたら、タイルの座標を再計算してcanvasを再表示
    • Flight of the navigator
      • 使用しているHTML5要素
      • WebGL
      • Video/Audio
      • Audio Data API
    • ありがとうございました。
      深見嘉明 @rhys_no1
      白石俊平 @Shumpei
    • アンケートや情報共有にご協力ください!
      • カンファレンス全体についてのアンケート
      • http://bit.ly/toka20
      • HTML5/Web標準オーバービューについてのアンケート
      • http://bit.ly/toka20-A1
      • Twitter(実況中継用にお使いください)
      • #html5j
      • Facebookページ(質問用にお使いください)
      • http://www.facebook.com/html5j