Download - 集中講座3 RestApiを使って記事投稿をプッシュ通知でお知らせしてみよう
Copyright © NIFTY Corporation All Rights Reserved.
【集中講座③】
REST API を使って記事投稿をプッシュ通知で
お知らせしてみよう
ニフティ株式会社
Copyright © NIFTY Corporation All Rights Reserved. 2
今日のゴール
スマホ対応済みブログ記事の更新をトリガーに
REST API でプッシュ登録
Monaca 製のアプリへ更新を知らせるプッシュ通知
APNs
GCM
Copyright © NIFTY Corporation All Rights Reserved. 3
この時間帯に体験して頂く内容
配信端末登録(SDK)
APNs
GCM
プッシュ通知登録
(REST API)
配信端末登録(SDK)
WordPress で投稿すると自動でプッシュ通知
Copyright © NIFTY Corporation All Rights Reserved. 4
手順
① WordPress に連携用プラグインを導入する
② 連携用プラグインの設定
③ mobile backend の設定
④ 動作確認!!
Copyright © NIFTY Corporation All Rights Reserved. 6
①WordPress に連携用プラグインを導入する 1/7
https://github.com/ndyuya/ncmb-post-notification連携用プラグインをダウンロードしましょう。
「 release 」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 7
①WordPress に連携用プラグインを導入する 2/7
https://github.com/ndyuya/ncmb-post-notification/releases連携用プラグインをダウンロードしましょう。
ncmb-post-notification.zipをダウンロード
Copyright © NIFTY Corporation All Rights Reserved. 8
①WordPress に連携用プラグインを導入する 3/7
WordPress の管理画面の URL → http:// 【キャンバスに設定されているドメイン】 /wp-login.php
次に、 WordPress の管理画面でプラグインを追加します。
「プラグイン」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 10
①WordPress に連携用プラグインを導入する 5/7
「アップロード」をクリック
先ほどダウンロードしたZip ファイルを選択して
「いますぐインストール」
Copyright © NIFTY Corporation All Rights Reserved. 15
② 連携用プラグインを設定する 2/3mobile backend の
管理画面からアプリケーションキーと
クライアントキーをコピーする
送信したい対象を選択する
Copyright © NIFTY Corporation All Rights Reserved. 18
③mobile backend の設定
REST API を使ってプッシュ通知送信するには設定変更が必要です。
アプリ設定>プッシュ通知
許可する
API キーを設定
証明書を設定
Copyright © NIFTY Corporation All Rights Reserved. 19
③mobile backend の設定
REST API を使ってプッシュ通知送信するには設定変更が必要です。
SDK からの操作を許可して保存する
Copyright © NIFTY Corporation All Rights Reserved. 21
④ 動作確認 1
「新規追加」をクリック
実際に WordPress で記事を投稿してみましょう!
記事の内容を追加して公開ボタンをクリック
Copyright © NIFTY Corporation All Rights Reserved. 22
④ 動作確認 2
mobile backend の管理画面でプッシュ通知を確認すると投稿した記事に関するプッシュ通知が作成されています。
Copyright © NIFTY Corporation All Rights Reserved. 25
こんなフローで連携していました
REST API
①WordPress で記事を保存する② 保存処理をアクションフックで捕捉③REST API でプッシュ通知を mobile backend へ登録
プッシュ通知
Copyright © NIFTY Corporation All Rights Reserved. 26
REST API とは??【出典】 http://e-words.jp/w/RESTful_API.html
mobile backend の機能を使うためのルール
SDK も内部で REST API を呼び出している
Copyright © NIFTY Corporation All Rights Reserved. 27
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 形式 で送信する
Copyright © NIFTY Corporation All Rights Reserved. 28
mobile backend の REST API の使い方 2/10
https://mb.api.cloud.nifty.com/2013-09-01/push
使用プロトコル
ホスト名
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)
Copyright © NIFTY Corporation All Rights Reserved. 29
mobile backend の REST API の使い方 3/10
POST メソッド
操作内容
指定したリソースをどう操作したいかを表す
メソッド 操作内容GET 取得 (中身)
検索(入れ物)
POST 登録(入れ物、ファイルストアのみ中身)
PUT 更新(中身)
DELETE 削除(中身)
Copyright © NIFTY Corporation All Rights Reserved. 30
mobile backend の REST API の使い方 4/10
JSON 形式{
“immediateDeliveryFlag” : true,”target” : [“ios”, “android”],”title” : ” テスト投稿です!” ,“message” : ” mBaaS…”,“deliveryExpirationTime” : “10 day”,“sound” : “default”,“badgeIncrementFlag” : true
}
データは全て JSON 形式で取り扱う (ファイルストアを除く)
Copyright © NIFTY Corporation All Rights Reserved. 31
mobile backend の REST API の使い方 5/10
例) プッシュ通知の登録をするには?
https://mb.api.cloud.nifty.com/2013-09-01/push
に対して POST メソッドで
送信したいプッシュ通知を
JSON 形式 で送信する
Copyright © NIFTY Corporation All Rights Reserved. 32
mobile backend の REST API の使い方 6/10
①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}
例) プッシュ通知の登録をするには?
エラー!!
Copyright © NIFTY Corporation All Rights Reserved. 33
mobile backend の REST API の使い方 7/10
足りない情報が2つほど…
どのアプリへの要求なのか?
所有者からの正当な要求なのか?
Copyright © NIFTY Corporation All Rights Reserved. 34
mobile backend の REST API の使い方 8/10
どのアプリへの要求なのか?
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
{"immediateDeliveryFlag":true,"target":["ios","android"],"title":" テスト投稿です! ","message":"mBaaS…","deliveryExpirationTime":"10 day","sound":"default","badgeIncrementFlag":true}
Copyright © NIFTY Corporation All Rights Reserved. 35
mobile backend の REST API の使い方 9/10
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
{"immediateDeliveryFlag":true,"target":["ios","android"],"title":" テスト投稿です! ","message":"mBaaS…","deliveryExpirationTime":"10 day","sound":"default","badgeIncrementFlag":true}
Copyright © NIFTY Corporation All Rights Reserved. 36
mobile backend の REST API の使い方 10/10
登録操作
リソース
エンドポイント(ホスト)
操作対象のアプリ
正当なリクエストを証明する署名
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
{"immediateDeliveryFlag":true,"target":["ios","android"],"title":" テスト投稿です! ","message":"mBaaS…","deliveryExpirationTime":"10 day","sound":"default","badgeIncrementFlag":true}
Copyright © NIFTY Corporation All Rights Reserved. 37
シグネチャの生成方法 1/4
① 署名用文字列をつくる
POST\nmb.api.cloud.nifty.com\n/2013-09-01/push\n<署名用パラメータ>
メソッド
ホスト名
パス
???
Copyright © NIFTY Corporation All Rights Reserved. 38
シグネチャの生成方法 2/4
署名用パラメータとは?以下の5項目をキーの自然昇順でソートし「 & 」で連結したもの
項目 キー 値
アプリケーションキー 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
結果
Copyright © NIFTY Corporation All Rights Reserved. 39
シグネチャの生成方法 3/4
① 署名用文字列をつくる
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
メソッドホスト名
パス
署名用パラメータ
Copyright © NIFTY Corporation All Rights Reserved. 40
シグネチャの生成方法 4/4
② 署名用文字列からシグネチャを計算する
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=
シグネチャ
Copyright © NIFTY Corporation All Rights Reserved. 41
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ご利用の参考にしてみてください。
Copyright © NIFTY Corporation All Rights Reserved. 42
REST API でよくあるエラー
ヘッダに指定しているタイムスタンプと、シグネチャの計算に使っているタイムスタンプが異なっている
シグネチャ計算時に誤って URL エンコードしていることが多いです… 例)「 : 」が「 %25 」になっている。
クエリストリングを「 & 」で分割して使っていない 署名用パラメータの自然昇順ソートを忘れている
{"code":"E403002","error":"Unauthorized operations for signature."}
シグネチャの計算が間違っている時に発生します。以下の点を確認してみてください!
Copyright © NIFTY Corporation All Rights Reserved. 43
こんなことが出来るようになりました!
スマホ対応済みブログ記事の更新をトリガーに
REST API でプッシュ登録
Monaca 製のアプリへ更新を知らせるプッシュ通知
APNs
GCM