サンプルプログラムを動かしてみよう

まずは簡単なプログラムでobnizを動かしてみましょう。

1. プログラム

http://obniz.io/ja/console/programからオンラインのHTMLエディタにいき、obniz idを入力します。下記のプログラムを丸ごとコピーし、自分のプログラム画面に貼り付けます。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css>">
    <script src="<https://obniz.io/js/jquery-3.2.1.min.js>"></script>
		<script src="<https://cdn.jsdelivr.net/gh/obniz/obniz@develop/obniz.js>" crossorigin="anonymous"></script>
  </head>
  <body>

    <div id="obniz-debug"></div>

    <div class="wrap px-5 py-4">

      <h3 class="title mb-4">Connect From Your Browser</h3>

      <h5>LED</h5>

      <div class="btnBox d-flex mb-4">

        <div class="green_btn d-flex flex-column">
          <button class="btn btn-success m-1" id="green_on">ON</button>
          <button class="btn btn-success m-1" id="green_off">OFF</button>
        </div>

        <div class="yellow_btn d-flex flex-column">
          <button class="btn btn-warning m-1" id="yellow_on">ON</button>
          <button class="btn btn-warning m-1" id="yellow_off">OFF</button>
        </div>

      </div>

      <h5>TEXT</h5>

      <div>
        <input type="text" class="p-2" id="text" value="Hello World">
        <button class="btn btn-primary" id="showtime">Print on obniz</button>
      </div>

    </div>

    <script>
      var obniz = new Obniz("OBNIZ_ID_HERE");

      obniz.onconnect = async function () {

        var light = obniz.wired("Keyestudio_TrafficLight", {gnd:0, green:1, yellow:2, red:3});

        $('#green_on').click(function () {
          light.green.on();
        });

        $('#green_off').click(function () {
          light.green.off();
        });

        $('#yellow_on').click(function () {
          light.yellow.on();
        });

        $('#yellow_off').click(function () {
          light.yellow.off();
        });

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

        $("#showtime").on("click", function(){
          obniz.display.clear();
          obniz.display.print($("#text").val());
        });
				
      }

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

2. obnizIDを入力

プログラムの中で

var obniz = new Obniz("OBNIZ_ID_HERE");

のOBNIZ_ID_HEREを自分のobnizのidにします。たとえば1234-5678なら以下のように入力します。

var obniz = new Obniz("1234-5678");

3. プログラムを実行

右上の[実行]ボタンを押すと、ブラウザとobniz Boardがつながります。
ブラウザ上の実行画面に下の画面が表示されれば成功です。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/be045608-cbdc-4725-9e24-218564c260dc/handson1.png

うごかす -LEDのON / OFF-

ブラウザに表示された、ボタンを押すことで、LEDのON/OFFを切り替えることができます。

緑色のボタンで緑色のLEDを、黄色のボタンで黄色のLEDを操作します。

写真のようにLED信号をobnizにつなぎ、ボタンを押して緑と黄色のLEDのON/OFFを切り替えてみましょう。
GND, G, Y, Rがそれぞれ0, 1, 2, 3につながっています。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7be7d579-cb48-4579-886a-382c53763033/handson6.png

ディスプレイに文字を表示

好きな文字やメッセージを、Boardのディスプレイに表示させてみましょう。

Hello Worldとなっている部分を、好きな文字やメッセージに変更して[Print on obniz]ボタンを押してください。
obniz Boardに入力した文字がBoardのディスプレイに表示されます。文字は日本語でもOKです。

スマートフォンでも動かしてみよう

obnizはクラウド経由でプログラムを実行しているので、スマートフォンからも簡単に操作することができます。

エディタ画面に戻り、上部のファイルからQRコードを表示させ、スマートフォンでスキャンして動かしてみましょう。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6c6bf416-f222-4ebe-bd45-a5a93e43d9ca/handson2.png