自作 Android アプリに Firebase AdMob を導入してみた

基本的には下記のスタートガイドの通りに進める。 

Android Studio スタートガイド  |  Firebase https://firebase.google.com/docs/admob/android/quick-star

ここでは Firebase を使用する方法を紹介するが、Firebase を使用しない方法もある。Firebase は Google が運営しているサービスで、AdMob に関して言うと、自分のアプリのアクティブユーザ数などを確認できるみたい。

アプリに Firebase を追加する

Firebase Assistant を使用するかどうかを選ぶことができる。使用した方が楽そうなのでここでは使用することにする。

Firebase Assistant を開く

Android Studio で AdMob を導入したいプロジェクトを開き、[Tools] > [Firebase] をクリックすると、Firebase Assistant のメニューが表示される。

f:id:Ginkyo:20180306224752p:plain

メニューの一番下にある [Admob] をクリックして、[Add a banner ad to your app] をクリックする。

f:id:Ginkyo:20180306225112p:plain

このような画面が表示される。

f:id:Ginkyo:20180307025211p:plain

アプリを Firebase に接続する

[Connect your app to Firebase] をクリックすると、(自分の記憶が確かなら)Firebase にサインインするように促されるので、適当な Google アカウントでサインインする。

それが済んだら以下の画面に進めるはずだ。

f:id:Ginkyo:20180306230446p:plain

プロジェクト名(自動的に埋められている)と国/地域を指定して [Connect to Firebase] をクリックする。

これで Firebase 側にプロジェクトが作成され、そのプロジェクトが Android Studio のプロジェクトと接続される。また、google-services.json というファイルが生成される。

アプリに AdMob を追加する

Firebase Assistant で [Add AdMob to your app] をクリックすると、以下のウィンドウが表示される。

f:id:Ginkyo:20180306231723p:plain

プロジェクトレベルとモジュールの build.gradle に変更を加えることになる。内容を確認したら [Accept Changes] をクリックする。

次の手順では AdMob の「アプリ ID」と「広告ユニット ID」が必要になるので、とりあえずテスト用の物を使う。本番用は後の手順で取得できる。

テスト用アプリ ID: ca-app-pub-3940256099942544~3347511713
テスト用広告ユニット ID: ca-app-pub-3940256099942544/6300978111 

レイアウトファイルにバナー広告を追加する

以下に例を示す。RelativeLayout を使用しないならば適宜書き換えること。

<!-- 名前空間を宣言する. 後述の AdView 内で宣言しても良い -->
<RelativeLayout
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    ...
    >

    <!-- ads:adUnitId で広告ユニット ID を指定する.
         広告ユニット ID をリソースファイルで定義するか, 直に入力する.
         テスト用の ID: "ca-app-pub-3940256099942544/6300978111" -->
    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_ad_unit_id">
    </com.google.android.gms.ads.AdView>

</RelativeLayout>

Activity で広告を読み込む

XML で静的に定義しただけでは広告は読み込まれないので、Activity で処理を行う。ちなみに非同期処理やパーミッションを自分で書く必要はない。

import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
// ...

public class MainActivity extends AppCompatActivity {

    private AdView mAdView;
    // ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // ここでアプリ ID を指定する. (ユニット ID ではない)
        // テスト用の ID: "ca-app-pub-3940256099942544~3347511713"
        MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");

        mAdView = (AdView) findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        mAdView.loadAd(adRequest);
        //...
    }
    //...

さて、この辺で一度テストしてみよう。

何秒か待ってみて、こんな感じのバナー広告が表示されれば OK だ。

f:id:Ginkyo:20180307031755p:plain

AdMob にアプリを登録する

AdMob アカウントを作成する

以下のページの内容に従う。難しいことはないはずなので説明を省略する。

AdMob に申し込む - AdMob ヘルプ https://support.google.com/admob/answer/7356219?visit_id=1-636559461493251004-3945121344&rd=1

AdMob にアプリを追加する

AdMob にログインして、画面左側のメニューから [アプリ] > [アプリを追加] をクリックする。

f:id:Ginkyo:20180307032242p:plain

案内に従う。まだ Google Play で公開していなくても問題ない。

f:id:Ginkyo:20180307032422p:plain

アプリの名前を入力して [追加] をクリックすれば OK。

f:id:Ginkyo:20180307032606p:plain

広告ユニットを作成する

前の手順から直接広告ユニットの作成に進むこともできる。そうしなかった場合は、AdMob の画面左側のメニューから [広告ユニット] をクリックする。

[スタート] をクリックする。

f:id:Ginkyo:20180307033126p:plain

[バナー] を選択する。

f:id:Ginkyo:20180307033303p:plain

広告ユニット名を入力して [広告ユニットを作成] をクリックする。

f:id:Ginkyo:20180307033656p:plain

広告ユニットの作成が完了すると、画面にアプリ ID と広告ユニット ID が表示される。

f:id:Ginkyo:20180307034027p:plain

これらをここまでの手順で作成したレイアウトと Activity に反映させておこう。

テストする前に署名の設定をする

さっそく本番の広告が自分のアプリに表示されるかテストしたいところだが、署名済みの APK でないと広告が配信されない点に注意すること。

署名についての具体的な説明は省くが、Android Studio の [File] > [Project Structure...] で設定できる。

f:id:Ginkyo:20180307040240p:plain

f:id:Ginkyo:20180307040322p:plain

署名の設定が済んだらアプリをテストしてみよう。実機で実行すれば本番の広告が、エミュレータならテスト広告が表示される。

f:id:Ginkyo:20180307043046p:plain

自分で広告をタップすることは規約違反であるため、誤クリック対策として実機でもテスト広告を表示したいことがあるかもしれない。そのような場合は Logcat を見てみよう。このような出力があるはずなので、「****」の部分をコピーして、

I/Ads: Starting ad request.
I/Ads: Use AdRequest.Builder.addTestDevice("****") to get test ads on this device.

Activity で AdRequest インスタンスを生成している部分に以下のように貼り付ける。

AdRequest adRequest = new AdRequest.Builder()
                .addTestDevice("****")
                .build();

すると、同じ実機ならばテスト広告が表示されるようになる。

AdMob アプリを Firebase プロジェクトにリンクする

ここまでの手順で Firebase プロジェクトと AdMob アプリが作成されているはずだ。今度はこれらをリンクさせる。

AdMob の画面左側のメニューから [アプリの設定] をクリックする。次に表示された画面で [FIREBASE にリンク] をクリックする。

f:id:Ginkyo:20180307005117p:plain

パッケージ名を正確に入力する。

f:id:Ginkyo:20180307005500p:plain

[既存の Firebase プロジェクトと既存の Firebase アプリにリンクする] を選択し、ここまでの手順で作成してある Firebase プロジェクトを選択する。

f:id:Ginkyo:20180307005651p:plain

この後表示される「次の手順に従って Firebase の統合を完了してください。」の手順は、ここまでの手順で既に済んでいることなので、飛ばして良い。

最後に

以上で Firebase AdMob の導入は終わり。本当に導入しただけだが、参考になれば幸いである。