FC2ブログ

スマフォのアプリを作りたい(14):音声認識させたい②

   プログラミング [2020/02/20]
前回は、
・Google Cloud Speech to Textの利用者登録をして、
・Androidエミュレータのマイク入力設定をやり、
・react-native-google-speech-apiの嘘くさいインストールをやって、
・勢い余ってreact-native-google-speechもインストールし、
・音声認識のサンプルコードをプロジェクトに取り込んだ
ところまででした。

その続きをやってみたときのメモです。
カオスというかパニックというか・・・
ともかく、ひっちゃかめっちゃかです。

なので、この回は初心な方には読む価値なしです。

さるはバカなので、やっていることのほとんどは闇雲です。
なので、すぐトラブルになります。
失敗して、やり直し、手戻り続きです。

本当は、そこを省いて成功手順だけ書けば親切なんでしょうが、自分のための備忘録なので、全部載せます。
同じエラー(メッセージ)に遭遇した時とかに何かの足しに・・・なるのかなぁ。


今回、
・react-native-google-speechを含んだ環境で発生した各エラーについて
 →◆サンプルのビルド(react-native-google-speech有り)

・react-native-google-speech-apiのnpm installでENOVERSIONSの発生の対策
 →◆react-native-google-speech-apiのインストールし直し

・react-native-google-speech-api追加後のビルド失敗から環境破壊
 →◆サンプルのビルドからパニック

・プロジェクトの再構築からビルドが通るようになるまで
 →◆環境を作り直し~react-native-google-speech-apiビルド

最後だけが、「もしかしたら参考になるかも」です。


◆サンプルのビルド(react-native-google-speech有り)
果たして動くんでしょうか。
「react-native run-android」を実行し、ビルドを行って見ます。

当然、すんなりとはビルドは通りませんでした。

最初にreact-native-google-speech-apiの「手動インストール」の入力ミスでエラーが出ました。
そこからです。

1回目:Unable to delete directory
----コマンドプロンプト-----------------------------

What went wrong:
Execution failed for task ':react-native-google-speech:generateDebugBuildConfig'.
> java.io.IOException: Unable to delete directory (プロジェクトフォルダ)\node_modules\react-native-google-speech\android\build\generated\source\buildConfig\debug\com\prayagad.

---------------------------------------------------
→この前の実行で、フォルダが中途半端に作成されたままになったみたいです。
「・・・buildConfig\debug・・・」のdebug以下を一旦削除して、「react-native-google-speech」フォルダへのアクセス権がなぜか制限されてたので、フルアクセスに変更してあげました。

2回目:Annotation processors must be explicitly declared now.
----コマンドプロンプト-----------------------------

> Task :react-native-google-speech:javaPreCompileDebug 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
27 actionable tasks: 6 executed, 21 up-to-date

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-google-speech:javaPreCompileDebug'.
> Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor. Please add them to the annotationProcessor configuration.
- auto-value-1.1.jar (com.google.auto.value:auto-value:1.1)
Alternatively, set android.defaultConfig.javaCompileOptions.annotationProcessorOptions.includeCompileClasspath = true to continue with previous behavior. Note that this option is deprecated and will be removed in the future.
See https://developer.android.com/r/tools/annotation-processor-error-message.html for more details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

---------------------------------------------------
→上記のメッセージ後にもう一回別の「FAILURE:」が表示されているが、「What went wrong:」の内容が同一なので、割愛する。

どうも『Gradle 6.0としては、よくない機能が使われた』と言ってるような・・・

またもや、新単語。Gradleって何よ!
一言で言えば「ビルドシステム」だそうです。つまり、ビルドの手順をJVM上で動くスクリプト(Groovyと呼ばれる。)で書けるとあります。
はぁ・・・そっそうなんですか・・・

で、その後のメッセージは『やろうとした「react-native-google-speech:javaPreCompileDebug」というのが失敗しちまったぜ。何が悪かったって、annotationProcessorは今でははっきり指定しないといけないってことよ。compile classpathで指定されているdependenciesがannotation processorを含んでいるから、以下の指定を追加してみろよ。別の方法もあるっちゃぁあるんだが・・・』って言ってるのかなぁ。
全く・・・訳してみても意味が理解できません。
何言ってんの?どこのファイルのこと?

どうも「annotationProcessor」指定というのは、(プロジェクトフォルダ)\node_modules\(パッケージフォルダ)\android\build.gradleで指定するものらしい。
あちこち見て回って、理解はしてないけど、以下のように指定を突っ込んだ。
----build.gradle-----------------------------------
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')


// https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
compile group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.8.5'

// added for Gradle error comment
annotationProcessor "com.google.auto.value:auto-value:1.1"


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



まだまだ、この調子で続きます。



3回目:android.enableSeparateAnnotationProcessing=true in the gradle.properties
----コマンドプロンプト-----------------------------
> Task :react-native-google-speech:compileDebugJavaWithJavac
Gradle may disable incremental compilation as the following annotation processors are not incremental: auto-value-1.1.jar (com.google.auto.value:auto-value:1.1).
Consider setting the experimental feature flag android.enableSeparateAnnotationProcessing=true in the gradle.properties file to run annotation processing in a separate task and make compilation incremental.

> Task :react-native-google-speech: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: 2 executed, 26 up-to-date
D:\AppMake\proj\VTChat\node_modules\react-native-google-speech\android\src\main\java\com\prayagad\speech\utils\RNGoogleSpeechPackage.java:28: ?G???[: ???\?b?h??X?[?p?[?^?C?v????\?b?h?? ?I?[?o?[???C?h???????????????
@Override
^
?G???[1??

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-google-speech:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
---------------------------------------------------
→自分で「auto-value-1.1.jar・・・」指定しろって言ってて、インクリメンタル?じゃないから、インクリメンタル・・・無効かもしんないって、何?。
しかも今度は、gradle.propertiesで「android.enableSeparateAnnotationProcessing=true」って指定してみろ?
しかも、その後文字化けしてるし。
しょうがないので、build.gradleファイルと同じ並びに新しくgradle.propertiesというファイルを作成して、上記の1行を入れてみた。

4回目:Gradleメッセージの文字化け
----コマンドプロンプト-----------------------------

> Task :react-native-google-speech: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
29 actionable tasks: 2 executed, 27 up-to-date
D:\AppMake\proj\VTChat\node_modules\react-native-google-speech\android\src\main\java\com\prayagad\speech\utils\RNGoogleSpeechPackage.java:28: ?G???[: ???\?b?h??X?[?p?[?^?C?v????\?b?h?? ?I?[?o?[???C?h???????????????
@Override
^
?G???[1??

FAILURE: Build failed with an exception.

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

---------------------------------------------------
→結局、文字化けメッセージが残りました。
文字化けを解消するには、環境変数の設定「set _JAVA_OPTIONS=-Duser.language=en」とやるといいみたい。
やってみた。

5回目:method does not override or implement a method from a supertype @Override
----コマンドプロンプト-----------------------------

> Task :react-native-google-speech: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
29 actionable tasks: 2 executed, 27 up-to-date
D:\AppMake\proj\VTChat\node_modules\react-native-google-speech\android\src\main\java\com\prayagad\speech\utils\RNGoogleSpeechPackage.java:28: error: method does not override or implement a method from a supertype
@Override
^
1 error

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-google-speech:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
---------------------------------------------------
→文字化けは解消できた。でもコード中の「@Override」がダメっぽいメッセージ。フツーに使っている記述だからソースのバグではないだろう。
何がビルド設定として足りてない?
検索した結果、色々な対策パターンの提示があったものの、場合場合があるようで何が最適なのか良くわかりませんでした。
対処の仕方を理解するのも大変でした。

「@Override自体をソースから削除しちゃう」という最もやりたくないけど、安易な方法が提示されてました。
「node_modules\react-native-google-speech\android\src\main\java\com\prayagad\speech\utils\RNGoogleSpeechPackage.java」を編集して「@Override」行をコメントアウトしました。

これで、react-native-google-speechのGradleで発生するFAILEDは出なくなりました。


ここに来て、FAILEDまでに至る問題は、react-native-google-speechのビルドであって、-apiではないことをもう一度考えます。
react-native-google-speechをアンインストールして無かったことにするか、
あるいは、このまま意味の分からないアラートを順次回避していくのか。
迷います。

メッセージを遡ってみるとreact-native-google-speech-apiでもワーニングが出ている。
----コマンドプロンプト-----------------------------

> 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.

---------------------------------------------------
放置でイイのかダメなのか判断付かない。

悩んだ挙句、そのまま続けたのですが、
今度はreact-native-reanimated、@react-native-communityとかでそれぞれ、react-native-google-speechの1回目、2回目と同じエラーが出ます。

やっぱり、パッケージのソースにこれ以上手を入れるのは止めにしたい。
なので、「npm remove install react-native-google-speech --save」でreact-native-google-speechをアンインストールしました。
バックアップのつもりでreact-native-google-speech.bakというコピーをnode_moduleフォルダ下に作った上でremoveを実施したのですが、どういうわけか、react-native-google-speech、react-native-google-speech.bak、さらにreact-native-google-speech-apiフォルダまでもが、綺麗に無くなってました。

振り出しに戻る。


◆react-native-google-speech-apiのインストールし直し
前回「npm install react-native-google-speech-api --save」とやったら、「npm ERR! code ENOVERSIONS」と出てパッケージインストールが失敗した。このエラーが出てしまったのは、どうもさるだけではないようでダウンロード元のサイトの「Issue」にも相談が寄せられてた。ただし、未回答=未解決。

その回答・解決を待つほど心に余裕がないもので、他の対策を再度探してみます。

以降のURLのサイトをアサッてみました。少しは学習しないと・・・

参考:https://qiita.com/propella/items/6f1bb5db5225fba6cd85
独自にパッケージを作成してnpm registory(npmでインストールできるように登録)する方法?が書いてあるみたい。

参考:https://keiita.hatenablog.com/entry/2019/08/12/175808
package.jsonのdependencies/devDependenciesとかの解説。

参考:http://nekootoko3.hatenablog.com/entry/2018/05/04/174431
「npm install」時のオプションについて。

やっと、パッケージ名のところに「ローカルパス/モジュール名」との記述を発見。
参考:https://teratail.com/questions/71108
参考:https://efcl.info/2014/10/04/npm2-local-module/

ダウンロードしてあったreact-native-google-speech-api-master.zipを適当な場所に解凍して「npm install ローカルパス/解凍先フォルダ名 --save」を実行してみました。
----コマンドプロンプト-----------------------------
d:\AppMake\proj\VTChat>npm install d:\appmake\temp\react-native-google-speech-api-master --save
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react-native-google-speech-api@1.0.0
added 1 package and audited 952807 packages in 61.251s

19 packages are looking for funding
run `npm fund` for details

found 6 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
---------------------------------------------------

いつも通り、ワーニングは出てますがいけたみたいです。

インストール先のプロジェクトのpackage.jsonには、以下の行が追加されてました。
----package.json-----------------------------------
{
"name": "VTChat",
"version": "0.0.1",

},
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.3",
"react-native-gifted-chat": "^0.13.0",
"react-native-google-speech-api": "file:../../temp/react-native-google-speech-api-master",
"react-native-reanimated": "^1.7.0",
"react-native-router-flux": "^4.2.0",
"react-native-websocket": "^1.0.2"
},

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

バージョン番号ではなくて、インストール元のパスが書かれてますね。
いいのかな。

react-native-google-speech-api提供元のサイト(https://github.com/KWRI/react-native-google-speech-api)に書いてあった「マニュアルインストール」についても状況を見てみました。
それらの手動で変更を加えた部分に関しては、変化なしで、残っていました。
※詳細は、前回記事「◆react-native-google-speech-apiのインストール」の2)を参照してください。


◆サンプルのビルドからパニック
「react-native run-android」を実行し、ビルドを行って見ます。

----コマンドプロンプト-----------------------------
d:\AppMake\proj\VTChat>react-native run-android


Starting a Gradle Daemon (subsequent builds will be faster)
:ReactNative:Failed to parse React Native CLI configuration: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object

The current character read is 'E' with an int value of 69
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
Error: EPERM: operation not permitted, scandir 'd:/AppMake/proj/VTChat/android/app/build/intermediates/signing_config/debug/out/signing-config.json' at Object.readdirSync (fs.js:854:3) at GlobSync._readdir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:288:41) at GlobSync._readdirInGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:267:20) at GlobSync._readdir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:276:17) at GlobSync._processReaddir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:137:22) at GlobSync._process (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:132:10) at GlobSync._processGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:380:10) at GlobSync._process (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:130:10) at GlobSync._processGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:383:10) at GlobSync._process (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:130:10)
^

FAILURE: Build failed with an exception.

* Where:
Script 'D:\AppMake\proj\VTChat\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 200

* What went wrong:
A problem occurred evaluating script.
> Failed to parse React Native CLI configuration. Expected running 'npx.cmd --quiet --no-install react-native config' command from 'D:\AppMake\proj\VTChat' directory to output valid JSON, but it didn't. This may be caused by npx resolving to a legacy global react-native binary. Please make sure to uninstall any global 'react-native' binaries: 'npm uninstall -g react-native react-native-cli' and try again

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 49s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
:ReactNative:Failed to parse React Native CLI configuration: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object

The current character read is 'E' with an int value of 69
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
Error: EPERM: operation not permitted, scandir 'd:/AppMake/proj/VTChat/android/app/build/intermediates/signing_config/debug/out/signing-config.json' at Object.readdirSync (fs.js:854:3) at GlobSync._readdir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:288:41) at GlobSync._readdirInGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:267:20) at GlobSync._readdir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:276:17) at GlobSync._processReaddir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:137:22) at GlobSync._process (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:132:10) at GlobSync._processGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:380:10) at GlobSync._process (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:130:10) at GlobSync._processGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:383:10) at GlobSync._process (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:130:10)
^

FAILURE: Build failed with an exception.

* Where:
Script 'D:\AppMake\proj\VTChat\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 200

* What went wrong:
A problem occurred evaluating script.
> Failed to parse React Native CLI configuration. Expected running 'npx.cmd --quiet --no-install react-native config' command from 'D:\AppMake\proj\VTChat' directory to output valid JSON, but it didn't. This may be caused by npx resolving to a legacy global react-native binary. Please make sure to uninstall any global 'react-native' binaries: 'npm uninstall -g react-native react-native-cli' and try again

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 49s

at checkExecSyncError (child_process.js:621:11)
at execFileSync (child_process.js:639:15)
at runOnAllDevices (d:\AppMake\proj\VTChat\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Command.handleAction (d:\AppMake\proj\VTChat\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:164:9)
---------------------------------------------------

もう、とほほ~としか言いようがない。

同様のエラーが発生したというサイトがありました。
参考:https://github.com/react-native-community/cli/issues/890
参考:https://github.com/react-native-community/cli/issues/863
小手先のというか、できるだけ軽いコマンドとかで、なんとやって色々やってみた。

1)『「react-native start」とやって、それを強制終了して、「cd android」でカレントを変更してから「gradle clean」をやる。』
ちょっと「強制終了」ってどうなのよ、タイミングは?とか思ったものの、やってみた。
「gradle clean」がエラーで最後まで行かなかった。
----コマンドプロンプト-----------------------------
d:\AppMake\proj\VTChat>cd android

d:\AppMake\proj\VTChat\android>gradlew clean
Starting a Gradle Daemon (subsequent builds will be faster)

Error: EPERM: operation not permitted, scandir 'd:/AppMake/proj/VTChat/android/app/build/intermediates/signing_config/debug/out/signing-config.json'

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

「react-native run-android」のときと同じようなエラーです。
この状態で、「react-native run-android」を再実行しましたが、同じエラーが出ました。

さらに「npx.cmd --quiet --no-install react-native config」を実行。
意味は分かりません。闇雲です。
----コマンドプロンプト-----------------------------
d:\AppMake\proj\VTChat>npx.cmd --quiet --no-install react-native config
error EPERM: operation not permitted, scandir 'd:/AppMake/proj/VTChat/android/app/build/intermediates/signing_config/debug/out/signing-config.json'. Run CLI with --verbose flag for more details.
Error: EPERM: operation not permitted, scandir 'd:/AppMake/proj/VTChat/android/app/build/intermediates/signing_config/debug/out/signing-config.json'
at Object.readdirSync (fs.js:854:3)
at GlobSync._readdir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:288:41)
at GlobSync._readdirInGlobStar (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:267:20)
at GlobSync._readdir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:276:17)
at GlobSync._processReaddir (d:\AppMake\proj\VTChat\node_modules\glob\sync.js:137:22)


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

やっぱ、同じようなエラーです。

「npx react-native init プロジェクト --version x.xx.x」とやったら上手くいった的なコメントもあったので、やってみました。
----コマンドプロンプト-----------------------------
d:\AppMake\proj\VTChat>react-native --version
react-native-cli: 2.0.1
react-native: 0.61.5

d:\AppMake\proj\VTChat>npx react-native init VTChat --version 0.61.5
:
√ Processing template
× Installing dependencies
error Error: Command failed: npm install
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated core-js@1.2.7: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
:
---------------------------------------------------

これまた、エラーです。
でも、「react-native run-android」を試したら、
----コマンドプロンプト-----------------------------
d:\AppMake\proj\VTChat>react-native run-android

* What went wrong:
A problem occurred evaluating script.
> Failed to parse React Native CLI configuration. Expected running 'npx.cmd --quiet --no-install react-native config' command from 'D:\AppMake\proj\VTChat' directory to output valid JSON, but it didn't. This may be caused by npx resolving to a legacy global react-native binary. Please make sure to uninstall any global 'react-native' binaries: 'npm uninstall -g react-native react-native-cli' and try again

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

今度は、何が良くないかが変わりました。
前にやったコマンドがダメだったそうです。
悪化してます。もうドツボです。
このプロジェクトの環境は使えないのではないかな。
なので、一からやり直します。


◆環境を作り直し~react-native-google-speech-apiビルド

1)現状の怪しいプロジェクトフォルダのバックアップ
プロジェクトフォルダをリネーム(+.bak)します。
環境作成開始から、弄らないとビルドできなかったファイルもあったので、その参考にするため。


2)テンプレートのインストール
2-1)コマンドプロンプトを起動しプロジェクトを作りたいフォルダにカレントを移動

2-2)「react-native init プロジェクト名 --template typescript」コマンドを実行
→正常動作したようだ。

2-3)「node_modules\metro-config\src\defaults\blacklist.js」の修正
→初回のときと内容が変わっていた。修正しなかった。
 まずかったときの内容は、こちらの「◆React Nativeのプロジェクトの実行」をご参照ください。

2-4)「metro.config.js」の修正
既存の記述に以下を追加します。
----metro.config.js--------------------------------

// BLACKLIST for DuplicateError of Metro Bulender
const blacklist = require('metro-config/src/defaults/blacklist');

// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.

module.exports = {
resolver: {
blacklistRE: blacklist([/template\/.*/])
}
};
---------------------------------------------------

2-5)コマンドプロンプトのカレントをプロジェクトフォルダに変更

2-6)「react-native run-android」を実行
「Welcome React Native」画面が出ました。

2-7)起動したエミュレータは終了させます。


3)チャットアプリへの変更
動いた時の前のソースとかは、バックアップを取ってありました。
3-1)旧チャット動作確認時ソース(App.js、Chat.js、chatserver.json)をプロジェクトフォルダに復活

3-2)コマンドプロンプトで「npm install react-native-gifted-chat --save」実行

3-3)同じく「npm install react-native-router-flux --save」実行

3-4)同じく「npm install react-native-gesture-handler --save」実行

3-5)同じく「npm install react-native-reanimated --save」実行
→各「npm install ・・・」はエラーでなければOK。WARNは出る。

3-6)コマンドプロンプトを一旦閉じて、再起動

3-7)「set _JAVA_OPTIONS=-Duser.language=en」を実行(環境変数に登録してもOK)

3-8)「プロジェクトフォルダ\android」フォルダに、現在のユーザに対するフルアクセスを許可する

3-9)「react-native run-android」を実行
チャットアプリの画面が出ました。

3-10)チャットサーバ起動
→詳細はこちらをご参照ください。

3-11)チャット動作を確認
何とか動きました

実は、この手順を確認してる間に、何度かエラーが発生しました。
3-7)、3-8)の手順は、その対策の意味です。
それと、以下のエラーも出ました。

error: bundling failed: Error: Unable to resolve module `react-native-screens` from `node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js`: react-native-screens could not be found within the project.

上記に対しては「npm install --save react-native-gesture-handler react-native-reanimated react-native-screens」ってやったら解消されました。

4)バックアップ
ここで、プロジェクトフォルダごと、コピーを作成しました。

5)再度react-native-google-speech-apiインストール
5-1)「npm install ダウンロードClone展開先\react-native-google-speech-api-master --save」実行

※この後再度、闇雲試行錯誤になってます。
必要だった対策は3点(以下朱書き)くらいだと思います。
リトライするだけで、エラーの内容が変化していく場合もあるので、本当に迷走しました。


5-2)「react-native run-android」を実行

#1:
Updating Google Cloud Speech API protobuf gradle to 0.8.5 duplicate libraries

参考:https://stackoverflow.com/questions/49811232/updating-google-cloud-speech-api-protobuf-gradle-to-0-8-5-duplicate-libraries

node_module\react-native-google-speech-api\android\build.gradle 無修正
android\build.gladle 修正
----android\build.gradle---------------------------

dependencies {
classpath("com.android.tools.build:gradle:3.4.2")
//*** added for google-speech-api by sarumosunaru
classpath 'com.google.protobuf:protobuf-gradle-plugin:0.8.9'


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


#2:
> 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.

参考:https://translate.google.com/translate?hl=ja&sl=en&u=https://stackoverflow.com/questions/52470044/warning-api-variant-getjavacompile-is-obsolete-and-has-been-replaced-with&prev=search

FAILEDではないので放置

#3:
Execution failed for task ':react-native-gesture-handler:generateDebugBuildConfig'.
> Could not read path 'D:\AppMake\proj\VTChat\node_modules\react-native-gesture-handler\android\build\generated\source\buildConfig\debug\com\swmansion\gesturehandler'.

「npm update react-native-gesture-handler」実行
ただし、「・・・\gesturehandler」フォルダが無いのであれば、以下#同様に作ってあげるだけでよいかも。

#4:
Execution failed for task ':app:transformClassesWithDexBuilderForDebug'.
> Could not read path 'D:\AppMake\proj\VTChat\android\app\build\intermediates\transforms\dexBuilder\debug\129\androidx\appcompat\resources'.

a)android\build.gradleに以下追加→× エラーになったので結局削除
(android¥build.gradleではなく、android ¥app¥build.gradleに入れるべき内容だったのかな?)
----android\build.gradle---------------------------
defaultConfig {
multiDexEnabled true
}
---------------------------------------------------

b)「(ユーザフォルダ)\.gradle\caches」を削除
 「gradlew cleanBuildCache」×(カレントを「(プロジェクトフォルダ)\android」にしないと実行できないことが後で分かる)

#5:
Execution failed for task ':app:transformClassesWithDexBuilderForDebug'.
> Could not read path 'D:\AppMake\proj\VTChat\android\app\build\intermediates\transforms\dexBuilder\debug\129\androidx\arch\core'.

coreフォルダを作ってやった

#6:
Execution failed for task ':app:transformClassesWithDexBuilderForDebug'.
> Could not read path 'D:\AppMake\proj\VTChat\android\app\build\intermediates\transforms\dexBuilder\debug\129\androidx\asynclayoutinflater'.

asynclayoutinflaterフォルダを作ってやった

#7:
Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
The number of method references in a .dex file cannot exceed 64K.
Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

参考:http://daponta.hatenablog.com/entry/2017/05/11/163059

a)android\build.gradleに以下追加→× エラーになるので結局削除
(android¥build.gradleではなく、android ¥app¥build.gradleに入れるべき内容だったのかな?)
----android\build.gradle---------------------------
:
android {
dexOptions {
jumboMode true
}
}
---------------------------------------------------

参考:https://developer.android.com/studio/build/multidex

b)android\build.gradleの「minSdkVersion = 16」を21に変更
----android\build.gradle---------------------------

//minSdkVersion = 16
minSdkVersion = 21


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


※#2のワーニングを放置したままですが、なんとかビルドが通るようになりました。

5-3)ソースの修正
ソースは、最初にとってあったバックアップからApp.jsとSpeech.jsを持ってくるだけです。
ソースの内容は前回記事「◆味見コードの作成」を参照してください。

5-4)「react-native run-android」を実行
あっさり動いたみたいです。以下のような画面になりました。
20200220_1.jpg

※ここに来て、「react-native-google-speech-api」のダウンロード元のサイトに書いてあった「Manual Install」と題した各種設定ファイルの編集のことをすっかり忘れていたのに気付きました。
やってみたけど、却ってエラー(「自動リンクされているから余計なことをするな」みたいな。)が出ただけで、5-2)#2のワーニングはやっぱり消えなかった。

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- react-native-google-speech-api (to unlink run: "react-native unlink react-native-google-speech-api")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.

なので、以下の修正のみ残しました。

「(プロジェクトフォルダ)\android\app\src\main\java\com\(プロジェクト名)\MainApplication.java」
----MainApplication.java--------------------------

import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import com.reactlibrary.GoogleSpeechApiPackage; //for google-speech-api
import java.lang.reflect.InvocationTargetException;
import java.util.List;

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

「(プロジェクトフォルダ)\android\settings.gradle」未修整
----settings.gradle--------------------------------
rootProject.name = 'VTChat'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
---------------------------------------------------

「(プロジェクトフォルダ)\android\app\build.gradle」
----build.gradle-----------------------------------

android {

defaultConfig {
applicationId "com.vtchat"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
multiDexEnabled true //for google-speech-api
}


dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'androidx.multidex:multidex:2.0.1' //for google-speech-api

if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";

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

「(プロジェクトフォルダ)\android\app\src\main\AndroidManifest.xml」
----AndroidManifest.xml----------------------------
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.vtchat">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"

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


取り合えず以上です。



この先ちゃんとした?アプリを作るかもしれないのに、こんな不安定な環境で大丈夫なのか不安です。
だって、まずは統一された情報源がない/トラブルの事例記事はあるが対策例が多様/GitHubされているパッケージ仕様が不明瞭/かつ一筋縄ではいかないビルド環境、・・・スンナリ進んだ試しが一度もない。
まあ、しっかり勉強したわけではないど阿呆であるのが、最大の原因なのだが・・・。

この後は、実際のGoogleのSpeech to Textを使ってみる話のになるのですが、長くなるので、も一回話を切ります。

今回はこの辺で。
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