REST APIを使ってmBaaSと既存システムの連携を体験してみよう

Copyright © NIFTY Corporation All Rights Reserved.

【ハンズオン】

REST API を使って、mBaaS と既存システムの連携を

体験してみよう

ニフティ株式会社

Copyright © NIFTY Corporation All Rights Reserved. 2

本日のゴール

既存システムと mBaaS の連携を体験する

REST API の使い方を理解する


既存システムと mBaaS の連携を体験する


エンプラ領域で mBaaS をどう使えばいいか


本日、体験して頂く内容

ちょいのせデータ参照パターンの一部

SDK

SDK

既存システム

REST API


本日、体験して頂くシステムの構成

SDK

SDK

REST API

WordPress で記事投稿するとmobile backend のデータストアに記事の内容が複製される。


手順

① C4SA の利用登録

② C4SA で WordPress 環境を作る

③ mobile backend の利用登録

④ mobile backend のアプリを作る

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

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

⑦ 動作確認！！


①C4SA の利用登録

※ 登録済みの方は不要です


①C4SA の利用登録　 [1/6]

http://c4sa.nifty.com/ここをクリック

C4SA で使う ID でログインしてから、利用登録手続きを行います。



@nifty ID を選択

@nifty ID 以外でも OK です

利用する ID は選べます。



事前にご登録いただいた

@nifty ID でログイン



受信可能なメールアドレスを入力して「確認」

個人情報の取扱いについて確認後、同意して送信



メールが届くのでURL を開く

利用規約に同意して利用開始！



C4SA が使えるようになりました。


②C4SA で WordPress 環境を作る


②C4SA で WordPress 環境を作る　 [1/9]

ここをクリック




15 日間無料で使えます！試用期間を過ぎると…

決済情報【無】 → 期限切れのキャンバスは非公開になります決済情報【有】 → 本サービス（有償）に切り替わります　　

重要












この URL をクリック



サイトのタイトル任意の文字列

ユーザー名任意の文字列

パスワード任意の文字列

メールアドレス受信可能なメールアドレス

プライバシーチェックを外す（任意）

必要事項を入力してWordPress をインストールしてください。




先ほど入力したアカウントでログイン

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



WordPress 環境が構築できました！

記事の投稿などお試しください。WordPress のバージョンアップは任意です。


③mobile backend の利用登録

※ 登録済みの方は不要です


③mobile backend の利用登録　 1/6

http://mb.cloud.nifty.com/ ここをクリック

@nifty 会員未登録の方のみ

まず、 @nifty 会員登録を行います。

※ 右クリックして新しいタブで開くと便利です




@nifty 会員未登録の方のみ



@nifty 会員未登録の方のみ必要事項を入力して会員登録してください



mobile backend 未登録の方のみ

http://mb.cloud.nifty.com/ ここをクリック

次に、ニフティクラウド mobile backend の利用登録を行います。



事前にご登録いただいた

@nifty ID でログイン

mobile backend 未登録の方のみ



利用規約に同意して

利用開始！


④mobile backend のアプリを作る


④mobile backend のアプリを作る　 1/4

利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

任意のアプリ名を入力してください

例 :restapi_hands_on



アプリが作成されました。

２つのキーは後で使います

OK をクリックすると管理画面が表示されます

※ 後でキーを確認する方法は　次のページに掲載しています。



後でキーを確認するには…【その１】

アプリ設定



後でキーを確認するには…【その２】

ここにあります


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


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

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

「 release 」をクリック



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

ncmb-article-replication.zipをダウンロード



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

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

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



「新規追加」をクリック



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

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

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



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



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


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


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

「記事複製（ NCMB ）」をクリック



mobile backend の管理画面から

アプリケーションキーとクライアントキーを

コピーする



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


⑦ 動作確認！


⑦ 動作確認　 1

「新規追加」をクリック

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

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


⑦ 動作確認　 2

mobile backend の管理画面でデータストアを確認するとWPArticle クラスが作成されて、記事が複製されています！

複製されていない場合は、WordPress に設定した２つのキーが正しいかを確認してください。


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


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

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/classes/WPArticle

に対して 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形式{

“article_id” : 5,”title” : ” テスト投稿です！” ,”content” : ”mbaas とは…” ,“url” : ”http://…”,“status” : ”publish”

}

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





に対して POST メソッドで

登録したいオブジェクトを

JSON形式で送信する



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

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

{“article_id”:5,”title”:” テスト投稿です！” ,”content”:”mbaas とは…” ,“url”:”http://…”,“status”:”publish”}


エラー！！



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

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

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



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

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

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

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




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

POST /2013-09-01/classes/WPArticle 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/classes/WPArticle 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

{“article_id”:5,”title”:” テスト投稿です！” ,”content”:”mbaas とは…” ,“u…


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

①署名用文字列をつくる

POST\nmb.api.cloud.nifty.com\n/2013-09-01/classes/WPArticle\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/classes/WPArticle\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/classes/WPArticle\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-article-replication/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."}

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


まとめ

既存システム (WordPress) とmBaaS の連携を体験しました

REST API の使い方とシグネチャの生成を学びました


その他のハンズオンのご紹介

Monaca と mBaaS でWeb コンテンツを

スマホアプリ化しよう

Monaca にプッシュ通知を組み込もう

募集中

7月実施予定


Mobile

REST APIを使ってmBaaSと既存システムの連携を体験してみよう