obnizでプログラム

自分のプログラムからobnizをうごかす。

オンラインHTMLエディタ

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

あなたのコンピューターでHTMLファイルを作ってもいいですが、obnizではオンラインエディタを用意しています。

プログラム画面は開発者コンソールの中にあります。ナビゲーション右上の「開発者コンソール」を開くと入ることができます。

その中で左側の「プログラム」またはプログラムを始めるにある「プログラム」からHTMLエディタを開くことができます。

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

早速書いてみましょう。

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

このプログラムをあなたのobnizのプログラム画面にコピー&ペーストします。
OBNIZ_ID_HEREの部分をあなたのobniz idに変えます。例えば "1234-5678"のような感じです。

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.3.0/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>

できましたか？

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

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

画面の下にはShow 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 Eventといったトリガーを元に自動的にプログラムを実行する機能も利用することができますし、obnizに鍵を設定してアクセス制限することもできます。
詳しくはクラウドドキュメントページをご覧ください。

部品をつなぐ

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

オンラインHTMLエディタ

アカウント

部品をつなぐ

タイトル