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. Monacaへのサインアップ
2. JINS MEME DEVELOPERS登録
3. サンプルアプリの作成
4. アプリの動作確認
5. アプリのビルド

今回作成するアプリ
まばたきを検出する機能と、体の傾き具合を可視化する機能を実
装します。
JINS MEME SDK for Monacaの基本的な使い方を学ぶことがで
きます。

Monacaへのサインアップ

Monacaのアカウント登録
ブラウザの新規タブでMonacaのWebサイトを開き、「サインアッ
プ」をクリックして下さい。
http://ja.monaca.io/

アカウント情報入力
メール受信可能なメールアドレスとパスワードを登録して下さ
い。

アカウントの本登録
確認用のメールが送信されます。記載されたURLにアクセスす
ることで登録完了です。
しばらくするとダッシュボードという画面に遷移します。

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

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

開発の流れ
コードエディタ
で編集し、保存する
コードエディタで編集したファイルを、プレビューとデバッガー
で確認しながら開発を進めていきます。
簡単な確認はプレビューで
実際の表示確認はデバッガーで

Monacaデバッガーのインストール
Google PlayまたはApp Storeにて「monaca」で検索し、アプリ
をスマートフォンにインストールして下さい。
アイコンはこちらです。

Monacaデバッガーの起動
Monacaデバッガーを起動すると、左のロ
グイン画面が表示されます。
Monacaに登録したアカウントでログイン
を行ってください。

Monacaデバッガーでアプリを実行
する
デバッガーを起動すると自動的にクラウドへ接続し、プロジェク
トが一覧表示されます。
プロジェクトをタップするとアプリがシミュレートされます。

Monacaデバッガーのメニュー

JINS MEME DEVELOPERS 登録

JINS MEME DEVELOPERS 登録
以下のWebサイトで「新規会員登録」を行い、「アプリ作成」
に進んで下さい。
https://developers.jins.com/

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

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

アプリの作成

新しいプロジェクトを作成する
Monacaにログインした状態で、ブラウザのアドレスバーに以
下のURLを入力して開きます。
http://bit.ly/2rXEq1y
「インポート」ボタンをクリックすると
プロジェクトのインポートが完了します。

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）
• iOSの場合、デバイスのアドレスは暗号化されます。
cordova.plugins.JinsMemePlugin.startScan(
function(device) {
// デバイスが見つかった時の処理
}, function() {
// スキャンの開始に失敗した時の処理
}
);

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

アプリとデバイスの接続（ペアリング）
各デバイスに割り当てられたアドレスを指定して、アプリとデバ
イスを接続します。
※ デバイスの電源が切れたり、アプリとデバイスが物理的に遠く離れたりすると、
接続は自動的に切断されます。

アプリとデバイスの接続（ペアリング）
 アプリとデバイスの接続
cordova.plugins.JinsMemePlugin.connect(
"接続先デバイスのアドレス",
function() {
// 接続成功時の処理
}, function() {
// 切断時の処理
}, function() {
// 接続失敗時の処理
}
);
第一引数に接続するデバイスの
アドレスを指定します。
第三引数には、デバイスが遠くに離れた等
の理由で、接続が切れたときに実行する
コールバック関数をあらかじめ登録します。

４. 計測の開始

計測データの取得
 計測データの取得
• 計測成功時に実行されるコールバック関数は、数十ミリ秒間隔で定期
実行され、引数として取得した計測データを受け取ります。（上記の
例では引数data）
cordova.plugins.JinsMemePlugin.startDataReport(
function(data) {
// 計測成功時の処理
}, function() {
// 計測失敗時の処理
}
);

計測データ一覧

index.html 115行目以下に追記
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/monaca_ide/manual/build/ios/

アプリのビルド

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

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

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

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

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

https://ja.monaca.io/

JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)

Similar to JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編) (20)

More from アシアル株式会社

More from アシアル株式会社 (19)

JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)