Androidのアプリ開発をはじめようと考えている方、もしくははじめたばかりの方向けにお届けしている 【はじめてのAndroidアプリ開発】 シリーズ。 今回は 『バナー広告』の設定方法をご紹介。
Android Studio + AdMob という Google プラットフォームを利用することで、簡単にバナー広告をセットすることができます。
★本稿はこんな方に役立ちます★
★今回使用するエミュレーター環境★
まずは本稿をご確認いただく前に、バナー広告をセットする様子を動画で確認してみてください 。 Google社が提供する Android Studio と AdMob というプラットフォームを利用することで、簡単にバナー広告を設定することができます。
それでは各ステップについてご紹介していきます。
AdMob を使った広告の設定方法は、大きく分けて 2通りあります。
AdMob から設定する方法は、広告に使用する ID を取得し、それから Android Studio への設定を行う手順。
Google Developer から設定する方法は、紹介されているステップを元に Android Studio で広告設定、その後に広告用 ID をセットするという手順。
今回はテスト用 ID が用意されている Google Developer を元に設定を進めていきたいと思います。
まずは Android Studio を起動し、 「Start a new Android Studio project」 を選択。
Empty Activity を選択。
今回アプリ名は MyAdMob02、 プログラミング言語は Java をセット。あとは Google developer の作成手順に従って進めていきます。
Android Studio で AdMob を利用する最初の設定項目に、 SDK（Software Development Kit） のセットアップがあります。まずはプロジェクトレベルの build.gradle が上図のようになってるか確認しておきましょう。
次はアプリケーションレベルの build.gradle の設定。下記のコードを dependencies 内 に追記します（上図参照）。
implementation 'com.google.android.gms:play-services-ads:17.2.0'
コードを入力した途端、画面上部にポップアップが表示。「設定が変わったのでもう一度読み込み直してください」という内容。表示されている 「Sync Now」 を左クリックします。
すると今後は、サポートに関するコードのところで赤色エラーが発生。どうも先ほど追加したdependenciesのバージョンと最初からあった依存関係のバージョンで相違があるようで、同じレベルに合わせる必要があるとのこと。
赤色エラーが発生しているコードの上にカーソルを合わせて、Alt + Enterキーを押します。
いくつかの選択項目が表示されます。一番上の 「Suppress:Add // noinspection Gradle」 を選択。
すると再び画面上部に Gradle の読み込みアナウンスが出ますので、 「Sync Now」 をクリック。
これでアプリケーションレベルの build.gradle のエラーが消え、セットが完了しました。
SDK の設定が完了したら、次は AndroidManifest.xml の設定です。上図のように
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="YOUR_ADMOB_APP_ID"/>
なお今回はテスト用広告になりますので、 android:value の YOUR_ADMOB_APP_ID は サンプル用の ca-app-pub-3940256099942544~3347511713 を使用。
次は MainActivity.java の方に AdMob の初期設定を行います。
【追加コード①】
import com.google.android.gms.ads.MobileAds;
【追加コード②】
// Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");
こちらでも App ID をセットする必要がありますが、AndroidManifest.xml 同様にサンプルの App ID を使用。 MainActivity.java で使用する App ID と AndroidManifest.xml で使用する App ID は、同じということを知っておきましょう。
AdMob 用の初期設定が完了したら、次はバナー広告を表示する設定手順を進めていきます。まずはレイアウトを司る activity_main.xml を開きます。
そして下記のバナー用レイアウトコードを追加。
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
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="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>
公式リファレンスにも書かれている上記コードを追加したところ、赤色のエラーが発生。どうもレイアウトに関するエラーのようですが、一度画面（Design）の方を確認してみます。
すると本来画面の下に表示して欲しいバナー広告が、画面の上に表示されています。これは画面レイアウトが AdMob に対応していないために発生するエラー。 画面レイアウトを RelativeLayout に変更するとエラーが解消されます。
画面レイアウトを RelativeLayout に変更する手順としては、activity_main.xml 2行目に書かれている
android.support.constraint.ConstraintLayout
を
RelativeLayout
に変更するだけ。
すると先ほどは画面上部にあった広告が、画面の下に表示されるようになりました。
広告のレイアウト設定が完了したら、あとは ID でプログラムと接続すればバナー広告が稼働します。上図のようにclassとプログラムをセットして、エミュレーターを実行してみましょう。
【追加コード①】
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
【追加コード②】
private AdView mAdView;
【追加コード③】
mAdView = findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);
追加コード②でバナー広告のプロパティを設定。
追加コード③の1行目で、 UI 部品のバナー広告と ID を接続。そして2行目のコードでインスタントを生成し、3行目で広告の読み込みを実行、という流れになってます。
今回実行するエミュレーター環境は、 Android 9（Pie） を使用。
エミュレーター起動後、アプリを起動すると、3秒後ぐらいに画面下にバナー広告が表示されると思います。そしてバナーをタップすると広告画面に移動するでしょう。
現在の設定ではテスト用広告になっています。本番用の広告に変更するには、 AdMobから専用 ID を取得する必要が。
サンプルで表示できたバナー広告を本番用のバナー広告に変更するには、まず AdMob に登録して ID 取得のステップを進める必要があります。
AdMob の公式ページ から専用 ID を取得できるのですが、この時に過去に Google アドセンスを利用していた場合は、設定がめんどう面倒に感じます。それは AdMob と Google アドセンスがリンクしているため。いくつか試した結果、新規で AdMob 用の Google アカウントを作成し、設定していく方が簡単と思いました。
専用 ID の作成手順は、手順通り進めていけば簡単に作成することができます。作成した各 ID は、管理画面から確認することが可能となっていますね。
尚、本番用の AdMob ID をテスト環境で利用すると、 不正とみなされる場合もあります。アプリの開発段階においてはテスト用の AdMob ID を使用することが推奨されていますね。
今回は Google デベロッパーの公式チュートリアルを元に、 AdMob の表示方法をご紹介してきました。いくつかのコードを追加したりする必要があったのですが、 Android Studio の「新規クラス」作成で AdMob のテンプレート表示することも可能。
上図のように新規クラスの作成で AdMob のテンプレートを選択することができますが、デフォルトの状態では広告が稼働しません。いくつかの設定を行う必要があり、その設定手順はアプリ開発初心者にとってはわかりにくい内容。お時間ある方は、実際に AdMob クラスを作成して、実行してみてください。
＼Webサイト担当者としてのスキルが身に付く！！／
アプリ開発を学習するモチベーションの大きな要因に、収益化があると思います。学習初期で AdMob の設定方法をおさえておくと、学習の励みにもなることでしょう。
しかし、「 Android アプリ開発の参考書を買ったけど全くわからない」「全くモチベーションが上がらない」という方も多いのでは。そんな時は一人で頑張ろうとせずに、自分の学習環境を見直してみるというのも一つの手だと思います。
アプリ開発の学習方法は、「独学」か「プログラミング・スクール」が代表的。「プログラミング・スクールはお金がかかるから.....」と躊躇されている方もいらっしゃることでしょう。しかし、学習が止まっている時間の方がもったいないかもしれません。
CodeCamp では、安心してプログラミング・スクールを検討していただけるように「無料体験」も実施中。「時間」と「場所」の制約を極力減らした『オンライン』というスタイルに加えて、現役エンジニアが教えてくれるという安心感。まだの方は是非一度、お試しを検討してみてください。
