FC2ブログ

スマフォのアプリを作りたい(23):実際のスマフォでアプリを試す

   プログラミング [2020/04/27]
これまで、ずーーっとエミュレータ(AVD:Android Virtual Device)でしか試作したアプリを動作させてませんでした。
そもそも、エミュレータを使っていたのは、買った中古のSIMフリー・スマフォのAndoridバージョンが古くて対象として使えなかったから。
富士通 ARROWS Me F-11D Android4.0 APIレベル15

APIレベル15だとVisualStudio2017(NDK)ではサポートされてなかった。
たしかAPIレベル19以降だったかと思う。

一方、React Nativeに切り替えたときには、もうエミュレータを使うことしか頭になくて。
エミュレータの最低の前提バージョンが、6.0(APIレベル23)。

ずっと、それで動作確認してきたが、そろそろ実機を使ってみたくなった。

ここで、倅が以前使っていたLUMIXというスマフォが引き出しから出てきた。
確認してみると、Androidバージョンは、4.04となっている。
もしかしたら使えるかも。

ただ、4.0xのコード名がIceCreamSandwichです。それに対して4.1-4.3がJellyBeanという名前。
どっかの機能制限で、「JellyBean以降」というのがあった気がします。

まあ、どうなるかやってみます。


◆SDKの追加インストール
Android SDKとしては、かなり古いバージョンのものまで用意されていたはずなので、SDKの追加インストールから。

-AndroidStudioを起動
-Welcome画面の右下の[Configure]をクリックして、プルダウンから「SDK Manager」を選択
-各SDKの選択画面が表示されます。すでにインストールしてある10.0と6.0にチェックが入ってます。
-「SDK 4.0.3(IceCreamSandwich)」をチェック
-右下の「Show Package Detail」をチェック
-「SDK 4.0.3」の構成が確認できます。
-全部にチェックが入ってるのをそのままにしました。
-一応「SDK Tools」タブを確認しましたが、何か追加要かわからなかったのでここもそのまま
-右下の[OK]ボタンをクリック
-インストールが完了(Done)したようなので、[Finish]をクリック


◆スマフォのPCへの接続
LUMIXの場合
-スマフォ(LUMIX)の画面下のボタンの左側(三本線のマーク下)を押す
-プルアップメニューから「本体設定」を選択
-設定メニューの一番下の方の「開発者向けオプション」を選択
-「注意」メッセージが表示されるのでよく読んでから[OK]をタップ
-「USBデバッグ」項目をチェック状態にします。
 (その他の項目はご自由に)

チャント接続可能かどうかは、以下で確認するのだそうです。
参考:https://reactnative.dev/docs/running-on-device

-コマンドプロンプトを起動します。
-カレントドライブをSDKインストール先の「platform-tools」にします。
-「adb devices」コマンドを打ち込んで、表示内容に「xxxxxxxxxxx device」が出るか確認します。
----コマンドプロンプト-----------------------------
C:\WINDOWS\system32>cd /d d:\appmake\android\sdk\platform-tools

d:\AppMake\Android\Sdk\platform-tools>adb devices
* daemon not running; starting now at tcp:5037
* daemon started successfully
List of devices attached
5C84000600000001 device
---------------------------------------------------


参考(React Native)サイトの説明では、このあと「react-native run-android」をやればいいように書かれています。
それだと、エミュレータが起動されちゃうんじゃ?
「adb -s (デバイス名) reverse tcp:8081 tcp:8081」とやるとありますが、「デバイスがAndroid5.0以降を実行していて」とあります。
じゃ、それより前のバージョンのデバイスはどうするの?
なんで、こういう説明の仕方しかしないのかなー。ちょっとイラつきますよね。

あと、ベースのSDKを変更する部分の設定がまだです。


◆プロジェクトのベースSDKの変更
「どこで、対象Androidのバージョンを決めてたっけ?」と考えて、過去の書き込みを自身で読み返してみました。
(このブログを備忘録として使ってます。)

これかな?
「スマフォのアプリを作りたい(14):音声認識させたい②」
react-native-google-speech-apiを導入しようとしたときに、ビルドが通らなかった原因が、android\build.gradleの中に指定してあった、「minSdkVersion = 16」という記述。
この辺の指定で、四苦八苦したのをジワジワ思い出してきた。

ってことは、
その時ダメだったAPIレベルより低いものを指定して、ビルドが通る分けがない。
でも、試しにやってみた。
----build.gradle-----------------------------------

buildscript {
ext {
buildToolsVersion = "28.0.3"
//*** changed min_version for google-speech-api by sarumosunaru
//minSdkVersion = 16
//minSdkVersion = 21
//compileSdkVersion = 28
//targetSdkVersion = 28
//*** try old api level
minSdkVersion = 15
compileSdkVersion = 15
targetSdkVersion = 15
}


---------------------------------------------------


見事に、エラーが出まくりました。
----コマンドプロンプト-----------------------------
D:\AppMake\proj\VTChat>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1034 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Installing the app...

> Configure project :react-native-audio
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
WARNING: minSdkVersion (16) is greater than targetSdkVersion (15) for variant "debug". Please change the values such that minSdkVersion is less than or equal to targetSdkVersion.
WARNING: minSdkVersion (16) is greater than targetSdkVersion (15) for variant "release". Please change the values such that minSdkVersion is less than or equal to targetSdkVersion.

> Configure project :react-native-google-speech-api
The com.google.protobuf plugin was already applied to the project: :react-native-google-speech-api and will not be applied again after plugin: android-library
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display more information.

> Task :react-native-audio:compileDebugJavaWithJavac

> Task :react-native-audio:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
28 actionable tasks: 6 executed, 22 up-to-date
D:\AppMake\proj\VTChat\node_modules\react-native-audio\android\src\main\java\com\rnim\rn\audio\AudioRecorderManager.java:87: error: diamond operator is not supported in -source 1.6
Map constants = new HashMap<>();
^
(use -source 7 or higher to enable diamond operator)
D:\AppMake\proj\VTChat\node_modules\react-native-audio\android\src\main\java\com\rnim\rn\audio\AudioRecorderManager.java:277: error: multi-catch statement is not supported in -source 1.6
} catch (InvocationTargetException | RuntimeException | IllegalAccessException e) {
^
(use -source 7 or higher to enable multi-catch statement)
D:\AppMake\proj\VTChat\node_modules\react-native-audio\android\src\main\java\com\rnim\rn\audio\ReactNativeAudioPackage.java:22: error: diamond operator is not supported in -source 1.6
List modules = new ArrayList<>();
^
(use -source 7 or higher to enable diamond operator)

3 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-audio:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.


---------------------------------------------------

前の方のreact-native-audioのエラーは明らかにAPIレベルが合ってないという感じですかね。
後の方は、Javaのバージョンが合ってないから?TypeScript記述?でエラーになってます。

ここで、Android/APIレベル/Javaのバージョンの関係について、ちょっと気になったのでぐぐって見ました。
参考:https://so-zou.jp/software/tech/programming/java/introduction/version/
参考:https://development.relaxes.jp/android%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%80%81api%E3%83%AC%E3%83%99%E3%83%AB%E3%80%81%E3%82%B3%E3%83%BC%E3%83%89%E3%83%8D%E3%83%BC%E3%83%A0%E4%B8%80%E8%A6%A7/

なんか、Javaのバージョンってややこしい。
たぶん、スマフォはAndroid4.0(APIレベル15)-Java1.6 で、
さるの現状の環境はJDK8(Java1.8)だから確かに合ってない。

----コマンドプロンプト-----------------------------
D:\AppMake\proj\VTChat>java -version
Picked up _JAVA_OPTIONS: -Duser.language=en
java version "1.8.0_231"
Java(TM) SE Runtime Environment (build 1.8.0_231-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.231-b11, mixed mode)
---------------------------------------------------


まあでも、ここを何とか切り抜けたとしても、その先の見通しもない気がします。
なので、この前提不一致の件の対策方法を探るのはやめて、build.gradleは元の記述に戻します。

続いて・・・


◆ビルド環境とスマフォのAPIレベルが違ったら
ここでちょっと寄り道になりますが、
搭載スマフォの対象APIレベルよりも新しいレベルでビルドしたら実機デバッグ時にどんな反応になるのだろう。
----コマンドプロンプト-----------------------------
D:\AppMake\proj\VTChat>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1035 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
info Installing the app...

> Configure project :react-native-audio
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

> Configure project :react-native-google-speech-api
The com.google.protobuf plugin was already applied to the project: :react-native-google-speech-api and will not be applied again after plugin: android-library
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display more information.

> Task :app:installDebug FAILED
Skipping device 'P-02D - 4.0.4' for 'app:debug': minSdkVersion [21] > deviceApiLevel [15]
:
:
---------------------------------------------------

Pー02Dというのは、繋げたスマフォのモデル番号で、やっぱAPIレベルが違うと言っているようです。
こういうエラーの出方なんですね。


仕方ないので手持ちのスマフォは諦めて、Android6.0のスマフォを借りて試してみました。
富士通 モデル番号:arrowsM03 Android6.0.1


◆実機(スマフォ)でLoad&Goしてみる
触り始めてすぐに「開発者向けオプション」が見当たらないので、ちょっと焦った。
-USBで開発PCに接続/スマフォの電源ON/ホーム画面を表示させる。
-画面を右にスクロールさせると、アプリの一覧が表示される。
-その一覧をさらにスワイプすると歯車アイコン(設定)が出てくるのでタップ
-右下の「管理端末」をタップ
-一番下の「端末情報」をタップ
-一番下の「ビルド番号」を数回タップ(なんかメッセージが出るけどタップ)
-戻る(左向き▲)をタップ
-一覧の下から2番目に「開発者オプション」が新たに表示されているのでタップ
-画面最上部の「OFF」を「ON」に切り替える。
-下にスクロールさせて「USBデバッグ」をチェック(有効)にする。


この状態で、「react-native run-android」を実行させたら・・・

スマフォがスリープに入ってた。
慌てて起こしたら、USB接続?デバッグを「許可しますか」的なメッセージが出てたと思う。

[OK]して待つと、従来通りエミュレータも起動されて以下の結果となった。

----コマンドプロンプト-----------------------------
D:\AppMake\proj\VTChat>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1024 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
* daemon not running; starting now at tcp:5037
* daemon started successfully
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details

> Configure project :react-native-google-speech-api
The com.google.protobuf plugin was already applied to the project: :react-native-google-speech-api and will not be applied again after plugin: android-library
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display more information.

> Task :react-native-fs:compileDebugJavaWithJavac
C:\Users\sarumosunaru\.gradle\caches\modules-2\files-2.1\com.google.http-client\google-http-client\1.19.0\cdca49ad0977c040f603478aa2e16b2775c8fec6\google-http-client-1.19.0.jar: D8: Type `org.apache.http.params.HttpProtocolParams` was not found, it is required for default or static interface methods desugaring of `void com.google.api.client.http.apache.ApacheHttpTransport.(org.apache.http.client.HttpClient)`


C:\Users\sarumosunaru\.gradle\caches\modules-2\files-2.1\com.google.guava\guava\19.0\6ce200f6b23222af3d8abb6b6459e6c44f4bb0e9\guava-19.0.jar: D8: Type `sun.misc.Unsafe` was not found, it is required for default or static interface methods desugaring of `void com.google.common.util.concurrent.AbstractFuture$UnsafeAtomicHelper.()`

> Task :app:installDebug
09:55:00 V/ddms: execute: running am get-config
09:55:02 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
09:55:02 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'myNexusS(AVD) - 6.0' for app:debug
09:55:02 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
09:55:02 D/Device: Uploading file onto device 'emulator-5554'
09:55:02 D/ddms: Reading file permision of D:\AppMake\proj\VTChat\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
09:55:03 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
09:55:35 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:55:35 V/ddms: execute: returning
09:55:35 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
09:55:35 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:55:35 V/ddms: execute: returning
09:55:35 V/ddms: execute: running am get-config
09:55:36 V/ddms: execute 'am get-config' on '211908fc' : EOF hit. Read: -1
09:55:36 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'arrowsM03 - 6.0.1' for app:debug
09:55:36 D/app-debug.apk: Uploading app-debug.apk onto device '211908fc'
09:55:36 D/Device: Uploading file onto device '211908fc'
09:55:36 D/ddms: Reading file permision of D:\AppMake\proj\VTChat\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
09:55:46 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
09:56:08 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on '211908fc' : EOF hit. Read: -1
09:56:08 V/ddms: execute: returning
09:56:08 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
09:56:08 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on '211908fc' : EOF hit. Read: -1
09:56:08 V/ddms: execute: returning
Installed on 2 devices.


Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 11m 15s
158 actionable tasks: 18 executed, 140 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.vtchat/.MainActivity }
---------------------------------------------------

なんか、両方にインストールしたっぽい。
でも、両方ともアプリの起動はされなかった。

エミュレータを終了させた後、
再度、スマフォの「開発者オプション」の項目を見直して、追加で以下を設定。
-「スリープモードにしない」をチェック
-「デバッグアプリを選択」で既にインストールされたアプリを指定
-「デバッガを待機」をチェック


再度「react-native run-android」を実行。
----コマンドプロンプト-----------------------------
D:\AppMake\proj\VTChat>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1024 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...

> Configure project :react-native-google-speech-api
The com.google.protobuf plugin was already applied to the project: :react-native-google-speech-api and will not be applied again after plugin: android-library
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display more information.

> Task :app:installDebug
10:41:35 V/ddms: execute: running am get-config
10:41:36 V/ddms: execute 'am get-config' on '211908fc' : EOF hit. Read: -1
10:41:36 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'arrowsM03 - 6.0.1' for app:debug
10:41:36 D/app-debug.apk: Uploading app-debug.apk onto device '211908fc'
10:41:36 D/Device: Uploading file onto device '211908fc'
10:41:36 D/ddms: Reading file permision of D:\AppMake\proj\VTChat\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
10:41:46 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
10:42:09 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on '211908fc' : EOF hit. Read: -1
10:42:09 V/ddms: execute: returning
10:42:09 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
10:42:09 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on '211908fc' : EOF hit. Read: -1
10:42:09 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 1m 23s
158 actionable tasks: 2 executed, 156 up-to-date
info Connecting to the development server...
info Starting the app on "211908fc"...
Starting: Intent { cmp=com.vtchat/.MainActivity }
---------------------------------------------------

となって、スマフォ側には
Waiting For Debugger Application VTChat(process com.vtchat)is waiting for the debugger to attach.」
と出てそのまま。

Chromeのデベロッパーツール誘導画面は出てきません。

対処法を色々探って、やってみた内容が以下。
どれが効果があったのかは、不明です。

1)コマンドプロンプトから「adb reserve tcp:8081 tcp:8081」を実行
→これの効果不明。
2)Chromeで「http://localhost/:8081/debugger-ui」をアクセス
→「このサイトにアクセスできません」が出た。たぶんこれは効果ないでしょう。
3)スマフォ側の「デバッガを待機」を無効化
これをやったら、スマフォに以下の画面が表示された。

デバッガの起動(コネクション)はされなかったけど、スマフォでアプリが起動されたみたいです。
エラーですけどね。
20200421_1.jpg
(スクリーンショットの仕方がわからなくて、別のスマフォで画面を撮影。)

このエラーは、App.jsで指定しているStylesの属性名が間違ってる(「alignems」→「alignItems」)というものでした。
そこを修正して、「node・・・\cli.js start」コマンドプロンプト※にフォーカスして[r]キーを入力したら、
今度はアプリの画面が出ました。
※以降「nodeコマンドプロンプト」と呼ばせてもらいます。アプリをデバイスにロードしていると思われるdemonのプロンプトです。

でも、デバッガには接続されません。
ともかく、アプリを操作してみました。

すると、ソース内で「console.log('・・・・');」と入れてあるメッセージが、nodeコマンドプロンプトに「LOG:・・・」として表示されました。
以下はその内容です。

----node:コマンドプロンプト-----------------------
Looking for JS files in
D:\AppMake\proj\VTChat

Loading dependency graph, done.

To reload the app press "r"
To open developer menu press "d"

BUNDLE [android, dev] ./index.js ■■■■■■■100.0% (894/894), done.

LOG Running "VTChat" with {"rootTag":1}
WARN Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Chat
LOG Error! failed to connect to /10.0.2.2 (port 8080) after 10000ms
LOG Close! undefined undefined
LOG PlayList: readDir>result: [{"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T08:10:25.000Z, "name": "speech1.m4a", "path": "/data/user/0/com.vtchat/files/speech1.m4a", "size": 361115}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T09:43:18.000Z, "name": "ReactNativeDevBundle.js", "path": "/data/user/0/com.vtchat/files/ReactNativeDevBundle.js", "size": 5366095}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T08:10:59.000Z, "name": "speech2.m4a", "path": "/data/user/0/com.vtchat/files/speech2.m4a", "size": 335771}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T08:11:36.000Z, "name": "speech3.m4a", "path": "/data/user/0/com.vtchat/files/speech3.m4a", "size": 364187}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T08:12:09.000Z, "name": "speech4.m4a", "path": "/data/user/0/com.vtchat/files/speech4.m4a", "size": 330395}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T08:12:45.000Z, "name": "speech5.m4a", "path": "/data/user/0/com.vtchat/files/speech5.m4a", "size": 354203}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-04-21T08:13:20.000Z, "name": "speech6.m4a", "path": "/data/user/0/com.vtchat/files/speech6.m4a", "size": 358811}]
LOG PlayList: Can't find variable: startResult undefined
LOG PlayList: sound open-success?
LOG PlayList: sound open-true
LOG PlayList: end playing true
LOG permission granted
---------------------------------------------------

*チャット音声(.m4a)再生画面の下に黄色いワーニングが出ています。
20200421_2.jpg

チャットの方に出たワーニングは、nodeコマンドプロンプトに出ているワーニングと同じ内容のようです。「Warning:componentWillMount has been renamed, and is not recommended for use. See https://fb.・・・・」
音声(.m4a)再生の方に出たワーニングは、「Warning:Each child in a list should have a unique "key" prop, "...」

*チャットの動作は、サーバへの接続に失敗しています。
 当然です。サーバのIP指定がエミュレータ用になってますから。

*音声(.m4a)再生は音が聞こえません。
 原因は、よくわかりません。エラーめいたLOGも出てない。

*音声認識&録音は、スマフォの内蔵マイクでの入力で問題なく動作しました。


デバッガが接続されない件は、しばしおいといて、上記のエラーについて対策していきます。

-ちょっと脱線:スマフォのスクリーンショット-
たぶんスマフォ毎に違うのかもしれませんが、テスト用に使ってた富士通arrowsM03の場合、PowerボタンとVolumeDownボタンを同時に押して、押したままにして1秒くらいでスクリーンショットが撮れるようです。
撮った画像は、スマフォ上の「ギャラリー」で見ることができます。
PCへの取り出しは、
1)USBでPCに接続します。
2)スマフォの画面の上(画面外)から下にスワイプするとメニューが出ます。
3)たぶん一番下に「USBを充電に使用」というのがあります。それをタップします。
4)「USBの使用」と題して、オプション項目が表示されるので、「ファイル転送」を選択します。
5)そうすると、PC側のエクスプローラーで操作することができます。
パスは、「PC\arrowsM03\内部ストレージ\Pictures\Screenshots」です。





◆エラーメッセージからデバッグ
1)componentWillMount()使用禁止?
まずは、チャット機能で出た「componentWillMount」がなんちゃらかんちゃらのワーニングです。
ともかく、本家の説明(https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)をブラウザの翻訳で、斜めに読んでみました。
まるで、アメリカンジョークの言い回しようで、何言ってるのかさっぱり分かりませんでした。

たぶん、componentWillMount()は使い方を誤解されている事例があって、危険なんだとか。
しばらくは、頭にUNSAFE_と付けたメソッド(ライフサイクル)を準備するので、それに書き換えて危険を認識しといてくれ?(要らない気がする。)
UNSAFE_は同じタイミングでコールするけど、そのうちそれも使えないようにする・・・のかな?
代わりのメソッド(ライフサイクル:getDerivedStateFromProps)を使ってくれと言ってるのかな?

「Chat.jsのcomponentWillMountでは、WebSocketI/Fの初期化をしてるだけなのでいいですとも。」と安請け合いしてみた。

ところが、componentWillMountを「static getDerivedStateFromProps(props, state)」と置き換えたら・・・
これまで問題なく?動作していたメッセージ送信処理が動かなくなった。this.ws.sendがundefinedとかどうとか。

getDerivedStateFromPropsの中で「this.ws(WebSocketオブジェクト)」を初期化した場合、他のところで「this.ws」を参照しようとすると未定義らしい。
お恥ずかしい話、さるはJavaScriptのクラス(コンポーネント)内の「this」の使い方を未だに理解できていないみたい。
それと、getDerivedStateFromPropsは1度しか呼ばれないのかなーと思ったら何回も呼ばれます。ここも認識不足。
なので、componentWillMountの代わりは、getDerivedStateFromPropsは使わず、constructorにしました。

これで、この件のワーニングは解消です。


2).m4aの再生で音が聞こえない
スマフォに出ている黄色いワーニングは一旦置いて、
まずは、このスマフォ自体で音声ファイルを再生して、音が聞こえるのかを試したい。

以下の手順で音が出るか確認しました。
-PC(AVDエミュレータ)でアプリを試したときの音源をWindows配下のフォルダに取り出します。
 -コマンドプロンプトを開く
 -カレントをAndroid SDKインストール先のplatform-toolsに変更
 -以下のコマンドを実行
  adb pull /data/user/0/com./files/speechN.m4a C:\<任意のフォルダ>
-スマフォをPCに接続します。
-PC側のエクスプローラーで「PC\スマフォ名」のアイコンが出たら開いて見ます。
-何もファイルがないと出た場合、
 ここ前の「ちょっと脱線」で書いた手順で、USB接続を「ファイル転送」にします。
-PC側のエクスプローラーで以下のパスに、speechN.m4aをコピーします。
 PC\arrowsM03\内部ストレージ\Music

-再生用のアプリをスマフォにインストールします。
 さるは「Google Play ミュージック」をインストールしました。
 なので、それでの再生手順を以下に。
-「Google Play ミュージック」を起動します。
 -中程に「最近のアクティビティ」と表示された画面が出ます。
 -右側のグレーのアイコン(Music)をタップします。
 -※他の操作が必要になるかもしれませんが、
  コピーした「SpeechN」も表示されるのでタップすると再生されます。

(注意)
1)Musicフォルダに初期状態では何も音源が入っていない状態です。
 その状態で、「Google Play ミュージック」を起動すると、何をしても「定期購入」に誘導する画面しか出ません。
2)当たり前ですが、マナーモード時は、内蔵スピーカーから音は出ません。
 マナーモード解除は、画面上部(外)から下にスワイプすると「マナー」を解除できる表示が出ます。


.m4aは再生できました。

この状態で作ったアプリの音声(.m4a)再生をやったら、音が出ました。

あはは、単にマナーモードになってただけかも。


3)音声再生でワーニング
黄色いワーニングの出ている場合、メッセージをタップすると内容をフル画面で表示してくれます。
(ちなみに「Dismiss All」と書いてるところをタップすると消えちゃいます。)
20200421_3.jpg
がしかし、黄色い背景に白字なので、非常に読みにくい。
かろうじて、ここを見ろ的な本家URL(https://fb.me/react-warning-keys)をブラウズしてみた。

なぜかReactのリストとキーの解説でした。意図が・・・?
ワーニングメッセージをちゃんと読みます。
Warning:Each child in a list should have a unique "key" prop."...
「リスト中の各要素(子供)は、ユニークなkeyを持ってなきゃね。」と言ってるようです。
「"」が3か所にあるのは何を意図してるんでしょう。

フル画面で表示したワーニングメッセージ中には発生個所も出てる。
再生用の音源ファイル名を表示しているボタン(<Button />)を作成している箇所を指してます。
「key」という必須属性が<Button />にはあるのか?とか思い、調べましたが無かった。
・・・・・・・・・・・・・
もしかして、JSXの<コンポーネント>の記述の中に「//コメント」が入ってるから?
消してみたけど変化なし。
<Button />の属性指定を色々弄ってみたけど、変化なし。
listってどれのこと?"key"って何~

結局は、Reactのコンポーネントには「key」という属性が指定できて、それがユニークな値に設定されてないとダメよという意味だったらしい。
「React Native <Button /> Property」でいくらググっても出てこないわけだ。

「key={item.name}」と追加したら消えた。


-ちょっと余談:スマフォをHUBに挿したらHUBの電気が切れた-
たぶんスマフォ毎に違うのかもしれませんが、スマフォをPCにUSBで接続すると最初は充電モードで接続される。
ファイル転送するときは、接続してからUSBのモードを変更してたが、「開発者向けオプション」の中に「USB設定の選択」というのがあって、そこでファイル転送のモード(MTP、PTP、RNDIS、・・・)が選べた。毎回設定するのも面倒だと思って、「MTP」を選択してやった。

しばらくしてから、PCに接続していたHUB(バスパワー)にスマフォを接続すると、HUBの電気が切れる(接続していたバスパワー動作のUSBデバイスも電源が落ちる。)現象が出た。PCには通常のTypeAのUSB口が一個しかなくて、開発環境一式が入っているHDD(SSD)をHUB経由で接続していて、スマフォを接続すると電気が切れるので、テストできない状態になった。スマフォをPCに直結しても認識されない。HUB経由の場合は、認識されないだけならまだしも給電に影響するので困ってしまった。
ちょっと前まで使えてたのになんで?
PCは満充電状態にしてみたり、HUB/ケーブルを変えてみたり、しばらく色々試して、スマフォを別のPCに接続してみた。やっぱり認識されなかった。スマフォが壊れた?
「そういえば」と思って「MTP」に設定してあったスマフォのUSB設定を「充電」に戻したら解決した。
ファイル転送(MTP)に設定するのは接続してからじゃないとダメらしい。
ちゃんちゃん。



5)チャットサーバーとの接続
これまでは、開発PC上のチャットサーバと同じPC上で動作するエミュレータとを接続する環境だったのでちょとお気楽だった。
さて、実機スマフォに分かれてしまうと、まずはネットワークをどうするか、チャットサーバをどこに置くか、そっからです。

まあ、当然、チャットサーバは、これまで使ってた開発用PCなわけだから、ピアツーピア接続か、モバイルルータ経由ということになるのかな。
ルータ経由接続を試してみます。

ルータ側の設定が必要ですよね。
普通、それぞれのデバイスが外のネットワークに接続するようになってるから、ルータに接続したモノ同士の通信って・・・
ブリッジモードとか言われている機能とかがあるのかな?

使っていたポケットWiFi(AU)をいじいじしてみましたが、手元に取説もないのでさっぱり分かりません。
家にもう一つ使ってないルータ(Logtec)がありました。家庭内LANにしようと思ってずいぶん前に買ったものです。

買った当時、ケーブルテレビのモデム?に接続して使おうとしましたが、チャント設定できなくて諦めてたやつです。
単にAP(HUB)として使うんだったら行けるんじゃないかと使い始めましたが、APモードに設定して接続確認すると、PCは接続できるんですが、スマフォがIP取得で失敗します。
ぐぐったら、APにルーターが接続されてないと失敗するようなことが書いてあった。

再度ケーブルテレビの環境に接続して見ました。
以前、このルーター(AP)を使おうとしたときからは、ケーブルテレビ側の環境もすっかり変わってました。モデムっぽい機械の先にWiFiルーターが繋がっていたので、さらにその先に引っ張り出してきたルーター(AP)を接続させてみたら、スマフォ側のIP取得も成功した。

まずは、PC側からpingを打ってみました。OKです。
次に、PC側のApacheを起動して、スマフォ側ブラウザから「http://(PC側IP)」ブラウズした。OKです。
ならばと、作ったアプリの「chatserver.json」で設定してあるIPを今のサーバPCのIPに変更して、「react-native run-android」して見た。
うまく行きましたー。


◆音質は良くなったのか?
実機を使い始めた理由の一つに、エミュレータだとどうも雑音みたいなプツプツ音が混ざっていて、
「それで、音声認識の認識率が落ちる?」と思ったから。

なので、音声認識時に録音した音声の再生を良く聞いてみた。
(スマフォの内蔵スピーカーってあまり大きく音が出せないのかな。)
電話のように耳をくっつけて聞いて見たが、音が小さくてよくわからない。

Bluetoothのヘッドセットを接続して試しました。
これだと、よく聞こえる。内蔵マイクの音も問題ないレベル。

ついでにヘッドセットのマイクで音が拾えるかどうかを試した。
エミュレータでやってた時に比べると音量・音質は良くなってました。
ヘッドセットのマイクでは音が拾えないと思っていたけど割かし入っているみたい。

でも、音声認識の状態は?と言えば、それ程よくはない。むしろ悪い。
まったりとレスポンスを返すので、認識してると分かるまでちょっとタイミングが合わない。
通信速度がなんだか遅いせい?
たぶん古い無線LAN-APのせいではないかと。


◆デバッガの起動
うっかり、忘れるところでした。
デバッガをどうやって起動するんだ!

-非デバッグモードでアプリを起動している状態にして、
nodeコマンドプロンプトにフォーカスして「d」キーを押します。
-スマフォの画面上のエミュレータのとき同様にメニューが表示されます。
-2番目の「Debug」を選択する。
-Chrome上にいつものデベロッパーツールの起動誘導画面が出て
-アプリがリロードされます。仕掛けてあったBreakPointで一時停止しました。

あれ?出来んじゃないの。




最後は思いがけず、イメージしてたものに近い構成のテスト環境になった。
音声認識は外部サーバ(クラウド)、チャットは内部のサーバ。

いやー、でもわりと難儀しました。


さて、あと準備したい大きな機能項目として、スタンドアロンの音声認識があったのですが、
ちょっと、その機能は少し後回しにして、「音声認識を利用したチャット」のサーバー側の方に移ります。
React-Nativeから少し離れるかと思います。

では、この話はこの辺で。ご機嫌よう。
m(__)m
スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR