SlideShare una empresa de Scribd logo
1 de 65
Descargar para leer sin conexión
HTML5 Conference 2013
2013 11 30

@futomi

futomi.hatano

http://www.html5.jp/
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
•
•
•
•

1
2

HTML5 Web
HTML5 Web

• W3C

API

•

API

•

• 2013

API
API

1
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
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 Response
•
//

//
// RTCDTMFSender
//

createDTMFSender

(100ms
insertDTMF

50ms

)
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
WebAudio API PannerNode
Web Auido API
•
• iOS
•
•
• gUM
•
•
•
•
•
•
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
•
Media Source Extensions
MSE
• HTTP

•

API

•
•
•

•

video
MPEG-DASH
• Dynamic Adaptive Streaming over HTTP
• HTTP
Adaptive Streaming
•
•
•
• XML
• MPD Media Presentation Description
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
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 MP4Box

http://gpac.wp.mines-telecom.fr/mp4box/dash/
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Media Capture and Streams
screen capture
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
//
//
{ 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
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
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;
...
},
false);
mozFullScreenEnabled
mozRequestFullScreen()
mozfullscreenchange
mozFullScreenElement
window.screen.mozLockOrientation("landscape");
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
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
http://bit.ly/html5C201311

@futomi

futomi.hatano

http://www.html5.jp/

Más contenido relacionado

Destacado

WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいWebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいHiroyuki Anai
 
Introduction to WebGL and Three.js
Introduction to WebGL and Three.jsIntroduction to WebGL and Three.js
Introduction to WebGL and Three.jsJames Williams
 
RICOH THETAの全天球画像でペーパークラフト
RICOH THETAの全天球画像でペーパークラフトRICOH THETAの全天球画像でペーパークラフト
RICOH THETAの全天球画像でペーパークラフトTakehiko YOSHIDA
 
料理を楽しくする画像配信システム
料理を楽しくする画像配信システム料理を楽しくする画像配信システム
料理を楽しくする画像配信システムIssei Naruta
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分 Toshio Ehara
 
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るnode+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るKiyoshi SATOH
 
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.comKenta Tsuji
 
基本に戻ってInnoDBの話をします
基本に戻ってInnoDBの話をします基本に戻ってInnoDBの話をします
基本に戻ってInnoDBの話をしますyoku0825
 
【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣
【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣
【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣智治 長沢
 
機械学習と深層学習の数理
機械学習と深層学習の数理機械学習と深層学習の数理
機械学習と深層学習の数理Ryo Nakamura
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.jsyomotsu
 
これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】
これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】
これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】智治 長沢
 
ここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできることここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできることJun Ito
 
Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料Find Job Startup
 
JPEGのDCTブロックで コンテンツ指向のトリミング
JPEGのDCTブロックで コンテンツ指向のトリミングJPEGのDCTブロックで コンテンツ指向のトリミング
JPEGのDCTブロックで コンテンツ指向のトリミングYohsuke Furuta
 
20111117 msp説明資料
20111117 msp説明資料20111117 msp説明資料
20111117 msp説明資料Akiyuki Minami
 
新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHPYusuke Ando
 
こわくない Git
こわくない Gitこわくない Git
こわくない GitKota Saito
 
PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料Find Job Startup
 

Destacado (20)

WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいWebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろい
 
Introduction to WebGL and Three.js
Introduction to WebGL and Three.jsIntroduction to WebGL and Three.js
Introduction to WebGL and Three.js
 
RICOH THETAの全天球画像でペーパークラフト
RICOH THETAの全天球画像でペーパークラフトRICOH THETAの全天球画像でペーパークラフト
RICOH THETAの全天球画像でペーパークラフト
 
料理を楽しくする画像配信システム
料理を楽しくする画像配信システム料理を楽しくする画像配信システム
料理を楽しくする画像配信システム
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るnode+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
 
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com
 
Composer 再入門
Composer 再入門Composer 再入門
Composer 再入門
 
基本に戻ってInnoDBの話をします
基本に戻ってInnoDBの話をします基本に戻ってInnoDBの話をします
基本に戻ってInnoDBの話をします
 
【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣
【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣
【14-D-4】デベロッパー戦国時代!ストーリーをつなぐ開発環境と3つの秘訣
 
機械学習と深層学習の数理
機械学習と深層学習の数理機械学習と深層学習の数理
機械学習と深層学習の数理
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
 
これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】
これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】
これからのソフトウェア開発での
プロジェクト管理の展望【リックソフトセミナー】
 
ここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできることここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできること
 
Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料
 
JPEGのDCTブロックで コンテンツ指向のトリミング
JPEGのDCTブロックで コンテンツ指向のトリミングJPEGのDCTブロックで コンテンツ指向のトリミング
JPEGのDCTブロックで コンテンツ指向のトリミング
 
20111117 msp説明資料
20111117 msp説明資料20111117 msp説明資料
20111117 msp説明資料
 
新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP新標準PSRに学ぶきれいなPHP
新標準PSRに学ぶきれいなPHP
 
こわくない Git
こわくない Gitこわくない Git
こわくない Git
 
PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料
 

Más de Futomi Hatano

続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~Futomi Hatano
 
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみるWeb エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみるFutomi Hatano
 
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~Futomi Hatano
 
Embedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsFutomi Hatano
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Futomi Hatano
 
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンスHTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンスFutomi Hatano
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014Futomi Hatano
 
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向Futomi Hatano
 
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日Futomi Hatano
 
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えますFutomi Hatano
 
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012Futomi Hatano
 
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーProgressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーFutomi Hatano
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法Futomi Hatano
 

Más de Futomi Hatano (13)

続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
 
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみるWeb エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
 
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
Webエンジニアのためのスマートホームハック ~ Node.js で家電とArduinoを操作 ~
 
Embedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of Things
 
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
 
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンスHTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
 
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
 
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
 
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
 
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
 
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーProgressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 

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