Qiitaにも同様の内容の記事を載せています。LGTMﾖﾛｼｸ

AdMob難しすぎだろ問題

3月末くらいに、じゃあ次のタスクはということで渡されたのが「React Nativeで作成しているアプリにバナー広告を出したい」というものでした。とっても実務的ですね。

これを参考に進めてくれと言われ渡されたページを読んでも 何も理解できない 。大抵こういう全く触ったこともないものに触れる時は何も理解できなくて最初の数時間は本当につらいんですよね。。

React Nativeあるあるだと思うんですが、とりあえず新しい課題ができたら「React Native ○○」でググって特になにも出てこずに結局わからない。

今回は幸いいくつかの手段で実装している記事が存在したので、そちらを参考にしながら進めていました。

しかし、如何せんメジャーバージョンが未だリリースされていないReact Native。

バージョン0.5xと0.6xで全然挙動が違ったり、エラーコードがえぐい量きたりもう大変です。そろそろメジャーアップデートきてくれない…？

最初にv0.59.1で実装を進めており、iOSの方は無事表示することができました。

やったー！と思ったのもつかの間、長らくシミュレーターを起動していなかったAndroidを起動させようとするも、つかない。

エラーメッセージをとりあえず全部超スゴイ先輩に見せると、

Android studioのgradleのバージョンが上がってしまい、依存関係がおかしくなって起動しなくなっている。ここから一個ずつ依存関係をみていくのは時間がかかるから、新しいReact Nativeのプロジェクトを作り直して設定とかコンポーネントを全部写した方がいい

と言われてしまいました。

そんなこんなで広告を追加しようとしたらReact Nativeのバージョンをあげることになっていたんですが、0.59.1から最新の0.62.2にあげるのにどれだけ苦労したか。永遠に現れる真っ赤な画面をため息つきながら直していく作業は全然楽しくなかったです。

なんとか中身を写し終えて、iPhoneとAndroid両方で起動が確認できてから、いざAdMobに取り掛かる。

が、しかし…！

最初と同じ方法でやっても実装できず。ここで完全にやる気がなくなって他のことをやり始めました。（それが先週）

そして週を跨いだ今日、やる気が戻ってきてもう一回みてみるか…とちょいちょいっとやってみたら無事実装できました。

その方法がこれだ！！

React NativeにGoogle AdMobを導入する際、情報が古かったり同様の方法でやってもうまくいかないことが多かったので、詳細に導入方法をまとめてみます。

Google AdMobを利用する際には現時点で2つ方法があります。

react-native-admobを利用する方法
react-native-firebaseを利用する方法

今回はreact-native-admobを利用する方法について説明します。

導入した環境

React Native 0.62.2（2020年4月時点最新）

iOS 13.3 CocoaPods

Android 6.0

実装した広告: バナー広告

iOS

react-native-admobのREADMEと同様に進んでいきます。

npm or yarnでreact-native-admobをインストール

npm i --save react-native-admob@next もしくは yarn add react-native-admob@nextでインストールします。

今回はyarnを使いました（npmの方だとうまくいかない時があったので）

Google Mobile Ads SDKを追加

Google AdMob公式を参考に進んでいきます。

事前にAdMobアカウントを作成・アプリ登録を済ませたあと、対象のアプリケーションにMobile Ads SDKをインポートします。

pod 'Google-Mobile-Ads-SDK

をiosファイルの中にあるPodfileに書き込み、

pod install --repo-update

Info.plistの更新

iosファイルの中にあるInfo.plistに GADApplicationIdentifier キーとAdMobアプリIDの文字列値を追加します。

<key>GADApplicationIdentifier</key>
<string>ca-app-pub- 
3940256099942544~1458002511</string>

AppDelegate.mの変更

//新しく追加するコード
@import GoogleMobileAds;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
       didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {
       //新しく追加するコード
       [[GADMobileAds sharedInstance] startWithCompletionHandler:nil];
       return YES;
   }

@end

自分の場合、すでに何行かコードが書いてありましたが、 @implementation AppDelegate の直上に @import GoogleMobileAds; を入れ、

UIViewController *rootViewController = [UIViewController new];
//ここに新しく追加
[[GADMobileAds sharedInstance] startWithCompletionHandler:nil];
rootViewController.view = rootView;

このように追加しました。

react-native-admobをimportし、コンポーネントを配置

import { AdMobBanner } from 'react-native-admob'; とし、下のように配置しました。

render() {
   return (
   <AdMobBanner
      adSize="fullBanner"
      adUnitID="AdMobでアプリを登録した時に表示されるAppID"
      testDevices={[AdMobBanner.simulatorId]}
      onAdFailedToLoad={(error) => console.error(error)}
    />
...

このようにテスト広告が表示されれば成功です。

Android

npm or yarnでreact-native-admobをインストール

iOSと同様にインストールします。

Google Mobile Ads SDKのインストール

android/build.gradleの中に

allprojects {
    repositories {
        google()
    }
}

があることを確認して、今度はandroid/app/build.gradleの中に以下のコードを追加します。

dependencies {
    //追加
    implementation 'com.google.android.gms:play-services-ads:19.1.0'
}

Android Manifest.xmlの変更

次に、android/src/main/AndroidManifest.xmlに以下のようにコードを追加します。

<manifest>
<application>
    <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
    <!-- 追加 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
</application>
</manifest>

GoogleMobileAds公式ページにはまだ下に手順が書かれていますが、追加するのはここまでです。

react-native-admob/android/build.gradleのSDKバージョンを固定する

上記の方法でアプリをビルドしてみたものの失敗したので、解決策を探していたところこの方法で解決できました。

node_modules/react-native-admob/android/build.gradleを見ると、以下のように記述されていると思います。

...
dependencies {
    implementation 'com.facebook.react:react-native:+'
    implementation 'com.google.android.gms:play-services-ads:+'
}

こちらの下の段、admobのSDKが更新された影響で古いAPIと互換性が無いことでビルドが失敗していたようです。(参考)

現在の最新のadmobのSDKバージョンは19.1.0のようなので、以下のように書き直します。

implementation 'com.google.android.gms:play-services-ads:19.1.0'

react-native-admobをimportし、コンポーネントを配置

iOSと同様の方法で配置します。

このように表示されれば成功です！

おわりに

ぱっと見そこまで複雑ではありませんが、自分はなぜか2週間くらい広告を表示させるのに手間取ってしまいました…

npmでreact-native-admobをインストールしたときに同時に古いバージョンのReactがインストールされてしまったり、podfileに記述することでライブラリをインストールしようとして失敗したり。

React Nativeで実装している記事が少なく、かつバージョンが変わるのがとても早いため、今回は備忘録としてまとめました。

現時点で最新のReact Nativeで導入する今回の記事が少しでもお役に立てれば幸いです。

(dev)juginon-blog

勉強したこと、趣味のこと。

React Native v0.62.2でGoogle AdMobを設定する

AdMob難しすぎだろ問題

導入した環境

iOS

Android

おわりに