Your SlideShare is downloading. ×
0
HTML5概要 & デモ
2013/10/27
Technology & Entrepreneurship TOKUSHIMA
Toru Yoshikawa (@yoshikawa_t)
Who?
吉川  徹  /  Toru  Yoshikawa
@yoshikawa_̲t

html5j/HTML5とか勉強会スタッフ
Google  Developer  Experts  (Chrome)
HTML5  Experts.jp...
HTML5とは?
HTML5とは?
1999年年に勧告された  HTML4.01  の10数年年ぶり
のアップデート
WHATWG  の  Web  Applications  1.0  と  Web  
Forms  2.0という仕様が  W3C  に採⽤用さ...
HTML5が解決する
これまでのWebの問題
ブラウザの互換性の問題
⽂文書の意味が不不明確
Webアプリとしての機能が不不⾜足している問題
HTML5が実現するもの
よりセマンティックな
コンテンツプラットフォーム
よりリッチな
アプリケーションプラットフォーム
HTML5によってWebアプリの
実現可能な範囲が広がっている
これまでのWeb

HTML

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

ネイティブアプリ

これからのWeb
仕様の⼀一部を
ピックアップして紹介します
HTML5の大まかなカテゴリ
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Inte...
仕様の一部を
ピックアップして紹介します
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance ...
Offline  &  Storage
• Application  Cache  …  オフラインアプリケーション
• Web  Storage  …  簡易易ローカルストレージ
• Indexed  Database  …  KVS型のローカル...
Offline  &  Storage
Demo

• HTML5  Terminal
• online/offline  events
HTML5  Terminal

http://www.htmlfivewow.com/demos/terminal/terminal.html
online/offline  events

http://html5-‐‑‒demos.appspot.com/static/navigator.onLine.html
Multimedia
• video/audio  …  動画/⾳音楽再⽣生
• WebVTT  …  字幕・トラック情報を追加
• Web  Audio  API  …  ⾳音声処理理・合成
• HTML  Media  Capture  …...
Multimedia
Demo

• Blowing  apart  fragments  of  video
• Using  WebSRT  to  create  video  captions
• HTML5  Wow  Visuali...
Blowing  apart  fragments  of  video

http://craftymind.com/factory/html5video/CanvasVideo.html
HTML5  Wow  Visualizer

http://www.htmlfivewow.com/demos/audio-‐‑‒visualizer/index.html
Graphics,  3D  &  Effects
• Canvas  …  2Dグラフィックス
• WebGL  …  3Dグラフィックス
• SVG  …  ベクターグラフィックス
Graphics,  3D  &  Effects
Demo

• Hello  Racer
• BananaBread
• MapsGL
Hello  Racer

http://helloracer.com/webgl/
EVE  online

http://www.eveonline.com/universe/spaceships/curse/
Google  MapsGL

https://maps.google.com/
Realtime  /  Connectivity
• WebSocket  …  リアルタイム双⽅方向通信
• Server-‐‑‒Sent  Events  …  サーバープッシュ可能な通信
(ロングポーリング/Cometを仕様化)

• ...
Realtime  /  Connectivity
Demo

• Browser  Quest
• Webcam  Toy
Browser  Quest

http://browserquest.mozilla.org/
Webcam  Toy

http://webcamtoy.com/ja/
Device  Access
•

Geolocation  API  …  GPS情報を取得

•

Web  Speech  API…  ⾳音声⼊入⼒力力

•

Device  Orientation  …デバイスの向きや傾きを取得

•...
Device  Access
Demo

• Ball  Pool
• Google  Gravity
• Web  Speech  API  Demonstration
Google  Gravity

http://mrdoob.com/projects/chromeexperiments/google-‐‑‒gravity/
Web  Speech  API

https://www.google.com/intl/ja/chrome/demos/speech.html
Styling  (CSS3)
•

CSS3  Selectors  …  :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利

•

border-‐‑‒radius  …  ⾓角が丸く!

•

text-‐...
CSS3  /  Styling
Demo

• Button  Maker
• Round  corners  -‐‑‒  HTML5Rokcs
• CSS3  Patterns  Gallery
• CSS  Clock
Rounded  corners

http://slides.html5rocks.com/#rounded-‐‑‒corners
Button Maker

http://css-‐‑‒tricks.com/examples/ButtonMaker/
CSS  Pattern  Gallery

http://lea.verou.me/css3patterns/
ここで紹介した以外でも多くの仕様
があり、今も追加され続けています
実装状況は?
Can I use…

http://caniuse.com/
使えるものから
どんどん使っていきましょう!
Thank you!!
( @yoshikawa_t )
Upcoming SlideShare
Loading in...5
×

Html5概要 & デモ

1,358

Published on

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

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,358
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Html5概要 & デモ"

  1. 1. HTML5概要 & デモ 2013/10/27 Technology & Entrepreneurship TOKUSHIMA Toru Yoshikawa (@yoshikawa_t)
  2. 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. 3. HTML5とは?
  4. 4. HTML5とは? 1999年年に勧告された  HTML4.01  の10数年年ぶり のアップデート WHATWG  の  Web  Applications  1.0  と  Web   Forms  2.0という仕様が  W3C  に採⽤用されたもの 2014年年の勧告を⽬目指して、現在策定中
  5. 5. HTML5が解決する これまでのWebの問題 ブラウザの互換性の問題 ⽂文書の意味が不不明確 Webアプリとしての機能が不不⾜足している問題
  6. 6. HTML5が実現するもの よりセマンティックな コンテンツプラットフォーム よりリッチな アプリケーションプラットフォーム
  7. 7. HTML5によってWebアプリの 実現可能な範囲が広がっている これまでのWeb HTML Flash ネイティブアプリ
  8. 8. HTML5によってWebアプリの 実現可能な範囲が広がっている HTML5 CSS3 JavaScript Flash ネイティブアプリ これからのWeb
  9. 9. 仕様の⼀一部を ピックアップして紹介します
  10. 10. HTML5の大まかなカテゴリ Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
  11. 11. 仕様の一部を ピックアップして紹介します Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
  12. 12. Offline  &  Storage • Application  Cache  …  オフラインアプリケーション • Web  Storage  …  簡易易ローカルストレージ • Indexed  Database  …  KVS型のローカルデータベース • File  APIs  …  ファイルの読み書き • File  System  API  …  アプリから利利⽤用できるファイル領領域 • online/offline  events  …  オン/オフライン状態の把握
  13. 13. Offline  &  Storage Demo • HTML5  Terminal • online/offline  events
  14. 14. HTML5  Terminal http://www.htmlfivewow.com/demos/terminal/terminal.html
  15. 15. online/offline  events http://html5-‐‑‒demos.appspot.com/static/navigator.onLine.html
  16. 16. Multimedia • video/audio  …  動画/⾳音楽再⽣生 • WebVTT  …  字幕・トラック情報を追加 • Web  Audio  API  …  ⾳音声処理理・合成 • HTML  Media  Capture  …  メディアの取込み
  17. 17. Multimedia Demo • Blowing  apart  fragments  of  video • Using  WebSRT  to  create  video  captions • HTML5  Wow  Visualizer
  18. 18. Blowing  apart  fragments  of  video http://craftymind.com/factory/html5video/CanvasVideo.html
  19. 19. HTML5  Wow  Visualizer http://www.htmlfivewow.com/demos/audio-‐‑‒visualizer/index.html
  20. 20. Graphics,  3D  &  Effects • Canvas  …  2Dグラフィックス • WebGL  …  3Dグラフィックス • SVG  …  ベクターグラフィックス
  21. 21. Graphics,  3D  &  Effects Demo • Hello  Racer • BananaBread • MapsGL
  22. 22. Hello  Racer http://helloracer.com/webgl/
  23. 23. EVE  online http://www.eveonline.com/universe/spaceships/curse/
  24. 24. Google  MapsGL https://maps.google.com/
  25. 25. Realtime  /  Connectivity • WebSocket  …  リアルタイム双⽅方向通信 • Server-‐‑‒Sent  Events  …  サーバープッシュ可能な通信 (ロングポーリング/Cometを仕様化) • Web  Messaging  …  Webページ間のメッセージ交換 • XMLHttpRequest  Level2  …  クロスドメイン通信やバイ ナリデータが送れるように • Notifications  …  デスクトップに通知 • WebRTC  …  ⾳音声/動画でリアルタイムコミュニケーショ ンを⾏行行う
  26. 26. Realtime  /  Connectivity Demo • Browser  Quest • Webcam  Toy
  27. 27. Browser  Quest http://browserquest.mozilla.org/
  28. 28. Webcam  Toy http://webcamtoy.com/ja/
  29. 29. Device  Access • Geolocation  API  …  GPS情報を取得 • Web  Speech  API…  ⾳音声⼊入⼒力力 • Device  Orientation  …デバイスの向きや傾きを取得 • Contacts  API  …  アドレス帳へのアクセス • Calendar  API  …  カレンダー情報の取得 • Battery  Status  API  …  バッテリーの状態を取得 • Network  Information  API  …  通信環境の情報を取得 • USB,  Bluetooth  など
  30. 30. Device  Access Demo • Ball  Pool • Google  Gravity • Web  Speech  API  Demonstration
  31. 31. Google  Gravity http://mrdoob.com/projects/chromeexperiments/google-‐‑‒gravity/
  32. 32. Web  Speech  API https://www.google.com/intl/ja/chrome/demos/speech.html
  33. 33. Styling  (CSS3) • CSS3  Selectors  …  :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利 • border-‐‑‒radius  …  ⾓角が丸く! • text-‐‑‒shadow/box-‐‑‒shadow  …  影がつく! • gradient  …  グラデーション • Webfonts  …  外部フォントを扱えるように • Transforms  …  変形 • Transitions/Animations  …  CSSだけでアニメーションが可 な擬似クラスなどが増えた 能
  34. 34. CSS3  /  Styling Demo • Button  Maker • Round  corners  -‐‑‒  HTML5Rokcs • CSS3  Patterns  Gallery • CSS  Clock
  35. 35. Rounded  corners http://slides.html5rocks.com/#rounded-‐‑‒corners
  36. 36. Button Maker http://css-‐‑‒tricks.com/examples/ButtonMaker/
  37. 37. CSS  Pattern  Gallery http://lea.verou.me/css3patterns/
  38. 38. ここで紹介した以外でも多くの仕様 があり、今も追加され続けています
  39. 39. 実装状況は?
  40. 40. Can I use… http://caniuse.com/
  41. 41. 使えるものから どんどん使っていきましょう!
  42. 42. Thank you!! ( @yoshikawa_t )
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×