前提条件として、広告追加前のビルド可能で動作するアプリがある状態で、バナー広告を追加したい人向けの記事です。
基本的な手順はGoogle先生から公開されているので、その通りにやれば良いですが、初めてやる場合、わからないことが多いので詰まったところを解説しながら書いていきます。
広告にも種類がいくつかあるのですが、バナー広告を追加する手順を紹介します。
※初めはネイティブ広告を追加しようと思っていたのですが、参考にできる情報が最も多くやりやすいと感じたのはバナー広告だったのでバナー広告を選定しました。
では行ってみましょう。
■手順リンク集
まずは、参考になる手順のリンクです。結局公式に勝るものはない。
・Flutter アプリに AdMob 広告を追加する （バナー広告/インタースティシャル広告/リワード広告）
・Adding an AdMob banner and native inline ads to a Flutter app (ネイティブ広告)
広告にもいろいろ種類があるんだな・・・ということがわかると思うのですが、イメージがわかない人は以下を見てください。画像付きでどういった広告かわかると思います。
・Google AdMob > Mobile Ads SDK(Android) ※ここのページはFlutterを使用せずに広告を追加する手順を紹介しているページ
■広告ユニットの設定
広告を公開するためには広告ユニットというものを設定してアプリ ID / 広告ユニット IDの2つを出してもらう必要があります。
個々の手順はGoogleから公開されているもので十分にわかるので詰まることはないと思います。
ざっくり、概要を言うとAd Mobのサービスに登録して、バナー広告作ることを設定、その時に名前が付けられるので、どのアプリに利用する予定なのかを書いておけば管理しやすいです。
手順は以下です。
■SDK Versionを設定する
SDK Verはビルドの時に引っかかったりすることがあるのですが、初めminSdkVersion 20となっており、Flutterを使用するには問題があるようなのでflutter.minSdkVersionとします。
android\app\build.gradle
■自作コードに広告を入れられるようにする
自作アプリを作ったとき、UIなどのコードをStatelessWidgetに指定して作っており、StatelessWidgetの状態から何かを追加して広告追加できるかと思っていたらできないことがわかり、StatefulWidgetを作って広告の読み込み等をやらせたうえで内部にUIなどのコードを含むような構造にすることでうまくいきました。
広告のための全体構造は以下のようにします。main.dartに記述しています。
class YourParentWidget extends StatefulWidget {
@override
YourParentWidgetState createState() => YourParentWidgetState();
}
class YourParentWidgetState extends State<YourParentWidget> {
@override
void initState() {
super.initState();
// 広告の初期化
MobileAds.instance.initialize();
// 広告を読み込むコードをここに追加
// 例: AdRequest を作成し、広告を読み込む
final adRequest = AdRequest();
// 広告ユニット ID を指定
final adUnitId = 'あなたの広告ユニット ID';
InterstitialAd.load(
adUnitId: adUnitId,
request: adRequest,
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (InterstitialAd ad) {
// 広告の読み込みが成功した場合の処理
ad.show(); // 広告を表示するなどの操作
},
onAdFailedToLoad: (LoadAdError error) {
// 広告の読み込みが失敗した場合の処理
print('広告の読み込みエラー: $error');
},
),
);
}
@override
Widget build(BuildContext context) {
// YourParentWidget のビルドロジック
return Container(
// ここにウィジェットの内容を配置
);
}
}// ここにウィジェットの内容を配置 👈この箇所に自作のUIなどを書いていきます。
■Google Mobile Ads Flutterプラグインを追加
手順は以下 Google先生が解説してくれているので要点だけ書きます。
・pubspec.yaml
pubspec.yamlのenvironment:やdependencies:をいじるだけです。
Verはビルドする時期にもよるので、そのあたりは適時修正するように。
environment:
sdk: '>=3.1.1 <4.0.0'
dependencies:
google_mobile_ads: ^3.0.0当然、Pub getは忘れないようにすること
・AndroidManifest.xml
meta-dataタグを追加するだけなので、これも手順通りにすればOKです。
動作確認が終わったら、手順にあるアプリID(テスト用)でなく、広告ユニット設定で入手したアプリIDに差し替えるようにします。
広告のヘルパークラスを追加する
手順は以下 Google先生が解説してくれているので要点だけ書きます。
テスト用の AdMob アプリ ID と広告ユニット IDを含むad_helper.dartをコピペすればよいです。
場所はlib/と指定されているのでmain.dartなどが格納されているlibファイルに入れます。
こちらも、動作確認が終わったら広告ユニット設定で入手したIDに差し替えるようにします。
Google Mobile Ads SDK を初期化する
手順は以下 Google先生が解説してくれているので要点だけ書きます。
home_route.dartファイルってなんやねんって思いますが、これは自作アプリ作ってない人向けにサンプルコードが準備されているので、その中に格納されているファイルの事です。
なので、自作アプリの場合、home_route.dartに相当するファイルを考えないといけないわけですが、main.dartに相当すると思っておけば良いです。
何をやるか、というとgoogle_mobile_adsをインポートし、MobileAdsの初期化をすればよいということ。なので必須のコードは以下の2行ですね。
import 'package:google_mobile_ads/google_mobile_ads.dart';
MobileAds.instance.initialize();//これは初期化工程のどこかに入れるこういわれてもわからん場合、以下のようなイメージで考えてください
import 'package:google_mobile_ads/google_mobile_ads.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());//MyAppで自作コードを書く
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(),
home: Scaffold(
body: YourParentWidget(),
),
);
}
}
・・・バナー広告を追加する
手順は以下
正直、この手順が一番難しい。初心者であった私はここで苦しめられました、なぜこの説明で十分なのか？と思うところがありますが、原文が英語なので感性が違うなと思うところがあります。
1.
lib/game_route.dartファイルを開き、ad_manager.dartをインポートします。
とありますが、game_route.dartやad_manager.dartは先ほども出た、自作アプリのない人向けのサンプルコードのファイルなので何の役割なのか理解しないといけません。
自力で解きたい人は一度自分で考えてみてください。
・・・
結論を言うと、game_route.dartやad_manager.dartの役割なんてどうでもいいです。
振り返って分かることとしては、おそらくgame_route.dartにad_manager.dartをインポートしておかないと不都合がるということで、ad_manager.dartに広告の設定やらが書かれていたのでしょう。game_route.dartで広告を表示する必要があったのでしょう。この記事の解説ではmain.dartにほとんど記載するように書いているので無視でいいんです。
2.以下の行を追加して、
ad_helper.dartとgoogle_mobile_ads.dartをインポートします。
これはそのまま従います。
前の手順でad_helper.dartを作っているということ、google_mobile_ads.dartをインポートしないと広告追加ができないからそのまま従えば良いことがわかります。
importするライプラリの役割くらいは理解しましょうってことです。
main.dartに以下のように書きます。
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'ad_helper.dart';3.
_GameRouteStateクラスで、バナー広告向けに以下のメンバーを追加します。
これの手順はあまり深く考えない方がいいです。
class _GameRouteStateはサンプルコードに含まれるものなので、押さえるべきことは、追加したいところで、BannerAdを追加するんだね～ くらいの理解でいいです。
4.
initState()メソッドで 320×50 バナー（AdSize.banner）向けにBannerAdを作成して読み込みます。なお、イベント リスナーは、広告の読み込み時に UI（setState()）を更新するように構成されています。
意味不明でした。端的に言うとinit(初期化)時にどういう広告読み込むの？ってだけの話。
基本的にサンプルコード通りにすればよいと思うのですが、何かあればGPT先生に添削してもらってください。
私の場合は最終的に以下のようになりました。もちろんmain.dart内の記述です。
class YourParentWidget extends StatefulWidget {
@override
_YourParentWidgetState createState() => _YourParentWidgetState();
}
class _YourParentWidgetState extends State<YourParentWidget> {
late BannerAd myBanner;
late bool isLoading;
@override
void initState() {
super.initState();
isLoading = false;
myBanner = BannerAd(
adUnitId: AdHelper.bannerAdUnitId, // あなたの広告ユニットIDを設定してください
size: AdSize.banner,
request: AdRequest(),
listener: BannerAdListener(
onAdLoaded: (_) {
setState(() {
isLoading = true;
});
},
onAdFailedToLoad: (ad, err) {
print('Ad failed to load: $err');
},
),
);
myBanner.load();
}
・・・・5.可能な場合にバナー広告を表示するように
build()メソッドを変更します。
これはなんとなく理解できますが、自作コード内の広告を表示したいところに広告が読み込まれるように広告を読み込むための記述を入れてねってことです。
こちらもサンプルコードに沿って書けばよいと思うのですが、私の書き方はGPT先生の添削で少し変わってしまったので最終的に以下のようになりました。
class _YourParentWidgetState extends State<YourParentWidget> {
//・・・上記の記述の広告初期化内容が入ってる
@override
Widget build(BuildContext context) {
//・・・ここに自作コードが書いてある、UIの一番下に広告追加してみた
//広告ブロック
if (isLoading)
Container(
width: MediaQuery.of(context).size.width,
height: myBanner.size.height.toDouble(),
child: AdWidget(ad: myBanner),
),
],
),
),
);
}
@override
void dispose() {//引用6の件
super.dispose();
myBanner.dispose();
}
}6.
dispose()コールバック メソッドのBannerAd.dispose()メソッドを呼び出して、BannerAdオブジェクトに関連付けられているリソースをリリースします。
真上のコードに最終的にどうなったか記載されていますが、これは手順通りですね。
手順通りだったので、あまり気にしていません。
・・・はい、ここでビルドしてください。
エラーがなくなるまでGPT先生orGoogle先生と一緒に頑張ってください。
手順としてはこれで完了のようです。
未来の自分でも、誰かの役に立てれば幸いです。
コメント