2020年4月15日水曜日

Kotlinはじめました(AdMobアダプティブバナー広告を組み込む)


「Kotlinはじめました(AdMobバナー広告を組み込む)」のつづきです。

前回普通のバナーを組み込みましたが、今回はそれをベースにちょこちょこっと直してアダプティブバナーの表示をしたいと思います。


♪♪♪


そもそもアダプティブバナーってなに?

ざっくり言うと、横幅が自由に指定できて、それにあわせて高さや広告内部のレイアウトを自動的にいい感じに設定してくれるバナー広告だそうです。

標準的なバナーのサイズというと320x50ですが、高解像度のディスプレイが主流の昨今、バナーの左右が余る事が多いです。前回のサンプルでもバナーの左右に灰色のコンテナの地が見えていました。それがディスプレイの横幅いっぱいに動的にあわせることができれば、広告としては効果的です。つまり、

うざくなる(笑)。


♪♪♪


お金に関わることですからね。自己責任でお願いしますよ。ちゃんとAdMobのヘルプを読んで下さいね。基本的にクイックスタートガイドと同じ内容ですけど、そこはそれ、こんなに簡単ですよという記事なのでご理解のほど。

AdMobのアカウントとアプリID、バナーの広告ユニットIDは取得済みの前提です。テスト用にAdMobによるデバッグ用IDがありますので、スタートガイドバナーのスタートガイドを確認して下さい。だめですよ、本番用のIDでテストしちゃ。

AdMobコンソールでの設定は特段必要ありません。バナーの広告ユニットIDも同じで大丈夫です。


♪♪♪


ちなみにAdMobによる解説動画はこちらです。

日本語の解説動画が作られるほどの推し具合。


♪♪♪


レイアウトを修正します。

広告によって高さがかわるので、コンテナのHeightを50dp固定からwrap_contentにします。


アクティビティにバナーの幅を算出する処理を追加して、ロード時にAdSize.BANNERの代わりに設定したらOKです。

AdMobのヘルプではバナーをコンテナの幅に合わせる処理が入ってますが、ここでは単純にディスプレイの幅に設定しています。


これで実行するとこうなります。
うざい(笑)。
例のコンテナの灰色の地が見えていません。


♪♪♪


このアダプティブバナーですが、上で書いたように横幅を指定すると高さが自動的に決められます。解説動画によると高さは最大で画面の15%までになるそうですが、広告のロード時に画面の高さは渡してないですから、SDKの中で取得しているのでしょうか。

インラインのアダプティブバナーはまだ開発中だそうで、これが出来れば今は亡きネイティブ広告の代わりになって、なかなか便利そうです。


♪♪♪


サンプルのプロジェクトをGithubに上げておきました。良かったら見てみてください。


こちらもどうぞ。
Kotlinはじめました(前編)
Kotlinはじめました(後編)
Kotlinはじめました(書籍「Kotlinプログラミング」を読む)
Kotlinはじめました(AdMobバナー広告を組み込む)



2020年4月1日水曜日

Kotlinはじめました(AdMobバナー広告を組み込む)


Kotlinはじめました(書籍「Kotlinプログラミング」を読む)」のつづきです。だんだんKotlinにも慣れてきました。


♪♪♪


先日AdMobから「アダプティブバナーってのをリリースしたからな、組み込んだらどうや。儲かるかもしれへんで、ぐへへへ。(意訳)」というメールをいただいたので、ちょっとやってみました。

手順としては普通のバナーとほとんど変わらないので、今回はまず普通のバナー広告の組み込みについて書きます。


♪♪♪


お金に関わることですからね。自己責任でお願いしますよ。ちゃんとAdMobのヘルプを読んで下さいね。基本的にクイックスタートガイドと同じ内容ですけど、そこはそれ、こんなに簡単ですよという記事なのでご理解のほど。

AdMobのアカウントとアプリID、バナーの広告ユニットIDは取得済みの前提です。テスト用にAdMobによるデバッグ用IDがありますので、スタートガイドバナーのスタートガイドを確認して下さい。だめですよ、本番用のIDでテストしちゃ。


♪♪♪


・Android Studioでプロジェクトを作成したら、プロジェクトレベルのbuild.gradleにGoogleのMavenリポジトリを設定します。

これは普通にプロジェクトを作成すればすでに設定されていると思います。


・アプリレベルのbuild.gradleに、AdMob SDKを設定します。

特別な理由がなければ、最新のバージョンを指定します。


・マニフェストファイルにアプリIDを設定します。

アプリIDは'ca-app-pub-'で始まるコードですが、数字の間をつなぐのがチルダです。広告ユニットIDと間違いやすいのでお気を付けください。


・レイアウトファイルに広告を貼るためのコンテナを追加します。

スタートガイドでは、レイアウトに直接AdViewを組み込む方法が例示されていますが、コンテナ(ここではFrameLayout)を作って、そこにAdViewをKotlin側で貼り付ける方が色々自由がきくのでオススメです。

コンテナの背景を灰色(#979797)にしているのは、単にコンテナ部分を見分けやすくするためです。通常は、透過するかそのアプリに馴染む背景を設定します。


・ActivityのKotlinソースは以下のようにします。

ここではinitAdMob()とloadAdMob()を続けて処理してますが、この初期化とロードを分けておくと後々いろいろコントロールしやすくなります。

また、AdListenerを使ってイベントを拾うのも、他の広告ネットワークを使うときなどには便利です。単純に広告を表示するだけなら不要ですが、広告の取得の可否・タイミングが受け取れると、ごにょごにょするのに自由度が高いです。

バナーのサイズにはAdSize.BANNERを設定しています。標準的な320x50のサイズです。

上で書きましたが、広告ユニットIDはアプリIDと間違いやすいので気をつけて下さい。


♪♪♪


これで実行するとバナー広告が表示されます。

Nice job!

これはNexus5Xで実行したものです。幅320の広告バナーの左右に灰色のコンテナの地が見えていることがわかります。

サンプルのプロジェクトをGithubに上げておきました。良かったら見てみてください。

こちらもどうぞ。
Kotlinはじめました(前編)
Kotlinはじめました(後編)
Kotlinはじめました(書籍「Kotlinプログラミング」を読む)
Kotlinはじめました(AdMobアダプティブバナー広告を組み込む)

緑の海豚の通りにて。