スライダーでサーボを動かす: ブラウザに出したスライダーでサーボモーターを右へ左へ回してみよう

前回のレッスンでサーボモーターを動かすことができるようになったので、今度はブラウザを使ってサーボモーターを動かしてみましょう。
ブラウザ上のスライダーを動かすことで、サーボモーターの角度を自由に変えられるようにします。

ブラウザとは

ブラウザとは、Webサイトを閲覧するときに使うアプリケーションのことです。
皆さんはブラウザの画面上で、このレッスン記事を見たり、ブロックプログラムをしたりしています。

ブロックプログラムエディタでは、実行ボタンを押すと以下のような画面が表示されると思います。

ブラウザ上にスライダーを表示させるというのは、この画面上にスライダーを表示させるという意味になります。

今回は以下のような画面を作り、サーボモーターを操作できるようにしてみましょう！

UIブロック

ブロックプログラムには、ブラウザ上にいろいろなものを表示させることのできるUIブロックというものがあります。

まずは「UI」カテゴリを開いて見てみましょう。

UIボタン(UIButton), UIラベル(UILabel), UIスライダー(UISlider), UIイメージ(UIImage), デバッグ(Debug)の5種類が用意されています。
それぞれブラウザには以下のように表示されます（水色の文字は説明のためのコメントです）。

この中のUIスライダーとUIラベルを使って、操作画面を作っていきます（レッスンの途中ではデバッグも使ってみます）。
UIボタンを使ってみたい人は、ブロックプログラム入門の「UIボタンと連携させよう」を読んでみてください。

UIスライダー

まずはUIスライダーを使ってみましょう。

UISliderとDebugからブロックを持ってきて、以下のようなプログラムを作ってみてください。
「"text"をコンソールに表示する」の"text"のところに、UISliderの「sliderの値」ブロックを入れています。
（ブロックを持っている指やマウスが入れたい場所に入るように持っていくと入れやすいです）

実行してみましょう。

画面上にスライダーが表示され、コンソールに数字が出てきました。スライダーを左右に動かしてみると、コンソールログの数字が変化していくと思います。
（コンソールが表示されていない人は「Show console logs」を押すと見れるようになります）

コンソールというのはコンピューターとコミュニケーションできる場所で、プログラムに何か問題があったりエラーが起こったりしたときは、コンソールにメッセージが表示されます。
デバッグブロックでは、このコンソールに好きなテキストを表示させることができます。

スライダーを一番左から一番右まで動かすと、数字が0から100まで変化していくことがわかります。
このスライダーの値がサーボモーターの角度になるようにプログラムすれば、サーボモーターを0度から100度の間で自由に操作できるようになりそうです。やってみましょう！

注意
サーボモーターに指定できる角度は範囲が決まっており、Starter Kitのサーボモーターは0度から180度までです（ブロックで直接入力できる数字も0〜180になっています）。
範囲外の角度に指定してしまうと、サーボモーターが壊れてしまう可能性があります。
今回はスライダーの値が0〜100なことを確認しましたが、今後自分でプログラムを書く場合や、別のサーボモーターを使う場合などは、範囲外にならないように気をつけてください。

プログラム

コンソールに表示させていたスライダーの値を、サーボモーターの角度指定に使います。
前回のレッスンで作った、サーボモーターの角度を90度にするプログラムを思い出しながら、作ってみてください。

プログラムができたら、実行してみましょう。スライダーに対応してサーボモーターが回転すれば成功です。

しかし、この状態だとサーボモーターの角度が何度なのかわかりません。
せっかくなので、UIラベルを使って角度を画面に表示させることにも挑戦してみましょう。

UIラベルは好きなテキストを画面に表示させることができます。
「labelを作る」ブロックでテキストを書くためのスペースを用意し、「labelで〜を表示する」ブロックで入力したテキストを表示させます。

最終的なプログラムは以下のようになります。

実行してみましょう。スライダーでサーボモーターが操作でき、角度も表示されていれば大成功です！

ラベルの表示がスライダーの上に来てしまった人は、「sliderを作る」ブロックと「labelを作る」ブロックの順番を逆にしてみましょう。
ブロックプログラムは上から順番に実行されるので、上にあるブロックがブラウザの画面でも上に来ます。

これでサーボモーターのレッスンは終了です。次回はボタンのパーツを使ってみましょう！