enebularでのtemplateノードを活かしてobnizクラウドのソースを良い感じに動かすメモです。
この記事は、enebular Advent Calendar 2018の19日目に代わりに飛び入り投稿させていただきました。
やりたいこと
obnizを動かすとき、自分の場合はサッとやるときobnizクラウドで動かします。ただ、obnizクラウドに行って起動することをし忘れてハマったりするので、たとえばenebularで連携する場合であれば、enebularになるべくに寄せて仕組みが作れないかなと考えました。
obnizクラウドでなくてもobniz.jsの作法が合っていれば動く
実は別件の調査をしていたところ、obnizクラウドのあることに気づきました。
ドキュメントからはちょっと分かりにくいですが、必ずしもobnizクラウドでのソースコード実行する必要はなく、 ちゃんと obniz.js が呼べて自分のobniz IDが動きさえすれば、外部のサーバーに置いてあるHTMLも動作する のです。
たしかに、obnizクラウドはソースエディタとHTMLをブラウザに頼って表示しているので複雑なことはしていませんから、試してみるとちゃんと動きました！
obniz 木戸さんからも良い感じにお墨付きをいただきました！
enebularにうまく取り込んでみる
ということで、これはできるということで試してみます。
SkyWayのP2PVideoサンプルをenebularで動かしてみよう | enebular blog
で使ったような、templateノードを使ってHTMLを表示して連携する手法が活かせます。つまり、obnizクラウドのソースをenebular上でHTML表示させて機能を寄せることができそうです。
たしかに、obnizクラウドを起動してー、enebularで別のフローを実行してー、ということも悪くはないんですが、今回のように寄せるというのは作業がわかりやすくなるでしょう！
Discover Flow インポート
ということで今回のDiscover Flowです。
こちらをインポートして使っていきましょう。
まず、シンプルにHTMLを表示するのはこのあたり。
さらに、obnizのHTML画面とenebularが相互にリアルタイム連携できるように、websocketで操作も連携できるように手を加えています。
自分の使いたい obniz のIDを反映
今回のフローでひとつだけ設定をします。
このchangeノードをクリックして自分の使いたい obniz のIDを反映します。
いまは、OBNIZ_ID_HEREなのでこのままでも使用できますが、自分の使いたい obniz のIDがわかっているなら反映します。
obnizを起動してIDを確認します。
反映しました。デプロイします。
動かしてみる
ということで、動かしてみます。
今回はさらりとテストするのでテンポラリーのURLを利用します。ちゃんと仕組みができたらHeroku Deployをしましょう。
https://<テンポラリーのURL>/obniz
にアクセスします。
無事起動しました！
やった！
つながったか確認
フローを見てみると connected 1 となって websocket もつながっています！
このフローで起動が反応しています。
ちゃんとメッセージをobnizから受け取っています。
obnizを操作してenebularにメッセージを送る
スイッチを操作してみましょう。
反応しました！
enebularからobnizメッセージを送る
こちらのフローでenebularからobnizメッセージを送れます。
injectノードを押してみます。
無事メッセージが送られました！
これはこれで可能性のあるアプローチ
やってみて、かなり面白かったです。
もちろんobnizはobnizクラウドというかAPIとしては裏側でつながっています。
ですが、表示上はenebularオンリーでobnizを動かしている風になるので、obnizのソース連携もenebularのtemplateノードでHTMLを調整して対応できますし、今回、websocketの連携もうまくできたのでインタラクティブなやりとりも行えそうです。
それでは、よき obniz & enebular Life を！