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マークアップの心得と作法
 

Recently uploaded

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 

Recently uploaded (7)

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 

ウェブ標準デバイス系 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. • • •