This website is available for multi language.

最初のプログラム

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

オンラインHTMLエディタ

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

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

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

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

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

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

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

部品をつなぐ

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



Next : LEDをつける

最短で翌日に届きます

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

製品紹介

フォーラム

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

フォーラム

お問い合わせ

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

お問い合わせフォーム