集中講座3 restapiを使って記事投稿をプッシュ通知でお知らせしてみよう

Copyright © NIFTY Corporation All Rights Reserved.

【集中講座③】

REST API を使って記事投稿をプッシュ通知で

お知らせしてみよう

ニフティ株式会社

Copyright © NIFTY Corporation All Rights Reserved. 2

今日のゴール

スマホ対応済みブログ記事の更新をトリガーに

REST API でプッシュ登録

Monaca 製のアプリへ更新を知らせるプッシュ通知

APNs

GCM


この時間帯に体験して頂く内容

配信端末登録(SDK)

APNs

GCM

プッシュ通知登録

(REST API)

配信端末登録(SDK)

WordPress で投稿すると自動でプッシュ通知


手順

① WordPress に連携用プラグインを導入する

② 連携用プラグインの設定

③ mobile backend の設定

④ 動作確認！！


①WordPress に　連携用プラグインを導入する


①WordPress に連携用プラグインを導入する 1/7

https://github.com/ndyuya/ncmb-post-notification連携用プラグインをダウンロードしましょう。

「 release 」をクリック



https://github.com/ndyuya/ncmb-post-notification/releases連携用プラグインをダウンロードしましょう。

ncmb-post-notification.zipをダウンロード



WordPress の管理画面の URL → http:// 【キャンバスに設定されているドメイン】 /wp-login.php

次に、 WordPress の管理画面でプラグインを追加します。

「プラグイン」をクリック



「新規追加」をクリック



「アップロード」をクリック

先ほどダウンロードしたZip ファイルを選択して

「いますぐインストール」



「プラグインを有効化」する



プラグインが追加されました！


② 連携用プラグインを設定する


② 連携用プラグインを設定する　 1/3

設定の「更新通知（ NCMB ）」

をクリック


② 連携用プラグインを設定する　 2/3mobile backend の

管理画面からアプリケーションキーと

クライアントキーをコピーする

送信したい対象を選択する


② 連携用プラグインを設定する　 3/3

「変更を保存」をクリック


③mobile backend の設定



REST API を使ってプッシュ通知送信するには設定変更が必要です。

アプリ設定＞プッシュ通知

許可する

API キーを設定

証明書を設定



REST API を使ってプッシュ通知送信するには設定変更が必要です。

SDK からの操作を許可して保存する


④ 動作確認！


④ 動作確認　 1

「新規追加」をクリック

実際に WordPress で記事を投稿してみましょう！

記事の内容を追加して公開ボタンをクリック



mobile backend の管理画面でプッシュ通知を確認すると投稿した記事に関するプッシュ通知が作成されています。



暫くすると端末に通知が届きます。


連携の仕組みについて解説


こんなフローで連携していました

REST API

①WordPress で記事を保存する② 保存処理をアクションフックで捕捉③REST API でプッシュ通知を mobile backend へ登録

プッシュ通知


REST API とは？？【出典】 http://e-words.jp/w/RESTful_API.html

mobile backend の機能を使うためのルール

SDK も内部で REST API を呼び出している


mobile backend の REST API の使い方 1/10

REST API のドキュメント→ http://mb.cloud.nifty.com/doc/rest/common/format.html

例）　プッシュ通知の登録をするには？

https://mb.api.cloud.nifty.com/2013-09-01/push

に対して POST メソッドで

送信したいプッシュ通知を

JSON 形式で送信する




使用プロトコル

ホスト名

API のバージョン番号

リソースへのパス

扱いたいものに応じて「リソースへのパス」を変更する　※他の部分は基本的に固定

機能名入れ物中身

データストア（オブジェクト） /classes/[ クラス名 ] /classes/[ クラス名 ]/[objectId]

会員 /users /users/[objectId]

ロール /roles /roles/[objectId]

プッシュ /push /push/[objectId]

配信端末 /installations /installations/[objectId]

ファイル /files /files/[ ファイル名 ]

/users

A B

A さん : /users/AB さん： /users/B

(HTTP + SSL)



POST メソッド

操作内容

指定したリソースをどう操作したいかを表す

メソッド操作内容GET 取得（中身）

検索（入れ物）

POST 登録（入れ物、ファイルストアのみ中身）

PUT 更新（中身）

DELETE 削除（中身）



JSON 形式{

“immediateDeliveryFlag” : true,”target” : [“ios”, “android”],”title” : ” テスト投稿です！” ,“message” : ” mBaaS…”,“deliveryExpirationTime” : “10 day”,“sound” : “default”,“badgeIncrementFlag” : true

}

データは全て JSON 形式で取り扱う　（ファイルストアを除く）





に対して POST メソッドで

送信したいプッシュ通知を

JSON 形式で送信する



①SSL で mb.api.cloud.nifty.com に接続する②HTTP で POST リクエストする

POST /2013-09-01/push HTTP/1.1Host: mb.api.cloud.nifty.comAccept: */*Content-Type: application/jsonContent-Length: 117

{"immediateDeliveryFlag":true,"target":["ios","android"],"title":" テスト投稿です！ ","message":"mBaaS…","deliveryExpirationTime":"10 day","sound":"default","badgeIncrementFlag":true}


エラー！！



足りない情報が２つほど…

どのアプリへの要求なのか？

所有者からの正当な要求なのか？



どのアプリへの要求なのか？

HTTP ヘッダにアプリケーションキーを指定する

POST /2013-09-01/push HTTP/1.1Host: mb.api.cloud.nifty.comAccept: */*Content-Type: application/json

X-NCMB-Application-Key:***********************************Content-Length: 117




HTTP ヘッダにタイムスタンプと署名を指定する

所有者からの正当な要求なのか？

POST /2013-09-01/push HTTP/1.1Host: mb.api.cloud.nifty.comAccept: */*Content-Type: application/jsonX-NCMB-Application-Key:***********************************

X-NCMB-Timestamp:2015-05-29T13:11:10.312ZX-NCMB-Signature:**********************************Content-Length: 117




登録操作

リソース

エンドポイント（ホスト）

操作対象のアプリ

正当なリクエストを証明する署名

JSON データ

POST /2013-09-01/push HTTP/1.1Host: mb.api.cloud.nifty.comAccept: */*Content-Type: application/jsonX-NCMB-Application-Key:***********************************X-NCMB-Timestamp:2015-05-29T13:11:10.312ZX-NCMB-Signature:**********************************Content-Length: 182



シグネチャの生成方法　 1/4

① 署名用文字列をつくる

POST\nmb.api.cloud.nifty.com\n/2013-09-01/push\n＜署名用パラメータ＞

メソッド

ホスト名

パス

？？？



署名用パラメータとは？以下の５項目をキーの自然昇順でソートし「 & 」で連結したもの

項目キー値

アプリケーションキー X-NCMB-Application-Key アプリケーションキー

シグネチャメソッド SignatureMethod HmacSHA256 　（固定値）

シグネチャバージョン SignatureVersion 2 　　　　　　　（固定値）

タイムスタンプ X-NCMB-Timestamp 2015-05-29T13:11:10.312Z

クエリストリング各キー対応する値（ URL エンコード )

例） where=%7B%22status%22%3A%22published%22%7D&count=1キー値

where %7B%22status%22%3A%22published%22%7D

count 1

SignatureMethod=HmacSHA256&SignatureVersion=2&X-NCMB-Application-Key=*********&X-NCMB-Timestamp=2015-05-29T13:11:10.312Z&count=1&where=%7B%22deviceType%22%3A%22ios%22%7D

結果



① 署名用文字列をつくる

POST\nmb.api.cloud.nifty.com\n/2013-09-01/push\nSignatureMethod=HmacSHA256&SignatureVersion=2&X-NCMB-Application-Key=*********&X-NCMB-Timestamp=2015-05-29T13:11:10.312Z&count=1&where=%7B%22deviceType%22%3A%22ios%22%7D

メソッドホスト名

パス

署名用パラメータ



② 署名用文字列からシグネチャを計算する

POST\nmb.api.cloud.nifty.com\n/2013-09-01/push\nSignatureMethod=HmacSHA256&SignatureVersion=2&X-NCMB-Application-Key=*********&X-NCMB-Timestamp=2015-05-29T13:11:10.312Z&count=1&where=%7B%22deviceType%22%3A%22ios%22%7D

署名用文字列

HmacSHA256 でハッシュ値を求める

\xD8F\xE2\xD5\xC5\x80.\x1A\xFE\xD7\x98\x15\x12m\x19\x1C\x1Di\x03\xB4\x10gM\xB0\xAD\xBA\xD0\xD6s\xA2\xA3\xA0

クライアントキー(秘密鍵 ) ********************************

Base64 エンコード

XHhEOEZceEUyXHhENVx4QzVceDgwLlx4MUFceEZFXHhEN1x4OThceDE1XHgx\nMm1ceDE5XHgxQ1x4MURpXHgwM1x4QjRceDEwZ01ceEIwXHhBRFx4QkFceEQw\nXHhENnNceEEyXHhBM1x4QTA=

シグネチャ


PHP で REST API を利用する例

本日利用したプラグインのうち「 ncmb-client.php 」にシグネチャの計算やリクエストの組み立て方があります。

https://github.com/ndyuya/ncmb-post-notification/blob/master/ncmb-client.php

【注意事項①】　　プラグインのソースコードは読みやすいように簡略化しております。　　通常必要となるエラーハンドリング等を省略していますので　　ご利用は自己責任でお願いいたします。　　必要な実装の追加や十分なテストを行うことをおすすめします。　　適用ライセンスは「 Apache License, Version 2.0 」です。【注意事項②】　　 ncmb-client.php はファイルの取扱い機能が未実装なため、　　ファイルストアは利用できません。

REST APIご利用の参考にしてみてください。


REST API でよくあるエラー

ヘッダに指定しているタイムスタンプと、シグネチャの計算に使っているタイムスタンプが異なっている

シグネチャ計算時に誤って URL エンコードしていることが多いです…　例）「 : 」が「 %25 」になっている。

クエリストリングを「 & 」で分割して使っていない署名用パラメータの自然昇順ソートを忘れている

{"code":"E403002","error":"Unauthorized operations for signature."}

シグネチャの計算が間違っている時に発生します。以下の点を確認してみてください！


こんなことが出来るようになりました！

スマホ対応済みブログ記事の更新をトリガーに

REST API でプッシュ登録

Monaca 製のアプリへ更新を知らせるプッシュ通知

APNs

GCM

集中講座3 restapiを使って記事投稿をプッシュ通知でお知らせしてみよう

Software