MENU
AIで稼ぐ最底辺｜発達障害×引きこもりからの挑戦
  1. ホーム
  2. スマホアプリ開発
  3. 【EASビルド失敗ログ】ReactNative+AdMob+Expo編（２０２５年４月１５日）

【EASビルド失敗ログ】ReactNative+AdMob+Expo編（２０２５年４月１５日）

スマホアプリ開発 毎日の作業報告記録

初心者には恐ろしく難しい、admob広告導入。本当にむずかしい・・・。

ビルド失敗の原因とその対策：悲劇はadaptive-icon.pngから始まりました。
まず、あまりにも辛く大変すぎた：「ビルド失敗」。
この言葉には、無限の絶望と、若干の「自分のせいではないはず（AIに任せていたから）」という幻想が詰まっている。

そもそも、全てコードをchatgpt任せ、そしてexpo+reactnativeを全く理解していないので、何の問題が起きて、どうやって解決すればいいのか謎だった。

💥 原因：adaptive-icon.png が無い？知らんがな。

私のnabari-quizプロジェクトは、EASビルド（しかもFreeプラン！）で「AdMob入りアプリをAndroidでビルド」しようとしたわけだけど、ビルドくんはこう言ったんだよね：

“あの……adaptive-icon.pngが見当たりませんけど……？”

何が起きたかって？app.jsonにこんな設定をしたのが原因：

"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  }
}

うん、それで ./assets/adaptive-icon.png がない？そりゃ怒るでしょ、EASくんも。
たとえるなら、「スイカ持ってきてって言ったのに、冷蔵庫開けたらスイカどころか水すらない」状態。

🔧 対策：アイコンファイルちゃんと入れようね、って話

✅ チェックポイント：

  • ./assets/adaptive-icon.png が本当に存在するか（これは基本だけど、最も忘れられる）
  • 画像サイズは 1024×1024ピクセル推奨。なぜかって？Google様がそう言ってるからだよ。
  • フォーマットは .png で。.jpeg じゃだめ。理由？仕様です。仕様に従いましょう。大人しく。

✅ ヒント：

  • 手っ取り早く解決したい人へ： Expoの新規プロジェクト作ると自動でこのアイコンが付いてくるから、そこからパク……参考にしてコピペしよう。そう、文明の力。
目次

🚧 AdMob設定ミスでアプリが起動即クラッシュ：ありがちな落とし穴

AdMobをReact Native（Expo Managed Workflow）に導入する際、設定ミスによってアプリが起動直後に落ちるケースは少なくありません。今回も、まさにそれが起きました。

❌ 問題①：meta-dataのキー名ミス

app.jsonでAdMobアプリIDを渡す際に、以下のような設定を行っていました：

"android": {
  "metaData": {
    "com.google.android.gms.ads.APPLICATION_ID": "ca-app-pub-xxxxx~yyyyy"
  }
}

一見、正しそうに見えますが……実はここで致命的なミスがあります。
ExpoでAndroidManifestに変換されるこの設定、正しいキー名は meta-data（ハイフン区切り）です。キャメルケースのmetaDataは認識されません。

この設定ミスにより、ビルド後のアプリは起動時にAdMob SDKから「Invalid application ID」というエラーを受け取り、そのままクラッシュしました。adb logcatで確認すると、広告IDが読み込めていない旨のエラーが大量に出力されているはずです。

✅ 正しい設定（推奨されないやり方）：

"android": {
  "meta-data": {
    "com.google.android.gms.ads.APPLICATION_ID": "ca-app-pub-xxxxx~yyyyy"
  }
}

ただし、Expo Managed Workflowではこの方法は非推奨です。

❌ 問題②：AdMobアプリIDの重複定義

さらに、次のようにpluginsとmeta-data両方に同じAdMobアプリIDを指定していたことで、Expoのビルド時に内部的な競合が発生しました。

"plugins": [
  ["react-native-google-mobile-ads", { "android_app_id": "..." }]
],
"android": {
  "meta-data": {
    "com.google.android.gms.ads.APPLICATION_ID": "..."
  }
}

結果として、Expoのビルド時にAndroidManifest.xmlへ2つのAdMobアプリIDが書き込まれ、実行時にクラッシュ。AdMob SDKは、アプリIDが1つしか存在しないことを前提として動作するためです。

✅ 正しい設定（Expo推奨）

Expoでは、AdMobの設定はapp.jsonのpluginsセクションだけで行うのがベストです。

"plugins": [
  [
    "react-native-google-mobile-ads",
    {
      "android_app_id": "ca-app-pub-3940256099942544~3347511713",
      "ios_app_id": "ca-app-pub-3940256099942544~1458002511",
      "user_tracking_usage_description": "この識別子は、パーソナライズされた広告を提供するために使用されます。"
    }
  ]
]

これだけで、必要なmeta-dataは自動的に挿入されます。手動で設定すると競合の原因になるため、避けるのが賢明です。

🔄 Kotlinのバージョン不一致でビルド失敗？ライブラリのバージョン選びは重要です

AdMobを使うために導入した react-native-google-mobile-ads ライブラリ。これが原因で、ビルドエラーが発生したケースです。

❌ 発生したエラーの内容

ビルドコマンドを実行したとき、以下のようなエラーメッセージが表示されました：

Gradle build failed with unknown error.
The binary version of its metadata is 2.1.0, expected version is 1.9.0.

これ、ちょっと見ただけでは何のことか分かりにくいですが、要するに：

  • 今入れてるライブラリ（react-native-google-mobile-ads@15.0.0）は Kotlin 2.1.0 で作られている
  • でも、Expoのビルド環境が使っている Kotlin は 1.9.0
  • この差が原因で、「えっ、それ読めないんだけど」とGradleに怒られ、ビルド失敗

という構図です。つまり、ライブラリとビルド環境でKotlinのバージョンが合っていないのが原因です。

✅ 解決方法：安定バージョンに戻す

この問題を解決する一番シンプルな方法は、Kotlin 1.9.0と互換性のあるバージョンのライブラリを使うことです。

具体的には、次のコマンドでライブラリのバージョンを下げます：

npm install react-native-google-mobile-ads@14.7.0

この 14.7.0 は、ExpoのEASビルド環境でも問題なく動く安定バージョンとして実績があります。

✅ 補足：依存関係とキャッシュのクリーンアップもセットで

バージョンを変更したあとは、以下の作業を行っておくとトラブル回避につながります：

# 1. 古い依存関係を削除
rm -rf node_modules
rm package-lock.json

# 2. 再インストール
npm install

# 3. Expoのキャッシュをクリアして再起動
npx expo start --clear

これらをサボると、古いキャッシュに引きずられて「さっきのエラーまた出た…」というループに入りがちなので注意しましょう。

✅ EASビルドもキャッシュごとリフレッシュ

最後に、EASビルドを実行する際もキャッシュを削除してからが安全です：

eas build --clear-cache --profile development --platform android

Expoのビルドキャッシュは優秀なようでいて、たまに「前回の設定を引きずる厄介者」になるので、明示的にクリアしておいた方が安心です。

🛠 app.jsonへのAdMob設定：正しく書かないとアプリ落ちます

AdMobの設定は、app.json に書く必要がありますが、「書き方をちょっと間違えただけでアプリが落ちる」という、非常にセンシティブな部分でもあります。

❌ よくあるミス：pluginとmeta-dataの“二重指定”

AdMobアプリIDの設定方法として、以下の2通りがあります：

  1. pluginsを使う（Expoが推奨する方法）
  2. android.meta-dataを使う（手動で設定）

ここでやってしまいがちなのが、「両方に同じ情報を書いてしまう」というミス。

"plugins": [
  ["react-native-google-mobile-ads", { "android_app_id": "..." }]
],
"android": {
  "meta-data": {
    "com.google.android.gms.ads.APPLICATION_ID": "..."
  }
}

このように書くと、最終的にExpoが生成する AndroidManifest.xml に2つのAPPLICATION_IDが出力されてしまい、AdMob SDKが混乱してアプリが即クラッシュします。何もしてないのに死ぬやつです。

✅ 正しい書き方：pluginsだけで完結

Expoが推奨しているのは、pluginsセクションだけを使ってAdMobの設定をする方法です。これだけで必要な情報は自動で反映されるので、手動でmeta-dataを書く必要はありません。

"plugins": [
  [
    "react-native-google-mobile-ads",
    {
      "android_app_id": "ca-app-pub-3940256099942544~3347511713",
      "ios_app_id": "ca-app-pub-3940256099942544~1458002511",
      "user_tracking_usage_description": "この識別子は、パーソナライズされた広告を提供するために使用されます。"
    }
  ]
]

※この記事に掲載している AdMob App ID は Google が提供するテスト用IDです。

これでOKです。Expoが自動で AndroidManifest.xml に meta-data を正しく生成してくれるので、わざわざ自分で書く必要はありません。

🧼 念のため：以前のmeta-data設定を削除しよう

もし過去に手動で設定していた場合は、それを削除しておかないと競合の原因になるので注意です。

"android": {
-  "meta-data": {
-    "com.google.android.gms.ads.APPLICATION_ID": "..."
-  }
}

上記のように、潔く削除しておきましょう。今後の自分のためです。

📱 Expo GoではAdMobが動かない？それ、正常です

AdMobを導入したあと、「あれ？広告が出ない…」って焦る人、多いです。でも安心してください。Expo GoではAdMobの表示はできません。

これは不具合ではなく、仕様です。

🤔 なんで表示されないの？

react-native-google-mobile-ads は、ネイティブコード（AndroidやiOSの内部）を直接使うライブラリです。

でも、Expo Goはあくまで汎用のアプリで、ネイティブのコードをカスタマイズできるようには作られていません。なので、AdMobを含むような「ネイティブ連携が必要な機能」は使えないんです。

要するに、Expo Goは「完成済みの弁当箱」、AdMobは「自分で鍋から煮込まないと出てこない具材」って感じです。

🧪 正しいテスト方法：カスタムクライアントかビルド済みアプリを使う

AdMobの表示をテストしたいなら、以下のいずれかの方法で実機テストを行う必要があります。

✅ 方法①：Expo Dev Client を使う

自分専用のExpoアプリ（Dev Client）をビルドして、ネイティブコードを含む機能をテストできます。

eas build --profile development --platform android

これで .apk ファイルや aab ファイルを作成して、Android実機にインストールしましょう。
テスト用のAdMob ID（Google提供） を使って、広告が表示されるかを確認できます。

※ iOSの場合はAppleの審査が必要なので、Androidの方がテストは手軽です。

✅ 方法②：expo run:android を使う（ローカル実機）

もしAndroid Studioがインストールされているなら、以下のコマンドでローカル実機に直接インストールしてテストできます：

npx expo run:android

ただし、これを使うには事前にプロジェクトでeas build:configureなどをしておく必要がある場合があります。
また、この方法でもAdMobの動作確認ができますが、環境によっては少し準備が必要です。

⚠ テスト中の注意点

  • 広告が表示されなくても、まずは console.log() で イベントが発火しているかをチェック
  • adb logcat や Xcodeログ でクラッシュの詳細を見るのも有効
  • 本番用の広告IDは絶対に使わないこと（GoogleにBANされる可能性あり）

♻ expo-ads-admobはもう使わない？今こそ移行のタイミング

昔のExpoプロジェクトでは、AdMobを使う方法として expo-ads-admob が定番でした。が、今はもう事情が違います。

Expo SDK 45以降では、このライブラリは非推奨（deprecated）になっています。しかも、最新のExpo SDK（たとえばv52）では、うまく動かないことも多く、使い続けるとエラーやクラッシュの元になります。

❌ よくある問題：ExpoAdsAdMobBannerView が undefined

以下のようなコードでバナーを表示しようとして：

import { AdMobBanner } from 'expo-ads-admob';

<AdMobBanner
  bannerSize="fullBanner"
  adUnitID="..."
  servePersonalizedAds={true}
/>

実機で動かしたときにこんなエラーが出ることがあります：

Value is undefined, expected an object. Received: undefined

これは、Expoの内部でこのコンポーネントが正しくネイティブにマッピングされていないことが原因です。

特にブリッジレスモード（新しいアーキテクチャ）を使っている環境では、かなりの確率で壊れます。

✅ 正しい対応：expo-ads-admob をアンインストール

移行するなら、まずはプロジェクトから expo-ads-admob を完全に削除しましょう。

npm uninstall expo-ads-admob

加えて、コード内の AdMobBanner や AdMobInterstitial などを使っている部分も、全て削除または react-native-google-mobile-ads のAPIに書き換える必要があります。

✅ 新しく使うのはこれ：react-native-google-mobile-ads

こちらは Google公式のAdMob SDKを直接ラップしたライブラリで、今後も継続してサポートされる予定です。

ただし、Expo Goでは動かないため、expo-dev-clientやeas buildを使ってテストする必要があります。

npx expo install react-native-google-mobile-ads

導入後、app.jsonにpluginsを追加して設定を済ませるのを忘れずに。

☑ 移行チェックリスト

項目確認状況
expo-ads-admob を削除したか✅
古いコンポーネントのimportを消したか✅
react-native-google-mobile-ads を導入したか✅
pluginsに正しくAdMob IDを追加したか✅
実機ビルドで広告が表示されるか✅

📋 ビルド前に確認しておきたいチェックリスト

AdMob導入後にEASビルドでつまづかないために、ビルド前にこれだけは確認しておきたいポイントを一覧にしておきます。再びあの“40分待ってビルド失敗”を繰り返さないためにも、確認を習慣化しましょう。

✅ チェックポイント一覧

  • [ ] adaptive-icon.png が /assets にあり、パスも app.json で正しく指定しているか
  • [ ] app.json に react-native-google-mobile-ads のplugin設定があるか
  • [ ] expo-ads-admob が残っていないか（package.jsonとコード両方チェック）
  • [ ] 使用しているAdMobのIDはテスト用IDか（本番IDは絶対使わない）
  • [ ] npm install 後に npx expo start --clear を実行してキャッシュをリセットしているか
  • [ ] 実機でのテストを行い、広告が表示されることを確認したか（expo run:android や Dev Client で）
  • [ ] .envやAPIキー周りでtypoがないか、IDが正しく読めているか
  • [ ] EASビルド時に --clear-cache を指定しているか

🧠 開発メモ：今回の失敗から得たベストプラクティス

今回のAdMob導入とビルドトラブルを通して、学べたことはいくつもあります。以下のポイントは、今後React Native + Expo環境で広告を入れたいときに活用できる、重要なヒントになります。

🔑 得られた教訓まとめ

  • Expoのビルド環境はKotlinなどのバージョンが固定されているため、ライブラリの最新バージョンが常に使えるとは限らない。
    → ライブラリの更新内容や互換性は必ずチェックすること。
  • AdMobアプリIDの設定は、Expo Managed Workflowではpluginsだけで行うのがベスト。
    → meta-dataとの併用は絶対NG。アプリが起動しなくなります。
  • Expo Goではネイティブ機能（AdMob含む）は動かない。
    → 実機テスト用に Dev Client または EASビルドしたアプリを準備しておくこと。
  • キャッシュの罠は見えにくい。ビルドの前後には --clear-cache を添える癖をつけよう。
    → ローカルでも expo start --clear を習慣にすると、謎の挙動が減る。
  • 公式ドキュメントは信用しよう。ときどき面倒でも、定期的にチェックしておくと痛い目に合わずに済む。

以上で「React Native + AdMob + EAS Build」環境における、設定ミスと解決策のまとめは完了です。

この内容が、同じような環境で開発する人たちの参考になれば嬉しいです。
これから導入する人も、今まさにハマっている人も、焦らずひとつずつ確認していきましょう。

次回、地獄のadmobテスト編をお送りします・・・。

スマホアプリ開発 毎日の作業報告記録
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次