Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ざっくりわかるHTML5

 ざっくりわかるHTML5

社内の勉強会用の資料。
Web関連の初学者向け。

52a2813503456def3384b696da178901?s=128

Tsuyoshi Yamamoto

January 08, 2013
Tweet

Transcript

  1. ざっくりわかる HTMLɹ 5TVZPTIJ:BNBNPUP

  2. 2012/12/17

  3. HTML5 仕様策定が完了 http://www.w3.org/News/2012#entry-9667

  4. その3ヶ月前

  5. IUUQOFXTDOFUDPN@IUNMJTEFBEMPOHMJWFIUNM "one of the biggest mistakes if not the biggest

    strategic mistake that we made."
  6. IUUQOFXTDOFUDPN@IUNMJTEFBEMPOHMJWFIUNM 「戦略的な ひどい失敗の うちの一つ」

  7. HTML5で書かれた iOSのクライアントを ネイティブに移行

  8. そのしばらく後

  9. IUUQXXXTFODIBDPN

  10. HTML5ベースの Facebook アプリケーションを リリース

  11. 予想以上に軽快

  12. HTML5 VS Native

  13. 一体どっち?

  14. 考える前に ざっくりとおさらい

  15. Pathway to HTML5

  16. 1990/12/25

  17. IUUQKBXJLJQFEJBPSHXJLJ&&"&"&"#5JNCFSOFSTMFFKQH 世界最初のWebサーバー ビルド完了

  18. それから いろいろあった

  19. 1990年代後半 第一次ブラウザ戦争 IUUQXXXqJDLSDPNQIPUPTXBMLBEPHJOQIPUPTUSFBN

  20. 2000年代前半 Flashによる Rich Internet Application(RIA)の 兆し IUUQXXXqJDLSDPNQIPUPT!/

  21. 2000年代中頃 Ajaxの勃興と 第2次ブラウザ戦争の 始まり IUUQXXXqJDLSDPNQIPUPT!/

  22. 2000年代後半 HTML5 標準化の始まり IUUQXXXqJDLSDPNQIPUPT!/

  23. 簡単にまとめる

  24.  ,'*+ ,-(*$ '",! !'"% *'+    

    "%) *( ' ("% ',*',   %+!     !*(& #.  *"   ',*', *(-+*    8FC)JTUPSZ BUJNFMJOF IUUQXFCEJSFDUJPOTPSHIJTUPSZ Λࢀߟʹ࡞੒
  25.  ,'*+ ,-(*$ '",! !'"% *'+    

    "%) *( ' ("% ',*',   %+!     !*(& #.  *"   ',*', *(-+*    大まかに言うと 8FC)JTUPSZ BUJNFMJOF IUUQXFCEJSFDUJPOTPSHIJTUPSZ Λࢀߟʹ࡞੒
  26. 8FC)JTUPSZ BUJNFMJOF IUUQXFCEJSFDUJPOTPSHIJTUPSZ Λࢀߟʹ࡞੒  ,'*+ ,-(*$ '",! !'"% *'+

        "%) *( ' ("% ',*',   %+!     !*(& #.  *"   ',*', *(-+*    Internet上の アプリケーションに 求められる要求が ますます複雑に なってきている
  27. A Definition of HTML5.0

  28. 狭義のHTML5

  29. 人間にも コンピュータにも わかる 文書構造 IUUQXXXXPSH53IUNM

  30. 広義のHTML5

  31. HTML5.0 Technology Classes Semantics Offline & Storage Device Access Connectivity

    Multimedia 3D, Graphics & Effects Performance & Integration CSS3 •新しいタグの追加 •フォーム等のUI関連の追加 •Web Storage •Application Cache •File API •Geolocation API •Network Information API •WebSocket •Server-Sent Events •video/audio •Media Capture •Canvas •WebGL •Web Workers •XMLHttpRequest2 8$)5.--PHP IUUQXXXXPSHIUNMMPHP Λࢀߟʹ࡞੒
  32. HTML5.0 Technology Classes Semantics Offline & Storage Device Access Connectivity

    Multimedia 3D, Graphics & Effects Performance & Integration CSS3 •新しいタグの追加 •フォーム等のUI関連の追加 •Web Storage •Application Cache •File API •Geolocation API •Network Information API •WebSocket •Server-Sent Events •video/audio •Media Capture •Canvas •WebGL •Web Workers •XMLHttpRequest2 8$)5.--PHP IUUQXXXXPSHIUNMMPHP Λࢀߟʹ࡞੒ 狭義のHTML5 + 関連APIやCSSなど
  33. つまり

  34. HTML5.0 Technology Classes Semantics Offline & Storage Device Access Connectivity

    Multimedia 3D, Graphics & Effects Performance & Integration CSS3 •新しいタグの追加 •フォーム等のUI関連の追加 •Web Storage •Application Cache •File API •Geolocation API •Network Information API •WebSocket •Server-Sent Events •video/audio •Media Capture •Canvas •WebGL •Web Workers •XMLHttpRequest2 8$)5.--PHP IUUQXXXXPSHIUNMMPHP Λࢀߟʹ࡞੒ HTML + Javascript + CSS
  35. 覚えることは たくさんあります

  36. 個人的には

  37. HTML5.0 Technology Classes Semantics Offline & Storage Device Access Connectivity

    Multimedia 3D, Graphics & Effects Performance & Integration CSS3 •新しいタグの追加 •フォーム等のUI関連の追加 •Web Storage •Application Cache •File API •Geolocation API •Network Information API •WebSocket •Server-Sent Events •video/audio •Media Capture •Canvas •WebGL •Web Workers •XMLHttpRequest2 このあたり 面白そう
  38. 中でもWebSockets

  39.    Request Response Request Response   

    Send Send Send Send Send    
  40.    Request Response Request Response   

    Send Send Send Send     Request/Response の度に 毎回接続しなおす 接続の確立後 非同期にデータを 通信する
  41.    Request Response Request Response   

    Send Send Send Send     デスクトップ アプリケーションと 同じように 通信できる アプリを作れそう
  42. 適用されるデバイスの 拡がり

  43. スマートフォン IUUQBQQTGUDPN

  44. カーナビ IUUQXXXOJLLFJDPNBSUJDMF%(9/"4',@7$"

  45. コンセント IUUQXXXLJDLTUBSUFSDPNQSPKFDUTFMQIJUIFTNBSUQMVHGPSJQIPOFBOEBOESPJE

  46. ここで一息

  47. ここまでの まとめ

  48. 高度なインターネット アプリケーションを 作成できる

  49. 標準化された プラットフォーム

  50. マルチデバイス

  51. とても良いことばかり

  52. とも言い切れない

  53. Difficulties

  54. 各ブラウザの 実装状況… IUUQDBOJVTFDPNGFBUWJEFP

  55. IUUQDBOJVTFDPNGFBUWJEFP

  56. IUUQDBOJVTFDPNGFBUWJEFP 足並み揃ってない

  57. ハードウェアの差… IUUQPQFOTJHOBMDPNSFQPSUTGSBHNFOUBUJPOQIQ

  58. 例えばAndroid端末の 解像度 IUUQPQFOTJHOBMDPNSFQPSUTGSBHNFOUBUJPOQIQ

  59. IUUQPQFOTJHOBMDPNSFQPSUTGSBHNFOUBUJPOQIQ Y Y Y

  60. IUUQPQFOTJHOBMDPNSFQPSUTGSBHNFOUBUJPOQIQ Y Y Y バラバラ

  61. デバイス間の パフォーマンス差… IUUQHPPHMV4,QH

  62. IUUQHPPHMV4,QH J1IPOF "J044BGBSJ .BDCPPL $PSFJ$ISPNF

  63. IUUQHPPHMV4,QH J1IPOF "J044BGBSJ .BDCPPL $PSFJ$ISPNF 大きい

  64. その他にも

  65. セキュリティ… IUUQIUNMTFDPSH

  66. デファクトな 開発環境… IUUQXXXqJDLSDPNQIPUPTKJOUFSXBT

  67. とは言え

  68. 注目度は高まる一方 IUUQXXXHPPHMFDPKQUSFOETFYQMPSFRIUNMDNQUR

  69. 組み込み分野での 期待も高まっている IUUQNPOPJTUBUNBSLJUDPKQNOBSUJDMFTOFXTIUNM

  70. ひとまず勉強 しときましょう

  71. HTML5.0 Technology Classes Semantics Offline & Storage Device Access Connectivity

    Multimedia 3D, Graphics & Effects Performance & Integration CSS3 •新しいタグの追加 •フォーム等のUI関連の追加 •Web Storage •Application Cache •File API •Geolocation API •Network Information API •WebSocket •Server-Sent Events •video/audio •Media Capture •Canvas •WebGL •Web Workers •XMLHttpRequest2 このあたり 腰を据えて追いかける 時間を下さい
  72. 参考資料

  73. <Web Sites> HTML5 Candidate Recommendation (http://www.w3.org/TR/html5/) W3C HTML Logo (http://www.w3.org/html/logo/)

    WHATWG HTML Standard (http://www.whatwg.org/specs/web-apps/current-work/multipage/) HTML5 Showcase for Developers: The Wow and the How (http://www.htmlfivewow.com/) HTML5ROCKS (http://www.html5rocks.com/ja/) Can I use... (http://caniuse.com/) HTML5 Please (http://html5please.com/) Web History, a timeline (http://webdirections.org/history/)
  74. SunSpider JavaScript Benchmark (http://www.webkit.org/perf/sunspider/sunspider.html) HTML5のご紹介@DevFestX Sapporo (http://www.slideshare.net/yoshikawa_t/html5-11521824) <書籍> Head First

    HTML5 Programming (Eric Freeman, Elisabeth Robson, 2012, O'Reilly Media) Smashing Node.js: Javascript everywhere, 2nd Edition (Guillermo Rauch, 2012, John Wiley & Sons) WEB+DB PRESS Vol.71 特集2 WebSocket実践入門 (2012, 技術評論社)