Monacaからmobile backendを使ったプッシュ通知の方法について

[ygotou]

こんにちは、javascriptを使って、Monacaからmobile backendを使って プッシュ通知をしたいのですが、どのように実装したらいいかわかりません。 管理画面からは、下記を使ってプッシュ通知をiPhoneで受け取ることはできております。

SDKガイド (JavaScript) : プッシュ通知 | ニフティクラウド mobile backend http://mb.cloud.nifty.com/doc/sdkguide/javascript/push.html

あとは、NCMB.Push.sendを使って、Monacaからプッシュ通知ができるのでは？ と思っているのですが、なにかいいサンプルありませんでしょうか？

ざっくりとした質問ですいません。 よろしくお願いいたします。

[goofmint]

@ygotou http://mb.cloud.nifty.com/doc/sdkguide/javascript/push.html#プッシュ通知の送信

ここがサンプルになるのかなと。基本的にはRESTfulなAPIなので、

http://mb.cloud.nifty.com/doc/rest/push/pushRegistration.html

のパラメータが参考になるかと思います。例えば送り先を指定する場合は、ユーザ情報とトークンを結びつけるような仕組みが必要だと思います。

[ygotou]

ご回答ありがとうございます。 URLを参照させていただきましたが、NCMB.Push.sendを 使って送れそうなのですが、どのように実装？していいかが よくわかりません。

http://mb.cloud.nifty.com/doc/sdkguide/javascript/push.html#プッシュ通知の送信 のURLのしたのほうに、プッシュ通知の受信というのがあるのですが、 その中のプログラムに、NCMB.Push.sendを追記するだけで動くのでしょうか？

やってみても、なかなかプッシュ通知がされないので書き方などがいけないのと 思っているのですが。。。

[ygotou]

@moongift ご回答ありがとうございます。教えてください。

APIということですが、URLをみるとすべて リクエストサンプルが curlコマンド書いてありますが、実際にこのcurlコマンドを javascriptの中に記載するイメージでしょうか？

また、curlコマンドで実際にコマンドを打ってみても {"code":"E403002","error":"Unauthorized operations for signature."} のようなシグネチャのエラーが返ってきてしまいます。 このシグネチャの生成方法がサンプルでありますが これもよく使い方がわかりません。

それぞれどのように組み込むのか教えていただけると大変助かります。 よろしくお願いいたします。

[goofmint]

@ygotou

Webベースでプッシュ通知を作成するデモコードです。参考にしてみてください。Monacaですが、ncmb.jsを使えば同じようなコードで実現できます。

https://github.com/NIFTYCloud-mbaas/push_from_javascript

JavaScript SDKを使うのでcurlコマンドは実行しません。

[ygotou]

@moongift ご回答ありがとうございました。 ZIPを解凍して、なかのアプリケーションキーとクライアントキーを 編集して、デスクトップでindex.htmlからプッシュを送信したら、 見事にiPhoneにPUSH通知されてきました。ありがとうございました。

あとは、これをMonacaで動くようにしたいのですが、 中身のapp.jsは下記のまま、Monacaで動くものでしょうか？ NCMB.Push.sendのサンプルコードとは全然違う記述になってしまっているように見えますが。

// Generated by CoffeeScript 1.9.0 $(function() { NCMB.initialize("APPLICATION_KEY", "CLIENT_KEY"); return $("form").on("submit", function(e) { var message; e.preventDefault(); message = $("#message").val(); NCMB.Push.send({ message: message, immediateDeliveryFlag: true, target: ['ios'], searchCondition: {} }).then(function(e) { console.info("success", e); $(".message").addClass("alert alert-success").html("作成されました"); return setTimeout(function(e) { return $(".message").removeClass("alert alert-success").html(""); }, 3000); }, function(e) { return console.error("error", e); }); return false; }); });

教えていただけると助かります。 よろしくお願いいたします。

[ygotou]

@moongift たびたびすいません。

Push Test

Monacaで、index.htmlのなかに上記のように記載して実行してみても Faied!!が表示されるだけでプッシュされてきません。 なにか気になる点などありましたら教えてください。 よろしくお願いいたします。

[ygotou]

@moongift すいません、そのままHTMLを転記したらそのままのHTMLとしてPUSHTESTだけが 表示されておりますが、ソースでみていただくと中身を書いております。

[ygotou]

NCMB.Push.send( { "deliveryTime": {"__type": "Date", "iso": "2015-04-06T20:50:09.106Z"}, "immediateDeliveryFlag": true, "target": ['ios'], "message": "Hello! World!!", "dialog": true, "richUrl": "http://www.nifty.com" }, { success: function() { console.log("success"); alert("Successful!"); // 成功 }, error: function(error) { // エラー console.log("NG"); alert("Failed!!"); } });

必須項目などが抜けているので書き換えてみましたが、 index.hml Failed!!と表示されるだけです。 コンソールログは、successもNGもでておりません。

[goofmint]

@ygotou

error: function(error) {
// エラー
console.log("NG");
console.log(error); // <- こんな感じ
alert("Failed!!");
}

のerrorオブジェクトをconsole.logしてみてもらえますか？その中にエラーメッセージが入っているはずです。後はサンプルでアップしたHTML/JavaScriptとどこが違うのか見て貰えれば、分かるのかなぁと。 なお、deliveryTimeとimmediateDeliveryFlagは片方が必須です。今回はテストなので、immediateDeliveryFlag: trueだけで良いかと思います。

[ygotou]

@moongift

ご回答ありがとうございます。

console.log("NG"); console.log(error); としてみましたが、、ログ（Monaca上やMonacaデバッガー上）が両方でないのです。。 Failed!!のポップアップはでております。

[goofmint]

@ygotou console.logの結果はMonaca IDE上で確認できるのかなと。そもそもそれが出ていないとなるとデバッグが難しくなりますので。まず、console.logがちゃんと出る所まで進めてみてください。

[ygotou]

@moongift

了解しました。まずは、console.logからあたります！

[ygotou]

@moongift

console.logがでることを確認したあと プッシュする内容でエラーでていることがわかりましたので 下記のように修正したら、プッシュ通知がMonacaからできました。 本当にありがとうございました。

NCMB.Push.send(
{
    "immediateDeliveryFlag": true,
    "target": ['ios'],
    "message": "Hello! World!!2",
    "richUrl": "http://www.nifty.com"
}, 
{
    success: function() {
    // 成功
    console.log("success");
    alert("Successful!");
},
    error: function(error) {
    console.log(error);
    alert("Error!");
}
});

[goofmint]

:+1:

[ygotou]

@moongift

もう1点できたら教えてください。 上記でもお伺いしましたが、curlコマンドの時に利用する シグネチャの確認方法はあるのでしょうか？

JavaScript SDKを使うのでcurlコマンドは実行しません。 とありますが、console.logなどでシグネチャなどを表示する ことは可能でしょうか？

プッシュの内容をcurlコマンドなどで簡単に確認できるように なると便利かなと思った次第です。

よろしくお願いいたします。

[goofmint]

@ygotou

お勧めできるかは分かりませんが、JavaScript SDKの NCMB._createSignature で使われている内容を console.log して見れば署名は確認できるはずです。ただ、日付やパス、アプリケーションキーなども使うので若干面倒かなと。後は他のプログラミング言語で実装する方法もあります。 ↓拙作（Ruby版） https://github.com/moongift/ncmb-ruby-client

[ygotou]

@moongift

rubyソースありがとうございました。 まだまだ読めるようになりませんががんばります！