FC2ブログ

スマフォのアプリを作りたい(38):RNをASでデバッグ=カオス

   プログラミング [2022/01/29]
ReactNative環境でクロスプラットフォームなアプリを開発しようとして、2年以上が経過してます。しかも、飽きてしまって9か月以上放置しました。
このまま止めちゃおうかとも思ったのですが・・・なんか気持ち悪いので、また再開します。


以下の前半と【念のため】は、昨年の4月頃に書いていたメモの内容です。
あまりに時間を空けすぎたので、自分でも読み返してみました。
色んな試行錯誤をして、エラー出まくりで、さっぱり目的に近づけなかったのですが・・・



※※※【ここから本題】※※※※※※※※※※※※※※※※※※
ReactNativeは、メインの言語としてはJavaScript(その実JSX)を使用します。
でもほしいアプリを作るのに、ReactNative-Andoroid環境では、ネイティブのJavaパッケージを使うのが普通で、かつそのパッケージも何だか思うように出来てはいない印象があります。(バグだったり、制御の仕方がアプリに合わない。)

しかたなく、Javaコードも書き換えちゃったりしてます。
さらにオフライン単語認識機能(Julius)に至ってはC/C++コード。

今になって、「ReactNativeである必要があったのか」とも思えている。

これまで、ReactNativeのJSコードから呼ばれるJava部分に関しては、Chromeのデベロッパーツールでは何ともならなかったのでlogcatメッセージの出力でなんとかデバッグしてました。

でも、今後の事を予想するに、このままではどうにも効率が悪すぎです。
なので、ちゃんとしたデバッグ環境で、ブレーク、ステップ実行、変数参照なんかができないかと・・・


◆デバッグ環境に関する参考サイトの検索
参考:https://developer.android.com/studio/debug/index.html
一般的なAndroidStudio上でのデバッグ実行の仕方の説明のようです。

説明から以下の疑問が残りました。
・「React Nativeパッケージャー」ってなんでしょう。
・それに、AndroidStudioでプロジェクトを開くときのフォルダってどこを起点にするのかしら。

「React Nativeパッケージャー」は、どうも「Metro Bundler」のことのようです。
「react-native run-android」した時も起動されているようです。そんなメッセージが出ます。
でも、それを単独で起動する? そのやり方は?
さらに検索しました。

参考:https://www.javaer101.com/article/1041848.html
今度は、手順ぽく書いてくれてました。


◆Javaコード部分のデバッグ環境

以下は、徒労に終わった試行錯誤(【念のため】)も含めた経過を書きます。

1)「react-native run-android」を実行
AVDエミュレータ上でアプリが起動するのを確認

2)AndroidStudioにインポート
2-1)AndroidStudio(4.0)を起動
※以前、開発していたプロジェクトがオープンされたら、[File]-[Close Project]選択
 
2-2)Welcomeダイアログが開くので、その右側の[Import Project ・・・]を選択
20210301_1.jpg

2-3)ReactNativeのプロジェクトフォルダ下の「android」フォルダを指定して[OK]
20210301_2.jpg


しばらくすると、AndroidStudio画面の下に「android: failed at ・・・」と表示されました。
AndroidStudioはプロジェクトオープン時に勝手にSyncをするのは認知してましたが、今回は(Gradle)Buildまでもが走っていました。その際のエラーのようです。メッセージの中身は、以下。
----AndroidStudio Build メッセージ----------------
Error: EPERM: operation not permitted, scandir 'D:/AppMake/proj/teburarec/android/app/build/intermediates/signing_config/debug/out/signing-config.json'
---------------------------------------------------

「Error: EPERM: operation not permitted, scandir」を検索ワードにしてぐぐってみたけどシックリくる対応策にヒットしなくて、実際にメッセージされたファイル(signing-config.json)を見てみました。
sakuraで開こうとしたら、Read権限すらないと出ました。

もしやと思って、AndroidStudioを一旦終了し、今度は管理者権限で実行させてみました。
20210301_3.jpg

プロジェクトを開いて再度Buildが走り出しました。

途中、「Basedir D:\AppMake\proj\teburarec\android\calljulius does not exist」とか赤いメッセージは出たものの、「android: successful ・・・」「CONFIGURE SUCCESSFUL ・・・」とか表示されたので、たぶんプロジェクトのオープン(ビルド)は成功したようだ。


2-4)次にデバッグ実行(虫マーク)を実行させてみた。
以下のメッセージが出ました。
----AndroidStudio メッセージ------------------------
Project resolve errors
Warning: root project 'teburarec': Unable to resolve additional project configuration.
Details: org.apache.tools.ant.BuildException: Basedir D:\AppMake\proj\teburarec\android\calljulius does not exist
---------------------------------------------------

ただし、ビルドは成功している感じです。
既にアプリを起動済みのエミュレータに「(Refreshing...)」と何回かでている。
※※※※※※※※※※※※※※※※※※※※※

この後にも様々なアラートやエラーが出まくってました。それを解決すべく、別の参考サイトに書いてあったことも試してみました。でも、全然解決しませんでした。それで、嫌になって放り出した。


でも続きます。



しばらくぶりに、デバック環境(未完成)を立ち上げてみました。


※※※【気を取り直して】※※※※※※※※※※※※※※※※※※
一旦、何も起動していない状況からです。

3)「react-native run-android」を実行
  エミュレーターが起動してアプリが使えるようになったのを確認します。

4)AndroidStudio(4.0)を管理者権限で起動
  このとき、エミュレータ上のアプリがDebuggerモードでないことを確認してください。
  AndroidStudioでは勝手にSyncが実行されます。その終了を待ちます。
  (相変わらず、Syncでワーニングが出てますが、無視してます。)
----AndroidStudio Sync メッセージ----------------
Project resolve errorsD:\AppMake\proj\teburarec\android\build.gradleroot project 'teburarec': Unable to resolve additional project configuration.Details: org.apache.tools.ant.BuildException: Basedir D:\AppMake\proj\teburarec\android\calljulius does not exist
---------------------------------------------------


5)AndroidStudioでデバッグ実行(虫アイコン)選択

あれ?
上記の手順で、何度か失敗してたのですが、ふとした拍子にデバッグモードでのアプリ起動に成功しました。
20220128_1.jpg

なぜなのかよくわかりません。
C/C++部分にもBreak貼って、止まるか試したら、止まった。
20220128_2.jpg

信用ならないので、日を改めて上記の3)~5)の手順で再度試してみた。
やっぱり、動かねーじゃん。
5)をやると、AndroidStudioは、「Build Output」を始めます。

その後、「Install」を始めます。
このとき、既に起動されていた元のアプリは終了させられます。

さらにその後、「Debug」モードを開始します。
そのとき、エミュレータ側にはこんなメッセージが出ます。
20220128_3.jpg

「Debug」モードが準備OKになれば、アプリの初期画面が表示されるはずなのですが、
この画面で固まりました。
20220129_1.jpg
AndroidStudio側は、デバッグモードが開始されて、強制一時停止なんかはできます。
でも、アプリのmainスレッドが「RUNNING」だけど、先に進まない。

苦し紛れに「node:コマンドプロンプト」でリロード([r]キーを押すだけ)させてみたら、なんだか動き出しましたよ。

でも、こんなエラーもついでに出た。
20220129_3.jpg
メモリリークを起こしてるって書いてる。

アプリの動作はできて、デバッグもできそうです。
20220129_2.jpg
この状態で、AndroidStudioで再デバック実行開始(虫アイコンのクリック)をして見たら、今度は前のエラー(ワーニング)は出ずに正常起動&デバッグ可の状態になりました。

やっぱり、何が何だか分かりません。
色んな症状が出過ぎです。

何だか、謎のおまじない的なものが見つかったのはいいが・・・

良くわかんないけど、デバッグできそうなので、次に進みます。

では、この話は辺で。御機嫌よう。
m(__)m



※※※【念のため】※※※※※※※※※※※※※※※※※※
(注)本当に無駄なメモかもしれませんが、なぜうまく行くようになったのかがよくわからないので、念のため1年前に追加で試した内容も載せときます。


参考:https://indie-du.com/entry/2018/11/14/190000

・ReactNativeのプロジェクトを作る→済み
・作ったプロジェクトのAndtoid用環境をAndroidStudioで開く
 ビルドが通ることを確認→済み

※「react-native run-android」もAndroidStudioも実行してない状態から以下を行ってください。


3)エミュレータ(AVD)の起動
3-1)エミュレータを起動
コマンドプロンプトから「(Android SDKフォルダ)\sdk\tools\emulator.exe -avd AVD名」でエミュレータを起動します。
----コマンドプロンプト----------------------------
C:\WINDOWS\system32>D:\appmake\android\sdk\tools\emulator.exe -avd myNexusS
ANGLE: D3D11: rx::Renderer11::generateConfigs
Failed to open /usr/local/google/home/joshuaduong/emu/master/prebuilts/android-emulator-build/qemu-android-deps/windows_msvc-x86_64/qemu.conf, err: 2
HAX is working and emulator runs in fast virt mode.
Your emulator is out of date, please update by launching Android Studio:
- Start Android Studio
- Select menu "Tools > Android > SDK Manager"
- Click "SDK Tools" tab
- Check "Android Emulator" checkbox
- Click "OK"

emulator: emulator window was out of view and was recentered
---------------------------------------------------

何やら「Failed ・・・」だのが出てましたが、構わず続けます。

3-2)adb reverseを実行
「adb reverse は実機からPCのサーバにアクセスできるようにする呪文。」と参考サイトに書いてありました。※エミュレータ起動前、あるいは実機接続前に実施するとエラーになります。
----コマンドプロンプト2---------------------------
C:\WINDOWS\system32>cd /d d:\appmake\android/sdk/platform-tools

d:\AppMake\Android\Sdk\platform-tools>adb reverse tcp:8081 tcp:8081
* daemon not running; starting now at tcp:5037
* daemon started successfully
---------------------------------------------------


3-3)react-native startを実行
「react-native run-android」ではなく「react-native start」です。

----コマンドプロンプト3---------------------------
C:\WINDOWS\system32>cd /d D:\AppMake\proj\teburarec

D:\AppMake\proj\teburarec>set _JAVA_OPTIONS=-Duser.language=en

D:\AppMake\proj\teburarec>react-native start
┌──────────────────────────────────────

│ Running Metro Bundler on port 8081.

│ Keep Metro running while developing on any JS projects. Feel free to
│ close this tab and run your own Metro instance if you prefer.

│ https://github.com/facebook/react-native

└──────────────────────────────────────

Looking for JS files in
D:\AppMake\proj\teburarec

Loading dependency graph, done.

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


3-4)AndroidStudioを起動
AndroidStudioを管理者権限で起動します。
起動後、すぐにGradleが動いて、Sync?Build?が実行されるので、終わるのを待ちました。
だいぶ時間が掛かりました。
この段階でエミュレータ側には変化なし。ホーム画面が出たままです。
何やらWarningも出てました・・・
----AndroidStudio Build---------------------------
・API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
・The specified Android SDK Build Tools version (28.0.3) is ignored, as it is below the minimum supported version (29.0.2) for Android Gradle Plugin 4.0.0.
---------------------------------------------------


ともかく先へ。


3-5)AndroidStudioでのデバッグ実行
AndroidStudio上の「虫マーク」をクリックしてデバッグ実行を開始します。

AndroidStudio上ではデバッグ・モード中のように見え、何ら目立ったメッセージも出てなかった。
でも、エミュレータ上では「Waiting For Debugger ・・・」と出た後に「問題が発生したため、(アプリ名)を終了します。」とメッセージが出ました。
また、「react-native start」したコンソールには、以下のメッセージが出てstartコマンドは終了してました。
----コマンドプロンプト3---------------------------
events.js:187
throw er; // Unhandled 'error' event
^

Error: EPERM: operation not permitted, lstat 'D:\AppMake\proj\teburarec\node_modules\react-native-google-speech-api\calljulius\android\build\intermediates\library_assets\debug\out\jdata\teburarecword.dict'
Emitted 'error' event on NodeWatcher instance at:
at NodeWatcher. (D:\AppMake\proj\teburarec\node_modules\sane\src\node_watcher.js:291:16)
at FSReqCallback.oncomplete (fs.js:158:21) {
errno: -4048,
code: 'EPERM',
syscall: 'lstat',
path: 'D:\\AppMake\\proj\\teburarec\\node_modules\\react-native-google-speech-api\\calljulius\\android\\build\\intermediates\\library_assets\\debug\\out\\jdata\\teburarecword.dict'
}
---------------------------------------------------


どうも、メッセージにある「ファイルへのアクセス権がない」と言っているよう。

・「react-native start」を実行したコマンドプロンプトは、管理者権限で実行してます。
・エラーになったJulius用の単語辞書ファイルとそのフォルダへのアクセス権を確認。
→特に問題ない感じなんだけど、一般「User」にもフルアクセス可能なように念のため設定してやった。


3-3)、3-5)の手順を再実施。
でも失敗。エミュレータ上に「問題が発生したため・・・」が出て、AndroidStudioには以下のメッセージ。
----AndroidStudio:Debug/app/Console---------------
Connected to the target VM, address: 'localhost:8620', transport: 'socket'
Disconnected from the target VM, address: 'localhost:8620', transport: 'socket'
---------------------------------------------------

一旦、Connected・・・になるのだが、しばらくしてDisconnect・・・となる。
デバッキングとして何かの準備待ちをしたのだが、タイムアウトした感じ。
ただし、「react-native start」でのエラーは出なくなった。

類似現象の対策例を探しました。
参考:https://www.it-swarm-ja.com/ja/android-emulator/android%e3%82%a8%e3%83%9f%e3%83%a5%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%81%a7reactnative%e3%82%92%e5%ae%9f%e8%a1%8c%e3%81%97%e3%81%be%e3%81%99/827352105/
SDK関係のツール類をアップデートするように書いていたのでやりました。
(SDK Managerの操作手順は省略します。)

現象は変わらずでした。

※※※※※※※※※※※※※※※※※※※※※※※※※※
スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
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