HOME技術AndroidAndroidアプリ:Firebaseを利用したAdMobの実装方法

Androidアプリ:Firebaseを利用したAdMobの実装方法

AndroidアプリでFirebaseを利用したAdMobの実装方法を調べました。
なお、FirebaseおよびAdMobには既にユーザ登録済みであることを想定しています。
未登録の場合は先に登録してください。

Firebaseに登録

Firebase Consoleにアクセスします。
https://console.firebase.google.com/?hl=ja

「プロジェクトを追加」を指定します。

プロジェクトの追加が表示されます。
「プロジェクト名」は、適当に付けますがAndroid Studioでつけたプロジェクト名と一緒にしておくと分かりやすいと思います。
「アナリティクスと課金の地域」は、「日本」を選択します。
「Firebase向けGoogleアナリティクスのデータ共有にデフォルトの設定を使用する」及び「測定管理者間のデータ保護条項に同意します。」にチェックを入れます。
「プロジェクトを作成」をクリックします。

プロジェクトが作成されたら、「次へ」をクリックします。

「Firebaseへようこそ」が表示されたら「AndroidアプリにFirebaseを追加」をクリックします。

「AndroidアプリにFirebaseを追加」が表示されます。
「① アプリの登録」においては、
「Androidパッケージ名」にAndroid Studioで使っているパッケージ名を入力します。
※Javaファイルの先頭に記載されている「com.example.app」のような文字列です。

「デバッグ用の署名証明書SHA-1」は入力しないで構いません。

「アプリを登録」をクリックします。

「② 設定ファイルのダウンロード」では、
「google-services.jsonをダウンロード」をクリックして、
google-services.jsonファイルをダウンロードします。

このファイルをダウンロードしたら、Android Studioで該当プロジェクトを開き、「Project」→「[プロジェクト名]」→「app」以下に配置します。

「次へ」をクリックします。

「③ Firebase SDKの追加」では、Android Studioでの設定方法が書かれています。

左のツリー表示の内容を「Project」から「Android」に切り替えます。

「build.gradle(Project: ***)」を開きます。
以下を追加します。

buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.0.0' // ←この一文を追加
}
}

「build.gradle(Module: app)」を開きます。
以下を追加します。

dependencies {
implementation 'com.google.firebase:firebase-core:16.0.0' // ←この一文を追加
}

また、同ファイルの一番下に以下を追加します。

apply plugin: 'com.google.gms.google-services'

build.gradleを修正するといったん反映させる必要があります。
「sync」と表示されるので、クリックします。

「④ アプリを実行してインストールを確認」では、Android Studioから実機にインストールして、アプリを起動させます。
通信の確認が取れると「Firebaseがアプリに正常に追加されました。」という表示になります。
「コンソールに進む」をクリックします。

AdMobに登録

AdMobにアクセスします。
https://apps.admob.com/

「アプリを追加」をクリックします。

「広告ユニットを追加」をクリックします。

「広告ユニットの作成」画面になります。
「① 広告フォーマットを選択する」では、バナー、インタースティシャル(全画面広告)、リワードの3つから選べます。
今回はバナー広告を作ります。
「バナー」の「選択」をクリックします。

「広告ユニット名」を入力します。
自分がわかりやすい名前を入力します。
そのほかの項目は特に変える必要はありません。
「広告ユニットを作成」をクリックします。

広告ユニットが作成されると、アプリIDと広告ユニットIDが表示されます。
これは後でAndroid Studio内で利用するのでメモしておきます。
「完了」をクリックします。

次にAdMobの広告とFirebaseを関連付けします。
「Firebaseにリンク」をクリックします。

今回はFirebaseプロジェクトを先に作っているため、「既存のFirebaseプロジェクトと既存のFirebaseアプリにリンクする」を選択して「次へ」をクリックします。

「リンクしました」と表示されたら完了です。
「完了」をクリックします。

Android Studioで設定

Androidで広告を表示する設定をします。

なお、広告は数時間経たないと表示されないので、この作業後にすぐに表示されない場合は翌日にもう一度見てみましょう。

build.gradle (Module: app)

「build.gradle (Module: app) 」を開き、
dependenciesの項目に、

implementation 'com.google.android.gms:play-services-ads:15.0.1'
implementation 'com.google.firebase:firebase-ads:11.8.0'

を追加します。
11.8.0の部分は適宜変更します。
2018年7月時点では11.8.0です。

build.gradleを変更すると再読み込みが必要になります。

AndroidManifest.xml

AndroidManifest.xmlを開き<manifest>タグ以下、<application>タグ前に以下の2行を追加します。

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

activity_main.xml

activity_main.xmlが広告を表示するレイアウトファイルであることを想定しています。
以下を表示したい箇所に貼り付けます。

<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="SMART_BANNER"
ads:adUnitId="ca-app-pub-ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>

※layout_centerHorizontalなどの部分は適宜修正してください。

ads:adUnitIdには、広告ユニットIDを入力します。
※ここではテスト用のIDを入力しています。

MainActivity.java

MainActivity.javaが広告を表示するjavaファイルであることを想定しています。
ファイルの冒頭のインポート文に以下を加えます。

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

MainActivityクラスの、

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

以下に、次のコードを貼り付けます。

MobileAds.initialize(getApplicationContext(),"ca-app-pub-3940256099942544~3347511713");

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

MobileAds.initializeの”ca-app-pub-****”の部分は、アプリIDを入力します。
ここではテスト用のIDを使用しています。

関連記事

Androidアプリ:ストアの掲載情報

Androidアプリのプログラムが完成したらすぐにGoogle Playにアップロードできるわけではありません。 プログラム以外に必要なデータを以下にリストアップしました。 ストアの掲載情報として必要…続きを読む

Androidアプリ:タイトルバーを消す

Android Studioで、タイトルバーを消す方法です。 通常は、以下のように画面上部にタイトルバーが表示されています。 AndroidManifest.xmlを編集する android:them…続きを読む

Androidアプリ:画面をタップしたら文字を入れ替える

画面をタップしたら文字を入れ替えるアプリをつくります。 今回はタッチイベントを取得する方法を調べました。 ここではレイアウト定義ファイルを「activity_main.xml」、 プログラムファイルを…続きを読む

Androidアプリ:フォーカスをあてたEditTextのテキストを全選択する

Android StudioでEditTextにフォーカスが当たったと同時に、既に入力されている文字列をすべて選択した状態にする方法です。 EditTextタグに以下のコードを追加 android:s…続きを読む

Androidアプリ:アイコンの下に表示されるテキストの設定

Androidアプリをインストールした後に、スマホ画面に生成されるアイコンの下に表示されるテキストの設定方法です。 AndroidManifest.xml AndroidManifest.xmlを開き…続きを読む

Androidアプリ:ライブラリの更新とエラーの修正

Androidアプリを開発していて、Build.gradle(app)の、dependenciesの項目内でハイライト表示されたり、赤い下線が引かれたりすることがあります。 ハイライトはライブラリを更…続きを読む

Androidアプリ:アダプティブアイコンに対応する

AndroidではOS 8.0からAdaptiveアイコン(アダプティブアイコン)というアイコンを用意する必要がでてきました。 これまでの通常のアイコン、ラウンドアイコンに加えて、アダプティブアイコン…続きを読む

Androidアプリ:ボタンを押すとメッセージが入れ替わる

Android StudioでAndroidアプリを試作します。 今回は「ボタンを1回押すとテキストの内容が変わり、もう1回押すと元に戻る」というだけのアプリをつくります。 プロジェクトの生成 And…続きを読む

Androidアプリ:ボタンやEditTextに余白(パディング)を設定する

Android StudioでボタンやEditTextに余白(パディング)を設定します。 余白の設定はレイアウトファイル(activity_main.xml)を編集します。 activity_main…続きを読む

Androidアプリ:ボタンをタップして別画面に遷移する

ボタンをタップしたら別画面に遷移させる方法です。 以下の例では、メイン画面の「ボタン」をクリックすると、サブ画面に移動し、サブ画面の「終了」ボタンを押すとメイン画面に戻ってきます。 メイン画面 act…続きを読む