VDC 5th - NTTドコモ　ハンズオン資料

Copyright© 2015 NTT DOCOMO, Inc. All rights reserved 1
デバイスコネクトWebAPIによる
M100向けWeb開発の実現
【ハンズオン①】

Copyright© 2015 NTT DOCOMO, Inc. All rights reserved
ＷｅｂＡＰＩにより、スマートフォンアプリやＷｅｂブラウザからの様々な
ウェアラブル・ＩｏＴ機器利用を実現するフレームワーク
1. デバイスコネクトWebAPIとは
スマートウォッチスマートグラス
ＨＤＭＩドングル
健康機器無線ＬＡＮ搭載カメラ
スマートトイホームコントロール
スマホ
アプリ
Ｗｅｂ
アプリ
2
S社ｽﾏｰﾄｳｫｯﾁ
Androidホスト
Pebble
S社Wifiカメラ
ヘルスケア
AndroidWear
・
・
・
プラグイン
対応機器
Ｗ
ｅ
ｂ
Ａ
Ｐ
Ｉ
スマートフォン/タブレット(Android、iOS)
個々のデバイスの開発環境・
通信プロトコルの差異を吸収
スマートフォン上で動作する
擬似的なWebAPIにより、OSに
依存しない共通動作を実現
デバイスコネクト

1.1 従来のコンテンツの実現方法
3
Webアプリ
(HTML5+Javascript)
WebView
フレームワーク
ライブラリ
Kernel
デバイス
ネイティブ
アプリ
スマートフォンOS
ハイブリッドアプリ
ネイティブ
アプリ同様に
任意の機能
が利用可能
任意の機能
が利用可能
ネイティブ／ハイブリッドアプリ
からのデバイス利用
Webアプリ
(HTML5+Javascript)
Webブラウザ
ライブラリ
Kernel
デバイス
スマートフォンOS
インターネット上のWebサイト
Webアプリ
(HTML5+Javascript)
Webアプリ
(HTML5+Javascript)
利用できる
機能がWeb
ブラウザの
仕様に依存
HTML5で
規定された
デバイスAPI
のみ
一般的なWebアプリ（Webブラウザ）
からのデバイス利用
・ネイティブアプリ・・・OS、開発環境に依存
・ﾊｲﾌﾞﾘｯﾄﾞｱﾌﾟﾘ
・・・制限が少ないが、機能は組み込むWebviewﾌﾚｰﾑﾜｰｸに依存し、開発言語も限られる
・ブラウザ（HTML5）・・・機能がブラウザでできる事に限られる

・スマートフォン上で動作する仮想サーバによりIP層を経由することでブラウザからでも
高度な機能を実現
・アプリからも同様に利用可能
1.2 デバイスコネクトでの仕組み
4
ライブラリ
Kernel
デバイス
Android OS
デバイスコネクトWebAPI
（ネイティブアプリ）
仮想サーバ
IPネット
ワーク層
Webブラウザ
インターネット上のWebサイト
Webアプリ
(HTML5+Javascript)
Webアプリ
(HTML5+Javascript)
Webアプリ
(HTML5+Javascript)
IP-NW経由
で仮想サーバに
アクセス
ネイティブ
アプリとして
任意の機能
が利用可能
拡張プラグインC
拡張プラグインB
拡張プラグインA
デバイスアクセス要求
を各デバイスの制御
命令に変換
（プラグインで拡張）

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

・デバイスコネクトの実行環境を用意すれば、 Webサイト
としてコンテンツを作成してM100から利用可能
・M100上だけでなく、PCやスマートフォンのWebブラウザ
からもM100が制御できる
・OMA※1にてGotAPI※2として国際標準規格化を実現、
MWC2015※3ではOMAブースにてVuzix社がデモ出展
※１ Opne Mobile Alliance 携帯電話の標準化団体
※２ GotAPI：Generic Open Terminal API
※３モバイル関連では世界最大規模の展示会
1.4 デバイスコネクトのM100での利用

・スマートフォンをハブにして腕時計型の心拍数計の情報をM100に表示
・同時にPCからM100のカメラ映像を遠隔モニタリング
このようなデモがWeb開発の知識のみでつくれます！
1.5 MWC2015でのVuzix社デモ

1.6 今後の予定
・デバイスコネクトWebAPI相当のアプリをVuzix社の
M100用マーケットでも近日中に公開予定
⇒Androidの開発環境を意識しなくてもアプリの
インストールのみで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
2. デモWebアプリでの動作確認

1.GitHubからPCにデモ用ファイルのダウンロード
https://github.com/DeviceConnect/DeviceConnect-Docs/blob/master/Bin/demoWebSite.zip
2.「ADB Install」コマンドで２つのアプリ（デバイスコネクト本体、デバイスコネクトAndroid
Hostプラグイン）をM100にインストール
> adb install .¥demoWebSite¥apk¥dConnectManager.apk[改行]
Successと出たら成功
> adb install .¥demoWebSite¥apk¥dConnectDeviceHost.apk[改行]
Successと出たら成功
2.1 デバイスコネクトWebAPIのインストール
（ M100用マーケットでのアプリ公開後はマーケットからのダウンロードのみ）
PC作業
ダウンロードファイル
demoWebSite
┣[apk]
┃ ┣dConnectManager.apk
┃ ┣dConnectDeviceHost.apk
┃ ┗その他のAPKファイル
┃
┣[css]
┣[js]
┗index.html

2.2 M100のIPアドレスの確認
1.M100の無線LAN接続を確認（PCと同一ネットワークにしておく）
2.M100のIPアドレスの確認
M100作業

2.3 デモアプリの外部アクセスの許可（実利用時にはセキュリティ考慮が必要）
1.デバイスコネクトアプリを起動し、メニューの下の方にある
「Allow External IP」のチェックを有効化、「Local OAuth」のチェックを無効化
2.メニュー最初のDevice Connect ManagerをONに設定
して、サービスを有効化（有効にすると設定変更ができ
ないので、変更する場合はいったんOFFにする）
補足
後述するデモの一部機能は「Local OAuth」が有効に
なっていないと現状動作しません（後日無効でも利用
できるように対応予定）
M100作業
スクロール

PC作業
2.4 PCでデモ用Webサイトを開く（Chromeブラウザを想定）
1.Chromeブラウザでダウンロードファイルのindex.htmlを開く
※Chromeブラウザのメニュー⇒その他のツール⇒JavaScriptコンソールで、コンソールから具体的なREST APIの動作も見れます
ダウンロードファイル
demoWebSite
┣[apk] -APKファイル
┣[css] -スタイルシート
┣[js] -javascript
┃
┗index.html
2.URLの最後に”?ip=[M100のIPアドレス]#demo”と追加して移動

2.5 デモ用Webサイトの動作確認：機能リストの表示
1.デモ画面でSearch Deviceを
選ぶとDevice ListにHostが
表示される。
2.M100の画面でACCEPTを
選ぶとデモ画面に機能の
リストが表示される
PC画面
M100画面
14
PC画面

2.6 デモ用Webサイトの動作確認：PCの画像をM100で表示
PC画面
M100画面1.機能リストからcanvas、Canvas DrawImageを選択
2.ファイルを選択で画像を選択
3.mode:「最大化して画像描画」に変更してUploadを選択
4. 画像がM100画面に表示される
①
①
②
②
③
③
④

2.7 デモ用Webサイトの動作確認：M100のカメラ映像をWebブラウザで表示
1.機能リストからmediastream_recording、
Previewを選択
2.Webブラウザの画面にM100のカメラ映像が
表示される(撮影中はM100画面の左上に
PREVIEWと表示される)
PC画面
M100画面

3. REST APIとしての動作確認
M100をWebAPI（REST API）として利用できる＝開発環境にも依存しない
⇒cURL（コンソールからHTTPリクエストが行えるツール http://curl.haxx.se/）により
動作を確かめます
※簡略化のために、Local Oauth：OFFを前提として進めます（実利用時にはセキュリティ考慮が必要）。
準備（Windowsの場合）
1.プログラムとファイルの検索で
”cmd”と入力してコンソールの起動
2.cURLをダウンロードしてフォルダを作成
“cd [フォルダの場所]”でcurl.exeのパスに移動
cmd[改行]
PC画面

デバイスコネクト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",
"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アドレス
3.1 REST APIとしての動作確認：利用できる機能の確認
プラグインの名前
サービスID
利用できる
機能のリスト

バッテリーの残量を知る
リクエスト
>curl -X GET -H “Origin: http://localhost” http://192.168.13.6:4035/gotapi/battery
?serviceId=Host.e87e3213b730843a437ff6c676899df0.localhost.deviceconnect.org
レスポンス
{“charging”:true,“product”:“Device Connect Manager","result":0,
"level":0.8700000047683716,"version":"2.0.0"}
https://github.com/DeviceConnect/DeviceConnect-JS/wiki/2.13.Notification#notification_post
3.2 REST APIとしての動作確認：機能の利用例
残り87％
M100に通知を送る
リクエスト
>curl -X POST -H “Origin: http://localhost” http://192.168.13.6:4035/gotapi/notification/notify
-F "serviceId=Host.e87e3213b730843a437ff6c676899df0.localhost.deviceconnect.org“
-F "type=3" -F "body=%E3%83%86%E3%82%B9%E3%83%88“
レスポンス
{"product":"Device Connect Manager","notificationId":69699,"result":0,"version":"2.0.0"}
URLエンコードされた文字列（ここでは「テスト」を表している）
M100上に
メッセージが
表示される
サービスID
サービスID
M100画面

ドコモデベロッパーサポートの
APIによる認識機能の利用
20
【ハンズオン②】

２．まず最初に「ログイン/新規登録」から画面の指示に従ってアカウントを登録
１．Webブラウザからドコモデベロッパーサポートにアクセス
1.1 利用準備：アカウント登録
21
ドコモデベロッパーサポートURL： https://dev.smt.docomo.ne.jp/

アカウントを登録し、ログインすると、マイページにアクセスできるようになる
1.2 利用準備：ログイン
22

１．マイページから
「新規アプリケーション申請へ」を選択
２．「アプリケーション登録」の各情報を入力
⇒「API機能選択へ」ボタン
⇒各APIの【利用するAPI機能】を選択
⇒「利用申請する」ボタン
３．完了画面まで入力が終わると
【開発用APIキー】が発行される
申請情報入力画面
1.3 利用準備：API申請
23

マイページの「アプリ/APIの申請・管理」から
API Keyの確認を確認するアプリケーション名のリンク
から登録情報や利用APIの
変更が行える
API Key情報
（他に知られないように
すること）
1.4 API Key情報の確認
24

一部のREST API形式のものは、APIコンソールから動作が確認できます
2.1 APIコンソールからの動作確認
25

HTTPリクエストボディのテ
キストを書き換えて実行
26
2.2 APIコンソールからの動作確認：雑談対話API

音声認識【Powered by FUETREK】
※REST API形式ではなく、Android/iOS用SDKとして提供されているAPI
「API/ツールの概要」の音声認識から、
Speech_Recognition_API_Android_SDK_v1.1.0.zipをダウンロード
27
3.1 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用
のプロジェクト保存フォルダに格納
3.2 Android Studio用サンプルプロジェクトの準備
28

１．Android Studioのスタート画面から「Import Non-Android Studio project」を選択し、
２．先ほどのサンプルプロジェクトのフォルダを選択
３．ダイアログ確認・指示に従ってプロジェクトを開く（基本的に変更不要）
29

開いた後にエラーとなった場合
30

開いた後にエラーとなった場合

APIキーを登録情報のものに変更してからRun ‘app’でビルド・実行
3.3 Android Studioでのサンプルプロジェクトのビルド
32

Start recognitionボタンを押すことで音声認識が試せます（要ネットワーク接続）
3.4 M100での動作画面
33

音声合成APIのページからサンプルコード（文字並べ替え）をダウンロード
（ZIPファイル内のNarabete_HiraganaフォルダがAndroidのプロジェクト）
3.5 音声合成のサンプルの利用

１．Android Studioのスタート画面から「Import Non-Android Studio project」を選択し、
２．先ほどのサンプルプロジェクトのフォルダを選択
３．ダイアログ確認・指示に従ってプロジェクトを開く（基本的に変更不要）

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'
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')
}
Build.gradle(Module: app)に以下のように追記
※ドコモデベロッパーサポートのEclipse向けのサンプルプロジェクトを
Android studioで動かす場合、他でも必要な場合がある
音声合成【Powered by AI】
36
3.7 Android Studio用サンプルプロジェクトの設定情報の修正

１．“TextSpeaker.java“のAPIキーを登録情報のものに変更
２．Run ‘app’でビルド・実行
3.8 Android Studioでのサンプルプロジェクトのビルド

さきほどの音声認識サンプルに
音声合成機能を組み込む
【おまけ】

【音声合成】のサンプルから、【音声認識】のサンプルに
必要なライブラリ（jarファイル）をコピー

【音声認識】のサンプルのBuild.gradle(Module: app)に以下のように追記

【音声合成】のサンプルから、【音声認識】のサンプルに
“TextSperker.java”をコピー

【音声認識】のサンプルの
MainActivityのimplementsに,TextSpeaker.OnErrorListenerを追加
//音声合成
public TextSpeaker mTextSpeaker = null;
private static final String PREFERENCE_KEY_VOICE_TYPE_NAME = "voice_type_name"; //話者のキー
private SharedPreferences mPreferences; //話者などの設定を永続的に保存するためのインスタンス
//設定値などを永続的に保存するプリファレンスで用いるキー定数
private TextSpeaker.Error mLastSpeakError; //直前に発生した音声合成APIに関するエラー。
//同じ種類のエラーダイアログが連続して表示されないために用いる。
public class MainActivity extends Activity implements View.OnClickListener,
FSRServiceEventListener ,TextSpeaker.OnErrorListener{
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
の上に追加

【音声認識】のサンプルに、音声合成の初期化処理を追加
@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); //音声の出力先は音楽用ストリームに指定

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);
}
}
利用するためのメソッドを追加（【音声合成】サンプルから部分的に流用）①

利用するためのメソッドを追加（【音声合成】サンプルから部分的に流用）②
/**
* 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; //今回のエラーをフィールドに保存しておく
}

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);
}
notifyEventの認識完了の処理に読み上げるための記述を追加して、
Run ‘app’でビルド・実行

VDC 5th - NTTドコモ ハンズオン資料

More Related Content

Viewers also liked

Similar to VDC 5th - NTTドコモ ハンズオン資料