HTML5の衝撃
有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/ CSS Nite in Shinagawa HTML5+IE9 Web Camp 2011年3月6日 ～なぜHTML5なのか？HTML5が目指す世界とは～<ruby>
羽田野<rp>（</rp><rt>はたの</rt><rp>）</rp>
太巳<rp>（</rp><rt>ふとみ</rt><rp>）</rp> </ruby>
HTML5 =
HTML5 =
お題
HTML5って何？
HTML5はもう使えるの？
XHTML、お前はもう死んでいる？ ウェブをSHIFTする
バズワードとしてのHTML5
仕様としてのHTML5
セマンティクス オフライン・スト レージ デバイス・アクセス ネットワーク マルチメディア グラフィックス CSS3 スタイリング パフォーマンス http://www.w3.org/html/logo/
OPEN WEB
Technology
Platform
HTML5仕様はOpen Webの礎 HTML5 = W3CのHTML5仕様
Open Web Technology
HTML コンテンツやUI スタイリングCSS ECMAScript プログラミング言語 各種APIOpen Web Technology
HTML コンテンツやUI スタイリングCSS ECMAScript プログラミング言語 各種API HTML5仕様OPEN
とは
ロイヤリティフリー
互換性
持続性
信頼性
One Web for
All
for
ALL
あらゆる母国語の人のために
<ruby> <bdi> <bdo> @dir CSS3縦書き
ハンディキャップを持つ人のために
WAI-ARIA
あらゆるデバイスのために
CSS：Media Queries
勧 告
Recommendation
実装が先 テストが先 何年も先 その頃にはすでに熟れた技術 勧告 ≒ 過去の記録 ≠ 指示書 こなCSS2.1（最終草案）
CSS Style Attributes（勧告候補） XMLHttpRequest（勧告候補）
DOM Level 3 Events（最終草案） Geolocation API（勧告候補）
※2011年3月現在
HTML5仕様の現在
公開草案初版 最終草案 勧告候補 勧告案 勧告 2008年1月 2011年3月現在 2014年 2011年5月機能ごとの成熟度のほうが重要
Canvas Video/Audio Web Storage SVG GeolocationXHTML、
なぜ
X
HTML1.0？
• ただ単に新しかったから？ • XML化によるマシン可読性？ 実態は... • XHTML1.1/2.0への移行を促すため • HTML4との互換性を重視 • ユーザーに何もメリットをもたらさない マークアップは10年以上も進化していないContent-Type:
text/html
XML的に書かれたHTML
HTML4と結果的に同じ
本当のマークアップの進化
グラフィックス <canvas> マルチメディア <video> <audio> <track> 入力コントロール <input > <datalist> <progress> <meter> XML機能 <svg> <math> <ruby> セマンティクス <section> <nav> <time> <figure> 対話型UI <details> <menu> <command>ウェブを
SHIFT
する
開発環境のシフト
• Samsung Mobile Widget SDK • Palm WebOS
開発環境のシフト
• HTML + JavaScript + CSSを使ってアプ リケーションを開発する環境 • HTML5のAPIを数多くサポート • Hardware機能へアクセスできる JS API を提供Extensions
Google Chrome Extensions
http://www.chromeextensions.org/
Apple Safari Extensions
http://extensions.apple.com/
Opera Extensions
Widgets
Opera Widgets http://widgets.opera.com/ja/ Artist's Sketchbook grafio 作 Analog Clock Opera widgets 作プラットフォームのシフト
OSからブラウザーへシフト
ネイティブ言語からJavaScriptへシフト デバイスを超えた開発環境の統一化
マイクロソフトも
負けてはいなかった
が...
Active Desktop
Windows
Sidebar Gadget
Windows
Desktop Gadget
システム・モニタリング スレッド デバイス連携カメラ・GPS アプリ・ランチャー パッケージング UIコンポーネント ネットワーク ストレージ インプット・メカニズム マルチメディア再生
OSが提供してきた機能
2D/3DグラフィックスOpen Web
を通して利用
システム・モニタリング スレッド デバイス連携カメラ・GPS アプリ・ランチャー パッケージング 2D/3Dグラフィックス UIコンポーネント ネットワーク ストレージ インプット・メカニズム マルチメディア再生一歩先のW3C仕様
• <device>
• HTML Media Capture • Media Capture API
http://www.w3.org/TR/html-media-capture/ http://www.w3.org/TR/media-capture-api/
一歩先のW3C仕様
• The Application Launcher API
http://dev.w3.org/2009/dap/app-launcher/
• Widget Packaging and Configuration
http://www.w3.org/TR/widgets/
• The Widget Interface
一歩先のW3C仕様
• The System
Information API
http://www.w3.org/TR/system-info-api/
• Clipboard API and events
http://dev.w3.org/2006/webapi/clipops/cli pops.html
一歩先のW3C仕様
• File API
http://www.w3.org/TR/FileAPI/
• File API: Writer
http://www.w3.org/TR/file-writer-api/
• File API: Directories and System
一歩先の仕様
• OpenGL
http://www.opengl.org/
• Audio Data API
https://wiki.mozilla.org/Audio_ Data_API
• Web Audio API
http://chromium.googlecode.co m/svn/trunk/samples/audio/ specification/specification.ht ml
まとめ
•
Open Web
– ウェブページからアプリケーション – パソコンからマルチデバイス – ネイティブ技術からウェブ技術•
Web業界の業務範囲の拡大
•
Webスキルの応用範囲の拡大
SAME MARKUP
同じコードで
どのブラウザーでも どのデバイスでも同じように動作する
Open Webの理想
さまざまな業界を巻き込む
Open Web
ウェブ 業界 通信 出版 娯楽 電器 広告 教育 芸術HTML5時代のスキル
ディレクター デバイスの最新動向の把握 テクノロジーの目利き デザイナー デバイスごとのUXを意識した実用的デザイン プログラマー JSによるフロントエンド・プログラミング データ蓄積/出力を意識したシステム設計CSSの父 ホーコン・リー氏 活版印刷が500年前に発明され ヨーロッパのルネッサンスと産 業革命を導いた。 ウェブは活版印刷がヨーロッパ にもたらしたのと同じほどの影 響を世界に与えた。 だからウェブもこの先500年は 生き続けるだろう。 http://en.wikipedia.org/wiki/Letterpress_printing
