Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,454 views

Published on

Monaca × JINS MEMEのハンズオンイベント資料です。

Published in: Engineering
  • Be the first to comment

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

  1. 1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. JINS MEME SDK for Monaca でモバイルアプリを作ろう! アシアル株式会社 生形 可奈子 本資料のURL http://bit.ly/2kAIWPm
  2. 2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 本日の内容 1. Monacaへのサインアップ 2. JINS MEME DEVELOPERS登録 3. サンプルアプリの作成 4. アプリの動作確認 5. アプリのビルド
  3. 3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 今回作成するアプリ まばたきを検出する機能と、体の傾き具合を可視化する機能を実 装します。 JINS MEME SDK for Monacaの基本的な使い方を学ぶことがで きます。
  4. 4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaへのサインアップ
  5. 5. 5URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaのアカウント登録 ブラウザの新規タブでMonacaのWebサイトを開き、「サインアッ プ」をクリックして下さい。 http://ja.monaca.io/
  6. 6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アカウント情報入力 メール受信可能なメールアドレスとパスワードを登録して下さ い。
  7. 7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アカウントの本登録 確認用のメールが送信されます。記載されたURLにアクセスす ることで登録完了です。 しばらくするとダッシュボードという画面に遷移します。
  8. 8. 8URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. IDEを起動する プロジェクトの「開く」ボタンをクリックすると、IDEが起動し ます。
  9. 9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. IDEの起動 IDEの各部の役割は以下の通りです。
  10. 10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 開発の流れ コードエディタ で編集し、保存する コードエディタで編集したファイルを、プレビューとデバッガー で確認しながら開発を進めていきます。 簡単な確認はプレビューで 実際の表示確認はデバッガーで
  11. 11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーのインストール Google PlayまたはApp Storeにて「monaca」で検索し、アプリ をスマートフォンにインストールして下さい。 アイコンはこちらです。
  12. 12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーの起動 Monacaデバッガーを起動すると、左のロ グイン画面が表示されます。 Monacaに登録したアカウントでログイン を行ってください。
  13. 13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーでアプリを実行 する デバッガーを起動すると自動的にクラウドへ接続し、プロジェク トが一覧表示されます。 プロジェクトをタップするとアプリがシミュレートされます。
  14. 14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーのメニュー
  15. 15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. JINS MEME DEVELOPERS 登録
  16. 16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. JINS MEME DEVELOPERS 登録 以下のWebサイトで「新規会員登録」を行い、「アプリ作成」 に進んで下さい。 https://developers.jins.com/
  17. 17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリ登録 各項目を入力して下さい。 ※ Monacaでアプリ開発する場合、 [プラットフォーム] は Android / iOS のどちらを選択しても構いま せん。
  18. 18. 18URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリ情報確認 「アプリID」と「アプリSecret」は後ほどソースコードに貼り 付けますので、このページは開いたままにしておいて下さい。
  19. 19. 19URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリの作成
  20. 20. 20URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 新しいプロジェクトを作成する Monacaにログインした状態で、ブラウザのアドレスバーに以 下のURLを入力して開きます。 http://bit.ly/2rXEq1y 「インポート」ボタンをクリックすると プロジェクトのインポートが完了します。
  21. 21. 21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. JINS MEME SDKの利用準備 メニューバーの [設定] > [外部サービス連携…] を選択し、 『JINS MEME SDK for Monaca』の [詳細を見る] [インストー ル] の順にボタンをクリックします。
  22. 22. 22URL : 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. 計測の開始
  23. 23. 23URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. API一覧(抜粋)
  24. 24. 24URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 1. アプリID、アプリSecretの設定
  25. 25. 25URL : 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を貼り付けます
  26. 26. 26URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 2.近くにあるデバイスのスキャン
  27. 27. 27URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 近くにあるデバイスのスキャン JINS MEMEの電源ボタンを2秒間長押しすると、アプリがデバイ スを検知できる状態になります。(LEDが青く点滅します) ※ 前回起動時にデバイスとの接続を既に実行している場合は、スキャン前に計測 の停止、デバイスとの切断、スキャンの停止を行っておかないとエラーになる 場合があります。
  28. 28. 28URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 近くにあるデバイスのスキャン  スキャンの開始 • 有効範囲内のデバイスを検知するたびに赤字のコールバック関数が実 行され、引数としてデバイスのアドレスを受け取ります。(上記の例 では引数device) • iOSの場合、デバイスのアドレスは暗号化されます。 cordova.plugins.JinsMemePlugin.startScan( function(device) { // デバイスが見つかった時の処理 }, function() { // スキャンの開始に失敗した時の処理 } );
  29. 29. 29URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 3. アプリとデバイスの接続(ペアリング)
  30. 30. 30URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリとデバイスの接続(ペアリング) 各デバイスに割り当てられたアドレスを指定して、アプリとデバ イスを接続します。 ※ デバイスの電源が切れたり、アプリとデバイスが物理的に遠く離れたりすると、 接続は自動的に切断されます。
  31. 31. 31URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリとデバイスの接続(ペアリング)  アプリとデバイスの接続 cordova.plugins.JinsMemePlugin.connect( "接続先デバイスのアドレス", function() { // 接続成功時の処理 }, function() { // 切断時の処理 }, function() { // 接続失敗時の処理 } ); 第一引数に接続するデバイスの アドレスを指定します。 第三引数には、デバイスが遠くに離れた等 の理由で、接続が切れたときに実行する コールバック関数をあらかじめ登録します。
  32. 32. 32URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 4. 計測の開始
  33. 33. 33URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 計測データの取得  計測データの取得 • 計測成功時に実行されるコールバック関数は、数十ミリ秒間隔で定期 実行され、引数として取得した計測データを受け取ります。(上記の 例では引数data) cordova.plugins.JinsMemePlugin.startDataReport( function(data) { // 計測成功時の処理 }, function() { // 計測失敗時の処理 } );
  34. 34. 34URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 計測データ一覧
  35. 35. 35URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 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)"; }
  36. 36. 36URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリの動作検証
  37. 37. 37URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. カスタム版デバッガーの作成 ストア版のMonacaデバッガーにはJINS MEME SDKが含まれて いないため、JINS MEME SDKが含まれた状態のカスタム版 Monacaデバッガーが必要となります。
  38. 38. 38URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】デバッガーの作成 1. メニューバーの[ビルド][Androidアプリのビルド]を選択します。 2. [カスタムビルドデバッガー]を選択し、[ビルドを開始する] ボタンをクリックします。
  39. 39. 39URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. スマートフォンにインストールする 1. ビルド成功画面のQRコードを、任意のQRコードリーダーア プリで読み取って下さい。 2. apkファイルのダウンロードが行われますので、ダウンロード したファイルをタップしてインストールを開始して下さい。
  40. 40. 40URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【iOS】デバッガーの作成 iOSアプリのビルドには、有償のApple Developer Programへの 参加と、証明書の発行が必要になります。 以下のドキュメントを参考に作業を行ってして下さい。 https://docs.monaca.io/ja/monaca_ide/manual/build/ios/
  41. 41. 41URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリのビルド
  42. 42. 42URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリ設定 アプリ設定画面で、アプリ名やパッケージ名、アイコン画像等を 設定します。
  43. 43. 43URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (1/3) ビルド設定画面で、[リリース向けビルド][リリースビルド]の順に 選択し、[キーストアとエイリアスを管理する]をクリックします。
  44. 44. 44URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (2/3) [クリアして新規作成][OK]の順に選択し、任意のエイリアス名、 エイリアスパスワード、KeyStoreパスワードを入力して下さい。
  45. 45. 45URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (3/3) 作成が完了したら[戻る]ボタンで前の画面に戻り、エイリアスの パスワードを入力してリリースビルドを開始して下さい。
  46. 46. 46URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. スマートフォンにインストールする QRコードから直接インストールできます。またダウンロードした apkファイルはそのままストアに公開可能です。
  47. 47. 47URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. https://ja.monaca.io/

×