ハイブリッドアプリ開発フレームワーク「Capacitor」を使って、iOS/AndroidアプリにAdMobのバナー広告を実装したいと考えていませんか？
Capacitor環境（Vite + TypeScriptなど）でAdMobを導入する場合、ネイティブコード（Java/Swift）をほとんど触らずに、Webの知識だけで簡単に広告を掲載できます。
この記事では、@capacitor-community/admob プラグインを使用し、環境変数によるテスト広告と本番広告の切り替えまで考慮した、実用的な実装コードと手順を詳しく解説します！
1. 開発環境と使用するプラグイン
今回実装する環境とプラグインは以下の通りです。
- フレームワーク: Capacitor (Vite / React, Vue, Svelte, Ionicなど)
- 言語: TypeScript
- 使用プラグイン:
@capacitor-community/admob(公式コミュニティ製の信頼性の高いプラグイン)
プラグインのインストール
まずはプロジェクトのルートディレクトリで、以下のコマンドを実行してプラグインをインストールします。
npm install @capacitor-community/admob
# または
yarn add @capacitor-community/admob
pnpm add @capacitor-community/admobインストール後、ネイティブプロジェクトに変更を同期させます。
npx cap sync2. AdMob実装のTypeScriptコード（全コード）
それでは、さっそくTypeScriptで作成した実装コードを見ていきましょう。 このコードは、初期化、イベント監視、環境変数によるテストモードの切り替え、バナーの非表示（クリーンアップ）までを1つにまとめた堅牢な設計になっています。
src/utils/admob.ts（ファイル名は任意）として以下のコードを作成します。
import {
AdMob,
BannerAdOptions,
BannerAdSize,
BannerAdPosition,
BannerAdPluginEvents,
} from "@capacitor-community/admob";
// 広告ユニットIDの設定
// 開発中は必ず公式のテスト用バナーIDを使用、本番は環境変数から取得します
const isDevelopment = import.meta.env.VITE_APP_ENV === "dev"; // 環境に応じた判定ロジック
const AD_UNIT_ID = import.meta.env.VITE_ADMOB_BANNER_ID; // .envファイルから取得
if (!AD_UNIT_ID) {
throw new Error("VITE_ADMOB_BANNER_ID が環境変数に設定されていません");
}
/**
* AdMobの初期化とバナー広告の表示
*/
export async function initializeAndShowBanner() {
try {
// 1. AdMob SDKの初期化
await AdMob.initialize({});
// 2. 広告イベントのリスナー登録（型安全にログを出力）
AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
console.log("広告の読み込みが完了しました");
});
AdMob.addListener(BannerAdPluginEvents.FailedToLoad, (info) => {
console.error("広告の読み込みに失敗しました:", info);
});
// 3. バナー広告のオプション設定
const options: BannerAdOptions = {
adId: AD_UNIT_ID,
adSize: BannerAdSize.ADAPTIVE_BANNER, // 画面幅に合わせて自動調整
position: BannerAdPosition.BOTTOM_CENTER, // 画面の最下部中央に配置
margin: 0,
isTesting: isDevelopment, // 開発時はtrueになり、テスト広告が表示される
};
// 4. バナー広告の表示
await AdMob.showBanner(options);
} catch (error) {
console.error("AdMob の初期化または表示に失敗しました:", error);
}
}
/**
* 広告の非表示（アプリの画面遷移やクリーンアップ用）
*/
export async function hideBanner() {
try {
await AdMob.removeBanner();
console.log("広告を非表示にしました");
} catch (error) {
console.error("広告の非表示に失敗しました:", error);
}
}3. コードの重要ポイントを解説
上記のコードで特に意識している、実務で必須のポイントを3つ解説します。
① 環境変数（Vite）を活用した安全性
AdMobの規約では、開発中に本番の広告IDを表示したり、自分でタップしたりすることは厳禁されています（アカウント停止のリスクがあります）。 コード内では import.meta.env.VITE_APP_ENV === "dev" を使って開発環境かどうかを判定し、isTesting: isDevelopment で安全にテスト広告が配信されるように制御しています。
② アダプティブバナー（ADAPTIVE_BANNER）の採用
adSize には BannerAdSize.ADAPTIVE_BANNER を指定しています。これにより、デバイスの画面サイズや向き（縦・横）に合わせて、最適な高さのバナー広告を自動的に計算して表示してくれます。従来の固定サイズ（320×50など）よりもクリック率や収益性が向上する傾向にあります。
③ クリーンアップ関数（hideBanner）の用意
シングルページアプリケーション（SPA）では、画面遷移しても広告が残り続けてしまう問題が発生しがちです。広告を表示する必要がない画面（設定画面や課金済みユーザー向け画面など）に遷移する前に、hideBanner() を呼び出せるようにエクスポートしています。
4. 各プラットフォーム（iOS/Android）の事前設定
コードを書くだけでは広告は表示されません。iOSとAndroidそれぞれのネイティブプロジェクトに、AdMobの「アプリID」を設定する必要があります。
注意: ここで設定する「アプリID」は、広告を表示する「広告ユニットID」とは別物です。間違えないように注意してください。
Androidの設定 (android/app/src/main/AndroidManifest.xml)
<application> タグの内部に、以下の <meta-data> を追加します。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application>
<!-- 以下の meta-data を追加 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx"/> <!-- ご自身のアプリID -->
</application>
</manifest>iOSの設定 (ios/App/App/Info.plist)
<dict> タグの内部に、以下のキーと値を追加します。
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string> <!-- ご自身のアプリID -->5. アプリ内での呼び出し例（React / Vueでの使い方）
作成した関数を、アプリの起動時（コンポーネントのマウント時）に呼び出します。
React (Hooks) での例
import { useEffect } from 'react';
import { initializeAndShowBanner, hideBanner } from './utils/admob';
export default function App() {
useEffect(() => {
// アプリ起動時または画面表示時に広告を表示
initializeAndShowBanner();
// コンポーネントがアンマウントされる際に広告を削除
return () => {
hideBanner();
};
}, []);
return (
<div className="app-container">
<h1>マイアプリ</h1>
</div>
);
}6. よくあるトラブルと解決策（FAQ）
Q. 開発環境で広告が表示されず、Failed to load となる
A. 以下の3点を確認してください。
.envファイルに正しいIDが設定されているか、読み込みに失敗していないか。- AndroidManifestやInfo.plistの「アプリID」が正しい形式か。
- 実機またはエミュレーターがインターネットに接続されているか。また、広告ブロックアプリやVPNが有効になっていないか。
Q. 本番環境で広告が「表示されたりされなかったり」する
A. AdMobの仕様（在庫切れ）の可能性があります。 アプリがリリースされた直後や、リクエスト数が少ないうちは、Google側から返される広告（在庫）がない場合があります。コードの FailedToLoad イベントでエラーコードを確認し、記述ミスでなければ、時間の経過やアプリのトラフィック増加とともに表示されるようになります。
7. まとめ：TypeScriptで堅牢なAdMob実装を
Capacitorコミュニティのプラグインを利用すれば、TypeScriptの強力な型安全性を活かしながら、スマートにAdMobを実装できます。
今回紹介したコードのように、環境変数によるテストモードの切り替えと画面遷移時のクリーンアップ（非表示処理）を初期段階から組み込んでおくことで、手戻りのない安全なアプリ開発が可能になります。
ぜひご自身のアプリに導入して、収益化の第一歩を踏み出してみてください！
なお現在Playストアにアプリをリリース公開するには12人以上のテスターにオプトインしてもらって14日間テストを行なってもらう必要があります。もし身近にテスターをしてくれる方が居ないようなら下記ココナラで依頼してみましょう！大体4000円くらいで依頼できます。
コメント