LocalStorageの利用とGoogleAdMob利用の場合のソースコード例
例によって必要に応じてインデント表示のため、半角スペース2個を全角スペースに置き換えています。
また、広告年齢レーティングの設定は、この例では設定していません。必要なら以下のリンクをご参照ください。
（個人的な例ですので自己責任で！）
アプリやアカウントの広告レーティングの上限を設定する｜GoogleAdMob
https://ncode.syosetu.com/n5283hn/108/
capacitor.config.ts
(appIDとappNameの変更例。動作には関係ない。)
------------------------------------------
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'sample.ad.sql.v0001',
appName: '広告とローカルストレージサンプルアプリ',
webDir: 'www',
bundledWebRuntime: false
};
export default config;
------------------------------------------
android\app\build.gradle（39行から42行)
（GoogleAdmobのため）
---------------------------------------------------------------
implementation project(':capacitor-cordova-android-plugins')
//for admob start
implementation 'com.google.android.gms:play-services-ads:20.6.0'
//for admob end
---------------------------------------------------------------
android\app\src\main\AndroidManifest.xml(11行から15行)
（GoogleAdmobのため）
---------------------------------------------------------------
android:theme="@style/AppTheme">
<!--for admob start-->
<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713"/>
<!--for admob end-->
---------------------------------------------------------------
android\variables.gradle(2行から6行)
（GoogleAdmobのため）
---------------------------------------------------------------
minSdkVersion = 21
//for admob start
compileSdkVersion = 31
//compileSdkVersion = 30
//for admob end
---------------------------------------------------------------
src\app\tab1\tab1.module.ts(8行から13行)
（LocalStorageのため）
---------------------------------------------------------------
import { Tab1PageRoutingModule } from './tab1-routing.module';
import { IonicStorageModule } from '@ionic/storage-angular'; //for localStorage
@NgModule({
imports: [
IonicModule,
IonicStorageModule.forRoot(), //for localStorage
---------------------------------------------------------------
src\app\tab1\tab1.page.html
（テキストエリアの追加のみです。LocalStorageのテスト表示）
---------------------------------------------------------------
</ion-header>
<!--LocalStorageTest-->
<ion-textarea [(ngModel)] = "TextAreaValue" readonly="true" rows="30"></ion-textarea>
<app-explore-container name="Tab 1 page"></app-explore-container>
---------------------------------------------------------------
src\app\tab1\tab1.page.ts
（全ソース。両方の実装）
LocalStorageの実装については、以下のリンクの参照をお勧めします。（非同期処理）
https://ncode.syosetu.com/n5283hn/93/
---------------------------------------------------------------
import { Component } from '@angular/core';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents, AdMobBannerSize } from '@capacitor-community/admob';
import { Storage } from '@ionic/storage'; //for localStorage
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
//test for localStorage start
//ログイン回数
intLoginCount:number;
//今回ログイン日時
txtThisloginDateTime:string;
//ログイン履歴配列
arrLoginHistory=[];
//配列読み込み書き出しキー
keyArrLoginHistory = "keyArrLoginHistory";
txtJson:string;
//配列文字列表示用
TextAreaValue:string;
//test for localStorage end
constructor(public storage: Storage) { //修正：for localStorage
AdMob.initialize({
requestTrackingAuthorization: true,
//testingDevices: ['2077ef9a63d2b398840261c8221a0c9b'],
//initializeForTesting: true,
});
this.storage.create(); //修正：for localStorage
//test for localStorage start
const testDate = new Date(Date.now());
testDate[Symbol.toPrimitive]('string');
this.txtThisloginDateTime= String(testDate);
this.storage.get(this.keyArrLoginHistory)
.then((t)=>{
alert("後に通ります");
this.txtJson = t;
if(this.txtJson==undefined){
this.intLoginCount=1;
this.arrLoginHistory=[];
}else{
this.arrLoginHistory=JSON.parse(JSON.stringify(this.txtJson));
this.intLoginCount=this.arrLoginHistory.length+1;
}
let objTemp={};
objTemp["回数"]=String(this.intLoginCount);
objTemp["ログイン日時"]=this.txtThisloginDateTime;
this.arrLoginHistory.push(objTemp);
this.storage.set(this.keyArrLoginHistory,this.arrLoginHistory);
this.TextAreaValue=JSON.stringify(this.arrLoginHistory,null,2);
})
.catch((err)=>{
this.txtJson = `Error ${err}`;
});
alert("先に通ります");
//test for localStorage end
}
ionViewDidEnter(){
AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
// Subscribe Banner Event Listener
console.log('loaded');
});
AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
// Subscribe Change Banner Size
console.log('size changed');
});
const options: BannerAdOptions = {
adId: 'ca-app-pub-3940256099942544/15453xxxxxx',//test
adSize: BannerAdSize.BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 100,
isTesting: true
// npa: true
};
AdMob.showBanner(options);
}
}
---------------------------------------------------------------
