obnizは、HTMLとJavaScriptを使って操作できます。
HTMLとは
HTMLはただの文章
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ブラウザに表示するページを作るための最も基本的なマークアップ言語です。
例えば、以下のように記述すると、ブラウザ画面にHelloと表示されます。
<!-- HTML Example -->
<html>
<body>
Hello
</body>
</html>
コードを見ると<html>で始まり、</html>で終わっていますが、これは「ここからここまでがHTMLだよ」という意味です。
HTMLではこのように<>で挟んだものが１つの塊となります。
ブラウザはこのHTMLを見て「あ、ここからここまではHTMLなんだね。じゃあ表示しましょう」となるわけです。
この上の例が文字を表示するのに最小の構成となっています。
実際にブラウザに何かを表示するのはHTMLの中の<body>、</body>で囲まれた中になります。
ここに書いたものがそのまま画面に出ます。
文字の修飾
HTMLにはいろいろな修飾記号があります。例えば<strong>、</strong>で囲った文字は太文字になります。
<!-- HTML Example -->
<html>
<body>
<strong>Hello</strong>
</body>
</html>
または囲い記号にさらに指示を書いてより細かくデザインすることもできます。たとえばこのようにすれば太いだけでなく赤い文字となります。
<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
</body>
</html>
テキストの他に画像を表示することもできます。
画像の表には<img>を使います。
例えばhttps://obniz.com/images/obnizfront.jpg という画像を表示するには、
<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
<img src="https://obniz.com/images/obnizfront.jpg">
</body>
</html>
これで表示できます。</img>と閉じていませんが、このように閉じなくてもいいものもあります。
あなたが見ているWebページはすべてこのHTMLによってできています。文字の色や太さや位置、画像の位置やサイズなど……。
これらを組み合わせれば自由にデザイン可能です。
JavaScript
さらに、HTMLの中には文字の他にプログラムも組み込むことができます。それがJavaScript(ジャバスクリプト)という言語です。
HTMLの中で<script>と囲った部分の中にプログラムを書くことができます。
<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
<script>
console.log("This is JavaScript");
</script>
</body>
</html>
このようにすると、Helloは画面に出てきますが、console.log("This is JavaScript");は出てきません。
これは、scriptの中のものはプログラムだと思われているからです。
なので、ここに書くものはただの文章ではなく実行されるプログラムです。
上から１行ずつ実行されます。
じゃあこのJavaScriptで何をするかというと……まず、HTMLを操作することができます。
先ほどのHelloをJavaScriptから書き換えてみましょう。
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong>Hello</strong>
<script>
$("strong").text("Whats up")
</script>
</body>
</html>
画面にはWhats up と表示されると思います。しかしよく見てください。書いてあるのはHelloです！
プログラムを見てみましょう。
JavaScriptで$("strong").text("Whats up")というプログラムが書いてあります。
これは、「strongで囲まれているものの文章を Whats up に書き替えなさい」というプログラムです。
なので、Helloと表示するように書いてあったのですが、JavaScriptによって、それがWhats upに書き換えられたのです。
まったくもって無駄なプログラムです。これなら最初からHelloじゃなくてWhats up と書いておけばよかったのです。
しかしこれは例で、このようにHTMLの中にあるJavaScriptはHTMLの中のものを上書きしたり、読み取ったりなどいろいろなことができます。
JavaScriptからインターネットにも接続できるので、インターネットからニュースを持ってきてHTMLの中に表示したりなんてこともできます。
その場合は無駄ではなくなりますよね。
ここからがJavaScriptの本気です。
先ほどはJavaScriptから勝手に文字を書き換えましたが、逆にHTMLから合図を出してJavaScriptを動かすこともできます。
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong id="here">Please Touch this text</strong>
<script>
$("#here").on("click", function(){
$("#here").text("Touched!")
})
</script>
</body>
</html>
さて、画面には「Please Touch this text」と表示されていると思います。
この文字をマウスならクリックで、スマホなら指で触ってみましょう。
文字が「Touched!」になると思います。
このプログラムでは文字が触ったときだけに先ほどと同じような文字の書き換えをしています。
このようにJavaScriptからHTMLだけでなくHTMLからJavaScriptを動かすこともできるわけです。
よく見ると<strong id="here">というのがあります。
HTMLではidというのを使ってカッコ１つ１つに名前をつけることができます。
そしてJavaScriptでも$("#here")という書き方をしていますが、これは「hereというidを持つもの」という意味です。
これによりid=hereがクリックされたら、id=hereの文字を書き換える というプログラムができているわけです。
strongは太文字を表すものですから、ページ内に他にも太文字があるときに全部が反応して困ってしまいます。
なので、このようにidを使う事がよくあります。
外部JavaScriptの取り込み
ちなみに、先ほどのプログラムではHTMLの中にこのようなものが追加されていました。
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
これは、jQueryというJavaScriptのプログラムで、別の場所で公開されているものです。
ためしにhttps://code.jquery.com/jquery-3.3.1.jsをクリックしたらとても長いJavaScriptのプログラムがでてきます。
このように<script>というタグを書くことで、まるでここにそのJavaScriptが書いてあるかのようにそれを取り込んで実行することができます。
いろいろな人が書いてくれたJavaScriptのライブラリが世の中にはたくさんあります。それらをこうやって取り込むだけですぐに使うことができるのがHTMLの魅力です。
obniz.js
obnizと接続して使うためのJavaScriptプログラムであるobniz.jsももちろん公開さています。
LEDをつけるレッスンなどでもすでに使用しています。
https://unpkg.com/obniz@3.3.0/obniz.js
これがobniz.jsです、これを取り込むことでobnizが利用できます。
obniz.jsを使うと番号を指定するだけで簡単にobnizにインターネット経由で接続できます。OBNIZ_ID_HEREのところにつなぎたいobnizのidを書き込むと
onconnect で設定した関数が呼ばれます。
「関数」や「変数」などがわからない方は「JavaScript 入門」などで検索してみて下さい。わかりやすいWebサイトがたくさん出てきますよ！
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
// connected!
}
試しに、obnizと繋がったタイミングで文字を書き換えるプログラムを作ってみましょう。
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@4.0.0/obniz.js"></script>
</head>
<body>
<strong id="here">Not online</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
$("#here").text("Online")
}
</script>
</body>
</html>
このようにすると、指定した番号のobnizと接続ができたところでid=hereの文字をOnlineに書き換えることができます。
すでに画面上の文字を触ったら何かをするというプログラムは勉強しています。
なので、画面の文字を触ったらLEDをつける、なんてプログラムも簡単にできそうですよね。
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>
<strong id="here">Touch to turn on LED</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
var led = obniz.wired("LED", {anode:0, cathode:1});
$("#here").on("click", function(){
led.on();
});
}
</script>
</body>
</html>
これで「Touch to turn on LED」を触るとobnizのio0とio1に繋いだLEDが点灯します。
LEDではなく温度センサーを繋げば温度を画面に表示したり、グラフを表示するようなJavaScriptライブラリを取り込んでグラフにしたり…なんてことはとても簡単にできそうな気がしませんか？
obnizでのプログラミングがわかってきたら、ぜひ挑戦してみてください！