ステップ２「アプリにネイティブ機能をつけよう」

コミュニティプラグイン「Google AdMobで広告の表示をしよう」

Author: rdlabo

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
 
+    implementation project(':rdlabo-capacitor-admob')
 
 }
 

android/app/src/main/AndroidManifest.xml

@@ -11,6 +11,10 @@
         android:supportsRtl="true"
         android:theme="@style/AppTheme">
 
+        <meta-data
+            android:name="com.google.android.gms.ads.APPLICATION_ID"
+            android:value="ca-app-pub-1053575285730954~3749355430"/>
+
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
             android:name="io.ionic.starter.MainActivity"

android/app/src/main/java/io/ionic/starter/MainActivity.java

@@ -16,6 +16,7 @@ public void onCreate(Bundle savedInstanceState) {
     this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
       // Additional plugins you've installed go here
       // Ex: add(TotallyAwesomePlugin.class);
+      add(jp.rdlabo.capacitor.plugin.admob.AdMob.class);
     }});
   }
 }

android/capacitor.settings.gradle

@@ -1,3 +1,6 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':rdlabo-capacitor-admob'
+project(':rdlabo-capacitor-admob').projectDir = new File('../node_modules/@rdlabo/capacitor-admob/android/@rdlabo/capacitor-admob')

ios/App/App/AppDelegate.swift

@@ -1,5 +1,6 @@
 import UIKit
 import Capacitor
+import GoogleMobileAds
 
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
@@ -9,6 +10,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
   func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
     // Override point for customization after application launch.
+    GADMobileAds.sharedInstance().start(completionHandler: nil)
     return true
   }
 

ios/App/App/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+    <key>GADApplicationIdentifier</key>
+    <string>ca-app-pub-1053575285730954~8646458891</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>

ios/App/Podfile

@@ -10,7 +10,7 @@ def capacitor_pods
   # Automatic Capacitor Pod dependencies, do not delete
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  
+  pod 'RdlaboCapacitorAdmob', :path => '../../node_modules/@rdlabo/capacitor-admob'
   # Do not delete
 end
 

package.json

@@ -27,6 +27,7 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
+    "@rdlabo/capacitor-admob": "^0.1.4",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Plugins } from '@capacitor/core';
 
 @Component({
   selector: 'app-root',
@@ -16,6 +17,9 @@ export class AppComponent {
     private statusBar: StatusBar
   ) {
     this.initializeApp();
+    Plugins.AdMob.initialize(
+      platform.is('ios') ? 'ca-app-pub-1053575285730954~8646458891' : 'ca-app-pub-1053575285730954~3749355430'
+    );
   }
 
   initializeApp() {

src/app/tab2/tab2.page.html

@@ -6,4 +6,9 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content></ion-content>
+<ion-content>
+  <div class="ion-padding">
+    <ion-button (click)="displayAdMob()" *ngIf="!isAdsense" color="primary">広告をだす</ion-button>
+    <ion-button (click)="hideAdMob()" *ngIf="isAdsense" color="danger">広告を隠す</ion-button>
+  </div>
+</ion-content>

src/app/tab2/tab2.page.ts

@@ -1,12 +1,32 @@
 import { Component } from '@angular/core';
+import { Plugins } from '@capacitor/core';
+import { AdOptions, AdSize, AdPosition } from '@rdlabo/capacitor-admob';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss']
 })
 export class Tab2Page {
-
+  isAdsense = false;
   constructor() {}
 
+  displayAdMob() {
+    const options: AdOptions = {
+      adId: 'ca-app-pub-3940256099942544/6300978111',
+      adSize: AdSize.BANNER,
+      position: AdPosition.BOTTOM_CENTER,
+      margin: '60',
+    };
+    Plugins.AdMob.showBanner(options).then(
+      success => this.isAdsense = true,
+      error => this.isAdsense = false
+    );
+  }
+
+  hideAdMob() {
+    Plugins.AdMob.hideBanner().then(
+      success => this.isAdsense = false
+    );
+  }
 }

yarn.lock

@@ -329,7 +329,7 @@
     which "^1.3.0"
     xml2js "^0.4.19"
 
-"@capacitor/[email protected]":
+"@capacitor/[email protected]", "@capacitor/core@latest":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@capacitor/core/-/core-1.1.1.tgz#8e32270d2aa7a843c40b14e4d10c76c62e451d49"
   integrity sha512-7jnPMy9rGt5VB2QS/1xYEhHspnh2J8i9j0JA6uUtwCUBQs5bmNCqiQ8MYjHTW5NE+1jl2rnX8CU4d8sUT3/esg==
@@ -399,6 +399,13 @@
     tree-kill "1.2.1"
     webpack-sources "1.3.0"
 
+"@rdlabo/capacitor-admob@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@rdlabo/capacitor-admob/-/capacitor-admob-0.1.4.tgz#83ed9da9e3e4a84dd090a2a5c6535659bc793511"
+  integrity sha512-P8ltIc3l8OUUBvhAWEjqM1zI5/v5YcCnYYsSevGYCLJbBhkpTUYmtoHToCrFmmEhzY3nZ98nKu+gNvOU+KBDRw==
+  dependencies:
+    "@capacitor/core" latest
+
 "@schematics/[email protected]":
   version "8.1.3"
   resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-8.1.3.tgz#dc465dae7ef658ac945551e12990676fdac188ec"