GitHub Pages / Chrome & Edge only

UIAPduino WebHID Lab

UIAPduino（HID ProMicro CH32V003）と Chrome の WebHID API を使った 双方向通信のデモ・練習ページ集です。 ブラウザとマイコンがドライバなしで直接やり取りできる WebHID の仕組みを さまざまなサンプルで体験できます。

Wakayama.rb
数百円から始めるRuby電子工作
Ruby構文でUIAPduinoをブラウザからプログラム。 Wakayama.rb コミュニティ発。
▼ UIAPruby Lab
🔗 GitHub リポジトリ 🔗 arduino_core_ch32 🔗 Board Manager ファイル
⚠️ このサイトは Chrome または Edge でのみ動作します。
WebHID API は Firefox・Safari では利用できません。Chrome / Edge で開き直してください。
このサイトについて

🔌 WebHID とは

WebHID API は Chrome / Edge で使える Web 標準 API です。 USB HID デバイスをブラウザから直接制御でき、 ドライバのインストールは不要です。

  • HTTPS（または localhost）環境が必要
  • Feature Report でデバイスへデータ送信
  • Input Report でデバイスからデータ受信
  • USB Low Speed: 1パケット最大 8 バイト

⚡ UIAPduino について

UIAPduino は CH32V003 を使った HID 対応マイコンボードです。 Arduino IDE で開発でき、キーボード・マウス・WebHID 通信を同時に使えます。

  • VID: 0x1209 / PID: 0xD004
  • EP1: マウス（4 バイト、10ms）
  • EP2: キーボード（8 バイト、10ms）
  • EP3: WebHID TX（8 バイト、10ms）
  • EP0: WebHID RX（Feature Report 最大 32 バイト）
デバッグ / ユーティリティ
📜
HID Console
公開中
Arduino の hid.Print() / hid.Println() 出力をブラウザでリアルタイムモニタ。 DEC / HEX / ASCII で任意データを送信して hid.Recv() で受け取れます。 スケッチ開発中のデバッグ・動作確認に幅広く使えます。
Sketch: HidPrint.ino
→
📌
HID-Serial Bridge
公開中
UIAPduino の WebHID 通信を Web Serial API 経由で仮想 COM ポートへ中継するブリッジ。 com0com で作った COM ペア（例: COM8 ↔ COM9）を使い、Arduino IDE シリアルモニタ／シリアルプロッタ・ TeraTerm・Python・C# などの外部アプリと UIAPduino をシリアル通信感覚でつなげます。
com0com / Web Serial
→
デモページ一覧
🔁
Echo Test
公開中
16 バイトを UIAPduino に送信してそのままエコーバックを受け取る 基本動作確認ページ。Feature Report / Input Report の 双方向通信と 1 秒ごとのカウンターを確認できます。
Sketch: WebHIDTest.ino
⌨
Keyboard Practice
公開中
UIAPduino をキーボード HID として使い、文字入力・カーソル移動・ Backspace・Enter・Home キーを段階的に練習できるチュートリアル。 5 ステップで基本操作をマスターできます。
Sketch: KeyboardPractice.ino
🔀
Keyboard Practice 2
公開中
Practice 1 と同じ 5 ステップを switch 文で書き直す練習。 1 回書き込めばブラウザからステップを自由に切り替えて何度でも実行できます。
Sketch: KeyboardSwitch.ino
🖱
Mouse Practice
公開中
HID マウスの基本操作を固定座標で練習するページ。 クリック・四角形頂点クリック・ドラッグ・円ドラッグを、 .ino に座標を埋め込む形で段階的に確認できます。
Sketch: MousePractice.ino
🎲
Mouse Practice 2
公開中
ブラウザからマウス位置を受け取る発展版。 C++ のクラスの学習もできます。 HID コンソールにも対応しました。
Sketch: MousePractice2.ino
🏹
Maze Solver
公開中
ブラウザが 15×15 の迷路を管理し、UIAPduino が WebHID 経由で 自律的に解くプラクティス。solveMaze() に 右手法・DFS・BFS などのアルゴリズムを実装して挑戦しよう。 ゴール到達で次の迷路へ自動スライド遷移します。
Sketch: MazeSolver.ino
🍮
Snake Solver
公開中
UIAPduino が 16×16 の盤面で岩を避けながら指定ステップ数伸び続けるプラクティス。 レベルが上がるごとに岩が3個増え、BFS 最大空間優先アルゴリズムで生き残れ。
Sketch: SnakeSolver.ino
🚀
Rock Dodge
Coming Soon
落下してくる岩を避けるアクションゲーム。 UIAPduino のセンサー入力と WebHID を組み合わせた インタラクティブなデモ。
💡
LED Controller
Coming Soon
ブラウザの UI から UIAPduino の LED を色・点滅パターンで リアルタイム制御。Feature Report の使い方を学べます。
📈
Mini Oscilloscope
Coming Soon
UIAPduino の ADC 値をリアルタイムでブラウザに ストリーミング表示する簡易オシロスコープ。 Input Report の高速受信を体験できます。
WebHID 通信の流れ

UIAPduino は USB HID デバイスとして動作し、ドライバなしで Chrome/Edge と通信します。
送信方向によって使う USB エンドポイントが異なります。

Web → UIAPduino（送信）
JavaScript
sendFeatureReport()
EP0 Control Transfer
最大 32 bytes
Firmware
usb_handle_user_data()
関数呼び出し
Arduino Sketch
WebHID.recv()
UIAPduino → Web（受信）
Arduino Sketch
WebHID.send()
EP3 Interrupt IN
8 bytes / 10ms
Firmware ISR
usb_handle_user_in_request()
イベント発火
JavaScript
inputreport イベント
Arduino IDE のセットアップと書き込み手順
1
ボードマネージャの URL を追加する
Arduino IDE のメニューから ファイル → 環境設定 （macOS: Arduino IDE → 設定）を開きます。
「追加のボードマネージャの URL」欄に以下の URL を入力して OK を押します。
https://raw.githubusercontent.com/tarosay/board_manager_files/main/package_uiap_hid_index.json
2
ボードをインストールする
ツール → ボード → ボードマネージャ を開きます。
検索欄に UIAPduino と入力し、表示された UIAPduino HID の インストール をクリックします。
ツールチェーン（コンパイラ・書き込みツール）が一緒にダウンロードされます。
ℹ️ インストールには数分かかる場合があります（コンパイラは約 350MB）。
3
ボードを選択する
ツール → ボード → UIAP_HID → HID ProMicro CH32V003 を選択します。
4
Tools → USB でモードを選ぶ
ツール → USB から、書き込むスケッチに合ったモードを選択します。
モードが違うとデバイスが正しく動作しないため、スケッチごとに確認してください。
USB モード 対応するデモ
WebHID Only Echo Test・HID Console・Maze Solver
Keyboard+Mouse+WebHID Keyboard Practice / Practice 2・Mouse Practice / Practice 2
ℹ️ キーボード・マウス HID を使うスケッチでも、WebHID でログを表示するため 必ず Keyboard+Mouse+WebHID を選んでください。 Keyboard+Mouse のみでは HID Console へのログ出力ができません。
5
スケッチを書き込む
UIAPduino への書き込みは 書き込みモード（ブートローダー） で起動する必要があります。以下の手順で行います。
① まず
Arduino IDE の
書き込みボタン（→）
を押す
→
② 次に
UIAPduino の
ボタンを押したまま
USB を接続する
→
③ 自動
書き込み開始・
完了後に
自動で再起動
⚠️ Arduino IDE の書き込みボタンを押してから、すばやく USB を接続してください。 IDE が「デバイスが見つかりません」とタイムアウトする前に接続する必要があります。
ℹ️ 書き込みが完了すると UIAPduino は自動的に再起動し、通常の HID デバイスとして認識されます。 USB を抜き差しする必要はありません。
6
Chrome / Edge でデモページを開いて接続する
書き込みが完了したら、Chrome または Edge でデモページを開きます。
「デバイスを選択して接続」ボタンをクリックすると接続ダイアログが表示されます。
UIAPduino WebHID（または UIAPduino KBD+Mouse+Web）を選択して 接続 を押してください。
ℹ️ WebHID API は Chrome / Edge のみ 対応しています。 Firefox・Safari では動作しません。また、HTTPS または localhost 環境が必要です（このサイトは GitHub Pages で HTTPS 配信されています）。
UIAPduino SD をお使いの方
💾
SD Filemanager
公開中
WebHID コマンドプロトコルで SD カードのファイルを読み書き。 一覧取得・テキスト書き込み・読み込み・削除をブラウザから操作できます。
Sketch: WebHID_SD.ino
→
🎵
MIDI → MIDB Converter
公開中
.mid ファイルをドラッグすると SAM2695 に垂れ流せる .midb に変換。 CH32V003 側は delay() + Serial.write() だけで MIDI 再生できます。 変換はブラウザ内完結。
SAM2695 / SDmin.h
→
数百円から始めるRuby電子工作
UIAPruby Lab — Ruby構文でUIAPduinoを制御。ブラウザでコンパイル、WebHIDでSDカードへ転送。
Wakayama.rb コミュニティ発のオープンソースプロジェクト。
Wakayama.rb 
# LED をRubyで点滅
led = GPIO.new(2, GPIO::OUT)
loop do
  led.toggle; sleep(0.2)
end
GPIO PWM ADC Q16.8演算 @ruby/prism TinyVM 公開中
→