はじめてのobniz、はじめてのQiita投稿になります。
平成の最後にobnizをやってみて、新しい時代に備えようと思います。

obnizのサイトのすべてのレッスンにあるようにこのボードはNode.jsやpythonからも制御できるようですが、
まずは取り掛かりとしてhtmlでやってみます。

obniz入門レッスン(html) を選択して、そこに示されている手順通りにやってみることにします。
あと、2019/04/19の技術書典6 で販売されていた「Web技術でIoTをしよう」も参考にします。
リサーチ・アンド・デベロップメント、R&Dの８割はリサーチのほうに費やす！！

obnizのセットアップ

obnizeにmicroUSBを挿すとWiFiを探し始めます。

スイッチはここだよと教えてくれます。

スイッチを押すとWiFiのリストが出てくるので、スイッチを左右に倒しながら接続したいWiFiを選択します。

WiFiを選択するとパスワードを聞いてきますので、スイッチを左右に倒しながら文字を一文字づつ選択確定して

最後に END を選択確定してパスワードの入力を終了します。

接続を完了すると、QRコードが表示されます。右側の75174418というのは obnize id というようです。
WiFiに接続する前から表示されていたので、ボード固有のIDだと思われます。

https://obniz.io/ja/program にアクセスすると obnize id を聞いてきます。

プログラムを動かしてみる

obnize id を入力すると、ソースが記載された状態でhtmlエディターが開かれました。

ソースはこんなふうになっています。

<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.0.2/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz instant HTML</h1>
<button id="on">ON</button>
<button id="off">OFF</button>
<div id="print"></div>

<script>
var obniz = new Obniz("7517-4418");
obniz.onconnect = async function () {

  var led = obniz.wired("LED", { anode:0, cathode:1 } );

  obniz.display.clear();
  obniz.display.print("Hello World");

  obniz.switch.onchange = function(state) {
    $('#print').text(state);
    obniz.display.clear();
    obniz.display.print(state);
  }  

  $('#on').click(function () {
      led.on();
      obniz.display.clear();
      obniz.display.print("ON");
  });
  $('#off').click(function () {
      led.off();
      obniz.display.clear();
      obniz.display.print("OFF");
  });
}

</script>
</body>
</html>

とりあえず、ためしにブラウザの「実行」ボタンを押してみます。

obnizのディスプレイに "Hello World"が表示されました。

スクリプトのこの箇所が働いているようです。

  obniz.display.clear();
  obniz.display.print("Hello World");

ブラウザの「オン」「オフ」ボタンを押すと

obnizのディスプレイはそれぞれこのようになり、

スクリプトのこの箇所が働いているようです。

  $('#on').click(function () {
      led.on();
      obniz.display.clear();
      obniz.display.print("ON");
  });
  $('#off').click(function () {
      led.off();
      obniz.display.clear();
      obniz.display.print("OFF");
  });

LEDを点灯させてみる

ブラウザの「オン」ボタンを押すとled.on()、「オフ」ボタンではled.off()となるようようなので、
次にLEDをチカチカさせるにはどうすればいいか、やってみます。

LEDについては、obnizサイトの JavaScript SDK パーツライブラリの情報をたどって
秋月電子通商で抵抗内蔵のこれを買っていました。

スクリプトの最初のところで

  var led = obniz.wired("LED", { anode:0, cathode:1 } );

となっています。

ウィキペディアの発光ダイオードを見ると
足の長いほうが＋でアノード、短いほうが－でカソードということなので間違いはないと思いますが、
いちおう５ｍｍ青色ＬＥＤ　ＯＳＢ５ＳＡ５Ｂ６４Ａのデータシートを確認して、
足の長いほうがAnode、短いほうがCathodeと記載されていることを確認しました。

ここまで確認したところで、obnizの入門サイトの LEDをつけるにちゃんと写真付きで説明されていることを確認しました。なぁんだ、書いてありました。

つまり、こうすればいいようです。

抵抗が入っているので、そのまま挿しても大丈夫でしょう。たぶん。。。

ブラウザの「オン」「オフ」ボタンを押すと

LEDが灯いたり消えたりします。成功です。

こんどはLEDをチカチカさせてみる

でもこれだと「点灯」「消灯」でチカチカにはならないのでソースに手を入れてみます。
ボタンを追加して

<button id="tikatika">チカチカ</button>

ボタンが押されたときの処理を追加します。
OFF と ON の間にディレイを入れるのは面倒そうなのでこのまま動かしてみます。

  $('#tikatika').click(function () {
    for(var i = 1; i < 10; i++){
      led.off();
      obniz.display.clear();
      obniz.display.print("OFF");
      led.on();
      obniz.display.clear();
      obniz.display.print("ON");
    }
  });

ソースの全体はこうなります。

<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.0.2/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz instant HTML</h1>
<button id="on">ON</button>
<button id="off">OFF</button>
<button id="tikatika">チカチカ</button>
<div id="print"></div>

<script>
var obniz = new Obniz("7517-4418");
obniz.onconnect = async function () {

  var led = obniz.wired("LED", { anode:0, cathode:1 } );

  obniz.display.clear();
  obniz.display.print("Hello World");

  obniz.switch.onchange = function(state) {
    $('#print').text(state);
    obniz.display.clear();
    obniz.display.print(state);
  }  

  $('#on').click(function () {
      led.on();
      obniz.display.clear();
      obniz.display.print("ON");
  });
  $('#off').click(function () {
      led.off();
      obniz.display.clear();
      obniz.display.print("OFF");
  });
  $('#tikatika').click(function () {
    for(var i = 1; i < 10; i++){
      led.off();
      obniz.display.clear();
      obniz.display.print("OFF");
      led.on();
      obniz.display.clear();
      obniz.display.print("ON");
    }
  });
}

</script>
</body>
</html>

うまくいきました。チカチカしてます。（動画じゃなくてごめんなさい）

まとめ

・obniz の最初の一歩、できました。
・Qiita の初投稿、できました。
・Qiita の投稿を考えなければ obniz だけだと簡単にできることが分かりました。
　→ obniz すごい。
・Qiita に投稿している先輩方は作ることとQiitaに投稿することの両方をやってて、すごいと思いました。
　→ Qiita に投稿に投稿している人たち、すごい。
・これからもっとやっていきたい。

obniz入門レッスン(html Lチカ編）

obnizのセットアップ

プログラムを動かしてみる

LEDを点灯させてみる

こんどはLEDをチカチカさせてみる

まとめ