IoTってどういう意味？
Tumisu / Pixabay
今はまだWiFiに接続可能なエアコンは多くありません。
でも近い将来、WiFiに接続できる家電や照明は増えると思います。
このように、モノがインターネットにつながる事により、より便利な生活になる事が予想されます。
これを「モノのインターネット」と呼び、英語で「Internet of Things」の頭文字を取って「IoT」と呼んでいます。
今後は「IoT」や人工知能(AI)が普及していく中で、これらの知識があるに越した事はありません。
そんな「IoT」を手軽に開発できる「obniz(オブナイズ)」について紹介します。
obnizは手軽にIoT電子工作できる基板
「obniz(オブナイズ)」とは、スマートフォンやパソコンからWiFi経由の遠隔操作により、LEDを光らせたり、モーターを動かすといった電子工作を手軽に開発出来る開発基板です。
obnizを動かすためには、パソコンやスマートフォンからHTMLやJavascriptでプログラミングを行います。
私達が見ているWebページはHTMLで書かれています。
また、ボタンを押したら計算してくれるようなページがあると思いますが、それらの処理はJavaScriptで書かれています。
このようにWebページはHTMLやJavascriptで書かれているので、それらのプログラムで動かす「obniz」はWebページを作る感覚でLEDを光らせたりすることが出来ます。
ちなみに通常のマイコンと呼ばれるICを使ってパソコンからLEDなどを制御したい場合、下記のように色々な知識が必要になります。
マイコンとは「マイクロコンピュータ」の略で、スイッチの入力を読んだり、LEDを光らせたりといった簡単な制御が出来る小さなコンピュータです。
| 項目 | 用途 | 必要な知識 |
|---|---|---|
| マイコン | LEDを光らせるなどの命令 | C言語などで書くファームウェア |
| 基板 | マイコンを動かすための基板 | 回路設計、基板製作など |
| パソコン | マイコンと通信するためのアプリケーション | C++などで書くアプリケーション |
| マイコンとパソコンの通信 | マイコンとパソコンが通信するため | RS-232CやUSB、bluttoothなど |
このように、パソコンから好きなように動かすには一筋縄ではいきません。
これらの知識は不要で、obnizはブラウザ上でプログラムするだけでLEDを光らせたり、モーターを動かしたりすることが出来るので、電子工作初心者にオススメです。
その、obnizは公式サイトまたはAmazonなどから購入します。
obnizのWiFiセットアップ
obnizへの電源供給はマイクロUSBです。マイクロUSBはスマートフォンの充電などで使用されます。
マイクロUSBケーブルをobnizに接続すると、自動でWiFiをスキャンします。
左上のスイッチでお使いのWiFiのパスワードを設定します。
スイッチは左右に動かせて、押し込むことが可能です。左右で選択、押し込みで決定です。
パスワードを全て入力したら「END」を選択します。
QRコードが表示されたら設定が完了です。
obnizで「Hello world」を表示
WiFiセットアップ後に表示されるQRコードを読み取るか、obnizの公式サイトにアクセスします。
obnizの公式サイトで説明されているプログラムでも良いですし、こちらのサンプルコードを記入して実行してみてください。
【サンプルコード】
onbiz.jsは常に最新にしてください
下記のoniz.jsを読み込む際のバージョンは常に最新バージョンへ書き換えてください
<script src="https://unpkg.com/obniz@【ここの部分】/obniz.js" crossorigin="anonymous"></script>
<html>
<head>
<script src="https://unpkg.com/obniz@2.0.1/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = function () {
obniz.display.clear();
obniz.display.print("Hello World!")
};
</script>
</body>
</html>
サンプルコードの説明(HTML)
上記サンプルコードのHMTL部分を説明します。HTMLをご存知の方は飛ばしてください。
HTML
HTMLは「Hyper Text Markup Language」の略で、見ているWebページはHTMLで書かれています。
そのHMTLであることを宣言するため、<HTML></HTML>でくくります。
この<>で囲った部分を「タグ」と呼んでいます。
<HTML>はHTMLの開始を意味しており、</HTML>はHTMLの終了を意味します。
このようにHTMLの開始は<○○○>で始め、</○○>で閉じるのが一般的です。
<head></head>、<body></body>、<script></script>
HTMLではページタイトルなどを記載するヘッダー、本文を記載するボディがあります。
ヘッダーには外部ファイル読み込み先なども記載します。
サンプルコードでは下記の文を記載しています。
<script src="https://unpkg.com/obniz@1.13.1/obniz.js"></script>
<script></script>は「JavaScript」のタグであることを意味しています。
src=""は、""で指定したURL先にあるJavaScriptファイルを読み込むという処理になります。
この「obniz.js」はobnizを簡単に使えるようにするためのライブラリで、LEDやモーターなどを動作させるための関数がまとめられています。
また<body>タグの中にも<script>タグが書かれています。
このように外部からJavaScriptファイルを読み込むときは<head>タグ内、
JavaScriptのプログラムを直接書く時には<body>タグ内で記載する事が一般的です。
<div id="obniz-debug"></div>について
サンプルコードの<body>タグ内の下記に注目してください。
<div id="obniz-debug"></div>
<div>タグは「Division」の略で、ひとまとまりのブロックであることを示しています。
本来は、<div>divの中身</div>のように<div>タグの中には表示したい文章を記入します。
ですが、サンプルコードでは<dv></div>の中身はカラなので、本来は何も表示されません。
ですが、「id="obniz-debug"」と記載しておくと、obnizがオフラインなのかオンラインなのかといった情報を表示してくれます。
これは先ほどの「obniz.js」が「id="obniz-debug"」に該当する部分を見つけて表示してくれています。
本文の<script>タグ(=JavaScriptの説明)
それではメインのJavaScript部分を見ていきます。下記を見てください。
var obniz = new Obniz("OBNIZ_ID_HERE");
JavaScriptでは変数を宣言するとき、var ○○と宣言します。
変数とは数値や文字列などを格納するための箱のイメージです。
これはobnizという変数に「OBNIZ_ID_HRE」の番号のObnizを新しく宣言して使用するという事を意味します。
実際には「OBNIZ_ID_HERE」にはあなたのobnizのIDを入力します。
【例】obnizのIDが「1234-5678」の場合、var obniz = new Obniz("12345678"); ※4桁目と5桁目に「‐」は無くても可
Hello Worldの処理部分
それでは実際に下記がobnizのディスプレイに「Hello World!」を表示されるプログラムです。
obniz.onconnect = function () {
obniz.display.clear();
obniz.display.print("Hello World!")
};
obniz.onconnect = fucntion() { };
この部分は先ほど宣言した「obniz」がオンライン状態になったらfunciton内の処理をするという命令です。
obniz.display.clear();は文字通りディスプレイ表示をクリアすると言う意味です。
続いてobniz.display.print("Hello World!");がobnizのディスプレイに「Hello World!」と表示させるプログラムとなります。
プログラムを実行するには右上の「保存＆開く」で実行します。
obnizのディスプレイに「Hello World!」と表示されたら成功です。
【次回の講座】
-
obnizでLEDを光らせよう！【obniz講座第2回】
気軽にIoT電子工作ができる「obniz」でLEDを光らせる方法について説明します。 「IoT」や「obiz」ってどういう意味？という方は、前回の記事をご覧ください。 【前回の講座】 o ...
続きを見る
【全講座まとめ】
| 記事 | 内容 |
|---|---|
| obnizでIoT電子工作を始めよう！【obnizでIoT電子工作を始めよう！【obniz講座第1回】 | obnizのディスプレイに文字を表示させます |
| obnizでLEDを光らせよう！【obniz講座第2回】 | obnizにLEDと抵抗を接続してLEDを光らせます |
| ソフトウェアボタンでLEDをON/OFFしよう！【obniz講座第３回】 | HTMLで作成したボタンを押して、LEDをON/OFFさせます |
| obnizのPWM制御でLEDを調光しよう【obniz講座第４回】 | obnizのPWM機能を使ってLEDを調光させます |
| obnizでフルカラーLEDをグラデーション点灯しよう【obniz講座第5回】 | obnizでフルカラーLEDをグラデーション点灯させます |
| obnizで圧電ブザーを鳴らそう！【obniz講座第6回】 | obnizで圧電ブザーを鳴らします |
| obnizでミニ4駆をラジコン化しよう！【obniz講座第7回】 | obnizでタミヤのミニ四駆をコントロールします |
| obnizでサーボモータを動かそう！【obniz講座第8回】 | obnizでサーボモータを動かします |
