jins meme developer hands-on (monaca / apache cordova編)

1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.

JINS MEME SDK for Monaca

でモバイルアプリを作ろう！

アシアル株式会社生形可奈子

本資料のURL

http://bit.ly/2kAIWPm


本日の内容

1. JINS MEME DEVELOPERS登録

2. Monacaへのサインアップ

3. サンプルアプリの作成

4. アプリの動作確認

5. アプリのビルド


今回作成するアプリ

まばたきを検出する機能と、体の傾き具合を可視化する機能を実装します。

JINS MEME SDK for Monacaの基本的な使い方を学ぶことができます。


JINS MEME DEVELOPERS 登録


JINS MEME DEVELOPERS 登録

以下のWebサイトで「新規会員登録」を行い、「アプリ作成」に進んで下さい。

https://developers.jins.com/


アプリ登録

各項目を入力して下さい。

※ Monacaでアプリ開発する場合、[プラットフォーム] は Android / iOS のどちらを選択しても構いません。


アプリ情報確認

「アプリID」と「アプリSecret」は後ほどソースコードに貼り付けますので、このページは開いたままにしておいて下さい。


Monacaへのサインアップ


Monacaのアカウント登録

ブラウザの新規タブでMonacaのWebサイトを開き、「サインアップ」をクリックして下さい。

http://ja.monaca.io/


アカウント情報入力

メール受信可能なアドレスとパスワードを登録して下さい。


アカウント仮登録完了

ダッシュボードという画面に遷移します。先程のメールアドレスに確認のメールが届きます。


アカウントの本登録

確認メールに記載されたURLにアクセスし、必要事項を入力することで登録完了です。


IDEを起動する

プロジェクトの「開く」ボタンをクリックすると、IDEが起動します。


IDEの起動

IDEの各部の役割は以下の通りです。


開発の流れ

コードエディタで編集し、保存する

コードエディタで編集したファイルを、プレビューとデバッガーで確認しながら開発を進めていきます。

簡単な確認はプレビューで実際の表示確認はデバッガーで


Monacaデバッガーのインストール

Google PlayまたはApp Storeにて「monaca」で検索し、アプリをスマートフォンにインストールして下さい。

アイコンはこちらです。


Monacaデバッガーの起動

Monacaデバッガーを起動すると、左のログイン画面が表示されます。

Monacaに登録したアカウントでログインを行ってください。


Monacaデバッガーでアプリを実行する

デバッガーを起動すると自動的にクラウドへ接続し、プロジェクトが一覧表示されます。

プロジェクトをタップするとアプリがシミュレートされます。


Monacaデバッガーのメニュー


アプリの作成


新しいプロジェクトを作成する

Monacaにログインし、ダッシュボードで「Import Project」ボタンを選択します。


新しいプロジェクトを作成する

1. 名前と説明（任意入力）を設定して新規プロジェクトを作成します

プロジェクト名：JINS MEMEアプリ

2. 「URLを指定してインポート」ラジオボタンにチェックを入れ、以下のURLを入力します。

URL：http://bit.ly/2lhtXyp

3. 「インポート」ボタンをクリックします。


JINS MEME SDKの利用準備

メニューバーの [設定] ＞ [外部サービス連携…] を選択し、『JINS MEME SDK for Monaca』の [詳細を見る] [インストール] の順にボタンをクリックします。


JINS MEME SDKの実装方法

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

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

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

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

4. 計測の開始


API一覧（抜粋）


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


index.html 30, 31行目を編集

// 起動時のイベントdocument.addEventListener('deviceready', function() {

// アプリの初期化処理cordova.plugins.JinsMemePlugin.setAppClientID(

'アプリID','アプリSecret',function() {

restartScan();},function() {

console.log('Error: setAppClientID');}

);});

先ほど作成したアプリIDとアプリSecretを貼り付けます


２.近くにあるデバイスのスキャン


近くにあるデバイスのスキャン

JINS MEMEの電源ボタンを2秒間長押しすると、アプリがデバイスを検知できる状態になります。（LEDが青く点滅します）

※ 前回起動時にデバイスとの接続を既に実行している場合は、スキャン前に計測の停止、デバイスとの切断、スキャンの停止を行っておかないとエラーになる場合があります。


近くにあるデバイスのスキャン

スキャンの開始

• 有効範囲内のデバイスを検知するたびに赤字のコールバック関数が実

行され、引数としてデバイスのアドレスを受け取ります。（上記の例

では引数device）

cordova.plugins.JinsMemePlugin.startScan(

function(device) {

// デバイスが見つかった時の処理

}, function() {

// スキャンの開始に失敗した時の処理

}

);


３. アプリとデバイスの接続（ペアリング）


アプリとデバイスの接続（ペアリング）

各デバイスに割り当てられたアドレスを指定して、アプリとデバイスを接続します。

※ デバイスの電源が切れたり、アプリとデバイスが物理的に遠く離れたりすると、接続は自動的に切断されます。


アプリとデバイスの接続（ペアリング）

アプリとデバイスの接続

cordova.plugins.JinsMemePlugin.connect(

"接続先デバイスのアドレス",

function() {

// 接続成功時の処理

}, function() {

// 切断時の処理

}, function() {

// 接続失敗時の処理

}

);

第一引数に接続するデバイスのアドレスを指定します。

第三引数には、デバイスが遠くに離れた等の理由で、接続が切れたときに実行するコールバック関数をあらかじめ登録します。


４. 計測の開始


計測データの取得

計測データの取得

• 計測成功時に実行されるコールバック関数は、数十ミリ秒間隔で定期

実行され、引数として取得した計測データを受け取ります。（上記の

例では引数data）

cordova.plugins.JinsMemePlugin.startDataReport(

function(data) {

// 計測成功時の処理

}, function() {

// 計測失敗時の処理

}

);


計測データ一覧


index.html 112行目以下に追記

var tabbar = document.getElementById("tabbar");var tabIndex = tabbar.getActiveTabIndex();if (tabIndex === 0) {

// まばたきされたらアイコンを変更するvar eye = document.getElementById("icon-eye");if(data.blinkSpeed > 0 || data.blinkStrength > 0) {

eye.setAttribute("icon", "eye-slash");} else {

eye.setAttribute("icon", "eye");}

} else if(tabIndex === 1) {// 姿勢角Rollに合わせてアイコンを傾けるvar body = document.getElementById("icon-body");var deg = data.roll * -1;body.style["transform"] = `rotate(${deg}deg)`;

}


アプリの動作検証


カスタム版デバッガーの作成

ストア版のMonacaデバッガーにはJINS MEME SDKが含まれていないため、JINS MEME SDKが含まれた状態のカスタム版Monacaデバッガーが必要となります。


【Android】デバッガーの作成

1. メニューバーの[ビルド][Androidアプリのビルド]を選択します。

2. [カスタムビルドデバッガー]を選択し、[ビルドを開始する] ボタンをクリックします。


スマートフォンにインストールする

1. ビルド成功画面のQRコードを、任意のQRコードリーダーアプリで読み取って下さい。

2. apkファイルのダウンロードが行われますので、ダウンロードしたファイルをタップしてインストールを開始して下さい。


【iOS】デバッガーの作成

iOSアプリのビルドには、有償のApple Developer Programへの参加と、証明書の発行が必要になります。

以下のドキュメントを参考に作業を行ってして下さい。

https://docs.monaca.io/ja/manual/build/ios/build_ios/


アプリのビルド


アプリ設定

アプリ設定画面で、アプリ名やパッケージ名、アイコン画像等を設定します。


【Android】リリース向け設定（1/3）

ビルド設定画面で、[リリース向けビルド][リリースビルド]の順に選択し、[キーストアとエイリアスを管理する]をクリックします。



[クリアして新規作成][OK]の順に選択し、任意のエイリアス名、エイリアスパスワード、KeyStoreパスワードを入力して下さい。



作成が完了したら[戻る]ボタンで前の画面に戻り、エイリアスのパスワードを入力してリリースビルドを開始して下さい。


スマートフォンにインストールする

QRコードから直接インストールできます。またダウンロードしたapkファイルはそのままストアに公開可能です。


https://ja.monaca.io/

https://ja.monaca.io/

jins meme developer hands-on (monaca / apache cordova編)

Engineering