クイックスタート

obnizの購入

obnizはこちらの公式オンラインショップから購入できます。

また、それ以外にもオンラインストア一覧にあるWebサイトまたは店舗より購入可能です。

obnizをWifiに接続

obnizが届いたらまずはWifiにつなぎます。

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

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

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

動かしてみよう

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

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

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

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

<!-- HTML Example -->
<html>
<head>
  <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.0/obniz.js"></script>
</head>
<body>

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

<input type="text" id="text" value="Hello World"></input>
<button id="showtime">Print on obniz</button>
<h3 id="state">Switch: unknown</h3>

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

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

  obniz.switch.onchange = function(state) {
    $("#state").text("Swtich: " + state);
  }
};
</script>
</body>
</html>

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

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

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

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

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

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

自分のプログラムを書く

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