今回はプログラムの画面の中にボタンを表示して、ボタンとobnizを連携させてみましょう！
「ボタンが押したらobnizの画面に文字が出る」なんて楽しそうですね。
UIボタン
UIボタンとは、ブロックプログラムを動かしているブラウザ上に出せるボタンのことです。
この下の写真にある「ボタン」と書かれたものがそうです。
ブロックプログラムでこのようにボタンを出したり、ボタンが押された時に何をするかというプログラムができます。
今回はボタンが押されたらobnizの画面に文字を出してみます。
ボタンを作る
まずは、ボタンを表示する必要があります。
ボタンは左側の「UI」の中にあります。
「button を "text"で作る」 というものです。
これをobnizがつながってすぐのところに入れてみます。
text の部分は自分で文字を入れることができます。
今回は「ボタン」にします。
これを実行するだけでobnizとつながったあとに画面上にボタンが出てきます。
もしもブロック
次に、ボタンが押されたのを知って、押されたらobnizのディスプレイに文字を出してみます。
どうやるかというと、早速前のレッスンでやった「ループ」と、あたらしい「もしも」を使います。
「もしも」は「論理」の中にあるブロックです。
「もしも」もループと同じようにブロックの中にブロックを入れられます。
ただし、中に入れたブロックが実行されるのは もしも の条件がOKだったときだけです。
もしも の右側に true と書いてある部分があります。ここに条件を入れることができます。
ちなみに、条件は必ずひし形をしています。
これをobnizがつながったあとに入れてボタンを追加する部分を中に入れてみましょう。
この状態で実行してもちゃんとボタンが出ると思います。
「もしも」にある true というのは「正しい」という意味ですが、これが実行される条件となります。
つまり、trueだったからその中に入れたボタンを作るブロックが実行されてボタンが表示されたのです。
ちょっと変えてみましょう。trueのところを選んでfalseに切り替えてみます。
falseにして実行するとボタンは表示されなくなります。
falseは「正しくない」ということです。これでは、「もしも」の中のブロックが実行されないので、ボタンが表示されません。
表示されないまま次の「ずっと実行」に入ってしまい、二度と実行されないのでボタンがでなかったということです。
繰り返しを使う
ボタンが押されたらobnizの画面に文字を書くにはどうしたらいいでしょう。
繰り返し、ボタンが押されているかを「もしも」でチェックしなければいけません。そして、押されていたらobnizの画面に文字を描画するように、してみましょう。
まず、先ほどの「もしも」をはずして、ボタンは必ず作るようにします。
そしてずっと実行の中のコンソールに表示はもういらないので消してしまいます。
ずっと実行の中に「もしも」を入れます。そして、「obniz」の中にある「ディスプレイを消す」と、「Hello Worldを表示する」ブロックを「もしも」ブロックの中に新しく入れます。
あとは「もしも」をボタンが押されたときにすれば完璧です。
ボタンが入っていた「UI」の中に「buttonがクリックされた」というひし形のブロックがあります。
これを「もしも」のtrueやfalseのあるひし形の部分にはめます。
ひし形やだ円のブロックをうまく入れるには、ブロックを持っている指やマウスが入れたい場所に入っているとうまくいきます。
うまくはまれば、このようなブロックになります。これで完成です！
実行してobnizにつながると画面にボタンが出ると思います。
そして、obnizのディスプレイには何やら数字などが表示されていると思います。
画面上のボタンを押してみましょう。ボタンを押すことでobnizのディスプレイに「Hello World」と表示されるはずです。
IoTっぽいプログラムが完成しました。あなたのobnizはインターネット経由であなたのスマホ/PCから遠隔操作されています！