Help us understand the problem. What is going on with this article?

【サーバ機能 x ハイブリッドアプリ】プッシュ通知機能を作るサンプル

More than 3 years have passed since last update.

Monaca x NIFTY Cloud mobile backend プッシュ通知サンプル

Overview

元の記事:リンク

Monacaを用いて作ったアプリとmobile backendを連携して、デバイストークンの登録を行い、プッシュ通知機能を簡単に実装するサンプルコードとなります。
* HTML/CSS/JavaScriptでマルチプラットフォーム(iOS/Android/Windowsなど)にアプリを開発できる統合開発環境Monaca
* スマホアプリのサーバ側機能(プッシュ通知、会員管理、DBなど)をサーバ開発不要で実装できるNIFTY Cloud mobile backend

overview

Demo

  • mBaaSにて、アプリの作成とプッシュ通知の設定を行います。
  • MonacaでgithubのURL(https://github.com/ncmbadmin/monaca_push_template/archive/master.zip)をインポートし、
    アプリケーションキーとクライントキーを設定してください。
    アプリを実機ビルドした上起動すると、デバイストークンが登録されます。
    管理画面からプッシュ通知を登録すると、実際に端末に通知が届くのを確認できます。
    ※本サンプルコードは、管理画面からのみプッシュ通知の配信が行えます。mBaaSではアプリからのプッシュ通知登録も可能ですが、本サンプルでは取り扱っていません。

  • 起動画面

demo2

  • 登録成功画面

demo1

  • ダッシュボードでの確認

demo3

Requirement

  • Monaca環境
  • Nifty cloud mobile backend Javascript SDK version 2.0.2 ダウンロード:Javascript SDK

Installation

  • Monacaで新規アプリ作成し、プロジェクトをインポートする。

  • mobile backendでアプリ作成する

  • Monacaで作成したアプリをmobile backendサーバーと連携させる

    • Monacaでアプリケーションキー、クライアントキーを設定し、初期化を行う

initialize2
initialize

キーをコピーし、追記します。

www/js/ncmb_push_start.jsにてsenderId設定を行います。

  • 動作確認
    • Monacaで実機ビルドし、動作確認する demo
    • プッシュ通知を登録し、プッシュ通知が来ることを確認する demo

Description

  • コードの説明

File: www/js/app.js

  • 初期化設定
var appKey    = "YOUR_APP_KEY";
var clientKey = "YOUR_CLIENT_KEY";
var senderId  = "YOUR_ANDROID_SENDERID";
var ncmb = new NCMB(appKey,clientKey);

上記のコードでアプリケーションキーとクライアントキーを指定し、
NCMB(appKey, clientKey) でmBaaSサーバと連携を行います。
Android端末の場合、Android senderIDも追記してください。

  • デバイストークン登録
document.addEventListener("deviceready", function()
{
   ・・・
    // デバイストークンを取得してinstallation登録が行われます
    // ※ aplication_key,client_keyはニフティクラウドmobile backendから発行されたkeyに置き換えてください
    // ※ sender_idは【GCMとの連携に必要な準備】で作成したProjectのProject Numberを入力してください
    window.NCMB.monaca.setDeviceToken(appKey, clientKey, senderId);
    // 開封通知登録の設定
    // trueを設定すると、開封通知を行う
    window.NCMB.monaca.setReceiptStatus(true);
},false);
  • デバイストークンのほかに、住所や年齢などのカスタマイズ値を追加する場合は、以下のように登録を行います。
function startInstallationRegistration() {
    // 登録されたinstallationのobjectIdを取得します。
    window.NCMB.monaca.getInstallationId(
        function(id) {
            var place = document.getElementById("place").value;
            var age = document.getElementById("age").value;
            //サーバーへの更新実施
            ncmb.Installation.fetchById(id)
                 .then(function(installation){
                    ////端末のPlaceの値を設定
                    installation.set("Place", place);
                    ////端末のAgeの値を設定
                    installation.set("Age", age);
                    return installation.update();
                  })
                 .then(function(installation){
                    // 更新後の処理
                    alert("登録完了");
                  })
                 .catch(function(err){
                    // エラー処理
                    alert("エラー発生");
                  });
        }
    );
}

Usage

サンプルコードをカスタマイズすることで、様々な機能を実装できます!
データ保存・データ検索・会員管理・プッシュ通知などの機能を実装したい場合には、
以下のドキュメントもご参考ください。

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

  • MITライセンス
  • NIFTY Cloud mobile backendのJavascript SDKのライセンス
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした