Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 47 Ad
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

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

Recently uploaded (20)

Advertisement

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/

×