iPhoneアプリに、Google Admobを入れるための準備、設定は別の記事でまとめられたね。実際に準備が整ったから、SwiftUIを使ってAdMobのバナー広告を入れるための方法をまとめていきたいと思うよ。
困った時のGoogle先生！というように調べてみたけど、cocoapodを使ったり、Verが古い時のソースコードだったりしたから、完全にSwiftUIだけのコードで実装しようとした時にはかなり苦労したわね。
そうなんだよ。まだまだ、完全にSwiftUIだけのコードの説明ページがないから苦労するよね。
機能もどんどん進化するから、常に最新の方法を確認しないといけないから、しっかりとノウハウを残しておくようにしよう。
このページは、以下のVerで作っていますので、このVerより古いものは、基本的に除外したいね。一応完成したからみなさんに紹介します。
Xcode Version 13.0 beta 3 (13A5192i)以上
iOS 15以上
そうね。今回は、iPhoneアプリでバナー広告が表示されるまで頑張りましょう。
注意事項として、本物のIDを使うと、テストの時にクリックすることで、垢BANされてしまうみたいだから、必ず、テスト用のIDに設定してからクリック操作するようにしましょうね。
Xcode SwiftUIだけで、Google AdMobを表示させよう。
以下の記事で、Google AdMobの基本設定までできるようになりました。
これから色々な広告をアプリに表示できるようになる必要があります。
まず手始めに、バナー広告から導入し、基本的な画面表示の際に、広告が表示されるようにしましょう。
完成形は以下のイメージです。
Google AdMob 広告【SwiftUI iOS広告】
STEP１：アプリにバナー広告を常に表示させる。
世の中のアプリケーションでは、導入時無料のアプリが多くあります。
確かに、アプリが無料であるのは魅力的です。１円も払わなくてもアプリを使えるのですから。
でも、アプリ開発者からすると、せっかく良いものを作ってもお金を払ってくれないというのは寂しいものです。
もちろん、課金が可能なアプリが作れることは重要ですが、その分ソースコードの追加が必要となり、かなりアプリ開発初心者からすると壁が高い状況になります。
そこで、まずは、無料でアプリを提供することを前提に、徐々に機能を追加することでプログラミングの技術を上げて課金の対応することを考えたいと思います。
前提として、無料版は広告表示が出る。ただし、課金してくれた人には広告を出さない。という方針にしたいと思います。
常にアプリの下側に広告が出るというのは、アプリを使う側としてもうっとうしいかもしれませんが、背に腹は変えられません。良いアプリを作るという代償でバナー広告から収入を得られるようにさせてもらう作戦をとりたいと思います。
STEP2：サブスクリプションの課金をしてくれた人には、広告を表示させないようにする。
STEP2では、常にバナー広告を出せる状態になった後、別の記事で記載した、課金（アイテム購入と、サブスクリプション）による機能を導入し、この課金をしてくれた人には、広告を出さないようにする仕組みを入れたいと思います。
Meet StoreKit 2【SwiftUI iOS 課金】
ではどのようにすれば良いのか？となりますが、ここはまだ領域として達していないので、もしみなさん良いHPを見つけたら教えていただけますと幸いです。
Xcodeで、SwiftUIでバナー広告を導入する
少し前の導入方法を説明されていますので、まずは参考としてイメージを掴みましょう。
バナーの設定をテスト用に変更する。
バナーの実装を急ぐがあまり、本番の設定をしたままテストを実施すると、不正利用と判断され垢BANされてしまうと言われています。そのため、まずはテスト用の広告が表示されるよう設定しましょう。
デモ広告ユニット
テストを有効にする最も簡単な方法は、Google が提供するデモ広告ユニットを使用することです。これらの広告ユニットは AdMob アカウントと関連付けられていないため、クリックしてもアカウントで無効なトラフィックが発生する恐れがありません。
各フォーマットのテスト クリエイティブを参照するデモ広告ユニットを次に示します。
| 広告フォーマット | デモ広告ユニット ID |
|---|---|
| アプリ起動 | ca-app-pub-3940256099942544/ |
| バナー | ca-app-pub-3940256099942544/ |
| インタースティシャル | ca-app-pub-3940256099942544/ |
| インタースティシャル動画 | ca-app-pub-3940256099942544/ |
| リワード | ca-app-pub-3940256099942544/ |
| リワード インタースティシャル | ca-app-pub-3940256099942544/ |
| ネイティブ アドバンス | ca-app-pub-3940256099942544/ |
| ネイティブ アドバンス動画 | ca-app-pub-3940256099942544/ |
ソースコードを書いてみましょう。
ようやくソースコードを書く段階にきました。
ここからは、試してはエラー、試してはエラー。ググってみると色々な実装があって、どれを使えば良いかわからない。こんなループに入ります。
ソースコードの条件導入の条件は、独立して、アプリのコードに個別に織り込むのではなく、１ファイルに独立してコード部を定義しておき、利用したいところだけ、Callすることで表示するという方法にしたいともっています。
前述した通り、課金をしてもらった時は表示させないという方針を取りたいので、共通関数化しておき、その中で、課金だったらバナーを表示しない、非課金であればバナーを表示するというロジックを組みたいと思うからです。
色々な画面の部分にバラバラと入れてしまうと、修正漏れをしてしまうということでなるべくシンプルな設計を心がけたいと思っています。
以下のプログラムの作り方が参考になりましたので紹介します。
Google AdMobに関係するロジックのみを1つのファイルに書き出し、本流のロジックが書いてあるのは、関数をCallするだけ。そのため、抜き出したファイルだけ見れば、Google AdMobのバナーに関するロジックだけがあるという実装をしています。
探していたのは、この実装方法でした！！
でも注意してください。この動画は、iOS15の実装方法ではエラーが発生します。
Googleの仕様が変わっているため、あくまでも実装のイメージを使って欲しいと思います。
バナーのサイズ
標準のバナーサイズについては、以下の表をご覧ください。AdSizeの定数は以下のGADAdSizeBannerを選んでみたいと思います。
| サイズ（単位はポイント、幅×高さ） | 説明 | 対応デバイス | AdSize の定数値 |
|---|---|---|---|
| 320×50 | バナー | スマートフォン、タブレット | GADAdSizeBanner |
| 320×100 | バナー（大） | スマートフォン、タブレット | GADAdSizeLargeBanner |
| 300×250 | IAB レクタングル（中） | スマートフォン、タブレット | GADAdSizeMediumRectangle |
| 468×60 | IAB フルサイズ バナー | タブレット | GADAdSizeFullBanner |
| 728×90 | IAB ビッグバナー | タブレット | GADAdSizeLeaderboard |
| 指定された幅 × 最適な高さ | アダプティブ バナー | スマートフォン、タブレット | なし |
Cannot find ‘kGADAdSizeBanner’ in scopeのエラー解決方法
iOS15でのSwiftUIで実装サンプルを探しました。
Cannot find ‘kGADAdSizeBanner’ in scopeというエラーが出て、スペルも合っているじょうでした。なぜ他の人が成功しているサンプルコードをそのまま写したにもかかわらずエラーのCannot find ‘kGADAdSizeBanner’ in scopeが出てしまったのでしょうか？
答えは、GoogleのAdSizeの仕様が変わっており、kGADAdSizeBannerという変数が使えなくなり、GADAdSizeBannerという変数名に変わっているということでした。
ということで、なんとかバナー広告は完成しました。次の広告にチャレンジしてみたいと思います。
Useful Resources: The Android test ads guide →
The iOS test ads guide →
The Unity test ads guide →
The Mobile Ads SDK support forum →
Watch more episodes of Mobile Ads Garage here →
【SwiftUI】Extra argument in call エラーの対処法
バナー広告を表示する際、Spacer()を入れて行間を取ろうと考えました。
バナー、バナー大、レクタングルの3つのサイズを、1つの関数をCallするだけで呼び出せるようになったので、あとは表示の工夫が課題になりました。
原因は、Spacer()が多すぎて、表示の問題になっていることが分かりましたので、Spacer()の数を減らして3つともに表示できることが確認できました。
以下のように、テスト広告として黒い箱（Test Mode）が表示されている状況でテスト・動作評価してくださいね。
さて、どうやって、スペース作ろうかなぁ。。。
コメント