SlideShare a Scribd company logo
1 of 27
Download to read offline
@futomi 
futomi.hatano
• 
• 
•
(function watchGamepad() { 
vargamepads = navigator.getGamepads(); 
varbuttons = gamepads[0].buttons; 
// Do something 
window.requestAnimationFrame(watchGamepad); 
})();
• 
• 
• 
• 
• 
• 
• 
•
navigator.requestMIDIAccess().then( 
function(midiaccess) { 
// 出力ポートのMIDIPort(MIDIOutput)オブジェクトを取得 
varoutput_list= midiaccess.outputs(); 
varoutput = output_list[0]; 
// MIDIメッセージ送信(ノートオン, チャネル0, ド(C4)の音, ベロシティ70) 
output.send(new Uint8Array([144, 60, 70])); 
}, 
function() { console.log("Error"); } 
); 
1 
メッセージ値 
チャネル番号 
ステータスバイト 
0 
ノート番号 
0 
ベロシティ 
128以上 
127以下 
127以下
• 
•
• 
• 
• 
•
varhello = new NDEFRecordText("hello world", "en-US", "UTF-8"); 
navigator.nfc.ontagfound= function(e) { 
window.console.log('NFC Tag found!'); 
vartag = e.tag; 
tag.writeNDEF(new NDEFMessage([hello])); 
} 
navigator.nfc.startPoll().catch( 
function(e) { 
window.console.error(e); 
});
• 
• 
• 
• 
• 
• 
• 
•
• 
• 
• 
navigator.geolocation.getCurrentPosition(function(pos) { 
console.log("緯度: " + pos.coords.latitude); 
console.log("経度: " + pos.coords.longitude); 
console.log("GPS高度: " + pos.coords.altitude); 
});
• 
•
• 
• 
•
• 
• 
window.addEventListener("devicelight", function(event) { 
console.log(event.value+ " ルクス"); 
}, false);
• 
// 物体の接近検知 
window.addEventListener("userproximity", function(event) { 
if(event.near=== true) {console.log("物体が接近");} 
}, false); 
// 物体までの距離検知 
window.addEventListener("deviceproximity", function(event) { 
console.log("距離: " + event.value+ " cm); 
}, false);
• 
// 1 
navigator.vibrate(1000); 
// 120.5 
navigator.vibrate([1000, 500, 1000]); 
// 
navigator.vibrate(0);
• 
navigator.battery.addEventListener("levelchange", function() { 
console.log(":" + navigator.battery.level); 
}, false); 
navigator.battery.addEventListener("chargingchange", function() { 
if(navigator.battery.charging=== true) { 
console.log(""); 
} 
}, false);
• 
• 
• 
• 
• 
•
• 
• 
• 
• 
• 
• 
• 
• 
•
• 
• 
• 
• 
• 
• 
• 
• 
•
• 
• 
• 
•
@futomi 
futomi.hatano

More Related Content

More from 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
 
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向Futomi Hatano
 
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013Futomi 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
 

More from 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 悩める組込機器向けウェブコンテンツのパフォーマンス
 
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
 
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
 
アプリ開発支援サービス「アプリカン」 - 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マークアップの心得と作法
 

ウェブ標準デバイス系 API 総集編 2014

  • 2.
  • 4.
  • 5.
  • 6. (function watchGamepad() { vargamepads = navigator.getGamepads(); varbuttons = gamepads[0].buttons; // Do something window.requestAnimationFrame(watchGamepad); })();
  • 7. • • • • • • • •
  • 8. navigator.requestMIDIAccess().then( function(midiaccess) { // 出力ポートのMIDIPort(MIDIOutput)オブジェクトを取得 varoutput_list= midiaccess.outputs(); varoutput = output_list[0]; // MIDIメッセージ送信(ノートオン, チャネル0, ド(C4)の音, ベロシティ70) output.send(new Uint8Array([144, 60, 70])); }, function() { console.log("Error"); } ); 1 メッセージ値 チャネル番号 ステータスバイト 0 ノート番号 0 ベロシティ 128以上 127以下 127以下
  • 10.
  • 11. • • •
  • 12. varhello = new NDEFRecordText("hello world", "en-US", "UTF-8"); navigator.nfc.ontagfound= function(e) { window.console.log('NFC Tag found!'); vartag = e.tag; tag.writeNDEF(new NDEFMessage([hello])); } navigator.nfc.startPoll().catch( function(e) { window.console.error(e); });
  • 13. • • • • • • • •
  • 14.
  • 15. • • • navigator.geolocation.getCurrentPosition(function(pos) { console.log("緯度: " + pos.coords.latitude); console.log("経度: " + pos.coords.longitude); console.log("GPS高度: " + pos.coords.altitude); });
  • 18. • • window.addEventListener("devicelight", function(event) { console.log(event.value+ " ルクス"); }, false);
  • 19. • // 物体の接近検知 window.addEventListener("userproximity", function(event) { if(event.near=== true) {console.log("物体が接近");} }, false); // 物体までの距離検知 window.addEventListener("deviceproximity", function(event) { console.log("距離: " + event.value+ " cm); }, false);
  • 20. • // 1 navigator.vibrate(1000); // 120.5 navigator.vibrate([1000, 500, 1000]); // navigator.vibrate(0);
  • 21. • navigator.battery.addEventListener("levelchange", function() { console.log(":" + navigator.battery.level); }, false); navigator.battery.addEventListener("chargingchange", function() { if(navigator.battery.charging=== true) { console.log(""); } }, false);
  • 22. • • • • • •
  • 23.
  • 24. • • • • • • • • •
  • 25. • • • • • • • • •
  • 26. • • •