ざっくりわかるHTML5

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

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
    B
    UJNFMJOF IUUQXFCEJSFDUJPOTPSHIJTUPSZ Λࢀߟʹ࡞੒
25.  ,'*+ ,-(*$ '",! !'"% *'+     "%) *( ' ("% ',*',   %+!     !*(&
     #.  *"
       ',*', *(-+*    大まかに言うと 8FC
    )JTUPSZ
    B
    UJNFMJOF IUUQXFCEJSFDUJPOTPSHIJTUPSZ Λࢀߟʹ࡞੒
26. 8FC
    )JTUPSZ
    B
    UJNFMJOF 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 "
    J04
    4BGBSJ .BDCPPL $PSF
    J
    $ISPNF
63. IUUQHPPHMV4,QH J1IPOF "
    J04
    4BGBSJ .BDCPPL $PSF
    J
    $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 特集２ WebSocket実践入門 (2012, 技術評論社)