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に依存しない共通動作を実現

デバイスコネクト

http://www.google.co.jp/url?sa=i&rct=j&q=&esrc=s&frm=1&source=images&cd=&cad=rja&uact=8&docid=VDeQ1VdRpJM2IM&tbnid=OPhf3lMSIuoX3M:&ved=0CAUQjRw&url=http://smhn.info/tag/g-watch&ei=m8ziU6e0Ko7e8AWdhICgDA&bvm=bv.72676100,d.dGc&psig=AFQjCNGwFueMmwZ8FZH4nqLm3ruOwD5iOQ&ust=1407458794309445


1.1 従来のコンテンツの実現方法

3

Webアプリ(HTML5+Javascript)

WebView

フレームワーク

ライブラリ

Kernel

デバイス

ネイティブ

アプリ

スマートフォンOS

ハイブリッドアプリ

ネイティブ

アプリ同様に任意の機能が利用可能

任意の機能が利用可能

ネイティブ／ハイブリッドアプリからのデバイス利用


Webブラウザ


ライブラリ

Kernel

デバイス

スマートフォンOS

インターネット上のWebサイト



利用できる機能がWeb

ブラウザの仕様に依存

HTML5で

規定されたデバイスAPI

のみ

一般的なWebアプリ（Webブラウザ）からのデバイス利用

・ネイティブアプリ・・・OS、開発環境に依存・ﾊｲﾌﾞﾘｯﾄﾞｱﾌﾟﾘ・・・制限が少ないが、機能は組み込むWebviewﾌﾚｰﾑﾜｰｸに依存し、開発言語も限られる・ブラウザ（HTML5）・・・機能がブラウザでできる事に限られる


・スマートフォン上で動作する仮想サーバによりIP層を経由することでブラウザからでも高度な機能を実現・アプリからも同様に利用可能

1.2 デバイスコネクトでの仕組み

4


ライブラリ

Kernel

デバイス

Android OS

デバイスコネクトWebAPI

（ネイティブアプリ）

仮想サーバ

IPネットワーク層

Webブラウザ

インターネット上のWebサイト




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ドコモ ハンズオン資料

Education

vdc 5th - nttドコモ　ハンズオン資料