クイックスタート

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@1.13.1/obniz.js"></script>
</head>
<body>

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

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

  var region = "Tokyo"
  $.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22"+region+"%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(data, status){
    var forecast = data.query.results.channel.item.forecast[0].text;
    var date = data.query.results.channel.item.forecast[0].date;

    console.log(region, forecast, date);

    obniz.display.clear();
    obniz.display.font('Avenir',14)
    obniz.display.print("Weather Forecast");
    obniz.display.print("[ "+region+" ]");
    obniz.display.print(date);
    obniz.display.print(forecast);
  })
};
</script>​
</body>
</html>

きちんと実行できれば、画面上でも緑のバーが出てオンラインになったことがわかると思います。
そして、成功すればobnizのディスプレイに東京の天気予報が出ると思います。
天気予報の取得には Yahoo天気API を利用しています。
こんな感じで、いとも簡単にインターネットとハードウェアを繋ぐことが出来ました。
晴れだったら太陽マークをモーターで動かして出しておくのも楽しそうですよね!

自分のプログラムを書く

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