Android向けスマホアプリにインタースティシャル広告を表示させる

2026年10月31日

Android向けスマホアプリ作成に挑戦では下部に広告を表示させましたが、今回はインタースティシャル広告を表示させる方法を考えます。インタースティシャル広告とは、アプリの自然な切れ目や移行のタイミング（ステージをクリアした後など）で表示される全画面の広告です。画面全体に表示されるため注目度が高く、適切に使うことでクリック率（CTR）やコンバージョン率の向上が期待できます。

準備

Android向けスマホアプリ作成に挑戦で解説しているように、フレームワークは .NET 9 MAUI / Blazor Hybrid、広告ライブラリは Plugin.AdMob 3.0.2、AdMobアカウントの開設とアプリID と広告ユニットIDは取得済みであることを前提に進めます。

Plugin.AdMob を NuGet でインストールします。Visual Studio 2022 であれば最新版はインストールできないので 3.0.2 を選択します。

MauiProgram.cs の編集

MauiProgram.cs を編集します。ここは Android向けスマホアプリ作成に挑戦と同じです。

MauiProgram.cs

using Microsoft.Extensions.Logging;
using Plugin.AdMob; // ← これを追加

namespace MauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseAdMob() // ← これを追加
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();

#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

using Microsoft.Extensions.Logging;

using Plugin.AdMob; // ← これを追加

namespace MauiApp

{

public static class MauiProgram

{

public static MauiApp CreateMauiApp()

{

var builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseAdMob() // ← これを追加

.ConfigureFonts(fonts =>

{

fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

});

builder.Services.AddMauiBlazorWebView();

#if DEBUG

builder.Services.AddBlazorWebViewDeveloperTools();

builder.Logging.AddDebug();

#endif

return builder.Build();

}

AndroidManifest.xml の編集

次に AndroidManifest.xml を編集します。ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX の部分は AdMobアプリID を入れてください。AdMobアプリIDと広告ユニットIDは別物なので注意してください。

Platforms/Android/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
        <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX" />
        <activity android:name="com.google.android.gms.ads.AdActivity"  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />
    </application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

<?xml version="1.0" encoding="utf-8"?>

</application>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

</manifest>

Home.razor の編集

Home.razor を編集します。

ここでは C# 側、JavaScript 側の両方から広告を表示するためのテストをすることにします。

ボタンがふたつありますが、1 つ目はクリックすると Home クラスの ShowInterstitialAd メソッド（後述）が呼び出されて広告が表示されます。2 つ目はクリックすると JavaScript 側から document.getElementById(‘show-interstitial-ad-from-js’).addEventListener(‘click’, () => { }); とイベントリスナをつかって Home クラスの ShowInterstitialAd メソッドを呼び出して広告を表示させます。

また広告が消されたらそれを JavaScript 側でも検知できるようにします。

Components\Pages\Home.razor

@page "/"
@using Plugin.AdMob.Services
@using Plugin.AdMob
@using Microsoft.JSInterop
@inject IInterstitialAdService InterstitialAdService
@inject IJSRuntime JS
@implements IDisposable

<p>@message</p>
<button @onclick="ShowInterstitialAd" disabled="@(_interstitialAd?.IsLoaded != true)">広告表示のテスト</button>
<button id="show-interstitial-ad-from-js" disabled="@(_interstitialAd?.IsLoaded != true)">JavaScript側から広告表示のテスト</button>

<script type="module" src="./app.js"></script>

@page "/"

@using Plugin.AdMob.Services

@using Plugin.AdMob

@using Microsoft.JSInterop

@inject IInterstitialAdService InterstitialAdService

@inject IJSRuntime JS

@implements IDisposable

<p>@message</p>

<button @onclick="ShowInterstitialAd" disabled="@(_interstitialAd?.IsLoaded != true)">広告表示のテスト</button>

<button id="show-interstitial-ad-from-js" disabled="@(_interstitialAd?.IsLoaded != true)">JavaScript側から広告表示のテスト</button>

Home.razor.cs の作成と編集

Home.razor と同じフォルダに Home.razor.cs を作成して以下のように記述します。

インタースティシャル広告を表示させたいタイミングで表示するには事前にロードしておかなければなりません。広告がロードされたらボタンを押せるようにします。またボタンの状態とは別にメソッド内でも、広告がロードされていない場合は表示の処理をおこなわないようにしています。広告が表示され、閉じられたら次回用の広告をロードします。

サンプルプログラムなのでボタンをタップするたび全画面広告が表示されるようにしていますが、実際にこのようなアプリをリリースしてはいけません。

ShowInterstitialAd メソッドは外部から呼び出せるように public にします。そして [JSInvokable] もつけます。const string AdUnitId に設定しているのは広告ユニットID です。先述のアプリ ID と混同しないように注意してください。

DotNetObjectReference は不要になったら忘れずに Dispose() してください。

Components\Pages\Home.razor.cs

using Plugin.AdMob;
using Microsoft.JSInterop;

namespace MauiApp.Components.Pages;

public partial class Home
{
    // テスト広告の広告ユニットID
    private const string AdUnitId = "ca-app-pub-3940256099942544/1033173712";

    private string message = "";

    IInterstitialAd? _interstitialAd = null;
    private DotNetObjectReference<Home>? _dotNetRef;

    protected override void OnInitialized()
    {
        // PCでデバッグしようとすると広告を読み込む処理でエラーが発生するので
        // Android以外では広告処理を行わないことにする
        if (DeviceInfo.Platform != DevicePlatform.Android)
            return;

        CreateAndLoadAd();
        _dotNetRef = DotNetObjectReference.Create(this);
    }

    // 広告を作成して読み込む
    private void CreateAndLoadAd()
    {
        // 広告インスタンスを作成
        _interstitialAd = InterstitialAdService.CreateAd(AdUnitId);

        // 広告のイベントを登録
        _interstitialAd.OnAdLoaded += OnAdLoaded;
        _interstitialAd.OnAdDismissed += OnAdDismissed;

        // 広告を読み込む
        _interstitialAd.Load();

        message = "広告を読み込んでいます...";
    }

    // 広告の読み込みが完了したときに呼ばれる
    private void OnAdLoaded(object? sender, EventArgs e)
    {
        _ = InvokeAsync(() =>
        {
            message = "広告の読み込みが完了しました。";
            StateHasChanged();
        });
    }

    // 広告が閉じられたときに呼ばれる
    private void OnAdDismissed(object? sender, EventArgs e)
    {
        _ = InvokeAsync(async () =>
        {
            // JavaScript側へ広告が閉じられたことを知らせる（必要なら）
            // JavaScript側でonInterstitialAdDismissed関数を実装していない場合はエラーとなる
            await JS.InvokeVoidAsync("onInterstitialAdDismissed");

            // 古い広告のイベント登録を解除
            if (_interstitialAd != null)
            {
                _interstitialAd.OnAdLoaded -= OnAdLoaded;
                _interstitialAd.OnAdDismissed -= OnAdDismissed;
            }

            // 次回用の広告を新しく読み込む
            CreateAndLoadAd();

            message = "広告の読み込み中。";
            StateHasChanged();
        });
    }

    // JavaScript側から広告を表示させる処理をするための準備（必要なら）
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && _dotNetRef != null)
        {
            await Task.Delay(5000); // 500ms でも充分だったが・・・
            await JS.InvokeVoidAsync("setDotNetReference", _dotNetRef);
        }
    }

    // JavaScript側から広告を表示させる処理（必要なら）
    [JSInvokable]
    public void ShowInterstitialAd()
    {
        // Android以外では広告処理を行わない
        if (DeviceInfo.Platform != DevicePlatform.Android)
            return;

        if (_interstitialAd?.IsLoaded == true)
        {
            _interstitialAd.Show();
        }
    }

    // 終了時の処理（イベントハンドラの削除など）
    public void Dispose()
    {
        if (_interstitialAd != null)
        {
            _interstitialAd.OnAdLoaded -= OnAdLoaded;
            _interstitialAd.OnAdDismissed -= OnAdDismissed;
        }

        _dotNetRef?.Dispose();
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

using Plugin.AdMob;

using Microsoft.JSInterop;

namespace MauiApp.Components.Pages;

public partial class Home

{

// テスト広告の広告ユニットID

private const string AdUnitId = "ca-app-pub-3940256099942544/1033173712";

private string message = "";

IInterstitialAd? _interstitialAd = null;

private DotNetObjectReference<Home>? _dotNetRef;

protected override void OnInitialized()

{

// PCでデバッグしようとすると広告を読み込む処理でエラーが発生するので

// Android以外では広告処理を行わないことにする

if (DeviceInfo.Platform != DevicePlatform.Android)

return;

CreateAndLoadAd();

_dotNetRef = DotNetObjectReference.Create(this);

}

// 広告を作成して読み込む

private void CreateAndLoadAd()

{

// 広告インスタンスを作成

_interstitialAd = InterstitialAdService.CreateAd(AdUnitId);

// 広告のイベントを登録

_interstitialAd.OnAdLoaded += OnAdLoaded;

_interstitialAd.OnAdDismissed += OnAdDismissed;

// 広告を読み込む

_interstitialAd.Load();

message = "広告を読み込んでいます...";

}

// 広告の読み込みが完了したときに呼ばれる

private void OnAdLoaded(object? sender, EventArgs e)

{

_ = InvokeAsync(() =>

{

message = "広告の読み込みが完了しました。";

StateHasChanged();

});

}

// 広告が閉じられたときに呼ばれる

private void OnAdDismissed(object? sender, EventArgs e)

{

_ = InvokeAsync(async () =>

{

// JavaScript側へ広告が閉じられたことを知らせる（必要なら）

// JavaScript側でonInterstitialAdDismissed関数を実装していない場合はエラーとなる

await JS.InvokeVoidAsync("onInterstitialAdDismissed");

// 古い広告のイベント登録を解除

if (_interstitialAd != null)

{

_interstitialAd.OnAdLoaded -= OnAdLoaded;

_interstitialAd.OnAdDismissed -= OnAdDismissed;

}

// 次回用の広告を新しく読み込む

CreateAndLoadAd();

message = "広告の読み込み中。";

StateHasChanged();

});

}

// JavaScript側から広告を表示させる処理をするための準備（必要なら）

protected override async Task OnAfterRenderAsync(bool firstRender)

{

if (firstRender && _dotNetRef != null)

{

await Task.Delay(5000); // 500ms でも充分だったが・・・

await JS.InvokeVoidAsync("setDotNetReference", _dotNetRef);

}

// JavaScript側から広告を表示させる処理（必要なら）

[JSInvokable]

public void ShowInterstitialAd()

{

// Android以外では広告処理を行わない

if (DeviceInfo.Platform != DevicePlatform.Android)

return;

if (_interstitialAd?.IsLoaded == true)

{

_interstitialAd.Show();

}

// 終了時の処理（イベントハンドラの削除など）

public void Dispose()

{

if (_interstitialAd != null)

{

_interstitialAd.OnAdLoaded -= OnAdLoaded;

_interstitialAd.OnAdDismissed -= OnAdDismissed;

}

_dotNetRef?.Dispose();

}

app.js の作成と編集

wwwroot フォルダのなかに app.js を作成し、以下のように書きます。

wwwroot\app.js

let dotNetRef = null;

// 準備
window.setDotNetReference = (ref) => {
    dotNetRef = ref;
};

// テスト広告を表示させる
async function showInterstitialAd() {
    if (!dotNetRef)
        return;

    await dotNetRef.invokeMethodAsync("ShowInterstitialAd");
}

// ボタンをタップしたらテスト広告を表示させる
document.getElementById('show-interstitial-ad-from-js')?.addEventListener('click', () => {
    showInterstitialAd();
});

// 広告が閉じられたときの処理
window.onInterstitialAdDismissed = () => {
    console.log("広告が閉じられました");
};

let dotNetRef = null;

// 準備

window.setDotNetReference = (ref) => {

dotNetRef = ref;

};

// テスト広告を表示させる

async function showInterstitialAd() {

if (!dotNetRef)

return;

await dotNetRef.invokeMethodAsync("ShowInterstitialAd");

}

// ボタンをタップしたらテスト広告を表示させる

document.getElementById('show-interstitial-ad-from-js')?.addEventListener('click', () => {

showInterstitialAd();

});

// 広告が閉じられたときの処理

window.onInterstitialAdDismissed = () => {

console.log("広告が閉じられました");

};

よろしければ記事の拡散をお願いします。

自作ゲームリンク集

鳩でも分かるC#管理人からのお願い

鳩でもわかるC#管理人はクラウドワークスに在宅ワーカーとして登録しています。お仕事の依頼もお待ちしております。

C#を中心としたプログラミングや、Webサイトの運営・開発に取り組んでいます。個人開発で培った経験を活かし、小規模なプログラムの作成や既存プログラムの修正・機能追加など、ご要望に合わせて対応いたします。

【可能な業務】

・C#によるデスクトップアプリの開発
・JavaScript、HTML、CSSを使用したブラウザゲームの制作
・ファイル操作や画像処理を行うプログラムの作成
・Webサイトからのデータ取得（スクレイピングなど）
・取得したデータの整理、テキストファイルやExcelファイルへの出力
・Google スプレッドシートへのデータ出力
・既存プログラムの不具合修正や機能追加

上記以外の内容についても、対応可能な場合がありますので、お気軽にご相談ください。

【得意な分野】

・C#を使用したプログラム開発
・ファイル操作やデータ処理の自動化
・Webサイトからのデータ取得と整理
・JavaScriptを使用したブラウザゲームの制作

【制作実績】

個人でWebゲームを制作し、Webサイトで公開しています。

パズルゲームやアクションゲーム、3Dゲーム、オンライン対戦ゲームなど、さまざまな種類のゲームを制作してきました。JavaScriptを使用したブラウザゲームの制作や処理の実装などに取り組んでいます。

自作ゲームの一覧はこちらです。

https://lets-csharp.com/app-samples/2024/08/game-links/

【使用ツール】

・Visual Studio
・Google ドキュメント
・Microsoft Word、Excel
・Google スプレッドシート

【稼働時間】

平日は1日3～5時間程度、在宅で作業できます。作業内容や納期については、ご相談のうえ調整いたします。

納期を守ることはもちろん、丁寧なコミュニケーションを心がけています。ご依頼内容を確認し、対応可能な範囲や進め方を明確にしたうえで作業いたします。

⇒ 仕事を依頼する

コメントについて

コメントで英語などの外国語でコメントをされる方がいますが、管理人は日本語以外はわからないので基本的に内容が理解できず、承認することもありません。それからへんな薬を売っているサイトやリンク先のサイトが存在しないというスパムコメントも多々あります。

Some people make comments in foreign languages such as English, but since the manager does not understand anything other than Japanese, he basically cannot understand the content and does not approve it. Please use Japanese when making comments.

そんななか日本語のコメントもいただけるようになりました。「○○という変数はどこで宣言されているのか？」「××というメソッドはどこにあるのか」「例外が発生する」「いっそのことソース丸ごとくれ」という質問ですが、管理人としては嬉しく思います。「自分が書いた記事は読まれているんだな」と。疑問点には可能な限り答えます。記事に問題があれば修正いたします。

そのうえでお願いがあります。「匿名」という味も素っ気もない名前ではなく、捨てハンでいいのでなにかハンドルネームをつくってほしいと思います。

「Android向けスマホアプリ作成に挑戦」

準備

MauiProgram.cs の編集

AndroidManifest.xml の編集

Home.razor の編集

Home.razor.cs の作成と編集

app.js の作成と編集

鳩でも分かるC#管理人からのお願い

コメントについて

コメントをどうぞ