This website is available for multi language.

クイックスタート

このクイックスタートでは obniz Board をHTMLから利用する方法を紹介しています。

obniz Boardの購入

obniz Board はこちらの製品一覧からストアを選んで購入できます。

obniz BoardをWi-Fiに接続

obniz Boardが届いたらまずはWi-Fiにつなぎます。

Wi-FiはDHCPのある2Ghz帯のWi-Fiに接続できます。

また、obniz BoardのMacアドレスが必要な場合は、obniz Boardのスイッチを押しながらobniz Boardの電源を入れたときに表示されるメニューから「DisplayInfo」を選ぶことで確認できます。

  1. 箱から出したら、マイクロUSBをobniz Boardにつないで電源を入れます。(電源を切る時はUSBを抜くだけでOKです)
  2. 電源が入るとスイッチの場所を教えるアニメーションがでます。obniz Boardの左上のスイッチを押すことで進み、近くのWi-Fiリストが出てきます。その中からスイッチを左右に倒すことでWi-Fiを選び、スイッチを押すことで選択します。
  3. 接続のためにWi-Fiのパスワードを1文字ずつ入力しましょう。スイッチを左右に動かし、押すことで決定します。入力が終わったら「END」を選びます。
  4. QRコードが表示されたら完了です!インターネットに繋がりobniz Boardはオンラインになりました。

体験版ライセンスの有効化

obniz Board with Hobby License 90-Day Trial の方は、体験版ライセンスを有効化しましょう。

まずはアカウントを作成し、次にアカウントにobniz Boardを登録することで体験がスタートします。

アカウント作成はこちら

登録方法はこちら

obnizをobnizクラウド経由でSDKから操作

オンラインとなったobniz Boardは各言語のSDKから簡単に遠隔操作できます。
JavaScriptの場合はobniz.jsというSDKが Github にあり、HTMLの場合はscriptタグで、nodejsの場合はnpmにてインストール可能です。

また、ドキュメントはobnizのサイト内でも閲覧できて便利です/doc/sdk/README。IOの操作やUARTなどペリフェラルの操作も載っています。
サポートへ行けば製作例やFAQなども見ることができます。

ここからはこのサイトにあるオンラインのHTMLエディタを使ったHTMLとJavaScriptを組み合わせたプログラムを扱っていきます。

動かしてみよう

簡単なプログラムからobnizを使ってみましょう。

このサイトにでてくるプログラムの多くにはその上にobniz id(obniz Boardに表示されている8桁の数字)を入れる欄と実行ボタン("Test Run"や"Test Open"と書いてあるボタン)があります。
このすぐ下にあるサンプルプログラムにもあります。
そこに自分のobniz idを入れてボタンを押すことでそのプログラムをこの場所ですぐに実行することができます。

あなたのobniz Boardはオンラインになっていますか?(つまり、QRが表示されていますか?)。
それなら、このサイトからあなたのobniz Boardにつないでプログラムを動かせるのか早速試してみましょう!

まずはこの下のプログラムで早速動かしてみましょう。

<!-- 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@2.4.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>

  <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>- io0: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>

obniz idをいれて実行すると、ブラウザとobniz Boardがつながります。
接続に成功すると、緑のバーが表示されます。この状態でobniz Boardに対して自由に操作できるようになります。

このプログラムでは入力された文字をobniz Boardのディスプレイにそのまま表示するようになってます。
Hello Worldとなっている部分に好きな文字を入力して(日本語でもOK)横にある「Print on obniz」ボタンを押して下さい。すると、obniz Boardに入力した文字が表示されるはずです!

逆にobniz Boardのついているスイッチの状態が画面に表示されます。
obniz Boardの左上にあるパスワード入力で利用したスイッチを動かしてみましょう。
"Swtich"のところに今スイッチが押されているのかどうなのかがリアルタイムで表示されると思います。

プログラムは画面を閉じることで終了します。

これだけ短いプログラムでインターネットと電子回路を簡単につなぐことができました。

HTMLに詳しい方ならたくさんのobnizでできることことが想像できるかもしれません。このサイトでなくても、パソコンならこのHTMLをファイルとしてパソコンに保存してそれをブラウザで開いても同じように動作します

自分のプログラムを書く

次から始まるレッスン 最初のプログラムに進んで自分のプログラムからobnizを使ってみましょう!



Next : 最初のプログラム

最短で翌日に届きます

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

製品紹介

フォーラム

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

フォーラム

お問い合わせ

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

お問い合わせフォーム