-
obnizでLEDを光らせよう！【obniz講座第2回】
気軽にIoT電子工作ができる「obniz」でLEDを光らせる方法について説明します。 「IoT」や「obiz」ってどういう意味？という方は、前回の記事をご覧ください。 【前回の講座】 o ...
続きを見る
-
obnizでIoT電子工作を始めよう！【obniz講座第1回】
サンダーIoTってご存知ですか？ IoT・・・5GとかAIとかのなんとなくの仲間・・・かみなりん サンダーIoTは「Internet of Things」の略で、「モノのインターネット」という意味です ...
続きを見る
準備するもの（第2回と同様）
今回用意するものは第2回と同様です。
準備するもの
- obniz本体 ×1個
- マイクロUSBケーブル(obnizの電源供給用) ×１本
- LED ×光らせる個数分
- 200Ω前後の抵抗 ×1個LEDにつき１つ
- ブレッドボード×1個（あると便利）
- ブレッドボード用ジャンプワイヤ
obniz本体はAmazonや公式ショップから購入します。
ブレッドボードがあると、半田付けをせずに電子回路が組めるので、１つあると便利です。
LEDや抵抗などの電子部品は、東京の秋葉原にある「秋月電子通商」や「千石電商」などから購入しています。
サンプルプログラム
onbiz.jsは常に最新にしてください
下記のoniz.jsを読み込む際のバージョンは常に最新バージョンへ書き換えてください
<script src="https://unpkg.com/obniz@【ここの部分】/obniz.js" crossorigin="anonymous"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/obniz@2.0.1/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="obniz-debug"></div>
<button id="led_on">ON</button>
<button id="led_off">OFF</button>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function ()
{
var led = obniz.wired("LED", { anode:0, cathode:1 } );
document.getElementById('led_on').addEventListener('click',function() {
led.on();
obniz.display.clear();
obniz.display.print("ON");
});
document.getElementById('led_off').addEventListener('click',function() {
led.off();
obniz.display.clear();
obniz.display.print("OFF");
});
}
</script>
</body>
</html>
第２回までに既出の文は割愛します。
今回初めて出たHTMLのBODYタグ内の<button id="****">～</button>、
scriptタグ内のdocument.getElementByIdから始まる文を順に説明します。
<button></button>について
サンプルコードの下記について説明します。
<button id="led_on">ON</button>
まず、<button></button>タグでボタンを作成できます。ボタンタグで囲った部分がボタン表示部として出力されます。
【例】
<button>ボタン表示</button> と書くと、下記のように表示されます。
そして、<button id="led_on">ON</button>の「id="led_on"」部分ですが、このように書く事により、固有のID名を割り当てる事が出来ます。
このID名を使用して、ボタンのデザインを変更をしたり、ボタンがクリックされたときの処理を書くための識別として使用します。
まずは、このボタンを「led_on」というID名として扱うと覚えておいてください。
同様に<button id="led_off">OFF</button>は、【OFF】と表示するボタンを「led_off」というID名として扱います。
document.getElementById～について
この文はJavaScriptです。
前半の「document.getElementById('led_on')」と、後半の「addEventListener('click',function() {});に区切って説明していきます。
document.getElementById('led_on')
JavaScriptで「document.○○」と書くと、HTMLで書かれた要素を取得することが出来ます。
documentの後の「getElementById('led_on')」で、HTMLで書かれたID名「led_on」の要素を取得するという意味になります。
HTMLの本文では下記のようにbuttonタグにID名を設定しました。
| HTMLコード | 説明 | ID名 |
|---|---|---|
| <button id="led_on">ON</button> | LEDを点灯するためのボタン | led_on |
| <button id="led_off">OFF</button> | LEDを消灯するためのボタン | led_off |
これらのボタンが押されたら、LEDを点灯させたり、消灯させるのが目的です。
つまり、ボタンをクリックしたときにLEDを点灯させたり、消灯させるプログラムを書く必要があります。
ボタンをクリックしたときの処理が後半部分のaddEventListener('click',function(){});となります。
addEventListener('click',function(){});について
これは前半部分のdocument.getElementById('led_on')で指定した要素に対して、クリックされたときのイベント処理を表します。
addEventListenerは下記のように使用されます。
各引数の説明は下記の通りです。
| 第n引数 | 説明 | サンプルコードの例 |
|---|---|---|
| 第１引数 | 発生イベントの文字列 | 'click' |
| 第２引数 | 第１引数で指定したイベントで処理する関数等 | function(){} ←無名関数 |
| 第３引数 | 要素がイベントを受信する順番 | 省略 ←省略時はfalse |
「引数」とは・・・
引数はその関数が処理するのに必要な値です。例えば100円にかかる消費税を計算する関数を用意したとき、
100円が引数、108円(消費税が8%の場合)が返り値と呼びます。
addEventListenerの第１引数について
第１引数は発生させるイベントの文字列を記載します。
今回はボタンをクリックした時に処理させるので、'click'を指定しています。'click'以外にマウス操作関係は下記のようなイベントがあります。(抜粋9
| click | マウスを左クリックしたとき |
| mousedown | マウスの左ボタンを押しているとき |
| mouseup | マウスの左ボタンを離したとき |
'click'と'mousedown'の違いがややこしいので、敢えてこの３つを抜粋して紹介しています。
例えば、ボタンを押している間だけボタンが凹んでいるような処理にする時は'mousedown'、
ボタンを離したときにボタンが元に戻るような処理にするときは'mouseup'となります。
'click'は'mousedown'して'mouseup'したときの処理ということになります。
addEventListenerの第２引数について
第２引数は第１引数で指定したイベントが実行されたときに処理する関する等を記載します。
サンプルコードでは、
addEventListener('click',function(){
function()で処理する内容
});
と書いています。
このように名前のない関数を「無名関数」と言います。
functionの中身では、①LEDを点灯 or 消灯 ②obnizのディスプレイをクリア ③obnizのディスプレイに文字を表示
を行っています。
無名関数は名前がないので、別の場所で同じ処理をしたいときには呼び出せませんが、今回はボタンが押されたときのみにこの関数を使用すれば良いので、無形関数としています。
addEventListenerの第３引数について
addEventListenerの第３引数は要素がイベントを受信する順番で、初期値もしくは省略したときには「false」となります。
基本的に省略で構いません。ここから先は気になる方のみお読みください。
「false」のときには「子⇒親」の順に、「true」のときは「親⇒子」の順に呼び出されます。
例えば下記のコードを例にします。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="div_id">
<button type="button" id="button_id">button</button>
</div>
<script type="text/javascript">
document.getElementById('div_id').addEventListener('click',function() {
console.log("div");
});
document.getElementById('button_id').addEventListener('click',function() {
console.log("button");
});
</script>
</body>
</html>
親要素「div」の中に子要素「button」を入れ、それぞれクリックしたときの処理を記載しています。
表示されたボタンをクリックすると、「button → div」に表示されます。
省略された場合は子⇒親の順に呼び出されるためです。
これを
document.getElementById('div_id').addEventListener('click',function() {
console.log("div");
},true);とすると、「div → button」の順、つまり「親⇒子」に表示されるようになります。
プログラムを実行しよう
プログラムが完成したら、obnizのIDを入力します。
「ON」のボタンを押したらLEDが点灯し、ディスプレイに「ON」の文字が表示されます。
「OFF」のボタンを押したらLEDが消灯し、ディスプレイに「OFF」の文字が表示されることを確認してください。
もし、ディスプレイに文字が表示されていて、LEDが光らない場合はアノード（プラス側）がobnizのポート0番、カソード（マイナス側）がポート1番に接続されているか確認してください。
【前回の講義】
-
obnizでLEDを光らせよう！【obniz講座第2回】
気軽にIoT電子工作ができる「obniz」でLEDを光らせる方法について説明します。 「IoT」や「obiz」ってどういう意味？という方は、前回の記事をご覧ください。 【前回の講座】 o ...
続きを見る
【次回の講義】
-
obnizのPWM制御でLEDを調光しよう【obniz講座第４回】
今回はobnizのPWM制御を使って、LEDを調光させたいと思います。 これまでのobnizについての記事や、PWMについて説明した記事もあるので、合わせてご覧ください。 記事 内容 obnizでIo ...
続きを見る
【全講座まとめ】
| 記事 | 内容 |
|---|---|
| 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でサーボモータを動かします |
