SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Downloaden Sie, um offline zu lesen
@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

Weitere ähnliche Inhalte

Mehr von 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
 

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

Kürzlich hochgeladen

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Hiroshi Tomioka
 

Kürzlich hochgeladen (12)

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 

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