            char data = 'a';

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

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

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

ひとまずこれをArduino側に書き込んで、１秒間隔で

「a」

の文字が送信されてくるか、Arduino IDEのシリアルモニタで確認しましょう。

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

以前の記事

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

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

そこでブラウザ側にリセット信号が伝わらないように、例えば以下のように適当な容量(~0.1μF)のコンデンサを

RESET-GND

間に挿入しておきましょう。

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

Arduino Uno Rev3 ATmega328 マイコンボード A000066

ELEGOO Arduino用UNO R3スターターキット

ESP32&Arduino 電子工作プログラミング入門

組込みエンジニアの教科書

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>