This website is available for multi language.

動かしてみよう

ここからは、オンラインのHTMLエディタを使い、HTMLとJavaScriptを組み合わせたプログラムから利用する方法を紹介します。

obniz Boardの起動方法は → クイックスタートをご確認ください。

プログラムについて

ここで使うプログラムは下記の通りです。

[obniz id]にあなたの持っているobniz BoardのIDを入力して、[Test open]をクリックするとプログラムがすぐに実行されます。(obniz Boardは、起動させてWi-Fiにつながっている状態にしておきます。)

<!-- HTML Example -->

<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">
  <link rel="stylesheet" href="/css/starter-sample.css">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.2.0/obniz.js"></script>
</head>
<body>

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

<!--文字の表示-->
<div class="wrap">
  <div class="print">
    <h3 class="text-center">Print words on obniz</h3>
    <div>
      <input type="text" id="text" value="Hello World" placeholder="Input in freely">
      <button class="btn btn-primary" id="showtime">Print on obniz</button>
    </div>
  </div>

<!--ダイヤルスイッチの状態を表示-->
  <div class="switch">
    <h3 class="text-center"> Swtich </h3>
    <span id="print">undefined</span>
  </div>

<!--LEDのON/OFFボタン-->
  <div class="led">
    <h3 class="text-center">Turning on a LED</h3>
    <button class="btn btn-primary" id="on">LED ON</button>
    <button class="btn btn-outline-primary" id="off">LED OFF</button>
    <dl>
      <dt>Demo Pin assign</dt>
      <dd>- io0:LED anode</dd>
      <dd>- io1:LED cthode</dd>
      <dd>- Switch state will be printed on browser</dd>
    </dl>
  </div>

</div>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  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);
    };

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

    $('#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>

プログラムの実行/終了

obnizIDを入力して実行ボタンを押すと、ブラウザとobniz Boardがつながります。
ブラウザ上の実行画面には、接続に成功すると緑のバーが表示されます。同時にobniz Boardのディスプレイも実行中の表示に切り替わります。
プログラムは実行画面を閉じる([終了]をクリックする)ことで終了します。

動かしてみよう

obniz Boardに文字を表示させてみよう

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

ダイヤルスイッチの状態を知る

obniz Board本体の左肩にはダイヤルスイッチがあります。obniz Boardの最初の設定で使いましたね。
冒頭のプログラムを実行した状態で、ダイヤルスイッチを動かすと、右/左など、現在のスイッチの状態が、リアルタイムにBoardのディスプレイに表示されます。

LEDのON / OFF

もしLEDが手元にあれば、実行画面からLEDのON/OFFを操作できます。
0番ピンにアノード、1番ピンにカソードを挿してください。(抵抗入りのLEDであれば直接Boardに挿すことができます)
実行画面のボタンをクリックすると、LEDのON/OFFが切り替わります。

これだけ短いプログラムでインターネットと電子回路を簡単につなぐことができました。
次から始まるレッスン 最初のプログラムに進んで自分のプログラムからobnizを使ってみましょう!

obnizの仕組みをもっと詳しく知る

obnizクラウド経由でSDKから操作しています

オンラインとなったobniz Boardは各言語のSDKから操作できます。
JavaScriptの場合はobniz.jsというSDKを使って、obnizIDでobniz Boardとクラウドをつなぎます。
(obniz.jsは、Github にあります。)

HTMLの内で、obniz.jsを読み込むことでJavaScript SDKを利用できます。
obniz BoardのIOに繋がれた電子部品は、JavaScriptのオブジェクトとして操作ができます。

ドキュメントには、IOの操作やUARTなどペリフェラルの操作も載っています。
obniz.jsについてもっと詳しく知りたい時は、obniz.js: SDK for JavaScriptを参照してください。




Next : 最初のプログラム

最短で翌日に届きます

obniz BoardはAmazonや公式ストアから購入できます。最短で当日出荷いたします。
取り扱い店舗はこちらから。

製品紹介

フォーラム

obnizフォーラムでは、obnizユーザー同士で意見交換することができます。
疑問・質問もお気軽にどうぞ。

フォーラム

お問い合わせ

製品・サービスに関するお問い合わせや、導入・開発のご相談など、お気軽にお問い合わせください。

お問い合わせフォーム