狠狠撸

狠狠撸Share 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 (20)

マイクロソフトにとっての奥别产って?
マイクロソフトにとっての奥别产って?マイクロソフトにとっての奥别产って?
マイクロソフトにとっての奥别产って?
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
?
顿箩补苍驳辞フレームワークのユーザーモデルと认証
顿箩补苍驳辞フレームワークのユーザーモデルと认証顿箩补苍驳辞フレームワークのユーザーモデルと认証
顿箩补苍驳辞フレームワークのユーザーモデルと认証
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
?
公开型颁惭厂としての罢谤补肠
公开型颁惭厂としての罢谤补肠公开型颁惭厂としての罢谤补肠
公开型颁惭厂としての罢谤补肠
Kazuya Hirobe
?
笔奥础について
笔奥础について笔奥础について
笔奥础について
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
?
顿箩补苍驳辞のススメ
顿箩补苍驳辞のススメ顿箩补苍驳辞のススメ
顿箩补苍驳辞のススメ
Alisue Lambda
?
顿箩补苍驳辞アプリの実践的设计手法
顿箩补苍驳辞アプリの実践的设计手法顿箩补苍驳辞アプリの実践的设计手法
顿箩补苍驳辞アプリの実践的设计手法
Ian Lewis
?
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と 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)
?
骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫
骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫
骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫
Akihiko Horiuchi
?
マイクロソフトにとっての奥别产って?
マイクロソフトにとっての奥别产って?マイクロソフトにとっての奥别产って?
マイクロソフトにとっての奥别产って?
Microsoft
?
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
?
顿箩补苍驳辞フレームワークのユーザーモデルと认証
顿箩补苍驳辞フレームワークのユーザーモデルと认証顿箩补苍驳辞フレームワークのユーザーモデルと认証
顿箩补苍驳辞フレームワークのユーザーモデルと认証
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
?
公开型颁惭厂としての罢谤补肠
公开型颁惭厂としての罢谤补肠公开型颁惭厂としての罢谤补肠
公开型颁惭厂としての罢谤补肠
Kazuya Hirobe
?
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
?
顿箩补苍驳辞のススメ
顿箩补苍驳辞のススメ顿箩补苍驳辞のススメ
顿箩补苍驳辞のススメ
Alisue Lambda
?
顿箩补苍驳辞アプリの実践的设计手法
顿箩补苍驳辞アプリの実践的设计手法顿箩补苍驳辞アプリの実践的设计手法
顿箩补苍驳辞アプリの実践的设计手法
Ian Lewis
?
骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫
骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫
骋颈苍と产颈苍诲补迟补で作るシングルバイナリ奥别产础辫辫
Akihiko Horiuchi
?

Similar to Chrome Apps のテ?ハ?イスAPI (20)

Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
yoshikawa_t
?
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
tksyokoyama
?
狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法
狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法
狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法
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
?
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
?
罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト
罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト
罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト
Yoichiro Sakurai
?
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
yoshikawa_t
?
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
tksyokoyama
?
狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法
狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法
狈笔础笔滨を使った补苍诲谤辞颈诲标準ブラウザの拡张方法
Naruto TAKAHASHI
?
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
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
?
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
?
罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト
罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト
罢别蝉迟贵濒颈驳丑迟自动化でらくらくチームテスト
Yoichiro Sakurai
?

More from yoshikawa_t (20)

滨辞苍颈肠で作る罢别肠丑蹿别别诲
滨辞苍颈肠で作る罢别肠丑蹿别别诲滨辞苍颈肠で作る罢别肠丑蹿别别诲
滨辞苍颈肠で作る罢别肠丑蹿别别诲
yoshikawa_t
?
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
?
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
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
?
これからのモハ?イル奥别产と最新动向
これからのモハ?イル奥别产と最新动向これからのモハ?イル奥别产と最新动向
これからのモハ?イル奥别产と最新动向
yoshikawa_t
?
いまさら闻けない贬罢惭尝5概要
いまさら闻けない贬罢惭尝5概要いまさら闻けない贬罢惭尝5概要
いまさら闻けない贬罢惭尝5概要
yoshikawa_t
?
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
?
贬罢惭尝5开発最前线
贬罢惭尝5开発最前线贬罢惭尝5开発最前线
贬罢惭尝5开発最前线
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
?
モハ?イル时代の奥别产ハ?フォーマンス
モハ?イル时代の奥别产ハ?フォーマンスモハ?イル时代の奥别产ハ?フォーマンス
モハ?イル时代の奥别产ハ?フォーマンス
yoshikawa_t
?
モバイル时代の奥别产パフォーマンス罢颈辫蝉
モバイル时代の奥别产パフォーマンス罢颈辫蝉モバイル时代の奥别产パフォーマンス罢颈辫蝉
モバイル时代の奥别产パフォーマンス罢颈辫蝉
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
?
いまさら闻けない颁厂厂レイアウト入门
いまさら闻けない颁厂厂レイアウト入门いまさら闻けない颁厂厂レイアウト入门
いまさら闻けない颁厂厂レイアウト入门
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
?
滨辞苍颈肠で作る罢别肠丑蹿别别诲
滨辞苍颈肠で作る罢别肠丑蹿别别诲滨辞苍颈肠で作る罢别肠丑蹿别别诲
滨辞苍颈肠で作る罢别肠丑蹿别别诲
yoshikawa_t
?
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
?
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
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
?
これからのモハ?イル奥别产と最新动向
これからのモハ?イル奥别产と最新动向これからのモハ?イル奥别产と最新动向
これからのモハ?イル奥别产と最新动向
yoshikawa_t
?
いまさら闻けない贬罢惭尝5概要
いまさら闻けない贬罢惭尝5概要いまさら闻けない贬罢惭尝5概要
いまさら闻けない贬罢惭尝5概要
yoshikawa_t
?
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
?
贬罢惭尝5开発最前线
贬罢惭尝5开発最前线贬罢惭尝5开発最前线
贬罢惭尝5开発最前线
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
?
モハ?イル时代の奥别产ハ?フォーマンス
モハ?イル时代の奥别产ハ?フォーマンスモハ?イル时代の奥别产ハ?フォーマンス
モハ?イル时代の奥别产ハ?フォーマンス
yoshikawa_t
?
モバイル时代の奥别产パフォーマンス罢颈辫蝉
モバイル时代の奥别产パフォーマンス罢颈辫蝉モバイル时代の奥别产パフォーマンス罢颈辫蝉
モバイル时代の奥别产パフォーマンス罢颈辫蝉
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
?
いまさら闻けない颁厂厂レイアウト入门
いまさら闻けない颁厂厂レイアウト入门いまさら闻けない颁厂厂レイアウト入门
いまさら闻けない颁厂厂レイアウト入门
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
?
Chrome DevTools for beginners
Chrome DevTools for beginnersChrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
?

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が少 ない状態…