チュートリアル

アプリの実装

JINS MEME SDK for Monacaは、以下の手順で実装します。

  1. アプリID、アプリSecretの設定
  2. 近くにあるJINS MEMEデバイスをスキャン
  3. アプリとJINS MEMEデバイスの接続(ペアリング)
  4. 計測の開始

ここでは、まばたきと体の傾きを可視化するサンプルアプリを題材として、JINS MEME SDK for Monacaによるアプリ開発方法を紹介します。

アプリの完成イメージは以下のようになります。

  • まばたき未検出時

まばたき未検出時

  • まばたき検出時

まばたき検出時

  • 体の傾き

体の傾き

  • 画面構成

画面はOnsen UIを利用して実装しています。

<body>
  <ons-page>
    <!-- ツールバー -->
    <ons-toolbar>
      <div class="center">JINS MEME</div>
    </ons-toolbar>
    
    <!-- タブバー -->
    <ons-tabbar position="auto" id="tabbar">
      <ons-tab label="Eye" page="tab1.html" icon="eye" active>
      </ons-tab>
      <ons-tab label="Body" page="tab2.html" icon="male">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <!-- Eyeタブ -->
  <ons-template id="tab1.html">
    <ons-page id="first-page">
      <div style="text-align: center;">
        <p>まばたきを検出します。</p>
        <ons-icon id="icon-eye" icon="eye" size="200px"></ons-icon>
      </div>
    </ons-page>
  </ons-template>

  <!-- Bodyタブ -->
  <ons-template id="tab2.html">
    <ons-page id="second-page">
      <div style="text-align: center;">
        <p>体の傾きを検出します。</p>
        <ons-icon id="icon-body" icon="male" size="200px"></ons-icon>
      </div>
    </ons-page>
  </ons-template>
  
  <!-- デバイス選択ダイアログ -->
  <ons-dialog id="selectDeviceDialog">
    <ons-list id="deviceList">    
    </ons-list>
  </ons-dialog>
  
  <!-- モーダルウィンドウ -->
  <ons-modal id="modal">
    <p>接続中...</p>
    <ons-icon icon="spinner" size="28px" spin></ons-icon>
  </ons-modal> 
</body>

1. アプリID、アプリSecretの設定

まずはアプリの起動時に発生するdevicereadyイベント内で、アプリIDとアプリSecretを設定します。

// 起動時のイベント
document.addEventListener('deviceready', function() {
    // アプリの初期化処理
    cordova.plugins.JinsMemePlugin.setAppClientID(
        'アプリID',
        'アプリSecret',
        function() {
            // デバイスのスキャンを実行
            stopScan(startScan);
        },
        function() {
            console.log('Error: setAppClientID');
        }
    );
});

cordova.plugins.JinsMemePlugin.setAppClientID() は、アプリIDとアプリSecretを元にアプリの認証を行います。 第三引数には認証完了後に実行する処理、第四引数には認証失敗時に実行する処理を指定します。

2. 近くにあるJINS MEMEデバイスをスキャン

アプリの認証に成功したら、 cordova.plugins.JinsMemePlugin.startScan() でスキャンを開始します。 第一引数にデバイスが見つかった時の処理、第二引数にスキャンに失敗したときの処理を指定します。

ただし、スキャンを既に実行している場合は、一度スキャンの停止処理を行ってからスキャンを再開しないとエラーが発生します。 そこで、まず cordova.plugins.JinsMemePlugin.stopScan() を実行してからスキャンを開始しています。

// デバイスのスキャン停止
function stopScan(successCallback) {
    cordova.plugins.JinsMemePlugin.stopScan(function() {
        if(successCallback) successCallback();
    }, function() {
        console.log('Error: stopScan');
    });
}

// デバイスのスキャン開始
function startScan() {
    // デバイス選択ダイアログを表示
    var deviceList = document.getElementById('deviceList');
    deviceList.innerHTML = '<ons-list-header>デバイスを選択</ons-list-header>';
    document.getElementById('selectDeviceDialog').show();
    
    cordova.plugins.JinsMemePlugin.startScan(function(device) {
        // ダイアログにデバイスを追加(タップされたらペアリング実行)
        deviceList.innerHTML += `<ons-list-item tappable onclick="connect('${device}')">${device}</ons-list-item>`;
    }, function() {
        console.log('Error: startScan');
    });
}

今回はOnsen UIで以下のようなデバイス選択ダイアログをあらかじめ用意しておき、検出されたデバイス情報を動的にダイアログ内に追加しています。

<!-- デバイス選択ダイアログ -->
<ons-dialog id="selectDeviceDialog">
  <ons-list id="deviceList">
  </ons-list>
</ons-dialog>

JINS MEME側は、フレームにある電源ボタンを2秒ほど長押しして接続待ちの状態にします。 電源ボタンの上のLEDが青く点滅していれば接続待ちになっています。

デバイスが検出されると、以下のようにデバイス選択ダイアログが表示されます。

デバイスの選択

3. アプリとJINS MEMEデバイスの接続(ペアリング)

デバイス選択ダイアログの中からデバイスが選択されたら、cordova.plugins.JinsMemePlugin.connect() でデバイスとの接続を実行します。 第一引数に接続完了時の処理、第二引数に将来デバイスが切断されたときの処理(デバイスの電源が切れた場合やアプリとデバイスの距離が遠く離れた場合など)、第三引数に接続失敗時の処理を指定します。

// アプリとデバイスの接続
function connect(device) {
    // スキャン停止
    stopScan();
    // ダイアログを閉じる
    document.getElementById('selectDeviceDialog').hide();
            
    // 選択されたデバイスに接続
    cordova.plugins.JinsMemePlugin.connect(device, function() {
        // 計測開始
        startDataReport();
    }, function() {
        console.log('Disconnect');
    }, function() {
        console.log('Error: connect');
    });
}

4. 計測の開始

デバイスとの接続が完了したら、cordova.plugins.JinsMemePlugin.startDataReport() で計測を開始します。 第一引数には計測データを取得したタイミングで実行される処理を指定します。この処理は計測が停止されるまでの間、定期的(数十ミリ秒間隔)に実行されます。 第二引数には、計測の開始に失敗したときの処理を指定します。

// 計測開始
function startDataReport() {
    cordova.plugins.JinsMemePlugin.startDataReport(draw, function() {
        console.log('Error: startDataReport');
    });
}

// 計測結果を描画する
function draw(data) {
    var tabIndex = document.getElementById('tabbar').getActiveTabIndex();
    if (tabIndex === 0) {
        // まばたきされたらアイコンを変更する
        if(data.blinkSpeed > 0 || data.blinkStrength > 0) {
            document.getElementById('icon-eye').setAttribute('icon', 'eye-slash');
        } else {
            document.getElementById('icon-eye').setAttribute('icon', 'eye');
        }
    } else if(tabIndex === 1) {
        // 姿勢角Rollに合わせてアイコンを傾ける
        var deg = data.roll * -1;
        document.getElementById('icon-body').style['transform'] = `rotate(${deg}deg)`;
    }
}

体の傾きは、アイコン画像をアニメーションつきで傾けて表現しています。 以下のようにCSSを指定して実現しています。

#icon-body {
    transition-property: transform;
    transition-duration: 0.1s;
}

アプリの動作検証

アプリの動作検証をするには、Monacaデバッガーを利用するか、アプリをビルドして端末にインストールします。

開発中はMonacaデバッガーの利用を推奨します。ただしApp Store / Google Play版のMonacaデバッガーにはJINS MEME SDK for Monacaが含まれていないため、JINS MEME連携アプリの動作検証ができません。

アプリ開発を始める前に、JINS MEME SDK for Monacaを含むカスタムビルド版のMonacaデバッガーを作成して下さい。

カスタムビルド版Monacaデバッガーの作成方法は以下のドキュメントを参考にして下さい。

Android版

iOS版