🖥️

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

に公開
JavaScript
IoT
Web API
serial
Claude
tech

FlexiSpot 昇降デスクをブラウザで操作する

はじめに

最近子どもの活動範囲が広がり、Flexispot昇降デスクのリモコンを操作するようになりました。
その時にデスク足の昇降部分を持ちながらリモコンを操作しようとしていて、指を挟む可能性があるなと感じました。

元々リモコン自体も操作性がいいとは言いづらく、なくせるものなら無くしたいなと思ったので、PCとデスクをケーブルで接続し、リモコンをなくしてしまおうと思いました。

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

引用: flexispot公式

作ったもの

デモサイト: https://junnakarai.github.io/flexispot-web-controller/

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

主な機能

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

技術的な仕組み

システム構成

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

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. 接続完了後、制御ボタンが使用可能に

今後の展望

機能拡張のアイデア

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

まとめ

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

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

GitHubで編集を提案

Discussion