obnizをブラウザ上のボタンで操作する

obniz
2023.11.22
にほんブログ村 その他趣味ブログへ
にほんブログ村 その他趣味ブログ 電子工作へ
にほんブログ村 科学ブログへ
にほんブログ村 科学ブログ 科学実験・工作へ

obnizをブラウザ上のボタンで操作する

今回は、ブラウザ上のボタンからobnizを操作する方法について解説します。

JavaScriptのイベント

ブラウザ上に配置されたbutton要素などでobnizを操作するには、JavaScriptのイベントハンドラを利用します。

記述法

まず、JavaScriptのイベント処理の記述について簡単にまとめておきましょう。イベント処理には何通りかの記述法があります。

html要素（開始タグ）の属性として記述する

html開始タグ内に、イベントに対応する属性値としてイベント処理内容を記述することができます。

<タグ イベント属性 = "イベント処理内容">～</タグ>

たとえば『ボタンをクリックしたら alert が表示される』であれば、

HTML
<button onClick="alert('test');">doit</button>

のように記述します。onClick がクリックに対応するイベント属性です。

手軽で直感的に理解しやすい反面、文書とプログラムが分離できない、html 要素で発生するイベントに付いてしか記述できないという欠点があります。

DOM要素のイベントプロパティに記述する

DOM要素のイベントプロパティにイベント処理内容を設定します。

DOM要素.イベントプロパティ = イベント処理内容

イベント処理内容には無名関数、アロー関数や、別に定義した関数名などを記述できます。

前の例と同様、『ボタンをクリックしたら alert が表示される』であれば、

HTML
<script>
document.geteElementById("bthDoIt").onclick = function(){ alert("test"); };
</script>
<button id="btnDoIt">doit</button>

のように記述します。この例では、getElementById() メソッドでボタンのDOM要素を取得し、クリックイベントに対応するプロパティ onclick に無名関数としてイベント処理内容を『代入』しています。

DOM要素にイベントリスナを登録する

addEventLister() メソッドを使用して、DOM要素にイベントリスナを登録します。

DOM要素.addEventListener("イベント名", イベントハンドラ);

addEventListener() メソッドの第1引数はイベント名を表す文字列、第2引数がイベントリスナ（イベントハンドラ）となるコールバック関数です。コールバック関数には無名関数や、別に定義した関数名を記述できます。

前の例と同様、『ボタンをクリックしたら alert が表示される』であれば、

JavaScript
<script>
document.getElementById("btnDoIt").addEventListener("click", function(){ alert("test"); });
</script>
<button id="btnDoIt">doIt</button>

となります。2つ目の記法と同様、getElementById() メソッドでボタンのDOM要素を取得し、addEventListener() メソッドでイベントリスナを登録しています。“click” はマウスボタンのクリックに対応するイベント名です。

プログラム

今回はDOM要素のイベントプロパティにイベントハンドラを記述する方法をとります。

ソースコード

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("push button");
        document.getElementById("btclear").onclick = function(){
          obniz.display.clear();
        };
        document.getElementById("btprint").onclick = function(){
          obniz.display.print("Hello");
        };
      };
    </script>
  </head>
  <body>
    <h1>button event test</h1>
    <button id="btprint">PRINT</button>
    <button id="btclear">CLEAR</button>
  </body>
</html>

プログラムの解説

obniz.jsを読み込む

JavaScriptでobnizのプログラムを作成する場合、まず obniz.js を読み込みます。

HTML
<script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>

script 要素の src属性を使って、外部ファイル https://unpkg.com/obniz@3.26.0/obniz.js を読み込んでいます。この中には obniz を制御するためのクラス・メソッド等が定義されています。

script要素
JavaScript
    <script>
      const obniz = new Obniz("1234-5678");
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("push button");
        document.getElementById("btclear").onclick = function(){
          obniz.display.clear();
        };
        document.getElementById("btprint").onclick = function(){
          obniz.display.print("Hello");
        };
      };
    </script>

html ドキュメント中に JavaScript のプログラムを記述する場合、JavaScript のコードは html の script 要素の中に記述します。 script 要素は、上の例では head 要素の中に記述していますが、body 要素の中に記述してもかまいません。

Obniz クラスのインスタンスを生成
JavaScript
const obniz = new Obniz("1234-5678");

Obniz クラス（Oは大文字です）は先に読み込んだ obniz.js 内で定義されています。このクラスには、obniz デバイスを制御するためのすべての機能が実装されています。

obniz デバイスをプログラムから制御するためには、Obniz クラスのコンストラクタに obniz IDやシリアル番号を与えて生成したインスタンスが必要です。上のコードの “1234-5678” の部分が obniz ID です。自分が使用する obniz デバイスの obniz ID に書き換えてご利用下さい。

プログラムからの obnizデバイスに対する制御・データの送受信は、すべてこのobnizインスタンスのメソッド呼び出しやプロパティへのアクセスとして行います。

インスタンスが生成されると、自動的に obniz デバイスに対する接続が試みられます。接続が完了するまではプログラムはデバイスの情報を持っていないため、obniz インスタンスに対する操作はできません。

デバイスへの接続時の処理を定義する onconnect
JavaScript
obniz.onconnect = async function() {
    obniz.display.clear();
    obniz.display.print("push button");
    document.getElementById("btclear").onclick = function(){
      obniz.display.clear();
    };
    document.getElementById("btprint").onclick = function(){
      obniz.display.print("Hello");
    };
};

Obniz.onconnect （以下、斜体のObniz.はObnizクラスのインスタンスを表します）は、 obniz デバイスとの接続が成功したときに呼び出される処理を指定します。ここでは定番の記述方法として、無名関数 function(){ … } を代入する型式を用いています。接続が成功すると、代入された関数の内容が実行されます。obniz デバイスとプログラムが接続しないうちは obniz インスタンスに対して操作を行うことができないため、Obniz.onconnect を利用して接続完了を待ってから処理を行うようにするのです。

LCDのクリアと文字表示
JavaScript
    obniz.display.clear();
    obniz.display.print("push button");

Obniz.display.clear() メソッドでobnizデバイスのLCDをクリアし、Obniz.display.print() メソッドでLCDに “push button” と表示しています。今回の実験の目的であるイベントとは直接関係ありませんが、デバイスが正常に接続されてプログラムから制御できていることの確認のために簡単なメッセージを表示しています。

イベントハンドラの設定
JavaScript
    document.getElementById("btclear").onclick = function(){
      obniz.display.clear();
    };

この部分が今回の記事のテーマ、イベントハンドラの設定です。document.getElementById(“btclear”) でボタン（id=”btclear”）のオブジェクトを取得し、onclick プロパティ（クリックに対応するイベントプロパティ）に無名関数 function(){ … } を代入することでクリック時の動作 obniz.display.clear(); を設定しています。

つまり、ボタンをクリックするとobnizデバイスのLCDをクリアします。

JavaScript
    document.getElementById("btprint").onclick = function(){
      obniz.display.print("Hello");
    };

こちらも同じです。ボタン（id=”btprint”）をクリックするとobnizデバイスのLCDに”Hello”と表示します。

イベント対象要素の定義
JavaScript
  <body>
    <h1>button event test</h1>
    <button id="btprint">PRINT</button>
    <button id="btclear">CLEAR</button>
  </body>

button要素2つ、それぞれ id=”btprint” と id=”btclear” としています。スクリプト内のdocument.getElementById()で参照しています。

実行

ブラウザ上のボタンをクリックすると、obnizデバイスのLCDの表示内容が変化します。

プログラムの書き換え

プログラムにはいろいろな書き方があります。同じ動作をするプログラムの書き換え例を紹介します。

addEventListener()を使用する

HTML
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("push button");
        document.getElementById("btclear").addEventListener("click", function(){
          obniz.display.clear();
        });
        document.getElementById("btprint").addEventListener("click", function(){
          obniz.display.print("Hello");
        });
      };
    </script>
  </head>
  <body>
    <h1>button event test</h1>
    <button id="btprint">PRINT</button>
    <button id="btclear">CLEAR</button>
  </body>
</html>

DOM要素のonclickプロパティに代入するのではなく、addEventListener() メソッドを使用してイベントハンドラを定義した例です。

jqueryを使用する

HTML
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("push button");
        $("#btclear").click(function(){
          obniz.display.clear();
        });
        $("#btprint").click(function(){
          obniz.display.print("Hello");
        });
      };
    </script>
  </head>
  <body>
    <h1>button event test</h1>
    <button id="btprint">PRINT</button>
    <button id="btclear">CLEAR</button>
  </body>
</html>

jqueryを使用すると、

document.getElementById(“id“) の代わりに $(“#id“)
addEventListener(“click”, function()～) の代わりに click(function()～)

などと短い表現で記述できるので、スクリプト全体がすっきりします。

まとめ

  • ブラウザ上の操作によってobnizを動作させるには、イベントハンドラを使用する
  • イベントハンドラ自体はobniz独自のものではなく、元々のJavaScriptの機能である

コメント

タイトルとURLをコピーしました