突然ですが、JavaScriptって好きですか？
そうそう、いまフロント界隈でチヤホヤされてるアイツ。
先輩風ビュービュー(Vue)吹かしたり、リアクション芸人(React)として注目されたり、ジェイなんて略されたりしちゃって。
けどね、俺正直アイツ苦手なんすよ。
人を寄せ付けない心のバリア(){}が何重にも構成されていて、なんかとっつきづらい。
これ( ){ }←要る？本当に？？本当に要る？？？
ってなる
— しおい@上京しました (@coe401_) 2018年8月16日
そんでじっくり接してやっと１つ心のバリアを剥がしたと思ったら、また出てくるんですよ。バリアが。
こんなん繰り返してるとね、もうメンドクセーってなっちゃう。
すると距離感生まれて気まずくなって自然消滅。
なんかアイツとうまく付き合ういい方法ないすかねー？
目次
JavaScriptでIoTできるマイコンがあった！
そんなことを考えてたらこんなものを見つけてしまいました。
どうやらJavaScriptを使ってセンサーやモーターといったハードウェアを制御できるようです。ワオ。
個人的な話なんですが水耕栽培を何年もやってると、気温・水温・湿度・EC濃度といった各種データを自動で取得したくなるんですよね。毎回測るの正直めんどい。
これらのデータを統合的に管理できれば、精度の高い栽培管理ができますし
さらに取得した値をもとに給水したり、EC濃度を自動調整できたら最高じゃないっすか！
このobniz(オブナイズ)という端末はIoT志向の私とJavaScriptの間を取り持つ仲人なんじゃなかろうか。
そんな期待を抱いて入手することにしました。
オブナイズ(obniz)のハンズオンワークショップに行ってきた。
さらにちょうどタイミングよくハンズオンワークショップが8/22 代々木で開催されていたので行ってきました！
やっぱ直接教えてもらいながら触ったほうが理解が深まりますからね！
合計20人位来られてたんですが、興味深かったのが参加者の属性。
40代以上の男性がほとんどを占めていました。女性は2名くらい。
普段接することが多いWEB系の人は20-30代が中心だったのでこれは意外でした。WEBが比較的最近だからですかね？
起動はこんな感じ。microUSBケーブルと接続し
- 端末左上のコントロールレバー
- 表面に設置された有機ELパネル
を使って初期設定を行います。
以前Arduinoをいじったことがあるんですが、オブナイズ(obniz)はコンパクトだし挙動を確認できる画面が標準搭載なので便利だなーと思いました。
オブナイズ(obniz)の動作概要
オブナイズ(obniz)がラズベリーパイやArduinoと違うのは、端末そのものに制御のプログラムコードを持たない点。
PCやスマホで作成したJavaScriptのソースコードがクラウド(インターネット)を通じて端末に配信され、接続されたハードウェアが動きます。
これまでハードウェア制御というと
- C言語が必要だったり
- 記録できるプログラム量が端末固有のメモリ容量に制約されたり
と敷居高く感じたのですが、これならちょっと馴染めそう。
ただ注意点としてはオブナイズ(obniz)端末がインターネットに接続していないと、全く動作しないということです。
ラズベリーパイやArduinoは端末だけで自己完結できます。
LEDを点灯させてみた
ガイダンスに沿って開発環境にソースコードを打ち込んでみると・・・
ワオ！インターネットを通じて送られてきたソースコードをもとにLEDランプが光りました！
ディスプレイに接続状況が表示されるのがいいですね。
ちなみにソースコードはこちら。
※(“OBNIZ_ID_HERE”);には端末固有のユニークIDを入れます
ラジコンカーを作ってみた
LEDの点灯、通称Lチカの次はモーターをつないでラジコンカーを作ることに。
下記ソースコードを打ち込むと
※(“OBNIZ_ID_HERE”);には端末固有のユニークIDを入れます
するとこんな画面が立ち上がって、ブラウザ側でモーターを動かせちゃいました！
今までパソコンの中で動作完結していたJavaScriptが現実世界にも影響を及ぼすなんて、なんだか感動です。
ソースコードを観察してみた。
さてこのオブナイズ(obniz)。いったいどんな感じで動いているのか？ソースコードを観察してみました。
head部でベースプログラムを読み込む
まず<head>部分にあるのがこのコード。
script src="https://unpkg.com/obniz@latest/obniz.js" crossorigin="anonymous">
インターネット上で公開されているobnizのjsファイルを読み込んでるんですね。こいつを読み込むことで、JavaScriptでの制御が可能になっている模様。
なのでオブナイズ(obniz)公式サイト上の開発ツールを使わなくても、自分のブログにソースコード貼り付けておけば、操作できちゃいます。
ちなみにjsファイルの中身みたら22,640行もありました・・・。
https://unpkg.com/obniz@latest/obniz.js
インスタンスを作る
次に着目したのはこの部分。
var obniz = new Obniz("OBNIZ_ID_HERE")
new Obniz("オブナイズの固有ID") することでインスタンスを作る。
ここにすべてが詰まってるんでしょうな。
ざっくりrailsで例えると @blog = Blog.newに近い感じ。
JQueryでスイッチ制御
さらに興味深かったのがここ。htmlで作成したボタンスイッチをJQueryで制御していたこと。
$("#lf").on('touchstart mousedown', ()=>{
motorA.move(true); //ボタンが押されたら動かす
})
ちなみに開発者に聞いたところ、JQuery以外でも動くとのこと。
表記が簡単なのでチュートリアルに使うには最適。分かりやすいです。
JavaScrit学習ツールとして最高なんじゃないか？
私は正直JavaScriptは苦手です。でもオブナイズ(obniz)を使えば楽しみながら学習できる気がしてきました。
それにパソコンのモニタ上でデバッグしても何が起こってるかイメージ湧きづらいですが、現実の物理世界と接続しているオブナイズ(obniz)を使えば実感を伴って試行錯誤できます。
「あれ、距離センサーから値が取れねぇ。どこで詰まってるんだろ？」的な
if文の設定条件も、センサーから送られる気温や距離値を使えるので、できることの幅がかなり広がりそうです。
オブナイズ(obniz)で作ってみたいもの
まだ全然触ってませんが、現時点で思いついたのはクラウドファンディングならぬ、クラウド水やりマシン。
みんなで協力しあって気温・水位をモニタリングし、気づいた人が水やりをクラウド経由で行うというちょっとくだらないサービス。
・水道の開け締めをする電磁弁
・気温・水位センサー
があれば作れそうな気がする・・・！
実際どんなものがつくれるのかのサンプル集は、オブナイズ(obniz)公式サイトにも掲載中ですので興味あるかたは是非ご一読を。
まとめ
ブログの世界もオフラインと接点持ったほうが広がりが生まれるように、WEBサービスも現実世界と直接リンクしたほうが面白いと思うんですよね。
- JavaScriptバリバリ使ってる人 → IoT領域への発展
- JavaScript正直苦手でなんとか克服したい人 → 楽しく学べる学習ツール
オブナイズ(obniz)は可能性を秘めた存在。是非触ってみて下さい！
今日の一句
”JSと 心を通わす オブナイズ”
コメントを残す