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

トップ >ドキュメント >SDKガイド(JavaScript):プッシュ通知

SDKガイド(JavaScript)

ドキュメント内検索

プッシュ通知

このドキュメントは更新されていません。
こちらから最新版をご覧ください。

JavaScript SDKのプッシュ通知機能について

JavaScriptのSDKでは、プッシュ通知の送信・更新・検索・削除が可能となっています。
プッシュ通知の受信については、アプリ側でiOSやAndroidのSDKを利用した実装が必要となります。

※Monacaで開発する場合はCordovaプラグインを利用する事でプッシュ通知の受信が可能です。
詳しくは、プッシュ通知の受信の項目をご覧ください。

プッシュ通知の送信

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

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){
       // エラー処理
     });

プッシュ通知の検索

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

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

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

未配信のプッシュ通知については、設定の変更や削除が可能です。

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

プッシュ通知の受信

MonacaでiOSまたはAndroidのアプリ開発を行っている場合は、Monaca用プラグインを組み込むことでプッシュ通知の受信を実現することができます。

プッシュ通知の受信を実現するにあたり、以下の2つの準備が必要です。

  • ダッシュボードでGCM/APNsと連携するための設定
  • アプリ側でプッシュ通知を受信する処理を用意

APNsと連携するための証明書の取得方法については、APNsとの連携に必要な準備をご覧ください。
GCMと連携するためのAPIキーの取得方法については、GCMとの連携に必要な準備をご覧ください。
ダッシュボードの設定については、ダッシュボードの使い方:プッシュ通知をご覧ください。

新規プロジェクトにMonacaプラグインを組み込む

Monacaでプロジェクトを作成する際に、テンプレートの一覧から
「ニフティクラウド mobile backend用テンプレート」を選択することで、
Monaca用プラグインとJavaScript SDKがインストールされたプロジェクトを作成できます。

既存プロジェクトにMonaca用プラグインを組み込む

既存のMonacaプロジェクトにプラグインを組み込む手順は以下の通りです。

  1. Monaca IDEで、プラグインを組み込みたいプロジェクトを開いてください。

  2. Monaca IDEの設定で、Cordovaプラグインの管理を選択します。

  3. プラグインの一覧から「NiftyMB(plugin.push.nifty)」を有効にしてください。
    (一覧に表示されない場合、プロジェクトの形式が古い可能性があります。
     新しい形式に変換頂くことでご利用できますので、ご検討ください。)

プラグインを使用する

以下を参考に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));
                    }
                );


                // デバイストークンを取得してinstallation登録が行われます
                // ※ aplication_key,client_keyはニフティクラウドmobile backendから発行されたkeyに置き換えてください
                // ※ sender_idは【GCMとの連携に必要な準備】で作成したProjectのProject Numberを入力してください
                window.NCMB.monaca.setDeviceToken(
                     " #####application_key#####",
                     " #####client_key#####",
                     " #####sender_id#####" 
                );

                // 開封通知登録の設定
                // 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 IDEの設定で、iOS/Androidのビルド設定をします。
Monacaのドキュメントを参考に設定してください。
(iOSアプリのビルド設定で指定するAppIDは、APNsの証明書を作成したアプリと同じものを指定してください。)

注意事項

こちらのプラグインはMonaca以外の環境で動作することを保証しません。
動作確認をする際は、iOS/Androidアプリとしてビルドし、デバイスへインストールしてください。
Monaca用プラグインを使ったプッシュ通知受信機能はデバイス固有機能に依存しているため、Monacaが提供しておりますプレビューやMonacaデバッガーでは動作しません。

配信端末情報の操作

Installationクラスを利用することで、プッシュ通知の配信端末情報を操作することができます。
可能な操作は検索・更新・削除です。
※新しい端末情報の登録はJavaScriptSDKでは非対応です。
 プッシュ通知の受信を実装する場合は、他のSDKやMonacaプラグインをご利用ください。

プロパティ

Installationクラスの主要規定フィールドは以下のとおりです。

// deviceToken: 端末のデバイストークン
// deviceType:  デバイスの種類
// acl:         アクセス権限
// objectId:    オブジェクトのユニークID(save時に付加)
// createDate:  オブジェクトの初回保存日時(save時に付加)
// updateDate:  オブジェクトの最新更新日時(update時に付加)

配信端末情報の取得

配信端末情報を検索するには、fetchAllメソッドを利用します。
検索条件を設定することもできます。詳しくはクエリの使い方を参照してください。
また、objectIdを用いて特定のオブジェクトを取得するにはfetchByIdメソッドを利用します。

// 条件に合致するオブジェクトを検索する
ncmb.Installation.fetchAll()
         .then(function(results){
            for (var i = 0; i < results.length; i++) {
              var object = results[i];
              console.log(object.get("deviceToken"));
            }
          })
         .catch(function(err){
            console.log(err);
          });

// 特定の単一オブジェクトを取得する
ncmb.Installation.fetchById("object_id")
                 .then(function(installation){
                    // 取得後の処理
                  })
                 .catch(function(err){
                    // エラー処理
                  }));

配信端末情報の更新

保存した配信端末情報の値を更新するには、updateメソッドを実行します。
新しいフィールドを追加することもできます。

ncmb.Installation.fetchById("object_id")
                 .then(function(installation){
                    installation.set("region", "Asia");
                    return installation.update();
                  })
                 .then(function(installation){
                    // 更新後の処理
                  })
                 .catch(function(err){
                    // エラー処理
                  }));

配信端末情報の削除

deleteメソッドを利用して、配信端末を削除します。

// installation: ncmb.Installationクラスのインスタンス
installation.delete()
         .then(function(result){
           console.log(result); // true
          })
         .catch(function(err){
           // エラー処理
          });







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

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

ページの先頭へ