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

  • 22,077 views
Uploaded on

Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える(かもしれない)最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系の …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
22,077
On Slideshare
0
From Embeds
0
Number of Embeds
25

Actions

Shares
Downloads
108
Comments
1
Likes
101

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Conference 2013 2013 11 30 @futomi futomi.hatano http://www.html5.jp/
  • 2. • • • • 1 2 HTML5 Web HTML5 Web • W3C API • API • • 2013 API API 1
  • 3. API • • • • • • ( )
  • 4. API • • • • • ... HTML5 API 写真:http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos
  • 5. 1
  • 6. WebRTC DTMF
  • 7. WebRTC • • • IP • / Skype / ( ) ( )
  • 8. Peer-to-peer DTMF • • • • • • • Dual-Tone Multi-Frequency 0 9 A D * 2 Audio Channel # 16 IVR • Interactive Voice Response •
  • 9. // // // RTCDTMFSender // createDTMFSender (100ms insertDTMF 50ms )
  • 10. WebAudio API PannerNode
  • 11. Web Auido API • • iOS • • • gUM
  • 12. • • • • • •
  • 13.
  • 14. Media Source Extensions
  • 15. MSE • HTTP • API • • • • video
  • 16. MPEG-DASH • Dynamic Adaptive Streaming over HTTP • HTTP Adaptive Streaming • • • • XML • MPD Media Presentation Description
  • 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. GPAC MP4Box http://gpac.wp.mines-telecom.fr/mp4box/dash/
  • 19. Media Capture and Streams screen capture
  • 20. // // { video: { mandatory: { chromeMediaSource: "screen" } } } // // // SSL PermissionDeniedError
  • 21. 2
  • 22. Encoding
  • 23. • • ArrayBufferView • • • • UTF-8, UTF-16LE, UTF-16BE ArrayBufferView
  • 24. // Shift_JIS // ArrayBufferView Uint8Array (" // Shift_JIS TextDecoder // // // ")
  • 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. Web Cryptography API
  • 27. • • • • • (SHA-256, SHA-384, etc.)
  • 28. // // Crypto // // CryptoOperation //
  • 29. DOMMatrix interface
  • 30. • • 3x3, 4x4 • , , , , • element.style.transform
  • 31. DOMMatrix // DOMMatrix // Chrome, Opera, Safari WebKitCSSMatrix // IE10 MSCSSMatrix
  • 32. Transferable objects
  • 33. // // // buffer
  • 34. Transferable // Transferable // [buffer] // // buffer
  • 35. 3
  • 36. Clipboard API and events
  • 37. document document document copy cut paste
  • 38. // Internet Explorer // DataTransfer // // Internet Explorer // // DataTransfer
  • 39. Base64 utility methods
  • 40. Base64 • ASCII • • // ASCII NG Base64 // "VGhpcyBpcyBhIHN0cmluZy4=" // Base64 ASCII // "This is a string."
  • 41. 4
  • 42. The Screen Orientation API
  • 43. • • • Fullscreen
  • 44. window.screen.addEventListener("mozorientationchange", function(event) { // var ori = window.screen.mozOrientation; ... }, false);
  • 45. mozFullScreenEnabled mozRequestFullScreen() mozfullscreenchange mozFullScreenElement window.screen.mozLockOrientation("landscape");
  • 46. MediaStream Recording
  • 47. • Media Capture and Streams • • Firefox Aurora Blob
  • 48. // MediaRecorder // // // audio // Blob
  • 49. Web Animations 1.0
  • 50. • • • • • CSS SVG Animations
  • 51. web-animations-js
  • 52. // img // // AnimationEffect TimingInput // Animation // Player
  • 53. SVG // SVG path // SVGPathSegList // PathAnimationEffect
  • 54. // // parGroup // Animation ParGroup Player
  • 55. // // SeqGroup // Animation SeqGroup Player
  • 56. http://bit.ly/html5C201311 @futomi futomi.hatano http://www.html5.jp/