ボタンを使おう: ボタンが押されたかどうかをブラウザで確認

前回までのレッスンでサーボモーターを使えるようになったので、今度はボタンのパーツを使ってみましょう。
前回はブラウザを使ってサーボモーターを動かしましたが、今回はボタンを使ってブラウザの表示を変更してみます。

接続

まずはボタンをobnizに接続します。写真のようなパーツがボタンです。押されたことを検知することができます。

Starter Kitガイドのパーツページでは、キットの各パーツが紹介されています。左の部品名から詳細ページにいくこともできます。
どれが何のパーツかわからなくなったときや、各パーツについて詳しく知りたくなったときなどに参考にしてみてください。

ボタンもサーボモーターと同じように3つのピンがあり、それぞれがS(signal), V(vcc), G(gnd)になっています。
今回は以下のように接続します。

プログラム

では、ボタンが押されたことをブラウザで確認できるようにしてみましょう。
Starter Kitカテゴリには2種類のボタンのブロックがあります。これらを使ってプログラムを作ります。

まずはサーボモーターのときと同様に、ボタンをobnizに接続するブロックを並べます。

ここから、ボタンが押されたらコンソールに文字が表示されるようなプログラムを作りたいと思います。

「もしボタンが押されたら文字を表示する」のように、「もし〜なら〇〇する」といったプログラムを作るには、もしもブロックを使います。
「論理」カテゴリの中にある「もしも実行」ブロックを選んでください。
参考：もしもブロック

もしもブロックの条件の部分（trueになっているひし形のところ）に、Starter Kitのボタンが押されているブロックを入れます。
（ブロックを持っている指やマウスが入れたい場所に入るように持っていくと入れやすいです）

コンソールに文字を表示するには、前回のレッスンでも使ったデバッグブロックを使いましょう。
デバッグブロックはUIカテゴリの中にあります。textにボタンが押されたら表示したい文字を入れます。

このままだとボタンが押されたかどうかの判定はプログラムが起動された直後の一度だけで、それ以降は判定されないので、ボタンを押しても何も起こらなくなってしまいます。何度も判定されるように、ループブロックの中に入れます。

あとはこれらを並べれば完成です。

実行してみましょう。ボタンを押したときにコンソールに文字が表示されれば成功です！

発展：ボタンを押してブラウザ上のイラストを動かす

ボタンが押されたときに起こることを、単に文字が表示されるだけではなく、もう少し動きのあるものにしてみましょう。
UIカテゴリの中でまだ使っていない、UIイメージを使ってみます。

作るプログラムは、ボタンが押されたときにブラウザ上に表示されているイラストが右に動く、というものです。
作れる方は、答えを見る前にぜひ自分でプログラムを作ってみてください。

UIイメージは他のUIブロックと基本的な使い方は同じで、「imageを作る」ブロックで画面にイラストを表示することができます。
デフォルトで「バナナ」になっているところで、イラストを選ぶことができます。好きなイラストでいいですが、動くものとして例では「犬」を選びました。

あとは、ボタンが押されたときに「imageを右に10px動かす」を実行します。

ボタンを押した分だけ、イラストが右へ動いていきましたか？
PCに繋いでいるわけではないボタンを使って、ネット経由でブラウザを操作できるのは楽しいですね。

次のレッスンでは、距離センサーを使ってみます！