enebular editor をMacで試してみる

こちらは、[enebular Advent Calendar](https://qiita.com/advent-calendar/2018/enebular) の 9日目の記事の第2弾（差し替え用記事）になります。

下記の第1弾の記事を、当初はアドベントカレンダーに登録していました。
しかし、下記を書いた結果、enebular要素があまりにも少ないものとなったため、本記事を後で書いて差し替えました。
　⇒ [●Scratchとenebularを連携させようとしてみた過程と結果・・・](https://qiita.com/youtoy/items/7668de87f28e35ca5f48)
（ 2019/1/17（木）に開催の「[enebular developer Meetup Vol.7](https://enebular.connpass.com/event/110843/)」で、カレンダーに記事を書いた人がLTをする、といった話がでたのもあり・・・）

内容はタイトル通り、[「enebular editor」](https://docs.enebular.com/ja/enebulareditor/
) を試してみた、という内容がメインです。
最終的に、ローカルネットワーク内でのリアルタイム通信を試そうとしたのですが、この部分はうまくいかず完成せず・・・。

# enebular を初めて使ったときの話（抜粋）

まず、アドベントカレンダーのテーマになっている[「enebular」](https://enebular.com/)を、初めて使ったときの話について触れたいと思います。
（※ [当初、アドベントカレンダー用に登録していた記事](https://qiita.com/youtoy/items/7668de87f28e35ca5f48)からの抜粋です。）

enebular を初めて使ったのは、[LINE BOOT AWARDS 2018](https://www.line-community.me/awards/) の期間中に実施された[「Clova × enebularハンズオン」](https://linedev.connpass.com/event/96084/)に参加したときでした。

この時は、enebularのフローを取り込む仕組みを活用することで、短時間でClovaスキルを作ることができました。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">取り込んだフローの確認。<a href="https://twitter.com/hashtag/linebootawards?src=hash&amp;ref_src=twsrc%5Etfw">#linebootawards</a> <a href="https://twitter.com/hashtag/clova_cek?src=hash&amp;ref_src=twsrc%5Etfw">#clova_cek</a> <a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://t.co/ULhmjLnRvc">pic.twitter.com/ULhmjLnRvc</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1032586195421675521?ref_src=twsrc%5Etfw">2018年8月23日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記のフローで、Clovaスキルを起動したときに応答を返し、さらにユーザの呼びかけに答える仕組みが実装されています。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">本日の成果です。<br>同時に反応して、両方とも話してくれます。<a href="https://twitter.com/hashtag/linebootawards?src=hash&amp;ref_src=twsrc%5Etfw">#linebootawards</a> <a href="https://twitter.com/hashtag/clova_cek?src=hash&amp;ref_src=twsrc%5Etfw">#clova_cek</a> <a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://t.co/ujvjvnJLMX">pic.twitter.com/ujvjvnJLMX</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1032611238436462593?ref_src=twsrc%5Etfw">2018年8月23日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#  enebular editor を試した環境

以下が enebular editor を使ってみたときの環境です。

- 【OS】 macOS High Sierra（バージョン 10.13.6） 
    - 【PC】 MacBook Pro（13インチ, 2017）
- enebular editor 0.9.0（enebular+editor-0.9.0.dmg）

# 導入

画面キャプチャの内容メインで、ステップごとの内容を記載していきます。

## インストール

https://docs.enebular.com/ja/enebulareditor/ へアクセス。
<img width="767" alt="公式サイト" src="https://qiita-image-store.s3.amazonaws.com/0/50868/8207031b-f036-0b1f-2949-260a91090f29.jpeg">

ダウンロード用のリンクをクリック。
<img width="767" alt="ダウンロード用リンク" src="https://qiita-image-store.s3.amazonaws.com/0/50868/4dc7a9eb-e000-5420-87a5-2f5b886a5bc0.jpeg">

インストール（アプリのコピー）。
<img width="511" alt="インストール" src="https://qiita-image-store.s3.amazonaws.com/0/50868/9ef751c3-a981-6dd9-0185-a50c0a008988.jpeg">

## ログイン〜フローの作成

enebular editor を起動した直後の画面です。
ログインに必要な情報を入力して、ログインをします。
<img width="633" alt="アプリのログイン画面" src="https://qiita-image-store.s3.amazonaws.com/0/50868/ddbdd0d2-c1ac-cb1e-3495-7e070f250a0e.jpeg">

ログイン後の画面です。
過去に作ったプロジェクト等が表示されている状態です。
<img width="751" alt="フロー一覧" src="https://qiita-image-store.s3.amazonaws.com/0/50868/c796e379-c307-7ea4-2d7e-e63bd8d2ebfe.jpeg">

先ほどの画面の、右上にあるボタンを押下し、フローの作成画面へ。
<img width="751" alt="05：フロー作成画面.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/1c815403-2829-f7ec-7f90-e5cc12e69f38.jpeg">

必要となる情報を入力し、作成ボタンを押下します。
<img width="751" alt="06：フロー作成の内容入力.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/7a7dc07f-968c-b528-e8a6-b658df5d692a.jpeg">

作成後、ブラウザでサービスにログインした画面を確認してみました。
enebular editor で作成した内容が反映されています。
<img width="760" alt="07：Webにも反映.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/d07a43a0-7336-43ba-ee2b-eb4e80532e3f.jpeg">

先ほど作成した内容のフロー編集画面です。
<img width="753" alt="08：フロー編集画面.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/d8e62573-48b0-5c29-cddf-cc7d34c62a3b.jpeg">

そして、ここから先で
 「ローカルネットワークでの、リアルタイム通信を用いたデータ送受信」
を試そうとしたものの、うまくいかず・・・。

## 試行錯誤した内容のメモ

試行錯誤した内容等、何か役に立つことがちょっとはあるかもしれない、ということで追記していきます。

### やろうとしていたこと

4年前に[Arduinoのハンズオン](https://atnd.org/events/50467)を開催したことがあり、そのときに
　「Arduinoで取得したセンサーデータを、リアルタイムに送信し、ブラウザ上でグラフで描画する」
ということをやりました。

以下は、ハンズオンの参加者の方のツイートで、センサデータをブラウザ上でグラフ化した際の様子です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">グラフ化！！ <a href="https://twitter.com/hashtag/html5j?src=hash&amp;ref_src=twsrc%5Etfw">#html5j</a> <a href="http://t.co/aaFZIBynZa">pic.twitter.com/aaFZIBynZa</a></p>&mdash; shinobu.aab / piece of cake, inc. (@operandoOS) <a href="https://twitter.com/operandoOS/status/467575820366520321?ref_src=twsrc%5Etfw">2014年5月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このときに利用したデータ送信部分を流用して、まずは

1. enebular editorで数値データを生成（後々は、センサーデータを外部から取得）
2. ローカルのネットワーク内でリアルタイムなデータ送信（ローカルで仲介するサーバを動かしつつ）
3.  ブラウザでデータを受信し、リアルタイムにグラフ化

ということをやるつもりでした。

### リアルタイム通信〜可視化の部分

[上記のハンズオンで用いたソースコードはGitHubにアップしていて](https://github.com/yo-to/html5j-entech/edit/master/002/)、リアルタイム通信を用いた部分は、[socket.io](https://socket.io/)を利用していました。

また、ブラウザ上でのグラフ描画には、JavaScriptライブラリの「[Smoothie Charts](http://smoothiecharts.org/)」を利用していました。
こちらは、簡単にグラフ化が行えたり、カスタマイズも簡単に行えたり、とても便利です。
<img width="778" alt="グラフライブラリ.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/57aafdf9-6484-a078-4972-7d21fb3867ec.jpeg">

### 失敗の要因と思われること

socket.ioを用いたリアルタイム通信について、WebSocketでの通信と見なしてフローを作っていたのですが、ここが素の WebSocketとは異なる仕様になっているっぽく、失敗したと思われます。

具体的には、こちらです。
<img width="512" alt="WebSocket.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/f608b55a-1893-81d4-fb5c-03874ad0f40b.jpeg">

補足すると、socket.io は、WebSocketやその他の方式のいくつかを併用して、リアルタイム通信を実現するものです。
WebSocketを利用した通信に利用した、といった事例でよく見かけたりします。
もし、WebSocketが利用できない環境で利用した場合は、その他の別の方法を利用してリアルタイム通信を実現するよう動作したりもします。
（そのため、素の WebSocketでデータを送りつけても、そのまま受信できないかも？、というのを後から気づきました・・・）

# 他の方の enebular editorを用いた事例

記事を書く中で、いくつか enebular editor 関連の記事を見たのですが、そのうち1つを紹介しようと思います。
小型ドローンの「[Tello（テロー）](https://www.ryzerobotics.com/jp/tello)」を enebular editor 経由で操作した事例です。

[enebular editorをデスクトップから動作させてTelloを離着陸させよう](https://blog.enebular.com/enebular/enebular-editor-controll-tello/)

この Telloは SDKが提供されていて、Pythonや Scratch など、独自に作ったプログラムで操作が可能なものです。
UDPでデータを送ってやりとりするような仕様なので、SDKがない言語等でも、独自のプログラム制御が可能です。

余談ですが、スマートスピーカーでこの Telloを操作した、といった事例もあります。
　⇒ [miso-develop/tello-controller-alexa: Alexaスキルからトイドローン「Tello」を音声操作します。](https://github.com/miso-develop/tello-controller-alexa)

↓こちらはAmazonさん主催のコンテストの決勝で、上記のデモが行われたときのツイート＆映像です。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">ドローンをボイスコントロールするスキル「Tello Control」。むちゃかっこいいんだが…！未来かよ…？<a href="https://twitter.com/hashtag/Alexa%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%A2%E3%83%AF%E3%83%BC%E3%83%89?src=hash&amp;ref_src=twsrc%5Etfw">#Alexaスキルアワード</a> <a href="https://t.co/NuGfYyPZAe">pic.twitter.com/NuGfYyPZAe</a></p>&mdash; 池澤あやか / いけあや (@ikeay) <a href="https://twitter.com/ikeay/status/1045919204837220352?ref_src=twsrc%5Etfw">2018年9月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# おわりに

今回、Mac版の enebular editorを試しに使ってみました。

試行錯誤中の部分が残りましたが（後でうまくいく方法を見つけられれば、追加で記事を書きます）、
上記のローカルでUDPを使ったTello制御の事例のように、ローカル通信も利用できそうであったり、利用の幅が拡がりそうです。

また、今回は着手できてないのですが、enebular editor は2つのモードがあり、試せていない「Remote」のほうを、試せればと思っています。

（以下、[公式サイト](https://docs.enebular.com/ja/enebulareditor/)からの引用です）
> **Modes**
enebular editor には Desktop と Remote の二つのモードがあります。
**Desktop**
デスクトップモードは、ノード のサポートが PC やブラウザの API に限られている場合に使用します。 enebular editor はクラウドではなくアプリケーションからフローエディタを読み込みます。
**Remote**
enebular-runtime-agent v2.3.0 以降** の linux デバイス（Raspberry Pi など）のフローを編集する場合に使用します。 Raspberry Pi のセンサー用ノードなど、デバイスでしか動かないノードを用いたフローを編集することができます。 AWS IoT または Pelion Device Management との接続が必要です。（Pelion Device Management の場合 enebular-runtime-agent-cloud-connector 2.3.0 を使用してください。） enebular editor は enebular-runtime-agent のフローエディタをリモートで開きます。

## LT用資料へのリンク

この内容について、enebular developer Meetup Vol.7 でLTをしたのですが、そのときに使った資料に、公開用に情報を追記したりしたものを下記にアップしました。

●enebular で試したこと
　https://www.slideshare.net/yo-to/enebular-128487744