カテゴリー: 開発

図解 Monaca×ニフクラmobile backend プッシュ通知設定

モバイルアプリ開発環境Monacaとニフクラmobile backendを利用したプッシュ通知機能の設定について一枚の図にまとめました。（対象：Android）

  • プッシュ通知の基本的なことについてはこちらの記事がわかりやすいです。
    今さら聞けない！プッシュ通知サービスとは？ – ニフクラ
  • プッシュ通知の実装方法についてはニフクラで詳しく解説されています。この内容をまとめたものが今回の図になります。
    プッシュ通知（Monaca）- ニフクラ
  • プッシュ通知はニフクラmobile backendからFCM（Firebase Cloud Messaging）に送信することでAndroid端末へ配信されます。
  • プッシュ通知はMonaca/Firebase/ニフクラmobile backendともに無料で利用することができます。

こちらからダウンロードできます。

Cordova AdMobプラグインで広告を表示

AdMobプラグインを使用するとGoogle AdMobの提供する広告配信サービスを利用してモバイルアプリに広告を表示することができます。

floatinghotpot/cordova-admob-pro

バナー広告

AdMob.createBanner({
  adId: 'ca-app-pub-0123456789012345/0123456789',
  position: AdMob.AD_POSITION.BOTTOM_CENTER,
//debug
//  isTesting: true,
  overlap: true,
  autoShow: true,
  adSize: 'SMART_BANNER'
});

バナー広告（AD_POSITION.POS_XY）

var elt = document.getElementById("med_page");
var rect = elt.getBoundingClientRect();
var y = (rect.bottom - rect.top) + window.pageYOffset;  // タブバーを含まない画面の高さ

y *= parseFloat(document.body.style.zoom);  // 元の画面サイズ（CSSピクセル、dp単位）に戻す
if (window.screen.height > 720) {  // スマートバナーの高さを引く
  y -= 90;
} else if (window.screen.height > 400){
  y -= 50;
} else {
  y -= 32;
}
y *= window.devicePixelRatio;  // CSSピクセル（dp）からデバイスピクセルに変換する

AdMob.createBanner({
  adId: 'ca-app-pub-0123456789012345/0123456789',
  position: AdMob.AD_POSITION.POS_XY,
  x: 0,
  y: y,
//debug
//  isTesting: true,
  overlap: true,
  autoShow: true,
  adSize: 'SMART_BANNER'
});

インタースティシャル広告

var elem = document.getElementById("myNavigator");
elem.addEventListener("postpop", function(e) {
  if (e.leavePage.id === "graph_page") {  // グラフ画面からポップした後
    showInterstitialPolling(10);
  }
});
elem.addEventListener("postpush", function(e) {
  if (e.enterPage.id === "graph_page") {  // グラフ画面へプッシュした後
    if (window.AdMob) {
      init_ad();
    }
  }
});

function showInterstitialPolling(count) {
  if (--count < 0) return;
  if (window.AdMob) {
    AdMob.isInterstitialReady(function(isready) {
      if (isready) {
        AdMob.showInterstitial();
      } else {
        setTimeout(function() {showInterstitialPolling(count)}, 200);
      }
    });
  }
}
function init_ad() {
  if (window.AdMob) {
    AdMob.prepareInterstitial({
      adId: 'ca-app-pub-0123456789012345/0123456789',
//debug
//      isTesting: true,
      autoShow: false
    });
  }
}

Note

adIdプロパティにはアプリIDではなく広告ユニットIDを設定します（数字の区切りに「~」ではなく「/」を使用している方です）。

Cordova PowerManagementプラグインでCPUをスリープさせない

PowerManagementプラグインを使用するとモバイル端末の電源の状態を制御することができます。たとえば、動画や音楽アプリでスクリーンをオンのまま維持したり、目覚ましアプリでスクリーンがオフになってもCPUを稼働させ続けるといった使い方ができます。

ここでは２つのプラグインをご紹介します。

１．cordova-plugin-powermanagementプラグイン

Viras 氏のプラグインは SCREEN_DIM_WAKE_LOCK、boltex 氏のプラグインは PARTIAL_WAKE_LOCK を設定します。目覚ましアプリのようにタイマーを動かし続けたい場合は PARTIAL_WAKE_LOCK の boltex 氏のプラグインを使うことになります。

window.powerManagement.dim(function() {
  console.log('Wakelock acquired');
}, function() {
  console.log('Failed to acquire wakelock');
});

window.powerManagement.release(function() {
  console.log('Wakelock released');
}, function() {
  console.log('Failed to release wakelock');
});

２．cordova-plugin-chrome-apps-powerプラグイン

こちらのプラグインは PARTIAL_WAKE_LOCK を設定します。自作の瞑想アプリ Meditation Note で利用させて頂いています。

// 瞑想開始ボタンを押したとき
chrome.power.requestKeepAwake("system")

// 瞑想が終了したとき、または停止ボタンを押したとき
chrome.power.releaseKeepAwake()