Your SlideShare is downloading. ×
HTML 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 2012

5,333
views

Published on

TechBuzz 第8回HTML5開発技術勉強会で使用したスライド …

TechBuzz 第8回HTML5開発技術勉強会で使用したスライド
http://atnd.org/events/33721

Published in: Technology

1 Comment
26 Likes
Statistics
Notes
  • 素晴らしいスライドですね。こんなに新しい仕様の話があるとは思いませんでした。よくまとまってて参考になりました。

    Google のアグレッシブな姿勢が見て取れます。Google は Mozilla を味方につけてやれることはやってやろうという勢いを感じます。スマートフォンでウケた機能はなんでも後追いで HTML5 に乘せてやろうということですね。アップルやマイクロソフトがその路線に乗ろうとするかどうか、怪しいですけども。

    個人的には、モバイルプラットフォームすべてが HTML5 ベースのアプリケーションになることは無理だろうと思ってます。スマートフォン特有の統合されたユーザエクスペリエンスはとても大事で、iOS用で動くものは iOS のAPIを使うのが望ましいだろうと思います。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,333
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
61
Comments
1
Likes
26
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML 2012Slides @ TechBuzz HTML5 8th by Tomoya Asai (dynamis) Last Update: 2012/12/03
  • 2. about:me
  • 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • 4. Topics
  • 5. 本日のトピック about: HTML5 HTML5.1 HTML2012 Pure Web Apps Conclusion
  • 6. about:foxkeh ときどきプレゼン手伝って くれるフォクすけを紹介します
  • 7. ぼくフォクすけぼくフォクすけ いつか僕も Firefox みたいな 立派なブラウザになるんだ!
  • 8. サーバ (Apache Camel) の上にクライアント (Firefox)
  • 9. 出荷前のフォクすけたちです。
  • 10. FFXXKK 4488!
  • 11. FFXXKK 4488!
  • 12. 今が最後のチャンス!25 日までのキャンペーンが最後のチャンス!
  • 13. Firefox キャンペーン で検索!
  • 14. Introduction
  • 15. みんな大好き ""HHTTMMLL55"" Mozilla と Firefox も みんな大好きだよね?
  • 16. ブラウザ戦争 IE の独占市場を Firefox が崩して Web 標準の時代へ
  • 17. Web 標準プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  • 18. Web 標準プラットフォーム vs 独自プラットフォーム 「ブラウザ戦争」の時代はとっくに終わりました
  • 19. 独自技術による囲い込み i a f cプラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
  • 20. "HTML5" への期待 次世代プラットフォーム OS に代わるプラットフォーム 安定プラットフォーム 一社依存でない標準の確立 共通プラットフォーム どこでも共通の言語と API
  • 21. Web が共通プラットフォーム プラットフォーム としての Web Web がプラットフォームなら標準技術でアプリ環境が統一される
  • 22. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  • 23. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  • 24. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Media Workers Queries Layout Micro- HTML Data TransCSS3~ form Regions Anim ation Filters
  • 25. Khronos SMIL Vibra- tion WebGL Geo- SVG other location Orien- tation Canvas WHATWG Web IETF Messag- ing Web Multi SPDY Web Sockets DNT Media Mouse, Sockets HTML5 Key ev. XHR2 FileAPI CSP Forms W3C Server- Offline ECMAHTML5 HTML5 Support Sent ev. ECMA ScriptParser Indexed Web WAI- DB XHTML5 Storage ARIA Semantic Elements Web Media Workers Queries Layout Micro- HTML Data Trans CSS3~ OGP XPath form Regions RSS Anim Math ation Filters ML WOFF DOM4
  • 26. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  • 27. ブラウザの技術からプラットフォームへ 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  • 28. HTML5.1
  • 29. HHTTMMLL55 の次は HHTTMMLL55..11 ? HTML6 じゃないのは ちょっと意外だったね!
  • 30. HTML5 の次は HTML5.1 W3C 仕様書の話です != バズワード "HTML5" HTML5 は 2014 年に標準化 今年中に仕様をほぼ確定に HTML5.1 も平行して標準化 HTML5 ほぼ確定後取り組み開始 5.1 は 2016 年に標準化 http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  • 31. HTML5 < HTML << "HTML5" HTML5 = 安定ブランチ HTML5.1 = ブランチ更新 W3C でブランチをメンテ HTML = 最新の HTML WHATWG で最新技術を議論 "HTML5" = Web 技術全部 てきとーに呼んでるバズワード
  • 32. Multi Media Mouse, HTML5 Key ev. Forms W3C Offline W3C のHTML5 HTML5 Support HTML5 仕様Parser WAI- XHTML5 ARIA Semantic Elements
  • 33. other WHATWG Canvas Web Messag- WHATWG の ing Multi Web HTML5 Forms Media Mouse, Key ev. Sockets 最新 HTML W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- Storage W3C では XHTML5 ARIA Semantic Elements Web Workers モジュール化 Micro- HTML Data
  • 34. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms W3C Offline Server- バズワード ECMA Net InfoHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC 6th "HTML5"Parser Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  • 35. HHTTMMLL 仕様は進化と安定化が同時に続く! HTML5.x の安定化中も HTMLの進化は止まらない
  • 36. HTML2012
  • 37. 今の ""HHTTMMLL55"" で満足してちゃだめ! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  • 38. Web で可能になったこと マルチメディア Audio, Video, Animation, 3D ... アプリケーション Offline, Storage, Indexed DB... 高度な通信制御 双方向通信, Server-Sent Event... 2011 年にはできていたことの一例
  • 39. Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC... 2011 年にはできなかったことの一例
  • 40. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  • 41. Opus H.264 Web Audio Notifi- Web cation RTC この辺りが SPDY DNT TCP Socket Tel FileAPI CSP Radio Net2012 年の進化 ECMA Info 6th Indexed Device DB Storage Flex File Box Sys CSS3~ Battery Status Regions Proxi- mity Filters
  • 42. WWeebb 技術で未来を創ろう! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  • 43. Web 標準を充実させよう! 不足機能は実装&標準化 Web = Native とする W3C の WG などで標準化 実装と平行して標準化 Device API, System Apps... そのほか IETF などでも https://wiki.mozilla.org/WebAPI
  • 44. Web API の標準化Device API, System Application, Web Apps WG が主 実装面では圧倒的に Firefox がリードしている FYI: http://www.w3.org/Mobile/mobile-web-app-state/
  • 45. JavaScript の進化 次世代 JS への移行 Firefox が最も実装進んでる 慣れると現 JS 書くのがツライ 高速化やデバッグ容易化 Class, TypedArray, ParallelArray ... 静的解析でコンパイル時エラーを 出しやすい言語仕様に
  • 46. JavaScript が常に勝つ! すべて問題解決してきた 速度遅い → 高速化 ミス多発 → Strict Mode スレッドがない → Workers GPU 使えない → WebGL, WebCL Class 使いたい → 入るよ *** できない → API 増加中 写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
  • 47. ストレージ系の進化 IndexedDB Local Storage は縮小化の方向 FileReader, FileHandle FileWriter, FileSystem も? Device Storage Archive (ZIP 読み出し)
  • 48. File System API 周りの話 Google: ネイティブと一緒で良いじゃん ファイルシステム使おうぜ! Mozilla: ファイルシステムなんて前近代的 抽象化したコレクションにすべき いまのところ平行線
  • 49. Web デザインの進化 レイアウト Grid, Regions, Exclusions... Flexbox (XUL 的レイアウト) フィルター SVG Filter, CSS Filter CSS 構文の進化 @document, variable ...
  • 50. CSS Exclusions自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
  • 51. CSS Regions 複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単Chrome Canary - http://html.adobe.com/webstandards/cssregions/
  • 52. CSS Filters ぼかしや色調整などのフィルタ効果や 曲げたり回したり変形も自由自在にChrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
  • 53. SVG Filter & CSS Filter Mozilla: 既にある SVG 使おうぜ! WebKit: SVG なんてシラネ。 俺は何でも CSS でやるぜ! Mozilla: 仕方ないな…
  • 54. アニメーションの進化 乱立しすぎ&連携無し JavaScript Animation Canvas 2D, WebGL SVG & SMIL CSS Transisions, Animations Web Animations で連携へ
  • 55. Web Animations へ Apple (Flash 代替技術として): CSS でアニメーション! Mozilla & Opera: ダメ構文は直して標準化 Mozilla, Google, Adobe: JS と一括管理できる API 作ろう Web Animations は Mozilla Japan の Brian さん頑張ってます
  • 56. マルチメディアの進化 Opus Audio Codec (RFC6716) Web Audio, Audio Data Web Audio にも Firefox 近日対応 Camera API (Media Capture) WebRTC - getUserMedia 電話会議などは簡単に
  • 57. WebRTC (getUserMedia) カメラを使ったデータ処理も可能 ビデオ会議やリアルタイム動画分析にNightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
  • 58. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock ポインタを隠して移動量を取得
  • 59. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock ポインタを隠して移動量を取得
  • 60. Banana Bread3D ゲームも普通に作れるプラットフォーム ファーストパーソンシューティングの例 https://developer.mozilla.org/ja/demos/detail/bananabread
  • 61. センサー系の進化 従来からの Web API Geolocation (位置情報) Orientation (加速度) Sensor API Ambient Light (環境光) Proximity (近接) Android 版 Firefox は実装済み
  • 62. ネットワーク系の進化 WebSocket Server-Sent Event SPDY v2, v3 ... HTTP 2.0 WebRTC - Peer to Peer TCP Socket, HTTP-cache UDP Datagram Socket
  • 63. Browser Questリアルタイムに多人数で同時プレイ (MMORPG) 柔軟な画面サイズ対応と双方向通信による http://browserquest.mozilla.org/
  • 64. デバイス間連携の進化 Web Intents Web Activities Push Notification この辺の話はカエルさん(小松さん)に聞きましょう
  • 65. デバイス間連携はこれから本番 Mozilla: Web Activities! Google: Web Intents! Mozilla & Google: WHATWG で標準化議論中 共に将来非互換になる見込み この辺の話はカエルさん(小松さん)に聞きましょう
  • 66. Web Intents×TCP SocketWeb Intents でデバイス間連携 (PC - TV) TCP Socket 開いて家電と通信 (DLNA) http://www.youtube.com/watch?v=hjUhSWKiwmw
  • 67. Social 連携の進化 Social API Firefox×Facebook 導入済み まもなくマルチプロバイダ対応 用途は "Social" に限らない ある意味サイドバー API...
  • 68. Social API×WebRTC https://blog.mozilla.org/futurereleases/2012/11/30 /webrtc-makes-social-api-even-more-social/
  • 69. ステータス系の進化 WiFi Information Mobile Connection Network Info (通信速度等) Battery Status 電池残量に応じた処理を
  • 70. ハードウェア系の進化 Bluetooth USB USB file-reading FM Radio NFC
  • 71. これなら WWeebb で 大丈夫だね! どんなアプリでも作れそう! ボクもいろいろ作りた∼い!
  • 72. Pure Web Apps WebRT as an OS...
  • 73. システムレベルまですべて WWeebb 技術で! システム系の API もあれば すべて Web 技術にできるよね
  • 74. System 系の進化 Resource Lock スリープや WiFi オフなどの禁止 Settings (システム設定) Alarm (時刻指定処理) Background Service Idle, Log
  • 75. アプリプラットフォーム化 Open Web Apps アプリとしてインストール Payment いわゆる課金システム
  • 76. ホンモノの Web "アプリ" ブラウザという枠を飛び出して動作
  • 77. Android にもインストール Firefox Marketplace は現在 テスター向けに公開中
  • 78. セキュリティ面での進化 Content Security Policy 特に XSS 対策に有効 Firefox 4 や Chrome 実装済み Permission API アプリが使える API も管理 アプリ毎の権限を制御可能に
  • 79. アプリの権限管理アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める
  • 80. スマホ系の進化 SMS (ショートメッセージ) Telephony (電話) Contacts (電話帳)
  • 81. Firefox OS (Boot to Gecko) Web 技術が「ネイティブ」 HTML5, JavaScript, Web API... ホーム画面もすべて Web 技術で Gecko エンジンだけ起動 Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Gecko = Firefox 描画エンジン プロジェクト名は今も Boot to Gecko
  • 82. ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も その他なんでも...
  • 83. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...すべて Web 技術で実現済み!
  • 84. Firefox OSミニなのは、要求仕様だけ iOS のようなハイエンド端末専用 OS ではない
  • 85. See Also: Firefox OS Group Google Group あります https://groups.google.com/group/ firefoxos 参加歓迎。(・・). Wiki にまとめてます https://github.com/dynamis/ firefoxos/wiki
  • 86. 楽しみ楽しみ! 僕もスマホになって君と 一緒にお出かけしたいな!
  • 87. Summary WebRT as an OS...
  • 88. ブラウザの技術からプラットフォームへ 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  • 89. See Also...
  • 90. Firefox OS & Marketplace Web プラットフォーム Web API が進化を続けている Marketplace Web アプリ配信システム Firefox OS Web がネイティブな OS http://r.dynamis.jp/fxos
  • 91. CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  • 92. JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  • 93. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  • 94. セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec

×