Comments
Description
Transcript
こちら
【ハンズオン①】 デバイスコネクトWebAPIによる M100向けWeb開発の実現 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 1 1. デバイスコネクトWebAPIとは WebAPIにより、スマートフォンアプリやWebブラウザからの様々な ウェアラブル・IoT機器利用を実現するフレームワーク スマートフォン/タブレット(Android、iOS) 対応機器 デバイスコネクト プラグイン スマホ アプリ Web アプリ W e b A P I S社スマートウォッチ スマートウォッチ スマートグラス Pebble AndroidWear Androidホスト 健康機器 無線LAN搭載カメラ ヘルスケア S社Wifiカメラ ・ ・ ・ スマートフォン上で動作する 擬似的なWebAPIにより、OSに 依存しない共通動作を実現 ホームコントロール スマートトイ HDMIドングル 個々のデバイスの開発環境・ 通信プロトコルの差異を吸収 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 2 1.1 従来のコンテンツの実現方法 ・ネイティブアプリ ・・・OS、開発環境に依存 ・ハイブリッドアプリ ・・・制限が少ないが、機能は組み込むWebviewフレームワークに依存し、開発言語も限られる ・ブラウザ(HTML5) ・・・機能がブラウザでできる事に限られる インターネット上のWebサイト Webアプリ Webアプリ (HTML5+Javascript) Webアプリ (HTML5+Javascript) ハイブリッドアプリ ネイティブ アプリ Webアプリ (HTML5+Javascript) (HTML5+Javascript) WebView Webブラウザ フレームワーク 任意の機能 が利用可能 ライブラリ Kernel スマートフォンOS デバイス ネイティブ/ハイブリッドアプリ からのデバイス利用 HTML5で 規定された デバイスAPI のみ フレームワーク ネイティブ アプリ同様に 任意の機能 が利用可能 ライブラリ Kernel スマートフォンOS 利用できる 機能がWeb ブラウザの 仕様に依存 デバイス 一般的なWebアプリ(Webブラウザ) からのデバイス利用 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 3 1.2 デバイスコネクトでの仕組み ・スマートフォン上で動作する仮想サーバによりIP層を経由することでブラウザからでも 高度な機能を実現 ・アプリからも同様に利用可能 インターネット上のWebサイト Webアプリ Webアプリ (HTML5+Javascript) Webアプリ (HTML5+Javascript) (HTML5+Javascript) Webブラウザ IP-NW経由 で仮想サーバに アクセス デバイスコネクトWebAPI (ネイティブアプリ) 拡張プラグインA 拡張プラグインB 拡張プラグインC 仮想サーバ フレームワーク ライブラリ Kernel IPネット ワーク層 デバイスアクセス要求 を各デバイスの制御 命令に変換 (プラグインで拡張) ネイティブ アプリとして 任意の機能 が利用可能 Android OS デバイス Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 4 1.3 様々な観点からのセキュリティ対策も実施 http://member.openmobilealliance.org/ftp/public_documents/cd/CD-GotAPI/2015/ OMA-CD-GotAPI-2015-0003R01-INP_Introduction_to_GotAPI_1.0__Tutorial_.zip Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 5 1.4 デバイスコネクトのM100での利用 ・デバイスコネクトの実行環境を用意すれば、 Webサイト としてコンテンツを作成してM100から利用可能 ・M100上だけでなく、PCやスマートフォンのWebブラウザ からもM100が制御できる ・OMA※1にてGotAPI※2として国際標準規格化を実現、 MWC2015※3ではOMAブースにてVuzix社がデモ出展 ※1 Opne Mobile Alliance 携帯電話の標準化団体 ※2 GotAPI:Generic Open Terminal API ※3 モバイル関連では世界最大規模の展示会 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 6 1.5 MWC2015でのVuzix社デモ ・スマートフォンをハブにして腕時計型の心拍数計の情報をM100に表示 ・同時にPCからM100のカメラ映像を遠隔モニタリング このようなデモがWeb開発の知識のみでつくれます! Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 7 1.6 今後の予定 ・デバイスコネクトWebAPI相当のアプリをVuzix社の M100用マーケットでも近日中に公開予定 ⇒Androidの開発環境を意識しなくてもアプリの インストールのみでWeb開発が可能に Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 8 2. デモWebアプリでの動作確認 事前準備 ・開発用のPC環境※ (M100用マーケットでのアプリ公開後は開発環境は不要) ・Vuzix M100 ※Vuzix M100 アプリ開発マニュアルをご参照ください。 第1章 M100をADBで認識する http://www.vuzix.jp/dev/setting-for-adb.html 第2章 Android Screen Monitorの使い方 http://www.vuzix.jp/dev/asm.html 第3章 システムアップデート方法 http://www.vuzix.jp/dev/system-update.html Android SDKの場所の確認方法 http://www.vuzix.jp/dev/general-settings.html Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 9 2.1 デバイスコネクトWebAPIのインストール ( M100用マーケットでのアプリ公開後はマーケットからのダウンロードのみ) PC作業 1.GitHubからPCにデモ用ファイルのダウンロード https://github.com/DeviceConnect/DeviceConnect-Docs/blob/master/Bin/demoWebSite.zip 2.「ADB Install」コマンドで2つのアプリ(デバイスコネクト本体、デバイスコネクトAndroid Hostプラグイン)をM100にインストール > adb install .¥demoWebSite¥apk¥dConnectManager.apk[改行] Successと出たら成功 > adb install .¥demoWebSite¥apk¥dConnectDeviceHost.apk[改行] Successと出たら成功 ダウンロードファイル demoWebSite ┣[apk] ┃ ┣dConnectManager.apk ┃ ┣dConnectDeviceHost.apk ┃ ┗その他のAPKファイル ┃ ┣[css] ┣[js] ┗index.html Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 10 2.2 M100のIPアドレスの確認 M100作業 1.M100の無線LAN接続を確認(PCと同一ネットワークにしておく) 2.M100のIPアドレスの確認 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 11 2.3 デモアプリの外部アクセスの許可(実利用時にはセキュリティ考慮が必要) M100作業 1.デバイスコネクトアプリを起動し、メニューの下の方にある 「Allow External IP」のチェックを有効化、「Local OAuth」のチェックを無効化 スクロール 2.メニュー最初のDevice Connect ManagerをONに設定 して、サービスを有効化(有効にすると設定変更ができ ないので、変更する場合はいったんOFFにする) 補足 後述するデモの一部機能は「Local OAuth」が有効に なっていないと現状動作しません(後日無効でも利用 できるように対応予定) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 12 2.4 PCでデモ用Webサイトを開く(Chromeブラウザを想定) PC作業 1.Chromeブラウザでダウンロードファイルのindex.htmlを開く ※Chromeブラウザのメニュー⇒その他のツール⇒JavaScriptコンソールで、コンソールから具体的なREST APIの動作も見れます ダウンロードファイル demoWebSite ┣[apk] -APKファイル ┣[css] -スタイルシート ┣[js] -javascript ┃ ┗index.html 2.URLの最後に”?ip=[M100のIPアドレス]#demo”と追加して移動 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 13 2.5 デモ用Webサイトの動作確認:機能リストの表示 1.デモ画面でSearch Deviceを 選ぶとDevice ListにHostが 表示される。 PC画面 PC画面 2.M100の画面でACCEPTを 選ぶとデモ画面に機能の リストが表示される M100画面 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 14 2.6 デモ用Webサイトの動作確認:PCの画像をM100で表示 PC画面 ② ② ① ① ③ ③ M100画面 1.機能リストからcanvas、Canvas DrawImageを選択 ④ 2.ファイルを選択で画像を選択 3.mode:「最大化して画像描画」に変更してUploadを選択 4. 画像がM100画面に表示される Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 15 2.7 デモ用Webサイトの動作確認:M100のカメラ映像をWebブラウザで表示 PC画面 M100画面 1.機能リストからmediastream_recording、 Previewを選択 2.Webブラウザの画面にM100のカメラ映像が 表示される(撮影中はM100画面の左上に PREVIEWと表示される) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 16 3. REST APIとしての動作確認 M100をWebAPI(REST API)として利用できる=開発環境にも依存しない ⇒cURL(コンソールからHTTPリクエストが行えるツール http://curl.haxx.se/)により 動作を確かめます ※簡略化のために、Local Oauth:OFFを前提として進めます(実利用時にはセキュリティ考慮が必要)。 準備(Windowsの場合) PC画面 1.プログラムとファイルの検索で ”cmd”と入力してコンソールの起動 cmd[改行] 2.cURLをダウンロードしてフォルダを作成 “cd [フォルダの場所]”でcurl.exeのパスに移動 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 17 3.1 REST APIとしての動作確認:利用できる機能の確認 デバイスコネクトWebAPIが使えるかどうかの確認(availability) リクエスト >curl -X GET -H "Origin: http://localhost" http://192.168.13.6:4035/gotapi/availability レスポンス {"product":"Device Connect Manager","result":0,"version":"2.0.0"} 使える機能の確認(servicediscovery) リクエスト >curl -X GET -H "Origin: http://localhost" http://192.168.13.6:4035/gotapi/servicediscovery レスポンス {"product":"Device Connect Manager","result":0, "services":[{"id":"Host.e87e3213b730843a437ff6c676899df0.localhost.deviceconnect.org", サービスID "scopes":["file_descriptor","phone","media_player","connect","settings","deviceorientation", 利用できる "canvas","authorization","proximity","system","touch","file","serviceinformation","battery", 機能のリスト "mediastream_recording","keyevent","vibration","notification","servicediscovery"], "config":"HostConfig","type":"Wifi","online":true,"name":"Host"}],"version":"2.0.0"} プラグインの名前 >curl -X GET -H "Origin: http://localhost" http://192.168.13.6:4035/gotapi/servicediscovery curlコマンド HTTP GET Originの指定 (セキュリティ対策:近日中に 検証では不要にする予定) M100のIPアドレス Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 18 3.2 REST APIとしての動作確認:機能の利用例 バッテリーの残量を知る リクエスト >curl -X GET -H “Origin: http://localhost” http://192.168.13.6:4035/gotapi/battery ?serviceId=Host.e87e3213b730843a437ff6c676899df0.localhost.deviceconnect.org サービスID レスポンス {“charging”:true,“product”:“Device Connect Manager","result":0, "level":0.8700000047683716,"version":"2.0.0"} 残り87% https://github.com/DeviceConnect/DeviceConnect-JS/wiki/2.13.Notification#notification_post M100に通知を送る リクエスト >curl -X POST -H “Origin: http://localhost” http://192.168.13.6:4035/gotapi/notification/notify -F "serviceId=Host.e87e3213b730843a437ff6c676899df0.localhost.deviceconnect.org“ サービスID -F "type=3" -F "body=%E3%83%86%E3%82%B9%E3%83%88“ URLエンコードされた文字列(ここでは「テスト」を表している) レスポンス {"product":"Device Connect Manager","notificationId":69699,"result":0,"version":"2.0.0"} M100画面 M100上に メッセージが 表示される Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 19 【ハンズオン②】 ドコモデベロッパーサポートの APIによる認識機能の利用 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 20 1.1 利用準備:アカウント登録 1.Webブラウザからドコモデベロッパーサポートにアクセス 2.まず最初に「ログイン/新規登録」から画面の指示に従ってアカウントを登録 ドコモデベロッパーサポートURL: https://dev.smt.docomo.ne.jp/ Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 21 1.2 利用準備:ログイン アカウントを登録し、ログインすると、マイページにアクセスできるようになる Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 22 1.3 利用準備:API申請 1.マイページから 「新規アプリケーション申請へ」を選択 2.「アプリケーション登録」の各情報を入力 ⇒「API機能選択へ」ボタン ⇒各APIの【利用するAPI機能】を選択 ⇒「利用申請する」ボタン 3.完了画面まで入力が終わると 【開発用APIキー】が発行される 申請情報入力画面 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 23 1.4 API Key情報の確認 マイページの「アプリ/APIの申請・管理」から API Keyの確認を確認する アプリケーション名のリンク から登録情報や利用APIの 変更が行える API Key情報 (他に知られないように すること) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 24 2.1 APIコンソールからの動作確認 一部のREST API形式のものは、APIコンソールから動作が確認できます Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 25 2.2 APIコンソールからの動作確認:雑談対話API HTTPリクエストボディのテ キストを書き換えて実行 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 26 3.1 Android Studioからの音声認識サンプルの利用 音声認識【Powered by FUETREK】 ※REST API形式ではなく、Android/iOS用SDKとして提供されているAPI 「API/ツールの概要」の音声認識から、 Speech_Recognition_API_Android_SDK_v1.1.0.zipをダウンロード Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 27 3.2 Android Studio用サンプルプロジェクトの準備 Speech_Recognition_API_Android_SDK_v1.1.0.zipの構成 Speech_Recognition_API_Android_SDK_v1.1.0 ├─document ├─filetree.txt ├─lib └─sample └─project ←これの名前を変えてAndroid Studio用 のプロジェクト保存フォルダに格納 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 28 3.2 Android Studio用サンプルプロジェクトの準備 1.Android Studioのスタート画面から「Import Non-Android Studio project」を選択し、 2.先ほどのサンプルプロジェクトのフォルダを選択 3.ダイアログ確認・指示に従ってプロジェクトを開く(基本的に変更不要) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 29 開いた後にエラーとなった場合 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 30 開いた後にエラーとなった場合 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 31 3.3 Android Studioでのサンプルプロジェクトのビルド APIキーを登録情報のものに変更してからRun ‘app’でビルド・実行 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 32 3.4 M100での動作画面 Start recognitionボタンを押すことで音声認識が試せます(要ネットワーク接続) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 33 3.5 音声合成のサンプルの利用 音声合成APIのページからサンプルコード(文字並べ替え)をダウンロード (ZIPファイル内のNarabete_HiraganaフォルダがAndroidのプロジェクト) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 34 3.6 Android Studio用サンプルプロジェクトの準備 1.Android Studioのスタート画面から「Import Non-Android Studio project」を選択し、 2.先ほどのサンプルプロジェクトのフォルダを選択 3.ダイアログ確認・指示に従ってプロジェクトを開く(基本的に変更不要) Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 35 3.7 Android Studio用サンプルプロジェクトの設定情報の修正 Build.gradle(Module: app)に以下のように追記 ※ドコモデベロッパーサポートのEclipse向けのサンプルプロジェクトを Android studioで動かす場合、他でも必要な場合がある android { ・ ・ ・ packagingOptions { exclude 'META-INF/LICENSE.txt' exclude 'META-INF/NOTICE.txt' exclude 'META-INF/license.txt' exclude 'META-INF/notice.txt' exclude 'META-INF/LICENSE' exclude 'META-INF/NOTICE' } } dependencies { compile 'com.android.support:support-v4:21.0.3' 音声合成【Powered by AI】 compile files('libs/docomo-aitalk-android-sdk-1.0.1.jar') compile files('libs/docomo-common-android-sdk-narabete-1.0.2.jar') compile files('libs/jackson-annotations-2.2.3.jar') compile files('libs/jackson-core-2.2.3.jar') compile files('libs/jackson-databind-2.2.3.jar') } Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 36 3.8 Android Studioでのサンプルプロジェクトのビルド 1.“TextSpeaker.java“のAPIキーを登録情報のものに変更 2.Run ‘app’でビルド・実行 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 37 【おまけ】 さきほどの音声認識サンプルに 音声合成機能を組み込む Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 38 【音声合成】のサンプルから、【音声認識】のサンプルに 必要なライブラリ(jarファイル)をコピー Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 39 【音声認識】のサンプルのBuild.gradle(Module: app)に以下のように追記 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 40 【音声合成】のサンプルから、【音声認識】のサンプルに “TextSperker.java”をコピー Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 41 【音声認識】のサンプルの MainActivityのimplementsに,TextSpeaker.OnErrorListenerを追加 public class MainActivity extends Activity implements View.OnClickListener, FSRServiceEventListener ,TextSpeaker.OnErrorListener{ @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); の上に追加 //音声合成 public TextSpeaker mTextSpeaker = null; private static final String PREFERENCE_KEY_VOICE_TYPE_NAME = "voice_type_name"; //話者のキー private SharedPreferences mPreferences; //話者などの設定を永続的に保存するためのインスタンス //設定値などを永続的に保存するプリファレンスで用いるキー定数 private TextSpeaker.Error mLastSpeakError; //直前に発生した音声合成APIに関するエラー。 //同じ種類のエラーダイアログが連続して表示されないために用いる。 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 42 【音声認識】のサンプルに、音声合成の初期化処理を追加 @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); の下に追加 //音声合成の準備 //プリファレンスの取得 mPreferences = getPreferences(MODE_PRIVATE); //現在の話者設定をプリファレンスから取得 String voiceTypeName = mPreferences.getString(PREFERENCE_KEY_VOICE_TYPE_NAME, "nothing"); TextSpeaker.VoiceType voiceType = TextSpeaker.findVoiceTypeEnum(voiceTypeName); if (voiceType == null) { voiceType = TextSpeaker.VoiceType.NOZOMI; } //デフォルトは nozomi //音声再生インスタンスの作成 mTextSpeaker = new TextSpeaker(this); mTextSpeaker.setPitch(1.0F); mTextSpeaker.setRange(1.5F); mTextSpeaker.setRate(1F); mTextSpeaker.setVolume(1.8F); mTextSpeaker.setVoiceType(voiceType); mTextSpeaker.setOnErrorListener(this); this.setAudioStreamType(AudioManager.STREAM_MUSIC); //音声の出力先は音楽用ストリームに指定 Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 43 利用するためのメソッドを追加(【音声合成】サンプルから部分的に流用)① MainActivityに以下のメソッドを追加 ※依存関係(エラー)の解消はALT+Enterで /** * 合成音声の出力先ストリームをセットするメソッド。 * TextSpeakerにセットされるだけでなく、Activity#{@link #setVolumeControlStream(int)}が呼ばれることで、 * 物理音量キーによって該当ストリームの音量が変化するようになる * * @param streamType AudioManagerの定数 */ private void setAudioStreamType(int streamType) { this.mTextSpeaker.setStreamType(streamType); this.setVolumeControlStream(streamType); } /** * 現在の音声出力先の端末音量を返すメソッド * もし音声出力用のインスタンスがnullの場合は {@link AudioManager#STREAM_MUSIC}の音量を返す * * @return */ private int getDeviceVolumeOfVoice() { int volume = 0; AudioManager audioMgr = (AudioManager) getSystemService(Context.AUDIO_SERVICE); if (mTextSpeaker == null) { volume = audioMgr.getStreamVolume(AudioManager.STREAM_MUSIC); } else { volume = audioMgr.getStreamVolume(mTextSpeaker.getStreamType()); } return volume; } /** * 合成音声の話者をセットするメソッド * * @param type */ public void setVoiceType(TextSpeaker.VoiceType type) { if (mTextSpeaker != null) { mTextSpeaker.setVoiceType(type); } } Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 44 利用するためのメソッドを追加(【音声合成】サンプルから部分的に流用)② /** * TextSpeekerによる音声合成のエラーが通知されるメソッド * @param exception * @param errorCode */ @Override public void onSpeekError(Exception exception, String errorCode) { //エラーコード(文字列)から該当するエラーEnumを取得 TextSpeaker.Error error = TextSpeaker.findErrorEnum(errorCode); //今回のエラーと直近に発生したエラーが違う場合のみエラーダイアログを表示する。 //これは同種のエラーが何度もダイアログ表示されないようにするため。(やむなく音声無しでアプリを使用する場合など) if (error != mLastSpeakError) { //SimpleDialogFragment dialog = null; switch (error) { case SERVER_CONNECTION_ERROR: /* dialog = SimpleDialogFragment.getInstance(getString(R.string.error), getString(R.string.desc_of_connection_error));*/ break; case SERVER_OTHER_ERROR: case SERVER_LIMITATION_ERROR: /* dialog = SimpleDialogFragment.getInstance(getString(R.string.error), getString(R.string.desc_of_server_limited_error));*/ break; case INVALID_PARAMETER: case AUTHENTICATION_ERROR: case SDK_INSIDE_ERROR: case RESPONSE_DATA_ERROR: default: /*dialog = SimpleDialogFragment.getInstance(getString(R.string.error), getString(R.string.desc_of_fatal_error));*/ break; } //エラーダイアログの表示 /*if(dialog!=null){ dialog.setCancelable(false); dialog.show(getSupportFragmentManager(), "error"); }*/ }//end of if mLastSpeakError = error; //今回のエラーをフィールドに保存しておく } Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 45 notifyEventの認識完了の処理に読み上げるための記述を追加して、 Run ‘app’でビルド・実行 case NotifyEndRecognition: // 認識完了 Log.d(TAG, "NotifyEndRecognition"); try { // 認識結果の取得 final RecognizeEntity recogize = mFsrService.getSessionResultStatus(BACKEND_TYPE); if (recogize.getCount() > 0) { final ResultInfoEntity info = mFsrService.getSessionResult(BACKEND_TYPE, 1); final String result = info.getText(); sHandler.sendMessage(sHandler.obtainMessage(MyHandler.HANDLE_SHOW_MESSAGE, result)); mTextSpeaker.speak(info.getText(), 0); } else { sHandler.sendMessage(sHandler.obtainMessage(MyHandler.HANDLE_SHOW_MESSAGE, "結果無し")); mTextSpeaker.speak("結果無し", 0); } Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 46