facebook twitter hatena line email

「Monaca/admob/admob-free/gitlab」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎admobがない)
 
(同じ利用者による、間の29版が非表示)
行1: 行1:
  
 
==ダウンロード&インストール==
 
==ダウンロード&インストール==
−
gitlab https://gitlab.com/ratson/cordova-admob-sdk
+
https://gitlab.com/ratson/cordova-admob-sdk
  
 
*zipでDLしてmonacaへインポート
 
*zipでDLしてmonacaへインポート
  
 
#インポートするとアップデートするボタンが出るので押す。
 
#インポートするとアップデートするボタンが出るので押す。
 +
 +
==プラグイン追加==
 +
===クラウドIDEからプラグイン追加===
 
#設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック
 
#設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック
 
#入力欄に"cordova-plugin-admob-free"を入力しインポート
 
#入力欄に"cordova-plugin-admob-free"を入力しインポート
  
−
==Admob設定==
+
#プレビューLogを更新する
−
cordova-plugin-admob-freeプラグインから設定を選択し以下のように入力欄に入れる。
+
#フォルダリストの表示を更新する
−
  ADMOB_APP_ID=ca-app-pub-0679xxxxxxxxxxxxx/896xxxxxxxxxx
+
#以下ファイルができてることを確認。
 +
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ができてることを確認。
  
 
==確認==
 
==確認==
行25: 行58:
 
</pre>
 
</pre>
  
−
==失敗したら・・==
+
==Admob設定==
−
ターミナルから
+
cordova-plugin-admob-freeプラグインから設定を選択し以下のように入力欄に入れる。
−
  npm install
+
  ADMOB_APP_ID=ca-app-pub-0679xxxxxxxxxxxxx/896xxxxxxxxxx
−
npm run build
+
  
 +
==admobがない==
 +
Uncaught ReferenceError: admob is not defined
 +
以下のようなところにadmob.js、があれるが、wwwへコピーしても動かない。
 +
cp ./node_modules/cordova-plugin-admob-free/www/admob.js ./www/
  
 +
ビルドデバッグが足りない可能性。https://teratail.com/questions/264744
 +
 +
#クラウドIDEのビルド/ビルドデバッグから"ビルド開始する"ボタンをクリック
 +
#QRコードからアプリをインストール（これはandroidのmonacaデバッガー)
 +
#プロジェクトを選択して起動すると、バナー、インステ、リワード広告がでた。(androidについてのみ)
 +
 +
==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エラーが発生==
 
==Security Policyエラーが発生==
行60: 行105:
 
==json404のエラーが発生==
 
==json404のエラーが発生==
 
  {"status": "fail", "code": 404," message": "Not found"}
 
  {"status": "fail", "code": 404," message": "Not found"}
 +
 +
==サンプル==
 +
index.html
 +
<pre>
 +
<!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>
 +
 +
</pre>
 +
js/index.js
 +
<pre>
 +
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()
 +
})
 +
</pre>
 +
 +
admobのidはサンプルを使ってます。
 +
 +
==再生確認状況について==
 +
*androidはバナー、インステ、リワード広告が表示できた。
 +
*iosについてはちょっと苦戦して、そのまま未確認です。
  
 
==参考==
 
==参考==
 
https://senmyou.xyz/cordova-admob-free%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E5%BA%83%E5%91%8A%E3%82%92%E8%A1%A8%E7%A4%BA/
 
https://senmyou.xyz/cordova-admob-free%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E5%BA%83%E5%91%8A%E3%82%92%E8%A1%A8%E7%A4%BA/
 +
 +
https://apps.jp.net/introduction/admob-reward-on-monaca/

2020年7月13日 (月) 12:14時点における最新版

ダウンロード&インストール

https://gitlab.com/ratson/cordova-admob-sdk

  • zipでDLしてmonacaへインポート
  1. インポートするとアップデートするボタンが出るので押す。

プラグイン追加

クラウドIDEからプラグイン追加

  1. 設定/cordovaプラグイン/cordovaプラグインのインポートボタンをクリック
  2. 入力欄に"cordova-plugin-admob-free"を入力しインポート
  1. プレビューLogを更新する
  2. フォルダリストの表示を更新する
  3. 以下ファイルができてることを確認。
node_modules/cordova-plugin-admob-free/www/admob.js

xmlからプラグイン追加

config.xmlの</widget>の1つ上に以下を追加 

<plugin name="cordova-plugin-admob-free" spec="~0.12.0" />
  1. プレビューLogを更新する
  2. フォルダリストの表示を更新する
  3. 以下ファイルができてることを確認。
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"を入力しインポート

  1. プレビューLogを更新する
  2. フォルダリストの表示を更新する
  3. node_modules/cordova-admob-sdkができてることを確認。

xmlからプラグイン追加

config.xmlの</widget>の1つ上に以下を追加 

 <plugin name="cordova-admob-sdk" />
  1. プレビューLogを更新する
  2. フォルダリストの表示を更新する
  3. 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/

ビルドデバッグが足りない可能性。https://teratail.com/questions/264744

  1. クラウドIDEのビルド/ビルドデバッグから"ビルド開始する"ボタンをクリック
  2. QRコードからアプリをインストール（これはandroidのmonacaデバッガー)
  3. プロジェクトを選択して起動すると、バナー、インステ、リワード広告がでた。(androidについてのみ)

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はサンプルを使ってます。

再生確認状況について

  • androidはバナー、インステ、リワード広告が表示できた。
  • iosについてはちょっと苦戦して、そのまま未確認です。

参考

https://senmyou.xyz/cordova-admob-free%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E5%BA%83%E5%91%8A%E3%82%92%E8%A1%A8%E7%A4%BA/

https://apps.jp.net/introduction/admob-reward-on-monaca/

「http://wiki.nonip.net/index.php?title=Monaca/admob/admob-free/gitlab&oldid=11434」から取得