見出し画像

FlutterアプリでGoogle広告を実装する

null

前提：私の開発環境

  • OS：Ubuntu 24.0.3（Wayland 環境）

  • 入力デバイス：Apple SPI トラックパッド

  • パソコン：MacBook Pro (13-inch, 2016, Four Thunderbolt 3 ports)

  • エディタ / IDE：VS Code（主に使用）

  • 主な開発領域：

    • Flutter（Android / iOS / Desktop / Web）

    • Web フロントエンド：React（Vite）

    • バックエンド：Spring Boot / FastAPI

    • データベース：PostgreSQL

  • その他：

    • Git を用いたリポジトリ／ブランチ／コミット単位での開発

    • ローカル環境中心での検証・実装

使用しているパソコン。MacOSとしてはサポートが切れている古いものを使っています。

※ 記事内のコードや挙動は、上記環境を前提にしています。

Flutterアプリで広告を実装する方法（超やさしく・体系的に）

この記事では、Flutterアプリに広告を入れるまでの流れと、広告の種類を、できるだけ専門用語を砕きながら、コード付きで順番に説明する。

結論から言うと、

  • Flutterで広告を入れるなら Google AdMob を使うのがほぼ標準

  • Flutter側では google_mobile_ads という公式パッケージを使う

  • 実装は「準備 → 初期化 → 広告読み込み → 表示」の4段階

この構造を頭に入れておくと、途中で迷子になりにくい。

そもそも「アプリ広告」って何をしているのか

まず超重要な前提整理。

Flutterが直接「広告を配信」しているわけじゃない。

実態はこう。

  • Google（AdMob）が広告を管理・配信

  • Flutterアプリは「広告を表示する箱」を用意するだけ

  • 表示した回数やクリック数をGoogleが計測

  • 収益はGoogleから支払われる

つまりFlutter側の仕事は、

「ここに広告を出してください」とお願いするだけ

この感覚を持っておくと、広告SDKが怖くなくなる。

Flutterで使われる広告の種類

広告にはいくつか種類がある。それぞれ「出るタイミング」と「ユーザー体験」が違う。

① バナー広告（Banner Ad）

  • 画面の上 or 下に常に表示される

  • 小さくて邪魔になりにくい

  • 収益は控えめだが安全

初心者が最初に実装するならこれ一択。

② インタースティシャル広告（Interstitial Ad）

  • 画面全体を覆う広告

  • 画面遷移のタイミングで表示される

  • 収益性は高いが、出しどころを間違えると嫌われる

「ステージクリア後」「一覧→詳細へ移動する直前」など、
ユーザーの行動が一区切りつく瞬間に出すのが鉄則。

③ リワード広告（Rewarded Ad）

  • 動画広告を見ると報酬がもらえる

  • ゲームや学習アプリと相性が良い

例：

  • 広告を見る → ハートが1回復

  • 広告を見る → 機能を一時解放

ユーザーが「自分で見ると決める」ので、体験が悪化しにくい。

実装全体の流れ（地図）

ここからが本題。

広告実装は、必ずこの順番で進む。

  1. AdMobでアプリ登録

  2. Flutterにパッケージを追加

  3. アプリ起動時に広告SDKを初期化

  4. 広告を読み込む

  5. ウィジェットとして表示

順番を飛ばすと、普通に動かない。

① AdMobでアプリを登録する

まずFlutterの外の作業。

  • Google AdMob にログイン

  • アプリを新規作成

  • Android / iOS を選択

  • アプリID と 広告ユニットID を取得

ここで重要なのは2種類のID。

  • アプリID：アプリ全体を識別するID

  • 広告ユニットID：広告1枠ごとのID

Flutterではこの2つを別々に使う。

② Flutterに広告パッケージを追加

使うのは公式のこれ。

# pubspec.yaml

dependencies:
  google_mobile_ads: ^5.0.0

このパッケージは何？

  • Googleが公式に提供

  • Android / iOS 両対応

  • Flutter用にラップ済み

怪しいことは一切していない、安全なやつ。

③ アプリ起動時に広告SDKを初期化する

広告は アプリ起動時に一度だけ初期化 する。

main.dart

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // ▼ 広告SDKの初期化（必須）
  await MobileAds.instance.initialize();

  runApp(const MyApp());
}

何をしているか噛み砕く

  • ensureInitialized()

    • Flutterのエンジン準備が終わるまで待つ

  • initialize()

    • 「これから広告使いますよ」とGoogleに宣言

これを忘れると広告は一生出ない。

④ バナー広告を読み込む

まずは一番シンプルなバナー広告から。

変数の正体を先に整理

  • BannerAd：広告そのもの（Googleが提供）

  • _bannerAd：自分で宣言した変数

ここ、混乱しがちなので明示しておく。

StatefulWidgetで管理する理由

広告は「ロード中」「ロード完了」「失敗」という状態を持つ。

だから StatefulWidget で管理するのが自然。

バナー広告のコード例

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerAdWidget extends StatefulWidget {
  const BannerAdWidget({super.key});

  @override
  State<BannerAdWidget> createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  // ▼ BannerAd は「広告クラス」（SDKが提供）
  BannerAd? _bannerAd; // ← これは自分で宣言した変数

  @override
  void initState() {
    super.initState();

    _bannerAd = BannerAd(
      adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', // テスト用IDに置き換え推奨
      size: AdSize.banner,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (_) {
          setState(() {});
        },
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
        },
      ),
    )..load(); // ← ここで広告取得開始
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_bannerAd == null) {
      return const SizedBox.shrink();
    }

    return SizedBox(
      width: _bannerAd!.size.width.toDouble(),
      height: _bannerAd!.size.height.toDouble(),
      child: AdWidget(ad: _bannerAd!),
    );
  }
}

コード全体を構造で理解する

ここが大事な「マクロ視点」。

  • initState()

    • 広告を作る

    • 広告を読み込む

  • build()

    • 読み込み済みなら表示

    • なければ何も出さない

  • dispose()

    • 画面が消えるときに広告も破棄

広告は「画面にぶら下がるリソース」なので、
画面と一緒に生まれて、画面と一緒に死ぬ設計が正解。

Scaffoldに組み込む例

Scaffold(
  appBar: AppBar(title: const Text('広告テスト')),
  body: const Center(child: Text('コンテンツ')),
  bottomNavigationBar: const BannerAdWidget(),
);

これで画面下に広告が出る。

テスト広告を必ず使う

本番IDをいきなり使うと、最悪アカウント停止。

Googleが公式に用意しているテストIDを使うこと。

adUnitId: BannerAd.testAdUnitId,

これは開発者の命綱。

よくある勘違い

  • 広告は表示した瞬間に収益が出る
    → 基本は表示＋条件付き

  • Flutterだけで広告収益が管理できる
    → 管理はすべてAdMob側

  • たくさん出せば儲かる
    → ユーザーが消える方が早い

まとめ（頭に残すポイント）

  • Flutterは広告の「表示係」

  • 管理とお金はGoogleの仕事

  • 実装は4ステップ構造

  • 最初はバナー広告から

  • テスト広告を絶対使う

広告は技術というより設計と節度の問題。

アプリ体験を壊さない位置に、静かに置く。

それが長生きするアプリの広告設計。

こういう話ってどこで拾ってきてんの？

了解。
「さっき話したコードや仕組みが実際に置いてある“公式サイトのURL”」を、そのまま貼れる形でまとめるね。
余計な推測なし、一次情報だけ。

Flutter広告実装で必ず見る公式サイト一覧

① google_mobile_ads（Flutter側の入口）

pub.dev（Flutterパッケージ公式）
https://pub.dev/packages/google_mobile_ads

ここに書いてあるのは：

  • Flutterでの使い方（Dartコード）

  • BannerAd / InterstitialAd / RewardedAd

  • 初期化方法

  • サンプルコード

👉 Flutter開発者が一番最初に見る場所

② google_mobile_ads の中身（ソースコード）

GitHub（Flutter公式リポジトリ）
https://github.com/flutter/packages/tree/main/packages/google_mobile_ads

ここにあるのは：

  • Dartで書かれたラッパーコード

  • Android / iOS と通信する処理

  • AdWidget が何をしているかの実装

👉
「このクラスどこで定義されてる？」
「何が内部で起きてる？」
ってなったらここ。

③ AdMob（広告そのものの管理画面）

Google AdMob 管理コンソール
https://admob.google.com/

ここでやること：

  • アプリ登録

  • 広告ユニット作成

  • 収益確認

  • アカウント管理

👉 Flutterコードでは一切触れない領域

④ AdMob公式ドキュメント（挙動・ルール）

Google AdMob ヘルプ（公式）
https://support.google.com/admob/

ここに書いてあるのは：

  • 広告の種類の違い

  • 表示ルール

  • 禁止事項（超重要）

  • アカウント停止条件

👉
「技術的に動く」≠「やっていい」
この差分はここに全部ある。

⑤ ネイティブSDK（裏側の実働部隊）

Flutterの裏で動いている本体。

Android（Google Mobile Ads SDK）
https://developers.google.com/admob/android

iOS（Google Mobile Ads SDK）
https://developers.google.com/admob/ios

👉
Flutterから直接は触らないけど、

  • OS差分の挙動

  • バグ調査

  • 表示されない理由

を追うときは最終的にここに行き着く。

位置関係をもう一度整理すると

あなたのFlutterコード
↓
pub.dev / google_mobile_ads
↓
GitHub（プラグインの実装）
↓
Android / iOS ネイティブSDK
↓
AdMobのサーバー

「このコードどこから来たの？」の答えは、
このどこかに必ず存在している。

このURL群をブックマークしておくと、
広告まわりで迷子になる確率が一気に下がる。


いいなと思ったら応援しよう！