MENU

React Nativeで効果音が鳴らない?react-native-soundからexpo-avへの移行記録

expoを使わず、reactnativeでのスマホアプリ開発に疲れて、難易度低めのワードプレスでのアプリ開発に現実逃避をしていた8日間。

PC上でのフォルダやchatgptのやり取りが邪魔だったので、再開することに。

でも、すっかり頭からやり方を忘れてしまっていました。

とりあえず、今やっていたことを思い出す作業から。
簡単な色当てゲームを作っていた段階でした。

あわせて読みたい
React Native初心者がスマホアプリ開発でエラー地獄を乗り越えた話【脳トレゲーム制作日記】 昨日は、react nativeのエラーの仕組みを多少学んだので、今日は絶対にミスしない(エラーを出さない)ように心がけていました。 https://ai-torai.com/react-native-vs...

8日前に書いた記事を見返してみると、expoを使わずにreact natve単体では、様々なバージョンエラーが起きてしまうので、自動更新はoffにしておかなければならないとのこと。

とりあえず、package.json内に書かれているコードの中の「^」これをすべて削除。
もしくは、新しくライブラリーを追加する際に、–save-exactこのコマンドを追加すれば^これが自動的につかなくなるようです。

目次

react-native-soundで最初にぶつかった壁とは?

前回放置していた状態は、音を入れるところです。
reactnative単体では、かなり難しいらしく、やる気が失せていたのです。

とりあえず、前回どこまでやったのかよく見てみて、次に効果音を入れる作業をしました。
もちろん私はコードを書けないので、chatgptに丸投げです。

今回は、たかが2つの正解と不正解の効果音を鳴らすだけです。
サウンドファイルはフリーのやつをDLしてきました。
そして、assets→soundsフォルダに格納。

chatgptの指示に従って、GameScreen.tsxのコードを書き替え。
テスト開始。

予想通り、はい、エラー。

「Hermes エンジン下で、resolveAssetSource(…) を「関数」として実行しようとしたが、実際はオブジェクトであり、関数ではなかったためです。これは react-native-sound を Android で Hermes とともに使う際に特に起こります。」

何を言っているのかわからない。

「問題を修正して、再度GameScreenの全文コードをお願い」と依頼。

そして、キャッシュヲクリアして、再ビルド。
またエラー・・・。

これを5回くらい繰り返しても、成功しない。2時間くらい消費。

仕方ないので、新しくchatgptのスレッドを立ち上げ再度サウンドファイルの読み込みの手順を教えてもらう。

「現時点であなたのアプリが複数の画面や拡張性を目指すなら、utils/sound.ts 方式に切り替えるのがオススメです。

「正解・不正解・ゲーム開始・リトライ」など、今後音を追加していくなら、共通関数にした方が管理が楽になります。」

このようなドバイスを頂き、次にutilsフォルダを作成し、sound.tsという新しいやり方を導入。

今度こそ成功させたい。とおもっていたのですが、案の定エラー。

しかも、エラーの理由が分からない。
chatgptはエラーを明確に指示してくれますが、そのやり方が毎回同じでしかも解決しない。

このループを数時間行っても解決しない。

そこで、sound.tsファイル(gptが書いたコード)とエラー文を同時に送ってみると、

「react-native-sound」このライブラリがダメとのこと。
え、今更!?

しかも、react-native-sound は古くて 今後のReact Nativeとは相性が悪いとのこと。
だったら、最初からそう教えて欲しかった。

そして、今のreactnative単体で音を導入するには、expo-avが主流とのこと。

なんか、expoという文字が入っているので、expoを使う羽目になるのかな?と思ったのですが、Expoで開発していない人でも使えるそうです。

今までの苦労は何だったんだろう。

expo-avを使ってみた

react-native-soundをライブラリに追加する前のプロジェクトファイルを全てバックアップを取っておいたので、また1からやり直し。
expo-avの導入に挑戦しました。

自動更新をしないように「npm install expo-av –save-exact」これでライブラリに追加。

次に、sound.tsファイルを書いてもらう。しかしエラー。

isPlaying を使うには、まず status.isLoaded をチェックするのが TypeScript の正しい流儀です。
型定義では AVPlaybackStatus が union 型(正常 or エラー)になっており、分岐なしに isPlaying に触ると怒られます。

全く分からないので、修正してもらう。
この辺の短いコードくらい、chatgptは一発で完璧に書けないものなのかな、といつも思います。

最後に、音を導入する為のGameScreen.tsxのコードを書いてもらう。
しかしエラー。

「あなたは React Native CLI プロジェクトで expo-av を使っていますが、Expo Modules に必要なネイティブ連携(Unimodulesやexpo-modules-coreの自動セットアップ)が 未設定 です。」

expo-avを使う上で必要なライブラリがあるらしい。(expo-av導入時に教えといて)

次に、MainApplication.kt これのコードを変えなければならないらしい。

expo-avで音を導入する上で毎回、この作業をやらなければならないのだろうか・・・?

そして、エラーが出たので、build.gradleのコードを修正。
またエラー。
クリーしようとしたら、android/build.gradle(プロジェクトレベル)の方に書いてしまったようで(AIのミス)修正。

どうしても、直らない。
expo-avを使うのが難しすぎる。何が問題なのかわからない。
今日1日この作業で終わってしまった。

明日また、バックアップから再開したいと思う(涙)

まとめ

私はASDなので、苦手な事だったり好きではない事、困難な状況になると、他のいつもの作業や簡単なことに逃げてしまう癖があります。

今回も、reactnative単体でのスマホアプリ開発の難しさから逃げていました。

いつも中途半端で、終わってしまっているのが、3カ月以上収益0、もうすぐ4カ月以上全く稼げていない状態の要因の1つに繋がっているのだと思います。

そういえば、chatgptに言われていたことを思い出しました。
やっていることが多すぎるから、1つの事に全力を尽くすべき」とアドバイスを貰っていました。

確かに、色々とやっています。
・脳トレサイト、脳トレwebプログラム
・占い動画
・犬ブログ
・ノベルゲーム製作(放置気味)
・雑学動画
・SD画像生成
など。

中でも脳トレのwebアプリを作るのが物凄く時間がかかる。
全てコードはAI任せなので、エラー祭り、修正で1~3時間かかる。

こう考えると、本当に効率が悪い。
そもそも自分のやりたいこと・何となく稼げるんじゃないか、と思っていることをすべてやっているだけ。
だから収益が0だし、意味のない時間のロスをしているのだと思う。

しかし、とりあえず、reactnativeでのアプリ開発でadmobを導入することだけはやって置きたい。
これをやらないと本当に中途半端になってしまう。
今までかけてきた時間が無駄になる。
多分、ほぼ稼げないとは思うけど、経験にはなっているはず。

そして、ノベルゲーム製作も完成させたい。

とりあえず、この2つを終わらさせない限り、次にすすめない。それは絶対。

その後で、他の人が稼いでいるAIを使ったやり方をリサーチし、真似てみたいと思っています。

なので、reactnativeでのスマホアプリ開発と、EasyNovelAssistant+tyranoscriptでのノベル開発に全力を尽くします!

\いつも応援ありがとうございます/
バナーを1クリックで応援いただけるととっても励みになります😊

にほんブログ村 ネットブログ ChatGPT・生成AIへ
にほんブログ村

人気ブログランキング
人気ブログランキング

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次