ようこそ、html5裏apiの世界へ - html5 conference 2013
DESCRIPTION
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える(かもしれない)最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立たないかもしれないし、役に立つかもしれない。そんなスリリングなAPIを知ってこそマニアなのだ。 ようこそ、HTML5裏APIの世界へ。TRANSCRIPT
![Page 1: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/1.jpg)
2013 11 30
@futomi futomi.hatano
http://www.html5.jp/
HTML5 Conference 2013
![Page 2: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/2.jpg)
![Page 3: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/3.jpg)
• • 1 HTML5 Web API
• 2 HTML5 Web API
•
• W3C API •
API
•
• 2013 1
![Page 4: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/4.jpg)
![Page 5: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/5.jpg)
API
•
• ( )
•
•
•
•
![Page 6: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/6.jpg)
写真:http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos
API
•
•
•
•
• ...
HTML5
API
![Page 7: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/7.jpg)
1
![Page 8: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/8.jpg)
WebRTC DTMF
![Page 9: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/9.jpg)
WebRTC
• Skype
• / /
• IP
• ( ) ( )
![Page 10: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/10.jpg)
Peer-to-peer DTMF
• Dual-Tone Multi-Frequency
•
• 0 9 A D * # 16
• 2
• Audio Channel
•
• IVR
• Interactive Voice Response
•
![Page 11: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/11.jpg)
//
//
// RTCDTMFSender
createDTMFSender
// (100ms 50ms )
insertDTMF
![Page 12: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/12.jpg)
![Page 13: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/13.jpg)
WebAudio API PannerNode
![Page 14: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/14.jpg)
Web Auido API
•
• iOS
•
•
• gUM
![Page 15: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/15.jpg)
•
•
•
•
•
•
![Page 16: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/16.jpg)
![Page 17: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/17.jpg)
•
![Page 18: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/18.jpg)
Media Source Extensions
![Page 19: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/19.jpg)
MSE
• HTTP
• videoAPI
• •
•
•
![Page 20: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/20.jpg)
MPEG-DASH
• Dynamic Adaptive Streaming over HTTP
• HTTP Adaptive Streaming
•
•
•
• XML • MPD Media Presentation Description
![Page 21: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/21.jpg)
![Page 22: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/22.jpg)
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"/>
...
![Page 23: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/23.jpg)
http://gpac.wp.mines-telecom.fr/mp4box/dash/
GPAC MP4Box
![Page 24: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/24.jpg)
![Page 25: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/25.jpg)
Media Capture and Streams screen capture
![Page 26: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/26.jpg)
![Page 27: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/27.jpg)
//
//
{ video: { mandatory: { chromeMediaSource: "screen" } } }//
//
// SSL PermissionDeniedError
![Page 28: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/28.jpg)
2
![Page 29: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/29.jpg)
Encoding
![Page 30: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/30.jpg)
• • ArrayBufferView
•
•
• • UTF-8, UTF-16LE, UTF-16BE
ArrayBufferView
![Page 31: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/31.jpg)
// Shift_JIS Uint8Array
// ArrayBufferView (" ")
// Shift_JIS TextDecoder
//
//
//
![Page 32: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/32.jpg)
// UTF-8 TextDecoder
// UTF-8
// Uint8Array ArrayBufferView
// 16
// "e3 81 82 e3 81 84 e3 81 86 e3 81 88 e3 81 8a"
![Page 33: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/33.jpg)
Web Cryptography API
![Page 34: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/34.jpg)
•
• (SHA-256, SHA-384, etc.)
•
•
•
![Page 35: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/35.jpg)
//
// Crypto
//
// CryptoOperation
//
![Page 36: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/36.jpg)
DOMMatrix interface
![Page 37: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/37.jpg)
•
• 3x3, 4x4
• , , , ,
• element.style.transform
![Page 38: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/38.jpg)
//
DOMMatrix
// Chrome, Opera, Safari
WebKitCSSMatrix// IE10
MSCSSMatrix
DOMMatrix
![Page 39: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/39.jpg)
![Page 40: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/40.jpg)
Transferable objects
![Page 41: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/41.jpg)
//
//
// buffer
![Page 42: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/42.jpg)
Transferable
// Transferable
//
[buffer]
// buffer
//
![Page 43: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/43.jpg)
3
![Page 44: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/44.jpg)
Clipboard API and events
![Page 45: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/45.jpg)
document copy
document cut
document paste
![Page 46: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/46.jpg)
// Internet Explorer
// DataTransfer
//
// Internet Explorer
// DataTransfer
//
![Page 47: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/47.jpg)
Base64 utility methods
![Page 48: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/48.jpg)
Base64
• ASCII
• NG
•
// ASCII Base64
// "VGhpcyBpcyBhIHN0cmluZy4="
// Base64 ASCII
// "This is a string."
![Page 49: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/49.jpg)
4
![Page 50: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/50.jpg)
The Screen Orientation API
![Page 51: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/51.jpg)
•
• • Fullscreen
![Page 52: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/52.jpg)
window.screen.addEventListener("mozorientationchange",
function(event) { //
var ori = window.screen.mozOrientation;
...
},
false);
![Page 53: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/53.jpg)
mozFullScreenEnabled
mozRequestFullScreen()
mozfullscreenchange
mozFullScreenElement
window.screen.mozLockOrientation("landscape");
![Page 54: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/54.jpg)
MediaStream Recording
![Page 55: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/55.jpg)
• Media Capture and Streams
•
Blob
• Firefox Aurora
![Page 56: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/56.jpg)
//
MediaRecorder
//
//
// Blob
// audio
![Page 57: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/57.jpg)
Web Animations 1.0
![Page 58: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/58.jpg)
•
• CSS SVG Animations
•
•
•
![Page 59: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/59.jpg)
web-animations-js
![Page 60: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/60.jpg)
// img
// AnimationEffect
// TimingInput
// Animation
// Player
![Page 61: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/61.jpg)
SVG
// SVG path
// SVGPathSegList
// PathAnimationEffect
![Page 62: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/62.jpg)
// Animation
// parGroup
ParGroup// Player
![Page 63: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/63.jpg)
// Animation
// SeqGroup
SeqGroup// Player
![Page 64: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/64.jpg)
![Page 65: ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](https://reader033.vdocuments.mx/reader033/viewer/2022052503/540cee097bef0a84278b821d/html5/thumbnails/65.jpg)
@futomi futomi.hatano
http://www.html5.jp/
http://bit.ly/html5C201311