HTML5 Conference 2013
2013 11 30

@futomi

futomi.hatano

http://www.html5.jp/
•
•
•
•

1
2

HTML5 Web
HTML5 Web

• W3C

API

•

API

•

• 2013

API
API

1
API
•
•
•
•

•
•

(

)
API
•
•
•
•
•

...

HTML5
API

写真:http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos
1
WebRTC DTMF
WebRTC
•
•
• IP
•

/

Skype
/

(

)

(

)
Peer-to-peer DTMF
•
•
•
•
•
•
•

Dual-Tone Multi-Frequency
0 9 A D *
2
Audio Channel

#

16

IVR
• Interactive Voice Respo...
//

//
// RTCDTMFSender
//

createDTMFSender

(100ms
insertDTMF

50ms

)
WebAudio API PannerNode
Web Auido API
•
• iOS
•
•
• gUM
•
•
•
•
•
•
•
Media Source Extensions
MSE
• HTTP

•

API

•
•
•

•

video
MPEG-DASH
• Dynamic Adaptive Streaming over HTTP
• HTTP
Adaptive Streaming
•
•
•
• XML
• MPD Media Presentation Descriptio...
MPD
<?xml version="1.0"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500000S" ...>
...
<Period id="" du...
GPAC MP4Box

http://gpac.wp.mines-telecom.fr/mp4box/dash/
Media Capture and Streams
screen capture
//
//
{ video: { mandatory: { chromeMediaSource: "screen" } } }
//

//
// SSL

PermissionDeniedError
2
Encoding
•
• ArrayBufferView
•
•

•
•

UTF-8, UTF-16LE, UTF-16BE
ArrayBufferView
// Shift_JIS
// ArrayBufferView

Uint8Array
("

// Shift_JIS TextDecoder
//
//

//

")
// UTF-8

TextDecoder

// UTF-8
// Uint8Array

ArrayBufferView

// 16

// "e3 81 82 e3 81 84 e3 81 86 e3 81 88 e3 81 8a"
Web Cryptography API
•
•
•
•
•

(SHA-256, SHA-384, etc.)
//
// Crypto
//
// CryptoOperation
//
DOMMatrix interface
•
• 3x3, 4x4
•
,
,
,
,
• element.style.transform
DOMMatrix
//
DOMMatrix

// Chrome, Opera, Safari

WebKitCSSMatrix
// IE10
MSCSSMatrix
Transferable objects
//
//

//

buffer
Transferable
// Transferable
//

[buffer]

//
//

buffer
3
Clipboard API and events
document
document
document

copy
cut
paste
// Internet Explorer
// DataTransfer
//

// Internet Explorer
//

// DataTransfer
Base64 utility methods
Base64
• ASCII
•
•
// ASCII

NG

Base64
// "VGhpcyBpcyBhIHN0cmluZy4="

// Base64

ASCII
// "This is a string."
4
The Screen Orientation API
•
•
• Fullscreen
window.screen.addEventListener("mozorientationchange",
function(event) {
//
var ori = window.screen.mozOrientation;
...
},...
mozFullScreenEnabled
mozRequestFullScreen()
mozfullscreenchange
mozFullScreenElement
window.screen.mozLockOrientation("lan...
MediaStream Recording
• Media Capture and Streams
•

• Firefox Aurora

Blob
//

MediaRecorder

//
//
// audio

// Blob
Web Animations 1.0
•
•
•
•
•

CSS

SVG Animations
web-animations-js
//

img

//

//

AnimationEffect

TimingInput

//

Animation

//

Player
SVG
// SVG

path

// SVGPathSegList

//

PathAnimationEffect
//
// parGroup

//

Animation

ParGroup
Player
//
// SeqGroup

//

Animation

SeqGroup
Player
http://bit.ly/html5C201311

@futomi

futomi.hatano

http://www.html5.jp/
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Upcoming SlideShare
Loading in...5
×

ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013

24,234

Published on

Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える(かもしれない)最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。
本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立たないかもしれないし、役に立つかもしれない。そんなスリリングなAPIを知ってこそマニアなのだ。
ようこそ、HTML5裏APIの世界へ。

Published in: Technology
1 Comment
115 Likes
Statistics
Notes
No Downloads
Views
Total Views
24,234
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
122
Comments
1
Likes
115
Embeds 0
No embeds

No notes for slide

ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013

  1. 1. HTML5 Conference 2013 2013 11 30 @futomi futomi.hatano http://www.html5.jp/
  2. 2. • • • • 1 2 HTML5 Web HTML5 Web • W3C API • API • • 2013 API API 1
  3. 3. API • • • • • • ( )
  4. 4. API • • • • • ... HTML5 API 写真:http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos
  5. 5. 1
  6. 6. WebRTC DTMF
  7. 7. WebRTC • • • IP • / Skype / ( ) ( )
  8. 8. Peer-to-peer DTMF • • • • • • • Dual-Tone Multi-Frequency 0 9 A D * 2 Audio Channel # 16 IVR • Interactive Voice Response •
  9. 9. // // // RTCDTMFSender // createDTMFSender (100ms insertDTMF 50ms )
  10. 10. WebAudio API PannerNode
  11. 11. Web Auido API • • iOS • • • gUM
  12. 12. • • • • • •
  13. 13.
  14. 14. Media Source Extensions
  15. 15. MSE • HTTP • API • • • • video
  16. 16. MPEG-DASH • Dynamic Adaptive Streaming over HTTP • HTTP Adaptive Streaming • • • • XML • MPD Media Presentation Description
  17. 17. MPD <?xml version="1.0"?> <MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500000S" ...> ... <Period id="" duration="PT0H0M33.00S"> <AdaptationSet segmentAlignment="true" maxWidth="854" maxHeight="480" maxFrameRate="12800/510" par="854:480"> ... <Representation id="1" mimeType="video/mp4" codecs="avc1.4d4029,mp4a.40.2" width="854" height="480" frameRate="12800/510" sar="1:1" audioSamplingRate="48000" startWithSAP="0" bandwidth="1639763"> <AudioChannelConfiguration .../> <SegmentList timescale="1000" duration="1215"> <Initialization sourceURL="movie_segmentinit.mp4"/> <SegmentURL media="movie_segment1.m4s"/> <SegmentURL media="movie_segment2.m4s"/> ...
  18. 18. GPAC MP4Box http://gpac.wp.mines-telecom.fr/mp4box/dash/
  19. 19. Media Capture and Streams screen capture
  20. 20. // // { video: { mandatory: { chromeMediaSource: "screen" } } } // // // SSL PermissionDeniedError
  21. 21. 2
  22. 22. Encoding
  23. 23. • • ArrayBufferView • • • • UTF-8, UTF-16LE, UTF-16BE ArrayBufferView
  24. 24. // Shift_JIS // ArrayBufferView Uint8Array (" // Shift_JIS TextDecoder // // // ")
  25. 25. // UTF-8 TextDecoder // UTF-8 // Uint8Array ArrayBufferView // 16 // "e3 81 82 e3 81 84 e3 81 86 e3 81 88 e3 81 8a"
  26. 26. Web Cryptography API
  27. 27. • • • • • (SHA-256, SHA-384, etc.)
  28. 28. // // Crypto // // CryptoOperation //
  29. 29. DOMMatrix interface
  30. 30. • • 3x3, 4x4 • , , , , • element.style.transform
  31. 31. DOMMatrix // DOMMatrix // Chrome, Opera, Safari WebKitCSSMatrix // IE10 MSCSSMatrix
  32. 32. Transferable objects
  33. 33. // // // buffer
  34. 34. Transferable // Transferable // [buffer] // // buffer
  35. 35. 3
  36. 36. Clipboard API and events
  37. 37. document document document copy cut paste
  38. 38. // Internet Explorer // DataTransfer // // Internet Explorer // // DataTransfer
  39. 39. Base64 utility methods
  40. 40. Base64 • ASCII • • // ASCII NG Base64 // "VGhpcyBpcyBhIHN0cmluZy4=" // Base64 ASCII // "This is a string."
  41. 41. 4
  42. 42. The Screen Orientation API
  43. 43. • • • Fullscreen
  44. 44. window.screen.addEventListener("mozorientationchange", function(event) { // var ori = window.screen.mozOrientation; ... }, false);
  45. 45. mozFullScreenEnabled mozRequestFullScreen() mozfullscreenchange mozFullScreenElement window.screen.mozLockOrientation("landscape");
  46. 46. MediaStream Recording
  47. 47. • Media Capture and Streams • • Firefox Aurora Blob
  48. 48. // MediaRecorder // // // audio // Blob
  49. 49. Web Animations 1.0
  50. 50. • • • • • CSS SVG Animations
  51. 51. web-animations-js
  52. 52. // img // // AnimationEffect TimingInput // Animation // Player
  53. 53. SVG // SVG path // SVGPathSegList // PathAnimationEffect
  54. 54. // // parGroup // Animation ParGroup Player
  55. 55. // // SeqGroup // Animation SeqGroup Player
  56. 56. http://bit.ly/html5C201311 @futomi futomi.hatano http://www.html5.jp/
  1. A particular slide catching your eye?

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

×