ボタンを検知 - obniz Docs

皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！
前回のレッスンではブラウザに出したボタンからサーボモーターを回してみました．
このレッスンでは，今度はパーツの中から「物理的に押せるボタン」を使って，ボタンが押されたかをブラウザで確認してみましょう．

ボタンについての勉強

Starter Kitに付属されているボタンは，ドキュメントのページがあります．
(この一個上の階層のパーツを接続するというページには，Starter Kitの各パーツについて解説しているページがあるので，興味のある人は見てみて下さい．)

さて，このページを見てみると

onchange = function(pressed){}
ボタンが押された時、離された時にcallback関数を呼び出します。

という関数があります．
これを使ってプログラムを書いてみましょう．

パーツを接続する

接続は以下のようにします．

obnizのピン番号	サーボモーターの線
0	signal
1	vcc
2	gnd

実はこのピンの接続，下に示すobniz.wiredの{signal:0, vcc:1, gnd:2}に対応しているんです．

var button = obniz.wired("Keyestudio_Button", {signal:0, vcc:1, gnd:2});

つまり，別の部分にボタンのパーツを接続したければ対応するピンの番号を変えれば良いことになります！

プログラムを書く

接続ができたらプログラムです．
1. サーボを動かす: 単純にサーボモーターを回してみようでもやりましたが，基本的なobnizを動かすプログラム部分にボタン用のライブラリを追加するだけです．
余裕のある人は自分で出来るだけ書いて実行してみてから，上手くいかないところを下のプログラムと比較してみましょう．

<!-- HTML Example -->
<html>

<head>
 <!-- 各種環境設定を読み込み -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
 <script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>

<body>
 <script> //ここからJavaScript
  var obniz = new Obniz("OBNIZ_ID_HERE"); //自分のobnizのIDを指定
  obniz.onconnect = async function () { //obnizが繋がったら...
   var button = obniz.wired("Keyestudio_Button", {signal:0, vcc:1, gnd:2}); //ボタンのライブラリを指定
   button.onchange = function(pressed){
    console.log("pressed:" + pressed)
   };
  };
 </script>
</body>

</html>

これでコンソールログ(Show console logsの部分です)を開けば，ボタンを押した時に以下のような文字が現れます．

今回のレッスンは究極的にはこれだけです！
少し物足りませんか？
それは良いことです，なぜならあなたがobnizのHTML/JavaScriptのプログラミングに慣れてきたということですから！(前回が大変なレッスンだったのもあるかもしれませんね)
では次のセクションでは今度はボタンを押した時にもう少し動きを追加するようにしてみましょう！

ボタンが押された時のアクションをもっと派手にしてみよう

まずは実行画面に文字を出そう

さて，先ほどのプログラムでもボタンを押したことがブラウザで確認できたと思います．
でもコンソール画面だけに表示されても地味だなぁ...
ということでボタンを押された時のアクションを追加してみましょう．
まずは，実行画面に押したことが表示されると分かりやすいですね．
ということで実行画面にテキストを追加して，ボタンが押されたら文字が変わるようにしてみましょう．

新しく増えた所にコメントがあるので，そこを重点的に読んでみて下さい．

<!-- HTML Example -->
<html>

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
 <script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>

<body>

  <div id="press">  <!-- 文章を追加 + idを振る-->
    ボタンが押された？
  </div>

 <script> //ここからJavaScript
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
   var button = obniz.wired("Keyestudio_Button", {signal:0, vcc:1, gnd:2});
   button.onchange = function(pressed){
    console.log("pressed " + pressed)
    if(pressed == false){ //ボタンが押されたら...
      $("#press").text("押された！"); //id："press"の文字を書き換える
    };
   };
  };
 </script>

</body>

</html>

ボタンを押された時背景の色をランダムに変更してみる

ボタンを押した時の挙動はif文の中に書いてあるので，そこに背景色を変更するJavaScriptを書いてみましょう．

   button.onchange = function(pressed){
    console.log("pressed " + pressed)
    if(pressed == false){
      $("#press").text("押された！");
      colors=new Array(10);
      colors[0]="yellow";
      colors[1]="red";
      colors[2]="blue";
      colors[3]="green";
      colors[4]="lime";
      colors[5]="brown";
      colors[6]="gray";
      colors[7]="orange";
      colors[8]="purple";
      colors[9]="fuchsia";
      index=Math.floor(10*Math.random());
      document.bgColor=colors[index];
    }else{
      $("#press").text("押されてない...");
      document.bgColor="white";
    }
   };

出来ましたか？

キーボードとは違って，PCに繋いでいないボタンからネット経由でブラウザの中の背景を変えることが出来るのはかなり面白いんじゃないでしょうか？

今回のレッスンは以上です！
次のレッスンでは，距離センサを使って障害物との距離を数字で確認してみましょう！