MESH と連携しよう

obniz が MESH と連携できると、センサー部分が有線接続で物理的な縛りが少なくなり、無線で仕組みが作れるようになるのはメリットです。有線では仕込めなかったような、人のポケットに入れたり、高い天井に置いたり、狭い場所や隠れたところに仕込んだりすることができアイデアの幅が広がります。

つなぎ方の解説

私のほうで、自前の MESH ボタンをつないでみた記事があるので、これを元に一連の流れを解説します。

MESH ボタンを 1.2.5 にアップデートして obniz とつなぐメモ
- https://www.1ft-seabass.jp/memo/2022/12/06/mesh-version-up-meets-obniz-first-contact/

動きブロックでデモしてみます

MESH 動きブロックと obniz を連携してみましょう。

最近購入した MESH であればバージョンが 1.2.5 になっているので、すぐ使えるはずです。

このようにスイッチを押して起動します。LED が暗いところからフワッと明るく点灯すると電源オンです。

電源オンの具体的な LED の光り方や電池残量の確認法など、こまかな MESH の挙動は https://www.youtube.com/watch?v=G2e2s5kKBC0&list=PLQM9GimvERzs2NZBCkvk33cn4ccKAeEI7&index=6 こちらの動画を参考にしましょう。

MESH のパーツライブラリは https://obniz.com/ja/sdk/parts?q=MESH にあり、MESH 動きブロックは https://obniz.com/ja/sdk/parts/MESH_100AC/README.md にドキュメントがあります。

先ほどの記事でも触れましたが MESH のサンプルは、全部のコードが載っているわけではないので、サンプルコードを持って来て obniz クラウド用に書き加えます。

こちらを以前の内容は、すべて選択して消してから、エディタの内容を上書きします。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.24.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>MESH Move</h1>

    <script>

      // 今回の obniz を指示するための設定
      const obniz = new Obniz("OBNIZ_ID_HERE");

      // 接続後、MESH と接続
      obniz.onconnect = async function () {
        obniz.display.clear();
        obniz.display.print("[MESH Move]");

        const MESH_100AC = Obniz.getPartsClass('MESH_100AC');

        // BLE の初期化待ちコードを加えます
        await obniz.ble.initWait();

        obniz.ble.scan.onfind = async (peripheral) => {

          if (!MESH_100AC.isMESHblock(peripheral)) {
              return;
          }
          console.log('found');

          // Create an instance
          const moveBlock = new MESH_100AC(peripheral);

          // Connect to the Move block
          await moveBlock.connectWait();
          console.log(`connected: ${moveBlock.peripheral.localName}`);

          // Tap Event
          moveBlock.onTapped = (accele) => {
              console.log('tapped! (ax, ay, az) = (' + accele.x + ', ' + accele.y + ',' + accele.z + ')');
          };

          // Shake Event
          moveBlock.onShaked = (accele) => {
              console.log('shaked! (ax, ay, az) = (' + accele.x + ', ' + accele.y + ',' + accele.z + ')');
          };

          // Flip Event
          moveBlock.onFlipped = (accele) => {
              console.log('flipped! (ax, ay, az) = (' + accele.x + ', ' + accele.y + ',' + accele.z + ')');
          };

          // Orientation Event
          moveBlock.onOrientationChanged = (orientation, accele) => {
              console.log('orientation changed! ' + orientation + ', (ax, ay, az) = (' + accele.x + ', ' + accele.y + ',' + accele.z + ')');
          };
        };

        // スキャンの開始待ちのコードを加えます
        await obniz.ble.scan.startWait();
      }

    </script>
  </body>

こちらを実行してみると

found と出て MESH が見つかってしばらく待つと接続されます。

shaked は振られた時、tapped はトンっと叩かれた時、orientation changed は面が変わった時、flipped はひっくり返したときです。

こういった動きは、各 MESH タグでスマホアプリからつないだ設定項目で分かります。また、obniz ドキュメントからたどれる MESH の技術仕様書もおすすめです。

たとえば、動きブロックの仕様書はこのようになります。 → https://developer.meshprj.com/hc/ja/articles/8286418941977-%E5%8B%95%E3%81%8D%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF-MESH-100AC-

複数の MESH があるときに特定の MESH につなげるには

ハッカソンの現場では複数の MESH が飛び交って、いまのコードだと違う動き MESH につながってしまう可能性があります。そういうときは found 後の connected 接続時の peripheral.localName の値で if 文で区別すると良いです。

          // Connect to the Move block
          await moveBlock.connectWait();
          console.log(`connected: ${moveBlock.peripheral.localName}`);

さきほどの、コードだとここです。moveBlock の部分は、各ブロックのサンプルで変わりますので確認してみましょう。

動きブロックの場合 MESH-100AC というブロックの名称に MESH 本体に書いてある SN というシリアルナンバーが付与したものになります。他のブロックでも、そのブロックの名称＋シリアルナンバーで区別できます。わざわざ一度つながなくても、事前に推測できます。

この写真のように、そのブロックの型番は 2 行目と SN は 4 行目に本体に書かれています。

動きブロックを振ると LINE Notify を通知してみる

動きブロックを振ると LINE Notify を通知してみましょう。

以前の内容は、すべて選択して消してから、エディタの内容をこちらで上書きします。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.24.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>MESH Move</h1>

    <script>

      // 今回の obniz を指示するための設定
      const obniz = new Obniz("OBNIZ_ID_HERE");
      // 今回使う IFTTT Webhook の自分のキー
      const IFTTT_WEBHOOK_YOUR_KEY = 'IFTTT_WEBHOOK_YOUR_KEY';
      // 今回使う IFTTT Webhook の Event Name
      const IFTTT_WEBHOOK_EVENT_NAME = 'line_notify';

      // 接続後、MESH と接続
      obniz.onconnect = async function () {
        obniz.display.clear();
        obniz.display.print("[MESH Move]");

        const MESH_100AC = Obniz.getPartsClass('MESH_100AC');

        // BLE の初期化待ちコードを加えます
        await obniz.ble.initWait();

        obniz.ble.scan.onfind = async (peripheral) => {

          if (!MESH_100AC.isMESHblock(peripheral)) {
              return;
          }
          console.log('found');
          obniz.display.print('found');

          // Create an instance
          const moveBlock = new MESH_100AC(peripheral);

          // Connect to the Move block
          await moveBlock.connectWait();
          console.log(`connected: ${moveBlock.peripheral.localName}`);
          obniz.display.print('connected');

          // 振った時だけ LINE Notify に通知
          moveBlock.onShaked = (accele) => {
              console.log('shaked! (ax, ay, az) = (' + accele.x + ', ' + accele.y + ',' + accele.z + ')');
              // ディスプレイに表示
              obniz.display.clear();
              obniz.display.print('onShaked');
              // 通知
              sendIFTTT('MESH 動きタグが振られました！');
          };
        };

        // スキャンの開始待ちのコードを加えます
        await obniz.ble.scan.startWait();
      }

      async function sendIFTTT(message) {
        // IFTTT Webhook に fetch 関数で送る ////////////////////////////

        // メッセージ内容を URLSearchParams で作る
        // 実際のメッセージは message 値
        const params = new URLSearchParams({
            value1: message
        });
        // 送る文字列に変換
        const paramsString = params.toString();
        // 設定
        const config = {
            method: 'GET',
            mode: 'no-cors',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };
        // IFTTT Webhook の URL をつくる
        const IFTTT_WEBHOOK_URL = `https://maker.ifttt.com/trigger/${IFTTT_WEBHOOK_EVENT_NAME}/with/key/${IFTTT_WEBHOOK_YOUR_KEY}?${paramsString}`;
        console.log("IFTTT_WEBHOOK_URL");
        console.log(IFTTT_WEBHOOK_URL);
        // 送信
        await fetch(IFTTT_WEBHOOK_URL, config);

        console.log("OK")

      }

    </script>
  </body>

コピーアンドペーストできたら、

      // 今回使う IFTTT Webhook の自分のキー
      const IFTTT_WEBHOOK_YOUR_KEY = 'IFTTT_WEBHOOK_YOUR_KEY';

の 'IFTTT_WEBHOOK_YOUR_KEY' シングルクオーテーションの中を IFTTT Webhook のキーに変更します。

こちらを実行してみて、ディスプレイが found と connected が出たら MESH と接続できています。

振ってみると LINE Notify にメッセージが送られます。

余裕があれば、人感センサブロックでデモしてみます

人感センサブロックも動かしてみます。

人感センサのドキュメントは https://obniz.com/ja/sdk/parts/MESH_100MD/README.md です。ALWAY モードのサンプルは、すごくチェック頻度が高いので、通常の getSensorDataWait のセンサー取得を使って obniz.onloop で定期実行します。

以前の内容は、すべて選択して消してから、エディタの内容をこちらで上書きします。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.24.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>MESH Move</h1>

    <script>

      // 今回の obniz を指示するための設定
      const obniz = new Obniz("OBNIZ_ID_HERE");

      // 接続後、MESH と接続
      obniz.onconnect = async function () {
        obniz.display.clear();
        obniz.display.print("[MESH Motion]");

        const MESH_100MD = Obniz.getPartsClass('MESH_100MD');

        // BLE の初期化待ちコードを加えます
        await obniz.ble.initWait();

        // サンプルコード
        obniz.ble.scan.onfind = async (peripheral) => {
          if (!MESH_100MD.isMESHblock(peripheral)) {
              return;
          }
          console.log('found');
          obniz.display.print('found');

          // Create an instance
          const motionBlock = new MESH_100MD(peripheral);

          // Connect to the Motion block
          await motionBlock.connectWait();
          console.log(`connected: ${motionBlock.peripheral.localName}`);
          obniz.display.print('connected');

          obniz.onloop = async () => {
            // Get sensor data
            const motionState = await motionBlock.getSensorDataWait();
            switch (motionState) {
                case MESH_100MD.MotionState.DETECTED: {
                  // 認識した時だけ
                    console.log('人感センサが認識しました！');
                    break;
                }
                case MESH_100MD.MotionState.NOT_DETECTED: {
                    // console.log('Not Detected.');
                    break;
                }
                default: {
                    console.log('Starting up...');
                    break;
                }
            }
            // 1秒待って定期実行
            await obniz.wait(1000);
          }

        };

        // スキャンの開始待ちのコードを加えます
        await obniz.ble.scan.startWait();
      }

    </script>
  </body>

コピーアンドペーストできたら、MESH を起動してからこちらを実行してみます。

ディスプレイが found と connected が出たら MESH と接続できています。

センサ部分に手をかざしてみましょう。

コンソールで「人感センサが認識しました！」とログが出てきます。

Uncaught ObnizBleHciStateError: Connection Failed to be Established / Synchronization Timeout

これが出たら、一度 obniz 実行を止めてつなぎなおすとうまくいきます。

Uncaught MESHJsBlockVersionError: Please UPDATE the block software to version 1.2.5 or higher. (Current block software version is 1.1.5 .)

このようなエラーが出てきたら、MESH のバージョンアップが必要です。こちらの記事を参考にアップデートしましょう。

IFTTT と MESH アプリの連携もいけます

実は IFTTT と MESH アプリの連携もできます。

IFTTTを使ってWEBサービスと連携しよう
- https://www.get.meshprj.com/iftttapplet

IFTTTアプレットの使いかた
- https://support.meshprj.com/hc/ja/articles/115003497128

おもしろいですよね。ただ、MESH アプリが直感的とはいえアプリの使い方を学ぶ必要があるのと、スマートフォンでアプリを起動し続ける運用をします。ちょっと MESH とアプリの接続で苦労することもあるかもしれず、使いこなすには若干の慣れが必要があります。

MESH と連携しよう

MESH と連携しよう

つなぎ方の解説

動きブロックでデモしてみます

複数の MESH があるときに特定の MESH につなげるには

動きブロックを振ると LINE Notify を通知してみる

余裕があれば、人感センサブロックでデモしてみます

Uncaught ObnizBleHciStateError: Connection Failed to be Established / Synchronization Timeout

Uncaught MESHJsBlockVersionError: Please UPDATE the block software to version 1.2.5 or higher. (Current block software version is 1.1.5 .)

IFTTT と MESH アプリの連携もいけます

results matching ""

No results matching ""