この記事は「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ではなくビジュアルプログラミングとしたのですが）。

この時にイベント名につけられていた「ビジュアルプログラミング交流会」ですが、イベント後にはコミュニティとなりました。
そのきっかけは、上記のイベントの後に、★のびすけさん★ と ★やまざきさん★ と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

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

ハンズオンの内容詳細

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

obnizハンズオン

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

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

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

Hello obniz！！！！！#ビジュアルプログラミング交流会 #enebular #obniz pic.twitter.com/K94LO4ApZg
— もっちー@iOS (@Motchy_1204) November 16, 2019

#obniz のプログラミングで、DCモーターを使った車を制御。#ビジュアルプログラミング交流会 #enebular pic.twitter.com/GEyLQkfZ6J
— you (@youtoy) November 16, 2019

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

enebularハンズオン

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

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

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

おぉぉ
enebularと連携してビジュアルで操作できるようになってる！！！
さすが松下さん！！！

#ビジュアルプログラミング交流会 #obniz #enebular pic.twitter.com/ci7JmXrVpl
— 3yaka (@3yaka4) November 16, 2019

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

▼ しくみ
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）」のUI上から、JSONのデータを obniz へ送り、obniz のディスプレイ上に文字を表示させることが簡単に行えました。
Smart Websocket Client の使い方が分かったところで、enebular上の WebSocket機能との連携へと進んでいきたいと思います。
（それと、Smart Websocket Client についてググっていた中で、GitHubのページを見かけたのですが、その内容によると Web上で試せるバージョンもあるようでした）

enebular で WebSocket を使う

enebular でデータを受信

enebular側

enebular 側は、WebSocket経由で受け取った内容を単純に表示する、という構成にしました。
使う要素は2つのみで、デバッグコンソールに受信した内容を表示するだけ、という処理になります。

そして、忘れずデプロイをして、次へと進みます。
その際、デプロイした後の URL は次のステップで使うので、メモしておきましょう。