ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 27,978 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
27,978
On Slideshare
25,116
From Embeds
2,862
Number of Embeds
27

Actions

Shares
Downloads
106
Comments
1
Likes
100

Embeds 2,862

http://html5experts.jp 1,130
http://think-sv.net 749
http://stocker.jp 562
https://twitter.com 184
http://feedly.com 112
http://www.newsblur.com 43
http://www.feedspot.com 29
http://tweetedtimes.com 9
http://digg.com 9
http://newsblur.com 8
https://reader.aol.co.jp 4
https://www.chatwork.com 3
http://www.sakura.think-sv.net 3
https://www.google.co.jp 2
http://b.hatena.ne.jp 2
http://mym.corp.yahoo.co.jp 2
http://cache.yahoofs.jp 1
http://think-sv.net&_=1405841413238 HTTP 1
http://tabunmuri.hatenablog.com 1
http://www.google.co.jp 1
https://think-sv.net 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
https://www.commafeed.com 1
http://r.awks.jp 1
http://www12243uf.sakura.ne.jp 1
http://think-sv.net&_=1405842013656 HTTP 1

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/