「Monaca/admob/admob-free/gitlab」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→ダウンロード&インストール) |
|||
| 行1: | 行1: | ||
==ダウンロード&インストール== | ==ダウンロード&インストール== | ||
| − | + | https://gitlab.com/ratson/cordova-admob-sdk | |
*zipでDLしてmonacaへインポート | *zipでDLしてmonacaへインポート | ||
2020年6月1日 (月) 13:08時点における版
目次
ダウンロード&インストール
https://gitlab.com/ratson/cordova-admob-sdk
- zipでDLしてmonacaへインポート
- インポートするとアップデートするボタンが出るので押す。
プラグイン追加
クラウドIDEからプラグイン追加
- 設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック
- 入力欄に"cordova-plugin-admob-free"を入力しインポート
- プレビューLogを更新する
- フォルダリストの表示を更新する
- 以下ファイルができてることを確認。
node_modules/cordova-plugin-admob-free/www/admob.js
xmlからプラグイン追加
config.xmlの</widget>の1つ上に以下を追加
<plugin name="cordova-plugin-admob-free" spec="~0.12.0" />
- プレビューLogを更新する
- フォルダリストの表示を更新する
- 以下ファイルができてることを確認。
node_modules/cordova-plugin-admob-free/www/admob.js
cordova-admob-sdkをインストール
src/ios/GoogleMobileAds.frameworkが入ってない場合は、 cordova-admob-sdkをインストールする。
クラウドIDEからプラグイン追加
設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック 入力欄に"cordova-admob-sdk"を入力しインポート
- プレビューLogを更新する
- フォルダリストの表示を更新する
- node_modules/cordova-admob-sdkができてることを確認。
xmlからプラグイン追加
config.xmlの</widget>の1つ上に以下を追加
<plugin name="cordova-admob-sdk" />
- プレビューLogを更新する
- フォルダリストの表示を更新する
- node_modules/cordova-admob-sdkができてることを確認。
確認
package.jsonに以下が記載されてることを確認
"cordova": {
"id": "cordova-plugin-admob-free",
"platforms": [
"android",
"ios"
]
},
Admob設定
cordova-plugin-admob-freeプラグインから設定を選択し以下のように入力欄に入れる。
ADMOB_APP_ID=ca-app-pub-0679xxxxxxxxxxxxx/896xxxxxxxxxx
admobがない
Uncaught ReferenceError: admob is not defined
以下のようなところにadmob.js、があれるが、wwwへコピーしてもだめだった。・・謎
cp ./node_modules/cordova-plugin-admob-free/www/admob.js ./www/
browserSyncエラー
以下エラーは、表示のブラウザ同期に失敗しただけで、環境が悪いだけで、コードの挙動には、あまり関係ないと思われる・・。
couldn't open browser (if you are using browserSync in a headless environment, you might want to set the open option to false
Security Policyエラーが発生
Refused to load the script 'https://debug.monaca.mobi/target/target-script-min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
npm install実行時の脆弱性の警告
`npm audit fix` to fix them or `npm audit` for details
以下で確認
npm audit fix
npm run buildでエラー
以下エラー
verbose stack Error: missing script build lib/node_modules/npm/lib/-script.js:155:19
以下コマンドで対応すると良いらしいが・・
webpack -v npm install webpack -g
参考：https://blog.csdn.net/qq_37591637/article/details/103576163
以下のようなエラーが新たに起こった。権限の問題かも・・
path /opt/node-v10.15.3/lib/node/modules code EACCES errno 13
参考：https://qiita.com/okohs/items/ced3c3de30af1035242d
json404のエラーが発生
{"status": "fail", "code": 404," message": "Not found"}
サンプル
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body onload="init();" id="stage" class="theme">
<br />
This is a template for Monaca app.
<h1>Hello AdMob</h1>
<button class="showAd">Show me some AD</button>
</body>
</html>
js/index.js
var admobid = {}
if (/(android)/i.test(navigator.userAgent)) { // for android & amazon-fireos
admobid = {
banner: 'ca-app-pub-3940256099942544/6300978111',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
}
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
admobid = {
banner: 'ca-app-pub-3940256099942544/2934735716',
interstitial: 'ca-app-pub-3940256099942544/4411468910',
}
}
function init() {
document.addEventListener("deviceready", deviceInfo, false);
}
var deviceInfo = function() {
if (typeof admob === 'undefined') {
console.log("admob undefined!!");
return;
}
admob.banner.config({
id: admobid.banner,
isTesting: true,
autoShow: true,
})
admob.banner.prepare()
admob.interstitial.config({
id: admobid.interstitial,
isTesting: true,
autoShow: false,
})
admob.interstitial.prepare()
document.getElementsByClassName('showAd').disabled = true
document.getElementsByClassName('showAd').onclick = function() {
admob.interstitial.show()
}
};
document.addEventListener('deviceready', function() {
}, false)
document.addEventListener('admob.banner.events.LOAD_FAIL', function(event) {
console.log(event)
})
document.addEventListener('admob.interstitial.events.LOAD_FAIL', function(event) {
console.log(event)
})
document.addEventListener('admob.interstitial.events.LOAD', function(event) {
console.log(event)
document.getElementsByClassName('showAd').disabled = false
})
document.addEventListener('admob.interstitial.events.CLOSE', function(event) {
console.log(event)
admob.interstitial.prepare()
})
admobのidはサンプルを使ってます。
