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

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

本日の内容

1. JINS MEME DEVELOPERS登録

2. Monacaへのサインアップ

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

4. アプリの動作確認

5. アプリのビルド

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

今回作成するアプリ

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

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

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

JINS MEME DEVELOPERS 登録

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

JINS MEME DEVELOPERS 登録

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

https://developers.jins.com/

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

アプリ登録

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

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

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

アプリ情報確認

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

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

Monacaへのサインアップ

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

Monacaのアカウント登録

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

http://ja.monaca.io/

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

アカウント情報入力

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

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

アカウント仮登録完了

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

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

アカウントの本登録

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

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

IDEを起動する

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

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

IDEの起動

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

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

開発の流れ

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

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

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

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

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

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

アイコンはこちらです。

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

Monacaデバッガーの起動

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

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

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

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

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

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

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

Monacaデバッガーのメニュー

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

アプリの作成

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

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

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

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

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

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

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

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

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

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

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

JINS MEME SDKの利用準備

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

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

JINS MEME SDKの実装方法

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

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

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

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

4. 計測の開始

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

API一覧（抜粋）

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

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

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

index.html 30, 31行目を編集

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

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

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

restartScan();},function() {

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

);});

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

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

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

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

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

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

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

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

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

スキャンの開始

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

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

では引数device）

cordova.plugins.JinsMemePlugin.startScan(

function(device) {

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

}, function() {

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

}

);

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

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

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

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

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

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

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

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

アプリとデバイスの接続

cordova.plugins.JinsMemePlugin.connect(

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

function() {

// 接続成功時の処理

}, function() {

// 切断時の処理

}, function() {

// 接続失敗時の処理

}

);

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

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

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

４. 計測の開始

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

計測データの取得

計測データの取得

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

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

例では引数data）

cordova.plugins.JinsMemePlugin.startDataReport(

function(data) {

// 計測成功時の処理

}, function() {

// 計測失敗時の処理

}

);

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

計測データ一覧

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

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)`;

}

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

アプリの動作検証

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

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

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

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

【Android】デバッガーの作成

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

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

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

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

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

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

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

【iOS】デバッガーの作成

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

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

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

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

アプリのビルド

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

アプリ設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://ja.monaca.io/