LoginSignup
10
4

More than 3 years have passed since last update.

【enebular 2019】 enebular で WebSocket を試す(Google Chrome拡張でお手軽に)(2019/12/8)

Last updated at Posted at 2019-12-07

この記事は 「enebular Advent Calendar 2019」の 8日目の記事です。

昨年も以下の記事で登録した enebular Advent Calendar に、今年も登録してみました。
 ●enebular editor をMacで試してみる - Qiita
  https://qiita.com/youtoy/items/58f2f69e4e561842fd73

はじめに

今回の記事の内容は、「Google Chrome拡張のGUIツール(Smart Websocket Client)」を使って enebular の WebSocket機能を簡単に試してみる、というものです。

裏話をすると、当初は以下の「余談」のところに書いた、第3回 ビジュアルプログラミング交流会というイベントのハンズオンの内容をもとにして、「追加実装もやってみた」という方向で書こうとしていたのですが、その途中で寄り道をしたために内容を変更することとなりました。

「記事のタイトルの内容を早く見たい!」という方は、この余談の部分は飛ばして、「今回の本編」の部分へとお進みください。

余談: ビジュアルプログラミング交流会というコミュニティとハンズオン

概要

今年は、参加してきた複数のハンズオンで enebular を利用する機会があり、そして、ミートアップとのコラボ企画(下記)もやったりといった関わりがありました。
 ●【イベントページ】 ビジュアルプログラミング交流会
  https://enebular.connpass.com/event/143967/

ミートアップとのコラボイベントは ★のびすけさん★ から下記のような連絡をいただいたことから話が進み、開催をしたものになります(最終的なテーマ選定では、EdTechではなくビジュアルプログラミングとしたのですが)。

図1.jpg

この時にイベント名につけられていた「ビジュアルプログラミング交流会」ですが、イベント後にはコミュニティとなりました。
そのきっかけは、上記のイベントの後に、★のびすけさん★ と ★やまざきさん★ と3人で話をする中で、「このようなテーマのコミュニティは、ありそうな気もするがあまり見かけない気がするので、コミュニティを作ってはどうか?」という話がでたことでした。

その後すぐに Facebookグループconnpssのグループ を作ったり、第2回のもくもく会や第3回のハンズオンを月1回ペースで開催したりしています。
(12月は開催できそうにないですが、現時点で既に、他コミュニティとのコラボイベントを1月に2回、2月に1回開催することが決まっています。)

そして、上記の第3回目のイベントでは、obniz と enebular をコラボさせたハンズオンを行いました(講師は @wicket さんに担当いただけました)・

●イベントページ: 【ハンズオン】第3回 ビジュアルプログラミング交流会
 https://visualprogramming.connpass.com/event/150717/
●Togetter: 【ハンズオン】第3回 ビジュアルプログラミング交流会 に関するつぶやきのまとめ
 https://togetter.com/li/1430988
75614095_2506795406100303_421394797782106112_oのコピー.jpg

このハンズオンで obniz と enebular を連携させるパートで使われていたのが、今回の記事で扱う WebSocket でした。

ハンズオンの内容詳細

これまでの全3回のイベントでは、コミュニティの名称にある「ビジュアルプログラミング」をテーマにしてきました。
そして、第3回のイベントでは 2つのパート(obniz のビジュアルプログラミングのパートと、その後の enebular連携のパート)に分かれたハンズオンを行いました。

obnizハンズオン

obniz のハンズオンは、下記の資料を用いて進められ、画面への文字表示や Lチカに始まり、DCモーターを使った車の操作などを行ったりしました。

●obnizハンズオン(ブロックプログラム) - Qiita
 https://qiita.com/wicket/items/794223f85f5e02ed3a72

下記のイベント時のツイートを見ると様子が伝わるかと思います。

このまま、この話の詳細に踏み込むと、obnizアドベントカレンダーの記事になってしまう気がするので、今回は次の enebular を使ったパートの話へ進みます。

enebularハンズオン

obniz のビジュアルプログラミングを実践した後は、下記の資料を使った enebular のパートへと進みました。

●enebularとobnizをつなげて操作してみる - Qiita
 https://qiita.com/wicket/items/bc7b4fa247edb72003a2

どのように obniz と enebular が連携するか、という部分は、以下のツイートにあるイベント中の様子の動画を見ていただくのが良いかと思います。

ここで行った内容がどのような構成となっているかは、上記のハンズオンの記事からの引用をしつつ、見ていきます。

▼ しくみ
obnizのブロックプログラムで作ったボタンを、enebularから押せるようにします。ボタンを押すとモーターが回るプログラムを作っているので、これでenebularからモータが回せる!

モーター(obnizBoard) <-----> HTML(ブロックプログラム) <-----> enebular

連携部分の通信は、以下に略称がでてきている WebSocket でした。

enebularとの連携部分を追記します。
今回はボタンを1秒だけ押してくれるプログラムにしました

const sock = new WebSocket("wss://enebularのurl/ws");
 (ソースコードの以後を省略)

wss://enebularのurl/wsのところだけは後で変更します。

以上が、ハンズオンの内容でした。
元々は、この内容に追加実装をしていこうとしていたのですが・・・。

今回の本編

それでは、長い前置きを終えて本編に入っていきます。
当初やろうとしていた「上記のハンズオンの内容をベースに、追加実装を行ってみる」という内容は、別で記事にするかもしれません。

余談として書いてきた上記の内容に、ハンズオン資料のリンクが2つありますが、それら obnizでモーターを使った車を動かしたりする内容や、その内容と enebularとの連携をさせてみたり、という流れは楽しいものでしたので、良かったらその内容も本記事とは別にお試しください。

WebSocket を使った obniz の操作

当初の流れで記事を書こうと進めていたときに、「連携の obniz側のみをまずは簡易に実装して、WebSocket の機能がうまく動いているかを容易に確認できないか」ということをやっていました。
その流れで、下記の @hmaruyama さんの記事を見かけて試したらそちらの内容が興味深く、本来の流れで書こうとしていた内容が中途半端な状態でアドベントカレンダー登録日を迎えてしまいました。

●obnizのWebsocket APIを試してみる - Qiita
 https://qiita.com/hmaruyama/items/eee079f035f864638e13

その状態で、試した内容も紹介できればと思い、記事の内容は今回の話に差し替えることにしました。

@hmaruyama さんの記事で行われている内容は、下記になります。

obnizはWebsocket API、REST APIを公開しているため、Node.js以外でも操作することが可能です。

obniz.jsはバックエンドでWebsocket APIを叩いてますよ〜、とobnizの中の人に伺ったことがあります、確か。
obniz.jsで出来ることはAPIでも出来るはず!!ということで、Websocket APIを介してobnizを制御してみたいと思います。

記事に書かれた内容を実行することで、「Google Chrome拡張のGUIツール(Smart Websocket Client)」のUI上から、JSONのデータを obniz へ送り、obniz のディスプレイ上に文字を表示させることが簡単に行えました。
Smart Websocket Client の使い方が分かったところで、enebular上の WebSocket機能との連携へと進んでいきたいと思います。
(それと、Smart Websocket Client についてググっていた中で、GitHubのページを見かけたのですが、その内容によると Web上で試せるバージョンもあるようでした)

enebular で WebSocket を使う

enebular でデータを受信

enebular側

enebular 側は、WebSocket経由で受け取った内容を単純に表示する、という構成にしました。
使う要素は2つのみで、デバッグコンソールに受信した内容を表示するだけ、という処理になります。
enebular_Flow_Editor.jpg
そして、忘れずデプロイをして、次へと進みます。
その際、デプロイした後の URL は次のステップで使うので、メモしておきましょう。

Google Chrome拡張側

Smart Websocket Clientの接続先を 「wss://enebularのurl/ws」 にして、Connectボタンを押します(以下の画像中の赤枠・赤矢印のところ)。
Smart_Websocket_Client_と_名称未設定6.jpg

そして、Sendボタンの下に JSONのデータなどを入力し、Sendボタンを押します(以下の画像中の赤枠・赤矢印のところ)。画面上にエラーメッセージがでたりせず、また、画像の中の青矢印で示した部分の行が増えていればデータ送信成功です。
Smart_Websocket_Client.jpg

そして、enebular の画面へと戻り、デバッグコンソールに送信したデータの内容が表示されていれば大丈夫です。
enebular_Flow_Editor2.jpg

enebular からデータを送信

enebular側

以下のように、送信の構成も簡単なものにしました。
enebular_Flow_Editor.jpg

そして以下のように、ペイロードに送信データとなる JSON を指定しています。
enebular_Flow_Editor.jpg

Google Chrome拡張側

上記のデータ受信をした流れと同様に enebular と接続されていれば、enebular側の injectノードのボタンをポチッと押すと、、以下の画像の赤枠部分に受信したデータの内容が表示されているかと思います。
Smart_Websocket_Client.jpg

簡単ですが、これで完了です。

さいごに

obniz と enebular を WebSocket を使って連携させることができました。

余談ですが、今回の記事を書く中で調べ物をしていてでてきた、下記の @kmaepu さんの記事に書かれていた obnizノードを使った内容も気になりました。こちらも別途、試してみたいと思います。

●Node-RED(enebular)のobnizノードを使ってみる - Qiita
 https://qiita.com/kmaepu/items/89e03f2a867011750eb5

10
4
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
4