Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chrome Apps のデバイスAPI

21,321 views

Published on

2014/10/30に開催されたHTML5 デバイス API 勉強会(Webプラットフォーム部第四回ナイトセミナー)での講演資料です。

Published in: Technology
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • windows7,chromeを使っています。 8ページについて聞いていただきたいと思います。 いろいろ探したんですけど、usb api用のmanifest.jsonはどこにありますかを教えていただけませんか?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Chrome Apps のデバイスAPI

  1. 1. Chrome Apps のデバイスAPI 2014/10/30 Webプラットフォーム部第四回ナイトセミナー HTML5 デバイス API 勉強会 Toru Yoshikawa (@yoshikawa_̲t)
  2. 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. 3. はじめに Chrome Apps は基本的にデスクトップをターゲットし ているため、モバイル固有のAPIはまだまだ揃っていま せん(ChromeOSをターゲットとしたものが多いです) Chrome Apps for mobile は、まだDeveloper Preview 版でモバイル固有の機能が増えていくのはこれからだと 思われます。 例例えばスマートフォンを振動させるような⽤用途がある場 合は、標準のAPI(Vibraton API)を利利⽤用しましょう
  4. 4. Chrome Apps のデバイスAPI API⼀一覧 ( https://developer.chrome.com/apps/api_̲index ) サンプル ( https://developer.chrome.com/apps/samples ) 各種デバイスとの通信系APIが豊富 API⾃自体は低レイヤーなものが多く、扱うデバイスに関す る知識識が必要 ぶっちゃけ⾟辛い
  5. 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. 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. 7. その他のAPI 機能・説明ver mobile chrome.fileSystem ローカルファイルの読み書き23 △ chrome.hid ヒューマンインターフェースデバイス接続38 ×
  8. 8. USB接続の簡易易⼿手順① manifest.jsonにパーミッションを記述 "permissions": [ "usb" ] デバイスを固定する場合(IDは10進数で) "permissions": [ "usbDevices": [ { "vendorId": 123, "productId": 456 } ] ]
  9. 9. USB接続の簡易易⼿手順① macの場合
  10. 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. 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. 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. 13. USB接続の簡易易⼿手順 その他のメソッドなど デバイス制御 chrome.usb.controlTransfer アイソクロナス転送(⼀一定帯域の転送を保証する) chrome.usb.isochronousTransfer 割り込み転送 chrome.usb.interruptTransfer メソッドの選択や細かいパラメータの指定などで、基本的 なUSBの知識識が必要
  14. 14. おまけ Chrome App NFC Library ( https://github.com/ GoogleChrome/chrome-‐‑‒nfc ) chrome.nfcでNFCを扱える (内部はchrome.usbを利利⽤用) https://plus.google.com/+FrancoisBeaufort/posts/CWTm2GaZRLJ
  15. 15. Chrome Apps のデバイスAPI 最初にいった通り、デバイス固有の機能について はまだまだ揃っていないので、もしChrome Apps for mobileを利利⽤用するならCordovaのAPI を利利⽤用することも検討したほうが良良いかも 実は、Chrome Apps for Mobileも対応APIが少 ない状態…
  16. 16. Thank you!! (@yoshikawa_̲t)

×