遂に買いました”obniz”
前々から存在は知っていたのですが、遂に買いましたobniz。
何が凄いって、JavaScriptとHTMLの知識があればIoTが作れちゃいます！
例えば、Lチカ（LEDをチカチカ）したいならこれだけでOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@2.2.0/obniz.js" crossorigin="anonymous"></script> </head> <body> <div id="obniz-debug"></div> <h1>Lチカプログラム</h1> <button id="on">ON</button> <button id="off">OFF</button> <div id="print"></div> <script> var obniz = new Obniz("OBNIZ_ID_HERE"); obniz.onconnect = async function () { var led = obniz.wired("LED", { anode:0, cathode:1 } ); $('#on').click(function () { led.on(); }); $('#off').click(function () { led.off(); }); } </script> </body> </html> |
見慣れない関数はあるものの、どこからどう見てもHTMLとJavaScriptです。
コーディングはこれだけで、難しい設定も必要なく、IoTが作れちゃう！
それがobnizです！素晴らしい！最高！
初期設定
と言っても、ざっくりとしか説明しません。
そこまで分かりにくいモノでもないので…
１．電源に繋ぐ
電源ケーブルはパッケージに付属しませんので、別途ご用意ください。
とはいえ、ただのmicro USB端子なので、モバイルバッテリーや、ワイヤレスのオーディオ機器等をお使いの方は持ってるかと思います。というか多分みんな持ってます…多分。
一応、J1ホールから電力供給できるので、知識のある方はそちらからでもOKみたいです。
（念のため、調べてからやってください）
２．Wi-Fiを設定
これが一番大変な作業です。
コーディングより大変です。
obnizを始めた人の9割はここで挫折したと聞いたことがあります。
嘘です。
さて、Wi-Fiですが、選択をしてパスワードを入力する。ただそれだけです。
ただ、やってみると分かる通り、上部のホイールを使用しての入力なのでめちゃくちゃ面倒です…
尚、私は入力途中に誤って電源ケーブルを抜いてしまったので….もう….
パスワード入力後、obnizのディスプレイにQRコードと番号が出てきたら完了です！
３．サイトで登録
obnizのコンソールからまずは会員登録をしてください。
その後、コンソールで「プログラム」を開くと「obniz idを入力」というポップが出てきます。
そこに、先程obnizのディスプレイに出てきた番号を入力してください。
これでobnizの登録は完了です。
天気チェッカーを作る
何故天気チェッカー？と思われたかもしれませんが、なんとなくです。気にせずに。
今回は、天気APIの代名詞みたいな「OpenWeatherMap」を使用します。
▼使い方に関しては以下のサイトを参考にしたのでご参考に。
⇒【Rails/JS】無料API「OpenWeatherMap」で天気予報を表示する
尚、OpenWeatherMapの使用には登録が必要なので、その辺も含めて上記サイトをご確認ください。
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@2.2.0/obniz.js" crossorigin="anonymous"></script> </head> <body> <div id="obniz-debug"></div> <h1>WeatherChecker</h1> <script> var obniz = new Obniz("OBNIZ_ID_HERE"); obniz.onconnect = async function () { var API_KEY = 'xxxxxxxxxxxxxxxxxxxxx' var city = 'Tokyo'; var url = 'http://api.openweathermap.org/data/2.5/forecast?q=' + city + ',jp&units=metric&APPID=' + API_KEY; var i = 2; var Wdata; function sendWeather(data,i) { var Week = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat"); var date = new Date (data.list[i].dt_txt); var month = date.getMonth()+1; var day = month + "/" + date.getDate() + "/" + Week[date.getDay()] + date.getHours() + ":00"; var nowWeather = data.list[i].weather[0].main; var nowTemp = Math.round(data.list[i].main.temp); obniz.display.clear(); obniz.display.print(city); obniz.display.print(day); switch(nowWeather){ case "Clear" : obniz.display.print("Crear ☀ " + nowTemp + "℃"); break; case "Rain" : obniz.display.print("Rain ☂ " + nowTemp + "℃"); break; case "Clouds" : obniz.display.print("Clouds ☁ " + nowTemp + "℃"); break; default: obniz.display.print(nowWeather + " " + nowTemp + "℃"); } } $.ajax({ url: url, dataType: "json", type: 'GET', }) .done(function(data) { sendWeather(data,i); Wdata = data; }) .fail(function(data) { obniz.display.clear(); obniz.display.print("Error"); }); obniz.switch.onchange = function(state) { if(state == "right"){ if(i == 8) i=0; else i+=1; }else if(state == "left"){ if(i == 0) i=8; else i-=1; } sendWeather(Wdata,i); } } </script> </body> </html> |
ざっくりと解説
まず書き換えが必要なのは、17行目の
|
1 |
var API_KEY = 'xxxxxxxxxxxxxxxxxxxxx' |
ここです。
xxxx～と書いてある部分に、OpenWeatherMapで発行したAPI KEYを入れてください。
これでひとまずは動作するかと思います。
また、18行目の
|
1 |
var city = 'Tokyo'; |
の’Tokyo’を別の都市名に変えると、その都市の天気が表示されます。
尚、今回のプログラムでは日本国内用に作っているので、海外の天気を知りたい方は、調べてみてください（おそらく19行目を変更）。
obniz特有のコードとしては、ディスプレイに文字を表示する
|
1 |
obniz.display.print(文字列or変数); |
という関数があるので、これを使うだけで簡単に表示できます。
2回目以降の使用で勝手に改行されていくのも楽でいいですね。
ディスプレイ内の表示を初期化するには、
|
1 |
obniz.display.clear(); |
を使用します。
以上！
今回参考にしたサイトは記事中に出てきたQiitaの記事のみです。
HTMLとJavaScriptだけでIoTが作れるというのは、Web分野の方にとっても興味深いですよね？
今回は、電子パーツが無くてもできる、簡単な内容でしたが、今後はしっかり電子工作も踏まえた内容を書きたいと思いますのでお楽しみに！
▼obnizの購入はこちらから
⇒obniz – クラウドにつながったEaaS開発ボード – クラウドの永久ライセンス付き
今回のブログ曲
今回投稿中に聴いていた曲はこちら
