サーバー構築不要！スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >プッシュ通知（Monaca）:基本的な使い方

プッシュ通知（Monaca）

基本的な使い方

概要

このページでは、Monacaを使って開発したアプリでプッシュ通知を受信するための設定と、
プッシュ通知の配信方法について説明していきます。

プッシュ通知の受信

MonacaアプリはiOS端末、Android端末向けにビルドされた場合のみ、
それぞれのOS向けのプッシュ通知機能を利用して、通知の配信が可能です。
プッシュ通知を受信する場合、APNsやFirebaseとの連携を行う必要があります。

mobile backend 側の設定

下記ドキュメントを参考に、ニフクラ mobile backend の
ダッシュボードからプッシュ通知の設定を行ってください。

※ Android端末へのプッシュ通知は、Firebaseと連携しています。Firebaseとの連携完了後、FCMかGoogle Cloud Messaging(以下、GCM)に送信することで、各端末にプッシュ通知が受信される仕組みです。
※ FCMはGCMの新バージョンです。GCMは2019年3月中に使用不可となります。GCM対応のプッシュ通知を使用しているお客様は移行対応の手順を参考に、FCM対応したプッシュ通知への移行をお願いいたします。
※ ncmb-push-monaca-plugin v3以上を使用する場合、google-services.jsonはルートディレクトリ(config.xmlなどがある場所)に配置してください。

Monaca 側の設定

Monacaアプリでプッシュ通知を実施する場合は、
JavaScript SDKではなく、Cordovaプラグインを利用して
端末情報をデータストアに登録する必要があります。

プッシュ通知受信用プラグインの組み込み方

1.Monaca IDEで、プラグインを組み込みたいプロジェクトを開いてください。
2.Monaca IDEの設定で、Cordovaプラグインの管理を選択します。
3.プラグインの一覧から「NIFCloudMB (ncmb-push-monaca-plugin )」を有効にしてください。

※「Cordovaプラグインの管理」で表示される「NIFCloudMB (ncmb-push-monaca-plugin )」が2種類表示されます。v2.0.11は旧ドメインのpluginとなりますので、v3.0.0以上のpluginをお使いください。v2.0.11のpluginは「Cordovaプラグインの管理」上からは今後削除される予定です。

4.以下を参考にinstallation登録とプッシュ通知受信時のコールバックの登録を行ってください。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
            document.addEventListener("deviceready", function()
            {
                // プッシュ通知受信時のコールバックを登録します
                window.NCMB.monaca.setHandler
                (
                    function(jsonData){
                        // 送信時に指定したJSONが引数として渡されます
                        alert("callback :::" + JSON.stringify(jsonData));
                    }
                );

                var successCallback = function () {
                    //端末登録後の処理
                };
                var errorCallback = function (err) {
                    //端末登録でエラーが発生した場合の処理
                };
                // デバイストークンを取得してinstallation登録が行われます
                // ※ YOUR_APPLICATION_KEY,YOUR_CLIENT_KEYはニフクラ mobile backendから発行されたAPIキーに書き換えてください
                window.NCMB.monaca.setDeviceToken(
                    "YOUR_APPLICATION_KEY",
                    "YOUR_CLIENT_KEY",
                    successCallback,
                    errorCallback
                );

                // 開封通知登録の設定
                // trueを設定すると、開封通知を行う
                window.NCMB.monaca.setReceiptStatus(true);

                alert("DeviceToken is registed");
            },false);

            function getInstallationId() {
                // 登録されたinstallationのobjectIdを取得します。
                window.NCMB.monaca.getInstallationId(
                    function(id) {
                        alert("installationID is: " + id);
                    }
                );
            }
    </script>
</head>
<body>
    <h1>PushNotification Sample</h1>
    <br/><br/>
    <input type="button" onClick="getInstallationId()" value="getInstallationID" />
</body>
</html>
注意事項
  • プッシュ通知受信用プラグインは、Monaca以外の環境で動作することを保証しません。
  • Monaca用プラグインを使ったプッシュ通知受信機能はデバイス固有機能に依存しているため、Monacaが提供しておりますプレビューやMonacaデバッガーでは動作しません。動作確認の際は、iOS/Androidアプリとしてビルドし、デバイスへインストールしてご利用ください。
  • プッシュ通知の受信以外の機能として、送信や検索、削除の実装を行う場合は、別途 JavaScript SDK の導入が必要です。導入手順は、クイックスタートをご参照ください。
  • v2系のプラグインを使用する場合は、YOUR_SENDER_IDをSender ID(送信者ID)に書き換えてください。
window.NCMB.monaca.setDeviceToken(
    "YOUR_APPLICATION_KEY",
    "YOUR_CLIENT_KEY",
    "YOUR_SENDER_ID",
    successCallback,
    errorCallback
);

プッシュ通知の送信

パラメータを設定して、sendメソッドでプッシュ通知を送信できます。
即時配信フラグもしくは配信時間を必ず指定する必要があります。
設定可能なパラメータの詳細については、REST APIリファレンス：プッシュ通知登録をご覧ください。

var ncmb = new NCMB("YOUR_APPLICATIONKEY","YOUR_CLIENTKEY");
var push = new ncmb.Push();
push.set("immediateDeliveryFlag", true)
    .set("message", "Hello, World!")
    .set("target", ["ios", "android"]);

push.send()
    .then(function(push){
      // 送信後処理
     })
    .catch(function(err){
       // エラー処理
     });

※動作確認にはSDKの導入が必要です。(参考：クイックスタート)

プッシュ通知の検索

条件を設定することでプッシュ通知を検索します。

var ncmb = new NCMB("YOUR_APPLICATIONKEY","YOUR_CLIENTKEY");
ncmb.Push.equalTo("target","ios")
    .fetchAll()
    .then(function(pushs){
       for (var i = 0; i < pushs.length; i++) {
         console.log(pushs[i].message);
       }
     })
    .catch(function(err){
       // エラー処理
     });

※動作確認にはSDKの導入が必要です。(参考：クイックスタート)

プッシュ通知の更新・削除

配信ステータスが「未配信」であるプッシュ通知については、設定の変更や削除が可能です。

// push:保存済みのプッシュインスタンス
push.set("target", ["ios"]);
push.update() // 更新
    .then(function(push){
       return push.delete(); // 削除
     })
    .then(function(){
       // 削除後処理
     })
    .catch(function(){
     });

※動作確認にはSDKの導入が必要です。(参考：クイックスタート)

ダッシュボードからプッシュ通知を作成する

ここからは、ダッシュボードからプッシュ通知を作成、配信する方法を説明します。

プッシュ通知を送信する

ダッシュボード左側メニューのプッシュ通知をクリックし、プッシュ通知の画面を開きます。

新しいプッシュ通知ボタンをクリックすると、プッシュ通知作成画面が表示されます。
このページで新たなプッシュ通知を作成できます。タイトル、メッセージ、JSONデータを記入してください。
※iOS宛プッシュ通知の設定は、iOS8未満は合計256バイトまで、iOS8以降は合計2Kバイトまでがサポート対象となります。
新規プッシュ通知作成

配信日時の指定を行います。以下の例では、作成されたプッシュ通知が即時に配信される設定になっています。

プッシュ通知送信日時を指定する場合は、配信日時の欄で日時を選択し、希望する日時を指定してください。

配信期限の指定では電源が切れているなどの事情により通知を受け取れなかった端末への再送信期間を設定できます。デフォルトの設定では再送信できる期間が10日間となっていますが1～28日間、1～24時間の間で、期間を指定できます。

また、配信期限を日時で指定する場合は、日時の指定画面が表示されます。

次に、配信を行うプラットフォームを選択してください。AndroidとiOSの両方にプッシュ通知を送信することも可能です。
Androidを選択した場合は、以下のようにアクション設定と、ダイアログ表示の設定画面が表示されます。
Android独自設定

iOSを選択した場合は、以下のようなiOS端末へのプッシュ通知を行うための設定画面が開きます。
iOS独自設定

最後に「プッシュ通知を作成する」ボタンをクリックすると、プッシュ通知が作成されます。

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。（回答保証はいたしかねます）
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ