Lesson 最初のプログラム

自分のプログラムからobnizを使う

オンラインhtmlエディタ

簡単なプログラムでobnizを動かしてみましょう。
obniz.jsを使うことでobnizをjavascriptから簡単につかうことができます。
obniz1台に1つずつ自由に使えるhtmlが用意されています。それを使って早速javascriptプログラムを書いてみましょう!

まずは下のボタンを押すとプログラム画面を開くことができます。

開くことでこのようなプログラム画面が出てきます。

次にあなたのobnizidが聞かれるので入力します(または、obnizに表示されているQRをスキャンしても同じページを開けます)
開いたページがあなたのobnizのために用意されているhtmlです。ここで編集して保存できます。
保存することで自動的にネット上に保存されて、そのページを開くことでjavascriptを実行することができます。
もちろん、パソコンやスマホを閉じて再度開いても同じプログラムを開くことができます。

早速書いてみましょう。

最初ですから部品を繋いだりしないで、単純にディスプレイを使ってみましょう。
下にあるのが今回のサンプルプログラムです。

このプログラムをあなたのobnizのプログラム画面にコピーします。プログラムの右上にある「Copy This」ボタンを押すとコピーできますよ。
の部分をあなたのobnizidに変えます。例えば "1234-5678"のような感じです。

<!-- 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.14.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("Hello World!")
};
</script>​
</body>
</html>

できましたか?

できたら保存して、保存したページを開くことで実行できます。
アドレスバーの右側にある「Save & Open」を押すことでhtmlをウェブ上に保存した上で、iFrameでhtmlを開くことができます。
ブラウザがそのhtmlの中にあるjavascriptを実行することでobnizがあなたのブラウザと連携して動く仕組みです。
そのボタンの左側にあるURLがあなたが編集しているhtmlのURLです。このurlを別のタブで開いたり別のスマホで開いたりすることもできます。

同じページ内にiFrameであなたの書いたhtmlを開くことができます。
ちゃんとobnizとつながれば緑色のバーが出て、obnizにはHello Worldの文字が出ると思います。
この画面は左上の「Close Html」ボタンで消せます。

画面の下にはconsoleがあります。例えば

obniz.onconnect = async function () {
  obniz.display.clear();
  obniz.display.print("Hello World!")
  console.log("hello: " + new Date())
};

このようにconsole.log()というので文字とその時間を出すようにすると画面の下に現れます。
これはブラウザのデバッグ機能であるコンソール画面にも出てくるものと同じです。

もしプログラムに間違いがあったりするとエラーもここに表示されます。

obniz.onconnect = async function () {
  obniz.display.clear();
  obniz.display.print("Hello World!")
  まちがい
};

このようなまちがったプログラムを書いてしまうと、同じくコンソールにエラーが出てきます。

エラーが出たら原因を探って直していきます。
もし、自分のプログラムが間違っていないのにいつまでもエラーが消えない場合はobniz.jsに問題がある可能性があります。
そういった場合はフォーラムから質問することができます。
問題があるときだけじゃなく、何かについて話し合いたい時にフォーラムは自由につかうことができます。

アカウント

もっとたくさんのプログラムを作って保存しておきたいときにはどうしたら良いでしょうか。

あなたのobnizにはライセンスがついています。アカウントを作ってライセンスを有効化することで決められた容量まで好きなだけプログラムを書いてネット上に保存して実行することができます。

アカウントの作成は 登録 から行えます。

更にobniz Eventといったトリガーを元に自動的にプログラムを実行する機能も利用することができますし、obnizに鍵を設定してアクセス制限することもできます。
詳しくは登録ページをご覧ください。

部品をつなぐ

ここまではobnizをプログラムからどう扱うかを紹介しました。
しかし部品を繋いでからが電子工作です。
次回からは早速部品をつないでプログラムから使ってみましょう。
沢山のレッスンを用意しています。まずはLEDをつけるの回から順番にやってみましょう。