Google Chrome 61から正式にサポートされるようになったWebUSB機能を使ってWebページとArduino Micro または Arduino Leonardo を連携動作させる実験を行いました。

  1. 概要
    1. WebUSBはChromeブラウザからUSBデバイスを制御する機能です。
      https://gigazine.net/news/20160414-webusb-api/
      2017年9月以降のChrome 61 から正式サポートされるようになりました。
    2. このWebUSBの機能を使ってArduinoボードとWebページを連携動作させる実験環境WebUSB/Arduinoがあります。
      https://github.com/webusb/arduino
    3. WebUSB/Arduino のGetting startのガイドに従って実験環境をインストールするとWebUSBの動作を体験できますが，インストールの際にArduino IDE本体の環境設定を手動でイジる必要があり煩わしいところがありました。そこで，WebUSB/Arduinoのファイルやディレクトリを組み替えてArduino IDEのボードマネージャから簡単にインストールができるようにしました。
      https://github.com/kimio-kosaka/webUSB-arduino
    4. 【2018.04.26追記】 WebUSB/Arduinoの環境のインストール不要
      WebUSBライブラリをインクルードするだけで動くのではないかと考えて実験したところ…難なく動きます！
    5.  実験環境は次のとおりです
      1. macOS HighSierra
      2. Arduino IDE 1.8.5
      3. Arduino Leonardo
      4. Google Chrome 64
    6. Windows / Linux 環境下では稼働実験は行っていません。
      WebUSB/ArduinoのREADME.mdには次のような記述がありますのでWindowsでは動かないでしょう。
      Windows: This notification is currently disabled in Chrome on Windows due to Chromium issue 656702.
  2. WebUSBライブラリのみをインストールしてWebUSBを利用する場合
    WebUSB/arduino環境をインストールする場合は，この項は飛ばします。

    1. 次の直接リンクURLからWebUSBライブラリのZIPファイルをダウンロードします。
      https://github.com/kimio-kosaka/webUSB-arduino/releases/download/v1.0.0/WebUSB.zip
    2. Arduino IDE を起動します
    3. メニューバーの「スケッチ」→「ライブラリをインクルード」→「.ZIP形式のライブラリをインストール…」と進みます
    4. ファイル選択ウインドウが開くのでダウンロードしたWebUSB.zipを選択します。
    5. Arduino IDEを終了し再度起動します。
    6. メニューバーの「スケッチ」→「ライブラリをインクルード」と進みライブラリ一覧にWebUSBがリストされていれば正しくインストールされています。
    7. Arduino IDEにWebUSBライブラリがインストールされたらWebUSB.zipは削除廃棄してかまいません。
  3. WebUSB/arduino環境をインストールしてWebUSBを利用する場合は以下の手順で行います（mac版Arduio IDE 1.8.5 ）
    前述WebUSBライブラリのみのインストールで利用する場合は，この項を飛ばします。

    1. 下の直接リンクURLをコピーします。
      https://kimio-kosaka.github.io/webUSB-arduino/package_webUSB_index.json
    2. Arduino IDEのメニューバー「Arduino」→「Preferences」と進み 追加のボードマネージャのURL欄 を開いて1のURLを追加ペーストします。図１
    3. メニューバー「ツール」→「ボード」→「ボードマネージャ」と進み検索欄にwebusbと入力して表示されたWebUSBボードをインストールします。図２
      図１
      図２
    4. インストールが正しく行われると次の２つのボードが追加されているはずです。
      Arduino Micro (WebUSB)
      Arduino Leonardo (WebUSB)
  4. サンプル・スケッチの実行
    1. Chomeブラウザを起動しておきます。
    2. Arduino Micro または Leonardo を用意します（Pro micro などのATmaga32U4搭載互換ボードでも可）
    3. Auduino IDEを起動しボードを選択します
      1. ライブラリのみインストールの場合：
        Arduino MicroまたはArduino Leonardoを選択
      2. WebUSB/Arduino利用の場合：
        Arduino Micro(WebUSB)またはArduino Leonardo(WebUSB)を選択
    4. サンプル・スケッチ consoleを呼出します。
      メニューバー「ファイル」→「スケッチ例」→「WebUSB」→「console」
    5. 「マイコンボードに書き込む」ボタンをクリックして，コンパイル〜アップロードが終わるのを待ちます。
    6. アップロードが終了してしばらくすると…
      1. WebUSBから”Arduino xxxx WebUSB」を検出しました…”とメッセージが表示されるので，このメッセージボックス内をクリックします。図３
      2. 自動的にChromeブラウザがWebUSB Demos ページ(https://kimio-kosaka.github.io/webUSB-arduino/index.html)にアクセスします。
      3. WebUSBデバイスへの接続許可を求めるダイアログが開くので接続を許可します。図４
        図３
        図４
    7. WebUSB Demos ページのConsoleをクリックして操作ページを開きます。図５
    8. コンソール（黒い画面）をクリックしてキーボードからHを入力するとD13-LEDが点灯します。Lを入力すると消灯します。図６
      （大文字小文字を識別するのでH,Lは大文字で入力）

      図５
      図６
    9. 終了はDisconnectボタンをクリックしてリンクを切断した後，WebUSB Demos ページを閉じます。
    10. 再接続はArduino Micro/Leonardo をリセットして，”Arduino xxxx WebUSB」を検出しました…”とメッセージが表示されるの待ちます。
    11. サンプル・スケッチrgbの実行
      1. Arduino Micro/Leonardo にフルカラーLEDを接続します。図７
        D9–Red, D10–Green,  D11–Blue

        図７
      2. rgbスケッチを呼出します
        メニューバー「ファイル」→「スケッチ例」→「WebUSB」→「rgb」
      3. コンパイル〜Demoページアクセスまでは前述consoleと同じです。
      4. Demoページが開いたらRGB LEDをクリックします。
      5. スライダーを操作すればフルカラーLEDの色が変わります。
  5. WebUSBの接続認証
    1. 一度，WebUSBへの接続を許可すると それ以後 そのUSBデバイスは認証なしでChromeブラウザに接続されるようになります。
    2. WebUSB接続許可の取り消し方法は不明です（現在，探索中）
  6. 参考
    1. Web–>USB アクセス方法
      https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web
    2. WebUSBのAPI解説
      https://wicg.github.io/webusb/
    3. Chromeのデバイスアクセスログ
      chrome://device-log
    4. WebUSB Demo ページのソースコード
      https://github.com/kimio-kosaka/webUSB-arduino/tree/master/docs
  7. 感想
    Chromeブラウザから直接USBデバイスを操作できるのは面白いです。
    USBのデバイスドライバがWebページのjavascriptプログラムとして埋め込まれて動いているというのが私の理解です。図８
    私にはUSBデバイスの挙動を見てjavascriptプログラムを書く技量がないので，図９のようになれば大変うれしいです。
    javascriptの達人の方に作っていただきたいです。Johnny-fiveをベースにしてArduinoとのリンク部分をWebUSB依存にすればできるのではないかと…

    図８
    図９
  8. 自前のスケッチを動かしてみた
    1. WebページはWebUSB DemosのConsoleを使う
    2. Arduino Leonardoに温度・気圧センサ(MPL3115A2)を接続し，センサから気圧と温度データを読んでConsoleに投げる。
  9. Suz Hinton氏のデモ
    何と，SuzさんがWebUSBに関するTalkとdemoをJSConf AU 2018でやっておられます。
    10分47秒あたりからWebUSBに関するTalkが始まります。

    demoのソースコードはココ
    https://github.com/noopkat/webusb-fun

Follow me!