【シリアル通信〜基礎編】Arduino UnoとWeb Serial APIでブラウザ直通シリアル通信を利用する


2021/11/30
蛸壺の中の工作室|Web Serial APIでブラウザ直通でArduino Unoのシリアル通信を利用する

以前、ラズパイとArduino間でUSBを接続し、シリアル通信を手っ取り早くラズパイの組み込みコマンドから操作してみました。

やり方としてこれはこれで良いのですが、最近のブラウザでは
Web Serial APIを使えるようになってきたことで、ブラウザ直通でのシリアル通信が可能になってきてます。

今回は、ArduinoとWeb Serial API対応のブラウサを直接繋いで、シリアル通信できるかを軽く試してみたいと思います。


Arduino側の実装

今回はArduino側から一定時間で1文字を発信させるだけのプログラムを使います。

            char data = 'a';

void setup() {
    //👇シリアルのボーレートは9600bpsにする
    Serial.begin(9600);
    delay(200);
}

void loop() {
    //👇1秒おきにハードウェアシリアルでPC側へ文字を送信
    Serial.println(data);
    delay(1000);
}
        

なおArduinoをPCで繋ぐ場合、ArduinoのUSB(ハードウェア)シリアルとして、物理ピン(RX:0ピン/TX:1ピン)が自動で使用されます。

ひとまずこれをArduino側に書き込んで、1秒間隔で
「a」の文字が送信されてくるか、Arduino IDEのシリアルモニタで確認しましょう。

DTRをハード的に無効化する

以前の記事にも記載しましたが、Arduino UnoのシリアルはデフォルトでDTR有りの制御になっています。

シリアル通信でやりとりするハードウェアの組み合わせによっては、このDTR信号の有り無しが厄介な問題になります。

そこでブラウザ側にリセット信号が伝わらないように、例えば以下のように適当な容量(~0.1μF)のコンデンサを
RESET-GND間に挿入しておきましょう。

合同会社タコスキングダム|蛸壺の中の工作室

これでArudino側からのDTRは送信されることはなくなり、不慮のWeb Serial API側の切断エラーが起こるのを防ぐことができます。


HTMLファイルを実装

Web Serial APIはブラウザに内蔵されている機能ですが、現時点で対応しているブラウザは限られています。

合同会社タコスキングダム|蛸壺の中の工作室

見ての通りで、WindowsOSではEdge、その他のOS環境ではChromeを使うと良いでしょう。

今回手元で確認したChromeブラウザは以下のバージョンになっています。

合同会社タコスキングダム|蛸壺の中の工作室

なお、バージョン88以前のChromeでも試験的にWeb Serial APIを使うことが可能です。

アドレスバーに、
chrome://flagsと入力し、[Experimental Web Platform features] > [Enable]に切り替えることでベータ版のWeb Serial APIが使えるようになります。

デモ版でサクッとシリアルを試す

自分で一から実装する前に、以下のサイトをChromeで開いてWeb Serial APIのお試しサイトを使ってArduinoにアクセスできるか確かめてみましょう。

https://googlechromelabs.github.io/serial-terminal/

Arduinoの接続を確認した上で、送信されてきた文字がブラウザ上に表示されるか確かめてみます。

ちゃんと、文字を受け取っていることが確認できました!

スクリプトの自作

さきほどのデモ版のリソース置き場はこちらのレポジトリにあります。

Typescriptベースですが、ソースコードを眺めると実装例の参考になるかも知れません。

より詳しい説明は
Web Serial API仕様書ドラフトで説明されている通りです。

さっそく以下、Arduinoに接続・切断するだけのHTMLページを作ります。

            <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Web Serial API - Reading Test</title>
    </head>
    <body>
        <h3>はじめてのWeb Serial API|読込テスト</h3>
        <button onclick="startSerial()">接続</button>
        <button onclick="stopSerial()">切断</button>
        <script>
            let stopFlag = false;
            async function startSerial() {
                try {
                    console.log("INFO: 接続が確立しました");
                    stopFlag = false;
                    const port = await navigator.serial.requestPort();
                    await port.open({ baudRate: 9600 });
                    while (port.readable) {
                        const reader = port.readable.getReader();
                        try {
                            while (!stopFlag) {
                                const { value, done } = await reader.read();
                                if (done) {
                                    console.log("INFO: 読込モード終了");
                                    break;
                                }
                                //👇生データはバイナリなので、ユニコード文字へデコード
                                const inputValue = new TextDecoder().decode(value);
                                console.log(inputValue);
                            }
                        } catch (error) {
                            console.log("ERROR: 読み出し失敗");
                            console.log(error);
                        } finally {
                            reader.releaseLock();
                            await port.close();
                            console.log("INFO: 接続を切断しました");
                        }
                    }
                } catch (error) {
                    console.log("ERRORR: ポートが開けません");
                    console.log(error);
                }
            }
            function stopSerial() {
                stopFlag = true;
            }
        </script>
    </body>
</html>
        

動作テスト

さきほどのhtmlファイルを直接Chromeで開きます。

ArduinoにUSB接続し、実際に使用した様子は以下のようになりました。


まとめ

以上、今回は一部のブラウザで解禁となったWeb Serial APIの機能を使って、はじめてArduino Unoでシリアル通信を試みる際のポイントを中心に解説してきました。

これまでシリアル通信するためのプログラムは、主にC++のようなネイティブアプリのイメージが強かったのですが、もうブラウザだけで何でも出来る時代がすぐそこまで来ているのをヒシヒシと感じました。


参考サイト

Web Serial API Living document | W3C Draft Community Group Report

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

電子工作を身近に知っていただけるように、材料調達からDIYのハウツーまで気になったところをできるだけ細かく記事にしてブログ配信してます。