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

この記事は 「[enebular Advent Calendar 2019]( https://qiita.com/advent-calendar/2019/enebular)」の 8日目の記事です。

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

## はじめに

今回の記事の内容は、「[Google Chrome拡張のGUIツール（Smart Websocket Client）](https://chrome.google.com/webstore/detail/smart-websocket-client/omalebghpgejjiaoknljcfmglgbpocdp)」を使って enebular の WebSocket機能を簡単に試してみる、というものです。

裏話をすると、当初は以下の「[余談](https://qiita.com/youtoy/items/16ad37d12c4ea6295f51#%E4%BD%99%E8%AB%87-%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A%E3%81%A8%E3%81%84%E3%81%86%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3%E3%81%A8%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3)」のところに書いた、[第3回 ビジュアルプログラミング交流会](https://visualprogramming.connpass.com/event/150717/)というイベントのハンズオンの内容をもとにして、「追加実装もやってみた」という方向で書こうとしていたのですが、その途中で寄り道をしたために内容を変更することとなりました。

「記事のタイトルの内容を早く見たい！」という方は、この[余談の部分](https://qiita.com/youtoy/items/16ad37d12c4ea6295f51#%E4%BD%99%E8%AB%87-%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A%E3%81%A8%E3%81%84%E3%81%86%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3%E3%81%A8%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3)は飛ばして、「[今回の本編](https://qiita.com/youtoy/items/16ad37d12c4ea6295f51#%E4%BB%8A%E5%9B%9E%E3%81%AE%E6%9C%AC%E7%B7%A8)」の部分へとお進みください。

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

### 概要

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

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

![図1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3fdc8801-15d2-9c47-4664-da8533a1f9d3.jpeg)

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

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

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

●イベントページ： 【ハンズオン】第3回 ビジュアルプログラミング交流会
　https://visualprogramming.connpass.com/event/150717/
●Togetter： 【ハンズオン】第3回 ビジュアルプログラミング交流会 に関するつぶやきのまとめ
　https://togetter.com/li/1430988
![75614095_2506795406100303_421394797782106112_oのコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4e8010bc-6037-abaa-cb76-91a302e114cf.jpeg)

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

### ハンズオンの内容詳細

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

#### obnizハンズオン

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

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

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

<blockquote class="twitter-tweet"><p lang="cs" dir="ltr">Hello obniz！！！！！<a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング交流会</a> <a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://t.co/K94LO4ApZg">pic.twitter.com/K94LO4ApZg</a></p>&mdash; もっちー@iOS (@Motchy_1204) <a href="https://twitter.com/Motchy_1204/status/1195572113832206336?ref_src=twsrc%5Etfw">November 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> のプログラミングで、DCモーターを使った車を制御。<a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング交流会</a><a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://t.co/GEyLQkfZ6J">pic.twitter.com/GEyLQkfZ6J</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1195587535612760064?ref_src=twsrc%5Etfw">November 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

#### enebularハンズオン

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

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おぉぉ<br>enebularと連携してビジュアルで操作できるようになってる！！！<br>さすが松下さん！！！<br><br> <a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング交流会</a><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a><a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://t.co/ci7JmXrVpl">pic.twitter.com/ci7JmXrVpl</a></p>&mdash; 3yaka (@3yaka4) <a href="https://twitter.com/3yaka4/status/1195602969208614913?ref_src=twsrc%5Etfw">November 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

連携部分の通信は、以下に略称がでてきている WebSocket でした。
>
enebularとの連携部分を追記します。
今回はボタンを１秒だけ押してくれるプログラムにしました
>
  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）](https://chrome.google.com/webstore/detail/smart-websocket-client/omalebghpgejjiaoknljcfmglgbpocdp)」のUI上から、JSONのデータを obniz へ送り、obniz のディスプレイ上に文字を表示させることが簡単に行えました。
Smart Websocket Client の使い方が分かったところで、enebular上の WebSocket機能との連携へと進んでいきたいと思います。
（それと、Smart Websocket Client についてググっていた中で、[GitHubのページ](https://github.com/crysislinux/smart_websocket_client)を見かけたのですが、その内容によると [Web上で試せるバージョン](http://crysislinux.github.io/smart_websocket_client/)もあるようでした）

### enebular で WebSocket を使う

#### enebular でデータを受信

##### enebular側

enebular 側は、WebSocket経由で受け取った内容を単純に表示する、という構成にしました。
使う要素は2つのみで、デバッグコンソールに受信した内容を表示するだけ、という処理になります。
<img width="638" alt="enebular_Flow_Editor.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a5b40ca1-2e17-8ac9-6bda-01ceba5967e4.jpeg">
そして、忘れずデプロイをして、次へと進みます。
その際、デプロイした後の URL は次のステップで使うので、メモしておきましょう。

##### Google Chrome拡張側

Smart Websocket Clientの接続先を 「wss://***enebularのurl***/ws」 にして、Connectボタンを押します（以下の画像中の赤枠・赤矢印のところ）。
<img width="879" alt="Smart_Websocket_Client_と_名称未設定6.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3e249cfa-eb64-2783-d739-03e3dac82327.jpeg">

そして、Sendボタンの下に JSONのデータなどを入力し、Sendボタンを押します（以下の画像中の赤枠・赤矢印のところ）。画面上にエラーメッセージがでたりせず、また、画像の中の青矢印で示した部分の行が増えていればデータ送信成功です。
<img width="877" alt="Smart_Websocket_Client.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b99e147c-04eb-7e97-839b-ef1e7f0d948a.jpeg">

そして、enebular の画面へと戻り、デバッグコンソールに送信したデータの内容が表示されていれば大丈夫です。
<img width="872" alt="enebular_Flow_Editor2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5f2515ef-5a08-07f5-14f8-4c1e2ef355c2.jpeg">

#### enebular からデータを送信

##### enebular側

以下のように、送信の構成も簡単なものにしました。
<img width="550" alt="enebular_Flow_Editor.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/23993046-4263-1e83-0229-373e885c8158.jpeg">

そして以下のように、ペイロードに送信データとなる JSON を指定しています。
<img width="537" alt="enebular_Flow_Editor.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0455f887-013c-758e-1cae-5395fbcaf5bf.jpeg">

##### Google Chrome拡張側

上記のデータ受信をした流れと同様に enebular と接続されていれば、enebular側の injectノードのボタンをポチッと押すと、、以下の画像の赤枠部分に受信したデータの内容が表示されているかと思います。
<img width="610" alt="Smart_Websocket_Client.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e7376c5c-810f-04f7-f28f-4124167b05d6.jpeg">

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

## さいごに

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

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

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