HTML5 の衝撃 ~ なぜ HTML5 なのか?HTML5 が目指す世界とは ~ CSS Nite in Shinagawa HTML5+IE9 Web Camp 2011 年 3 月 6 日 有限会社 futomi 代表取締役羽田野太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
<ruby> 羽田野 <rp>(</rp><rt> はたの </rt><rp>)</rp> 太巳 <rp>(</rp><rt> ふとみ </rt><rp>)</rp> </ruby>
http://www.futomi.com/
http://www.html5.jp/
HTML5 = Markup + API
HTML5 = Markup + API
お題 HTML5 って何? HTML5はもう使えるの? XHTML お前はもう死んでいる? ウェブをSHIFTする
HTML5 って何?
バズワードとしての HTML5 VS. 仕様としての HTML5
セマンティクス オフライン ストレージ デバイス アクセス ネットワーク マルチメディア グラフィックス http://www.w3.org/html/logo/ パフォーマンス CSS3 スタイリング
世間が注目しているバズワードの HTML5 とは OPEN WEB Technology Platform HTML5 仕様は Open Web の礎 HTML5 = W3C の HTML5 仕様
Open Web Technology HTML コンテンツや UI CSS スタイリング 各種 API ECMAScript プログラミング言語
Open Web Technology HTML5 仕様 HTML コンテンツや UI CSS スタイリング 各種 API ECMAScript プログラミング言語
OPEN とは ロイヤリティフリー 互換性 持続性 信頼性 One Web for All http://www.w3.org/2011/01/w3c2011
for ALL あらゆる母国語の人のために <ruby> <bdi> <bdo> @dir CSS3 縦書き ハンディキャップを持つ人のために WAI-ARIA あらゆるデバイスのために CSS:Media Queries API: デバイス アクセスの抽象化
HTML5 はもう使えるの?
Recommendation 勧 実装が先テストが先何年も先 告 こなその頃にはすでに熟れた技術勧告 過去の記録 指示書
勧告になるまで待ちますか? CSS2.1( 最終草案 ) CSS Style Attributes( 勧告候補 ) XMLHttpRequest( 勧告候補 ) DOM Level 3 Events( 最終草案 ) Geolocation API( 勧告候補 ) 2011 年 3 月現在
HTML5 仕様の現在 公開草案初版 2008 年 1 月 最終草案 2011 年 3 月現在 2011 年 5 月 勧告候補 勧告案 勧告 2014 年
機能ごとの成熟度のほうが重要 Canvas Video/Audio Web Storage SVG Geolocation
XHTML お前はもう死んでいる?
なぜ XHTML1.0? ただ単に新しかったから? XML 化によるマシン可読性? 実態は... XHTML1.1/2.0への移行を促すため HTML4との互換性を重視 ユーザーに何もメリットをもたらさない マークアップは 10 年以上も進化していない
Content-Type: text/html XML 的に書かれた HTML HTML4 と結果的に同じ
本当のマークアップの進化 セマンティクス <section> <nav> <time> <figure> グラフィックス <canvas> マルチメディア <video> <audio> <track> XML 機能 <svg> <math> <ruby> 入力コントロール <input > <datalist> <progress> <meter> 対話型 UI <details> <menu> <command>
ウェブを SHIFT する http://www.morguefile.com/archive/display/162031
マルチ デバイス
開発環境のシフト Samsung Mobile Widget SDK Palm WebOS BlackBerry WebWorks
開発環境のシフト 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 http://dev.opera.com/articles/extensions/
Widgets Opera Widgets http://widgets.opera.com/ja/ Analog Clock Opera widgets 作 Artist's Sketchbook grafio 作
Google Chrome OS
プラットフォームのシフト OS からブラウザーへシフト ネイティブ言語から JavaScript へシフト デバイスを超えた開発環境の統一化
マイクロソフトも 負けてはいなかった が... 時代を間違えた...
Active Desktop Since 1998
Windows Sidebar Gadget Since 2007
Windows Desktop Gadget Since 2009
OS が提供してきた機能 アプリ ランチャーパッケージング マルチメディア再生 2D/3D グラフィックス インプット メカニズム UI コンポーネント システム モニタリングスレッド ストレージ ネットワーク デバイス連携カメラ GPS
Open Web を通して利用 アプリ ランチャーパッケージング マルチメディア再生 2D/3D グラフィックス インプット メカニズム UI コンポーネント システム モニタリングスレッド ストレージ ネットワーク デバイス連携カメラ GPS
一歩先の 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 http://www.w3.org/tr/widgets-apis/
一歩先の 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 http://www.w3.org/tr/file-system-api/
一歩先の仕様 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
まとめ http://www.morguefile.com/archive/display/693087
Open Web ウェブページからアプリケーション パソコンからマルチデバイス ネイティブ技術からウェブ技術 Web 業界の業務範囲の拡大 Web スキルの応用範囲の拡大
SAME MARKUP 同じコードで どのブラウザーでも どのデバイスでも 同じように動作する Open Web の理想
さまざまな業界を巻き込む Open Web 通信 芸術 出版 教育 ウェブ業界 娯楽 広告 電器
HTML5 時代のスキル ディレクター デバイスの最新動向の把握テクノロジーの目利き デザイナー デバイスごとの UX を意識した実用的デザイン プログラマー JSによるフロントエンド プログラミングデータ蓄積 / 出力を意識したシステム設計
活版印刷が 500 年前に発明されヨーロッパのルネッサンスと産業革命を導いた ウェブは活版印刷がヨーロッパにもたらしたのと同じほどの影響を世界に与えた だからウェブもこの先 500 年は生き続けるだろう CSS の父ホーコン リー氏 http://en.wikipedia.org/wiki/letterpress_printing
ご清聴ありがとうございました 有限会社 futomi 代表取締役羽田野太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/