10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Webブラウザでシリアル通信を行う(ブラウザ非依存)

Last updated at Posted at 2020-09-27

他の投稿はこちら

シリアル通信を行うアプリを開発する場合、通常はネイティブアプリを選択すると思います。
今回は、Webブラウザでシリアル通信を行い、LEDを点灯させてみたいと思います。
(いわゆるLチカです)

概要

構成は以下の通りです。

Lチカ_03.png

  • シリアル通信を行うネイティブアプリを作成する
  • LEDとプログラムを組み込んだArduinoを用意する
  • ネイティブアプリ上でWebSocketサーバーを立ち上げる
  • ブラウザからネイティブアプリのWebSocketサーバーにローカルホスト接続する
  • ネイティブアプリからArduinoにシリアル通信接続する
  • ArduinoからLEDを点灯させる

デモ

VID_20200916_231755_1.gif

上記デモはFirefoxで動作しています。
通常、Webブラウザでシリアル通信というと、NodeJSや、ActiveXを使用する事が多いと思います。
また、Chromeではシリアル通信APIが実装されているようです。

今回ご紹介した実装方法なら、特定のブラウザに依存せず、シリアル通信を実装できます。

まとめ

さて、今回はブラウザでLチカを行いました。
WebアプリでLチカが出来るという事は、Webアプリで機械制御が可能という事です。

機械制御を伴うアプリは、機械への命令の送信といった、低レイヤーのアクセスを必要とするため、通常はネイティブアプリとして実装します。

しかし、今回ご紹介した実装方法なら、低レイヤー層をネイティブアプリで実装し
データ分析やフロー制御など高レイヤー層をWebアプリに切り出すことが可能です。
このように、開発保守の比重をWebアプリに寄せることが出来るので、メンテナンスコストの低減が期待できます。

10
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?