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

120 likes31,517 views

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

Technology

1 of 65

Downloaded 129 times

HTML5 Conference 20132013 11 30@futomifutomi.hatanohttp://www.html5.jp/

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

••••12HTML5 WebHTML5 Web• W3CAPI•API•• 2013APIAPI1

API•••••...HTML5API写真：http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos

Peer-to-peer DTMF•••••••Dual-Tone Multi-Frequency0 9 A D *2Audio Channel#16IVR• Interactive Voice Response•

////// RTCDTMFSender//createDTMFSender(100msinsertDTMF50ms)

MPEG-DASH• Dynamic Adaptive Streaming over HTTP• HTTPAdaptive Streaming•••• XML• MPD Media Presentation Description

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"/>...

GPAC MP4Boxhttp://gpac.wp.mines-telecom.fr/mp4box/dash/

////{ video: { mandatory: { chromeMediaSource: "screen" } } }////// SSLPermissionDeniedError

•• ArrayBufferView••••UTF-8, UTF-16LE, UTF-16BEArrayBufferView

// Shift_JIS// ArrayBufferViewUint8Array("// Shift_JIS TextDecoder//////")

// UTF-8TextDecoder// UTF-8// Uint8ArrayArrayBufferView// 16// "e3 81 82 e3 81 84 e3 81 86 e3 81 88 e3 81 8a"

•• 3x3, 4x4•,,,,• element.style.transform

DOMMatrix//DOMMatrix// Chrome, Opera, SafariWebKitCSSMatrix// IE10MSCSSMatrix

Transferable// Transferable//[buffer]////buffer

// Internet Explorer// DataTransfer//// Internet Explorer//// DataTransfer

Base64• ASCII••// ASCIINGBase64// "VGhpcyBpcyBhIHN0cmluZy4="// Base64ASCII// "This is a string."

window.screen.addEventListener("mozorientationchange",function(event) {//var ori = window.screen.mozOrientation;...},false);

mozFullScreenEnabledmozRequestFullScreen()mozfullscreenchangemozFullScreenElementwindow.screen.mozLockOrientation("landscape");

• Media Capture and Streams•• Firefox AuroraBlob

//img////AnimationEffectTimingInput//Animation//Player

SVG// SVGpath// SVGPathSegList//PathAnimationEffect

http://bit.ly/html5C201311@futomifutomi.hatanohttp://www.html5.jp/

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

1.HTML5 Conference 20132013 11 30@futomifutomi.hatanohttp://www.html5.jp/

3.••••12HTML5 WebHTML5 Web• W3CAPI•API•• 2013APIAPI1

5.API••••••()

6.API•••••...HTML5API写真：http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos

7.1

8.WebRTC DTMF

9.WebRTC••• IP•/Skype/()()

10.Peer-to-peer DTMF•••••••Dual-Tone Multi-Frequency0 9 A D *2Audio Channel#16IVR• Interactive Voice Response•

11.////// RTCDTMFSender//createDTMFSender(100msinsertDTMF50ms)

13.WebAudio API PannerNode

14.Web Auido API•• iOS••• gUM

15.••••••

17.•

18.Media Source Extensions

19.MSE• HTTP•API••••video

20.MPEG-DASH• Dynamic Adaptive Streaming over HTTP• HTTPAdaptive Streaming•••• XML• MPD Media Presentation Description

22.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"/>...

23.GPAC MP4Boxhttp://gpac.wp.mines-telecom.fr/mp4box/dash/

25.Media Capture and Streamsscreen capture

27.////{ video: { mandatory: { chromeMediaSource: "screen" } } }////// SSLPermissionDeniedError

28.2

29.Encoding

30.•• ArrayBufferView••••UTF-8, UTF-16LE, UTF-16BEArrayBufferView

31.// Shift_JIS// ArrayBufferViewUint8Array("// Shift_JIS TextDecoder//////")

32.// UTF-8TextDecoder// UTF-8// Uint8ArrayArrayBufferView// 16// "e3 81 82 e3 81 84 e3 81 86 e3 81 88 e3 81 8a"

33.Web Cryptography API

34.•••••(SHA-256, SHA-384, etc.)

35.//// Crypto//// CryptoOperation//

36.DOMMatrix interface