Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。

1. HTML5概要 & デモ
2013/10/27
Technology & Entrepreneurship TOKUSHIMA
Toru Yoshikawa (@yoshikawa_t)

2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
html5j／HTML5とか勉強会スタッフ
Google Developer Experts (Chrome)
HTML5 Experts.jp エキスパートNo.3
ビギナー部 (副部⻑⾧長)／Web先端技術味
⾒見見部 (顧問)／⽇日本jQuery Mobileユーザ
ー会 (管理理⼈人)／Sublime Text 2 Japan
Users Group (管理理⼈人)
Blog: http://d.hatena.ne.jp/pikotea/

3. HTML5とは？

4. HTML5とは？
1999年年に勧告された HTML4.01 の10数年年ぶり
のアップデート
WHATWG の Web Applications 1.0 と Web
Forms 2.0という仕様が W3C に採⽤用されたもの
2014年年の勧告を⽬目指して、現在策定中

5. HTML5が解決する
これまでのWebの問題
ブラウザの互換性の問題
⽂文書の意味が不不明確
Webアプリとしての機能が不不⾜足している問題

6. HTML5が実現するもの
よりセマンティックな
コンテンツプラットフォーム
よりリッチな
アプリケーションプラットフォーム

7. HTML5によってWebアプリの
実現可能な範囲が広がっている
これまでのWeb
HTML
Flash
ネイティブアプリ

8. HTML5によってWebアプリの
実現可能な範囲が広がっている
HTML5
CSS3
JavaScript
Flash
ネイティブアプリ
これからのWeb

9. 仕様の⼀一部を
ピックアップして紹介します

10. HTML5の大まかなカテゴリ
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Integration
Styling (CSS3)

11. 仕様の一部を
ピックアップして紹介します
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Integration
Styling (CSS3)

12. Offline & Storage
• Application Cache … オフラインアプリケーション
• Web Storage … 簡易易ローカルストレージ
• Indexed Database … KVS型のローカルデータベース
• File APIs … ファイルの読み書き
• File System API … アプリから利利⽤用できるファイル領領域
• online/offline events … オン/オフライン状態の把握

13. Offline & Storage
Demo
• HTML5 Terminal
• online/offline events

14. HTML5 Terminal
http://www.htmlfivewow.com/demos/terminal/terminal.html

15. online/offline events
http://html5-‐‑‒demos.appspot.com/static/navigator.onLine.html

16. Multimedia
• video/audio … 動画/⾳音楽再⽣生
• WebVTT … 字幕・トラック情報を追加
• Web Audio API … ⾳音声処理理・合成
• HTML Media Capture … メディアの取込み

17. Multimedia
Demo
• Blowing apart fragments of video
• Using WebSRT to create video captions
• HTML5 Wow Visualizer

18. Blowing apart fragments of video
http://craftymind.com/factory/html5video/CanvasVideo.html

19. HTML5 Wow Visualizer
http://www.htmlfivewow.com/demos/audio-‐‑‒visualizer/index.html

20. Graphics, 3D & Effects
• Canvas … 2Dグラフィックス
• WebGL … 3Dグラフィックス
• SVG … ベクターグラフィックス

21. Graphics, 3D & Effects
Demo
• Hello Racer
• BananaBread
• MapsGL

22. Hello Racer
http://helloracer.com/webgl/

23. EVE online
http://www.eveonline.com/universe/spaceships/curse/

24. Google MapsGL
https://maps.google.com/

25. Realtime / Connectivity
• WebSocket … リアルタイム双⽅方向通信
• Server-‐‑‒Sent Events … サーバープッシュ可能な通信
（ロングポーリング/Cometを仕様化）
• Web Messaging … Webページ間のメッセージ交換
• XMLHttpRequest Level2 … クロスドメイン通信やバイ
ナリデータが送れるように
• Notifications … デスクトップに通知
• WebRTC … ⾳音声/動画でリアルタイムコミュニケーショ
ンを⾏行行う

26. Realtime / Connectivity
Demo
• Browser Quest
• Webcam Toy

27. Browser Quest
http://browserquest.mozilla.org/

28. Webcam Toy
http://webcamtoy.com/ja/

29. Device Access
•
Geolocation API … GPS情報を取得
•
Web Speech API… ⾳音声⼊入⼒力力
•
Device Orientation …デバイスの向きや傾きを取得
•
Contacts API … アドレス帳へのアクセス
•
Calendar API … カレンダー情報の取得
•
Battery Status API … バッテリーの状態を取得
•
Network Information API … 通信環境の情報を取得
•
USB, Bluetooth など

30. Device Access
Demo
• Ball Pool
• Google Gravity
• Web Speech API Demonstration

31. Google Gravity
http://mrdoob.com/projects/chromeexperiments/google-‐‑‒gravity/

32. Web Speech API
https://www.google.com/intl/ja/chrome/demos/speech.html

33. Styling (CSS3)
•
CSS3 Selectors … :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利
•
border-‐‑‒radius … ⾓角が丸く！
•
text-‐‑‒shadow/box-‐‑‒shadow … 影がつく！
•
gradient … グラデーション
•
Webfonts … 外部フォントを扱えるように
•
Transforms … 変形
•
Transitions/Animations … CSSだけでアニメーションが可
な擬似クラスなどが増えた
能

34. CSS3 / Styling
Demo
• Button Maker
• Round corners -‐‑‒ HTML5Rokcs
• CSS3 Patterns Gallery
• CSS Clock

35. Rounded corners
http://slides.html5rocks.com/#rounded-‐‑‒corners

36. Button Maker
http://css-‐‑‒tricks.com/examples/ButtonMaker/

37. CSS Pattern Gallery
http://lea.verou.me/css3patterns/

38. ここで紹介した以外でも多くの仕様
があり、今も追加され続けています

39. 実装状況は？

40. Can I use…
http://caniuse.com/

41. 使えるものから
どんどん使っていきましょう！

42. Thank you!!
( @yoshikawa_t )