SlideShare a Scribd company logo
Chrome Apps のデバイスAPI 
2014/10/30 
Webプラットフォーム部第四回ナイトセミナー 
HTML5 デバイス API 勉強会 
Toru Yoshikawa (@yoshikawa_̲t)
Who? 
吉川 徹 / Toru Yoshikawa 
@yoshikawa_̲t 
html5j 代表/html5j ビギナー部 副部⻑⾧長 
Google Developer Experts (Chrome) 
HTML5 Experts.jp エキスパートNo.3 
Web先端技術味⾒見見部 (顧問)/⽇日本 
jQuery Mobileユーザー会 (管理理⼈人)/ 
Sublime Text 2 Japan Users Group (管 
理理⼈人)などなど 
Blog: http://d.hatena.ne.jp/pikotea/
はじめに 
Chrome Apps は基本的にデスクトップをターゲットし 
ているため、モバイル固有のAPIはまだまだ揃っていま 
せん(ChromeOSをターゲットとしたものが多いです) 
Chrome Apps for mobile は、まだDeveloper Preview 
版でモバイル固有の機能が増えていくのはこれからだと 
思われます。 
例例えばスマートフォンを振動させるような⽤用途がある場 
合は、標準のAPI(Vibraton API)を利利⽤用しましょう
Chrome Apps のデバイスAPI 
API⼀一覧 
( https://developer.chrome.com/apps/api_̲index ) 
サンプル 
( https://developer.chrome.com/apps/samples ) 
各種デバイスとの通信系APIが豊富 
API⾃自体は低レイヤーなものが多く、扱うデバイスに関す 
る知識識が必要 
ぶっちゃけ⾟辛い
通信系API 
機能・説明ver mobile 
chrome.bluetooth Bluetoothデバイスと接続する37 × 
chrome.bluetoothLowEnergy Bluetooth Low Energy(Bluetooth LE) 37 × 
chrome.bluetoothSocket Bluetooth通信に利用する37 × 
chrome.serial シリアル接続23 ? 
chrome.usb USB接続26 × 
chrome.socket ソケット通信24 ◯ 
chrome.sockets.tcp ソケット通信(TCP) 33 × 
chrome.sockets.tcpServer ソケット通信(TCPサーバー) 33 × 
chrome.sockets.udp ソケット通信(UDP) 33 ×
システム系API 
機能・説明ver mobile 
chrome.power 電源管理(Keep Awake) 27 ◯ 
chrome.system.cpu CPU情報の取得32 ◯ 
chrome.system.display ディスプレイ情報の取得・設定30 ◯ 
chrome.system.memory メモリ情報の取得32 ◯ 
chrome.system.network NIC情報の取得33 ◯ 
chrome.system.storage 外部ストレージ情報の取得など(eject等も可能) 24 ◯
その他のAPI 
機能・説明ver mobile 
chrome.fileSystem ローカルファイルの読み書き23 △ 
chrome.hid ヒューマンインターフェースデバイス接続38 ×
USB接続の簡易易⼿手順① 
manifest.jsonにパーミッションを記述 
"permissions": [ 
"usb" 
] 
デバイスを固定する場合(IDは10進数で) 
"permissions": [ 
"usbDevices": [ 
{ 
"vendorId": 123, 
"productId": 456 
} 
] 
]
USB接続の簡易易⼿手順① 
macの場合
USB接続の簡易易⼿手順② 
getDevicesでデバイスを探す 
function onDeviceFound(devices) { 
this.devices=devices; 
if (devices) { 
if (devices.length > 0) { 
console.log("Device(s) found: "+devices.length); 
} else { 
console.log("Device could not be found"); 
} 
} else { 
console.log("Permission denied."); 
} 
} 
! 
chrome.usb.getDevices({"vendorId": vendorId, "productId": 
productId}, onDeviceFound);
USB接続の簡易易⼿手順③ 
openDeviceでデバイスと接続 
var usbConnection = null; 
var onOpenCallback = function(connection) { 
if (connection) { 
usbConnection = connection; 
console.log("Device opened."); 
} else { 
console.log("Device failed to open."); 
} 
}; 
! 
chrome.usb.openDevice(device, onOpenCallback);
USB接続の簡易易⼿手順④ 
bulkTransfer(バルク転送)でデータを受け取る 
var onTransferCallback = function(event) { 
if (event && event.resultCode === 0 && event.data) { 
console.log("got " + event.data.byteLength + " bytes"); 
} 
}; 
! 
chrome.usb.bulkTransfer(connectionHandle, transferInfo, 
onTransferCallback);
USB接続の簡易易⼿手順 
その他のメソッドなど 
デバイス制御 
chrome.usb.controlTransfer 
アイソクロナス転送(⼀一定帯域の転送を保証する) 
chrome.usb.isochronousTransfer 
割り込み転送 
chrome.usb.interruptTransfer 
メソッドの選択や細かいパラメータの指定などで、基本的 
なUSBの知識識が必要
おまけ 
Chrome App NFC Library 
( https://github.com/ 
GoogleChrome/chrome-‐‑‒nfc ) 
chrome.nfcでNFCを扱える 
(内部はchrome.usbを利利⽤用) 
https://plus.google.com/+FrancoisBeaufort/posts/CWTm2GaZRLJ
Chrome Apps のデバイスAPI 
最初にいった通り、デバイス固有の機能について 
はまだまだ揃っていないので、もしChrome 
Apps for mobileを利利⽤用するならCordovaのAPI 
を利利⽤用することも検討したほうが良良いかも 
実は、Chrome Apps for Mobileも対応APIが少 
ない状態…
Thank you!! 
(@yoshikawa_̲t)

More Related Content

What's hot

マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
Microsoft
 
ROS.js の紹介
ROS.js の紹介ROS.js の紹介
ROS.js の紹介
Honma Masashi
 
HTML5 NIGHT 08. Web × パフォーマンス技術
HTML5 NIGHT 08. Web × パフォーマンス技術HTML5 NIGHT 08. Web × パフォーマンス技術
HTML5 NIGHT 08. Web × パフォーマンス技術
Yoichiro Takehora
 
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
hirokiky
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
Shinya Okano
 
20200516 selenium-meetup-winappdriver
20200516 selenium-meetup-winappdriver20200516 selenium-meetup-winappdriver
20200516 selenium-meetup-winappdriver
Hiroko Tamagawa
 
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
 
Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1
ikikko
 
公開型CMSとしてのTrac
公開型CMSとしてのTrac公開型CMSとしてのTrac
公開型CMSとしてのTrac
Kazuya Hirobe
 
PWAについて
PWAについてPWAについて
PWAについて
iPride Co., Ltd.
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and Opptunity
Makoto Kato
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
 
開発を彩る技術たち
開発を彩る技術たち開発を彩る技術たち
開発を彩る技術たち
Oda Shinsuke
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
Alisue Lambda
 
Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法
Ian Lewis
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
Vue.js with Go
Vue.js with GoVue.js with Go
Vue.js with Go
Kazuhiro Kubota
 
Bot Framework v4 開発 Tips 2018-11
Bot Framework v4  開発 Tips 2018-11Bot Framework v4  開発 Tips 2018-11
Bot Framework v4 開発 Tips 2018-11
Atsushi Yokohama (BEACHSIDE)
 
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebAppGinとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
Akihiko Horiuchi
 

What's hot (20)

マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
 
ROS.js の紹介
ROS.js の紹介ROS.js の紹介
ROS.js の紹介
 
HTML5 NIGHT 08. Web × パフォーマンス技術
HTML5 NIGHT 08. Web × パフォーマンス技術HTML5 NIGHT 08. Web × パフォーマンス技術
HTML5 NIGHT 08. Web × パフォーマンス技術
 
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深〜いパーミッション管理の話 @ PyconJP2017
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
 
20200516 selenium-meetup-winappdriver
20200516 selenium-meetup-winappdriver20200516 selenium-meetup-winappdriver
20200516 selenium-meetup-winappdriver
 
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
 
Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1Google Apps Scirpt勉強会 #1
Google Apps Scirpt勉強会 #1
 
公開型CMSとしてのTrac
公開型CMSとしてのTrac公開型CMSとしてのTrac
公開型CMSとしてのTrac
 
PWAについて
PWAについてPWAについて
PWAについて
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and Opptunity
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
開発を彩る技術たち
開発を彩る技術たち開発を彩る技術たち
開発を彩る技術たち
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
 
Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と Bootstrap
 
Vue.js with Go
Vue.js with GoVue.js with Go
Vue.js with Go
 
Bot Framework v4 開発 Tips 2018-11
Bot Framework v4  開発 Tips 2018-11Bot Framework v4  開発 Tips 2018-11
Bot Framework v4 開発 Tips 2018-11
 
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebAppGinとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
 
Air forandroidreader
Air forandroidreaderAir forandroidreader
Air forandroidreader
 

Similar to Chrome Apps のデバイスAPI

Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
yoshikawa_t
 
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
tksyokoyama
 
NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法
Naruto TAKAHASHI
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
yoshikawa_t
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
Ippei Arita
 
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own PathFirefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
dynamis
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
Yuki Higuchi
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
Naoya Ito
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
 
Google I/O 2012 and Android 4.1
Google I/O 2012 and Android 4.1Google I/O 2012 and Android 4.1
Google I/O 2012 and Android 4.1
Katsumi Onishi
 
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
 
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open SocialMixiアプリで体験する Open Social
Mixiアプリで体験する Open Social
ngi group.
 
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスドMicrosoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Kazumi Hirose
 
130329 02
130329 02130329 02
130329 02
openrtm
 
Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010
Takashi EGAWA
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
Kaoru NAKAMURA
 
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテストTestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
Yoichiro Sakurai
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
 

Similar to Chrome Apps のデバイスAPI (20)

Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
 
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
 
GDG Shikoku 2013
GDG Shikoku 2013GDG Shikoku 2013
GDG Shikoku 2013
 
NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
 
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own PathFirefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
Google I/O 2012 and Android 4.1
Google I/O 2012 and Android 4.1Google I/O 2012 and Android 4.1
Google I/O 2012 and Android 4.1
 
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
 
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open SocialMixiアプリで体験する Open Social
Mixiアプリで体験する Open Social
 
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスドMicrosoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
 
130329 02
130329 02130329 02
130329 02
 
Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
 
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテストTestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 

More from yoshikawa_t

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
 
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
 
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
yoshikawa_t
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
 
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスモバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
 
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
yoshikawa_t
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
 
Sencha touch vs j query mobile
Sencha touch vs j query mobileSencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
 
jQuery MobileとHTML5
jQuery MobileとHTML5jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
 
最近のブラウザ状況
最近のブラウザ状況最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
yoshikawa_t
 
Chrome DevTools for beginners
Chrome DevTools for beginnersChrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
 

More from yoshikawa_t (20)

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
 
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
 
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
 
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスモバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
 
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
 
Sencha touch vs j query mobile
Sencha touch vs j query mobileSencha touch vs j query mobile
Sencha touch vs j query mobile
 
jQuery MobileとHTML5
jQuery MobileとHTML5jQuery MobileとHTML5
jQuery MobileとHTML5
 
最近のブラウザ状況
最近のブラウザ状況最近のブラウザ状況
最近のブラウザ状況
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
 
Chrome DevTools for beginners
Chrome DevTools for beginnersChrome DevTools for beginners
Chrome DevTools for beginners
 

Recently uploaded

Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
Natsutani Minoru
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
shogotaguchi
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
chisatotakane
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
Sony - Neural Network Libraries
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
Toru Tamaki
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
たけおか しょうぞう
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo Lab
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo Lab
 
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
Toru Tamaki
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
CRI Japan, Inc.
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo Lab
 

Recently uploaded (12)

Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
 
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
 

Chrome Apps のデバイスAPI

  • 1. Chrome Apps のデバイスAPI 2014/10/30 Webプラットフォーム部第四回ナイトセミナー HTML5 デバイス API 勉強会 Toru Yoshikawa (@yoshikawa_̲t)
  • 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t html5j 代表/html5j ビギナー部 副部⻑⾧長 Google Developer Experts (Chrome) HTML5 Experts.jp エキスパートNo.3 Web先端技術味⾒見見部 (顧問)/⽇日本 jQuery Mobileユーザー会 (管理理⼈人)/ Sublime Text 2 Japan Users Group (管 理理⼈人)などなど Blog: http://d.hatena.ne.jp/pikotea/
  • 3. はじめに Chrome Apps は基本的にデスクトップをターゲットし ているため、モバイル固有のAPIはまだまだ揃っていま せん(ChromeOSをターゲットとしたものが多いです) Chrome Apps for mobile は、まだDeveloper Preview 版でモバイル固有の機能が増えていくのはこれからだと 思われます。 例例えばスマートフォンを振動させるような⽤用途がある場 合は、標準のAPI(Vibraton API)を利利⽤用しましょう
  • 4. Chrome Apps のデバイスAPI API⼀一覧 ( https://developer.chrome.com/apps/api_̲index ) サンプル ( https://developer.chrome.com/apps/samples ) 各種デバイスとの通信系APIが豊富 API⾃自体は低レイヤーなものが多く、扱うデバイスに関す る知識識が必要 ぶっちゃけ⾟辛い
  • 5. 通信系API 機能・説明ver mobile chrome.bluetooth Bluetoothデバイスと接続する37 × chrome.bluetoothLowEnergy Bluetooth Low Energy(Bluetooth LE) 37 × chrome.bluetoothSocket Bluetooth通信に利用する37 × chrome.serial シリアル接続23 ? chrome.usb USB接続26 × chrome.socket ソケット通信24 ◯ chrome.sockets.tcp ソケット通信(TCP) 33 × chrome.sockets.tcpServer ソケット通信(TCPサーバー) 33 × chrome.sockets.udp ソケット通信(UDP) 33 ×
  • 6. システム系API 機能・説明ver mobile chrome.power 電源管理(Keep Awake) 27 ◯ chrome.system.cpu CPU情報の取得32 ◯ chrome.system.display ディスプレイ情報の取得・設定30 ◯ chrome.system.memory メモリ情報の取得32 ◯ chrome.system.network NIC情報の取得33 ◯ chrome.system.storage 外部ストレージ情報の取得など(eject等も可能) 24 ◯
  • 7. その他のAPI 機能・説明ver mobile chrome.fileSystem ローカルファイルの読み書き23 △ chrome.hid ヒューマンインターフェースデバイス接続38 ×
  • 8. USB接続の簡易易⼿手順① manifest.jsonにパーミッションを記述 "permissions": [ "usb" ] デバイスを固定する場合(IDは10進数で) "permissions": [ "usbDevices": [ { "vendorId": 123, "productId": 456 } ] ]
  • 10. USB接続の簡易易⼿手順② getDevicesでデバイスを探す function onDeviceFound(devices) { this.devices=devices; if (devices) { if (devices.length > 0) { console.log("Device(s) found: "+devices.length); } else { console.log("Device could not be found"); } } else { console.log("Permission denied."); } } ! chrome.usb.getDevices({"vendorId": vendorId, "productId": productId}, onDeviceFound);
  • 11. USB接続の簡易易⼿手順③ openDeviceでデバイスと接続 var usbConnection = null; var onOpenCallback = function(connection) { if (connection) { usbConnection = connection; console.log("Device opened."); } else { console.log("Device failed to open."); } }; ! chrome.usb.openDevice(device, onOpenCallback);
  • 12. USB接続の簡易易⼿手順④ bulkTransfer(バルク転送)でデータを受け取る var onTransferCallback = function(event) { if (event && event.resultCode === 0 && event.data) { console.log("got " + event.data.byteLength + " bytes"); } }; ! chrome.usb.bulkTransfer(connectionHandle, transferInfo, onTransferCallback);
  • 13. USB接続の簡易易⼿手順 その他のメソッドなど デバイス制御 chrome.usb.controlTransfer アイソクロナス転送(⼀一定帯域の転送を保証する) chrome.usb.isochronousTransfer 割り込み転送 chrome.usb.interruptTransfer メソッドの選択や細かいパラメータの指定などで、基本的 なUSBの知識識が必要
  • 14. おまけ Chrome App NFC Library ( https://github.com/ GoogleChrome/chrome-‐‑‒nfc ) chrome.nfcでNFCを扱える (内部はchrome.usbを利利⽤用) https://plus.google.com/+FrancoisBeaufort/posts/CWTm2GaZRLJ
  • 15. Chrome Apps のデバイスAPI 最初にいった通り、デバイス固有の機能について はまだまだ揃っていないので、もしChrome Apps for mobileを利利⽤用するならCordovaのAPI を利利⽤用することも検討したほうが良良いかも 実は、Chrome Apps for Mobileも対応APIが少 ない状態…