Zenn
🖥️

Web Serial APIでFlexiSpot昇降デスクをブラウザから制御する

に公開
JavaScript
IoT
Web API
serial
Claude
tech

Web Serial APIでFlexiSpotE8昇降デスクをブラウザから制御する

はじめに

FlexiSpotの昇降デスクを使っている方は多いと思いますが、「物理リモコンではなく、パソコンから直接制御できたら便利だろうな」と思ったことはありませんか？

今回、Web Serial APIを使ってFlexiSpot昇降デスクをWebブラウザから直接制御できるツールを(claudeが)作成しました。

引用: flexispot公式

作ったもの

https://junnakarai.github.io/flexispot-web-controller/

FlexiSpot Web Controllerは、Webブラウザから昇降デスクを制御できるシンプルなWebアプリケーションです。

主な機能

  • プリセット機能: 座位・立位の高さを記憶して瞬時に切り替え
  • 手動制御: UP/DOWNボタンでデスクの高さを調整

デモサイト

実際に試してみることができます：
https://junnakarai.github.io/flexispot-web-controller/

技術的な仕組み

システム構成

システム全体の構成は以下のようになります：

PC上のWebブラウザからWeb Serial APIを使用してUSB-Serialアダプターと通信し、RJ45ケーブル経由でFlexiSpotデスクを制御します。物理的な接続とソフトウェアレイヤーの両方が重要な役割を果たしています。

Web Serial API

Web Serial APIを使うことで、ブラウザから直接シリアル通信デバイスにアクセスできます。これまではネイティブアプリケーションでしか実現できなかった機能が、Webブラウザで実現可能になりました。

FlexiSpotとの通信プロトコル

FlexiSpotデスクは独自のシリアル通信プロトコルを使用しています：

  • ボーレート: 9600 bps
  • データビット: 8
  • ストップビット: 1
  • パリティ: なし

デスクの制御コマンドは特定のバイト列を送信することで実現しています。

セットアップと使い方

必要な環境

  • 対応ブラウザ: Chrome 89+ または Edge 89+
  • ハードウェア: USB-Serialアダプター

必要な部品

RJ

実際の接続には以下の部品を使用しました：

配線方法: LANケーブル切断しTTLシリアル変換ケーブルの対応する線と接続します。

接続手順

  1. FlexiSpotデスクとパソコンをUSB-Serialアダプターで接続(見づらいですが１ポート空きがあります)

  2. ブラウザでflexispot-web-controllerにアクセス

  3. 「Connect」ボタンをクリックしてシリアルポートを選択

  4. 接続完了後、制御ボタンが使用可能に

プロジェクト構成

シンプルな構成で、GitHub Pagesで簡単にホスティングできます：

├── index.html          # メインHTML
├── styles.css          # スタイルシート
├── script.js           # メインロジック
├── serial-protocol.js  # シリアル通信処理
└── README.md

今後の展望

機能拡張のアイデア

  • 使用ログ機能: 立位・座位の時間を記録
  • 健康管理: 適切な姿勢変更のリマインダー
  • 統計表示: 日々の使用パターンの可視化

まとめ

Web Serial APIを活用することで、従来ネイティブアプリでしか実現できなかった機器制御がWebブラウザで可能になりました。

リモートワークが当たり前になった今、作業環境の改善にお役立てください！

GitHubで編集を提案

Discussion