REST APIを使ってmBaaSと既存システムの連携を体験してみよう
-
date post
11-Aug-2015 -
Category
Mobile
-
view
271 -
download
6
Transcript of REST APIを使ってmBaaSと既存システムの連携を体験してみよう
![Page 1: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/1.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
【ハンズオン】
REST API を使って、mBaaS と既存システムの連携を
体験してみよう
ニフティ株式会社
![Page 2: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/2.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 2
本日のゴール
既存システムと mBaaS の連携を体験する
REST API の使い方を理解する
![Page 3: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/3.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
既存システムと mBaaS の連携を体験する
![Page 4: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/4.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 4
エンプラ領域で mBaaS をどう使えばいいか
![Page 5: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/5.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 5
本日、体験して頂く内容
ちょいのせデータ参照パターンの一部
SDK
SDK
既存システム
REST API
![Page 6: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/6.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 6
本日、体験して頂くシステムの構成
SDK
SDK
REST API
WordPress で記事投稿するとmobile backend のデータストアに記事の内容が複製される。
![Page 7: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/7.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 7
手順
① C4SA の利用登録
② C4SA で WordPress 環境を作る
③ mobile backend の利用登録
④ mobile backend のアプリを作る
⑤ WordPress に連携用プラグインを導入する
⑥ 連携用プラグインの設定
⑦ 動作確認!!
![Page 8: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/8.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
①C4SA の利用登録
※ 登録済みの方は不要です
![Page 9: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/9.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 9
①C4SA の利用登録 [1/6]
http://c4sa.nifty.com/ここをクリック
C4SA で使う ID でログインしてから、利用登録手続きを行います。
![Page 10: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/10.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 10
①C4SA の利用登録 [2/6]
@nifty ID を選択
@nifty ID 以外でも OK です
利用する ID は選べます。
![Page 11: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/11.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 11
①C4SA の利用登録 [3/6]
事前にご登録いただいた
@nifty ID でログイン
![Page 12: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/12.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 12
①C4SA の利用登録 [4/6]
受信可能なメールアドレスを入力して「確認」
個人情報の取扱いについて確認後、同意して送信
![Page 13: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/13.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 13
①C4SA の利用登録 [5/6]
メールが届くのでURL を開く
利用規約に同意して利用開始!
![Page 14: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/14.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 14
①C4SA の利用登録 [6/6]
C4SA が使えるようになりました。
![Page 15: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/15.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
②C4SA で WordPress 環境を作る
![Page 16: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/16.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 16
②C4SA で WordPress 環境を作る [1/9]
ここをクリック
![Page 17: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/17.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 17
②C4SA で WordPress 環境を作る [2/9]
ここをクリック
15 日間無料で使えます!試用期間を過ぎると…
決済情報【無】 → 期限切れのキャンバスは非公開になります決済情報【有】 → 本サービス(有償)に切り替わります
重要
![Page 18: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/18.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 18
②C4SA で WordPress 環境を作る [3/9]
ここをクリック
![Page 19: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/19.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 19
②C4SA で WordPress 環境を作る [4/9]
ここをクリック
![Page 20: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/20.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 20
②C4SA で WordPress 環境を作る [5/9]
ここをクリック
![Page 21: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/21.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 21
②C4SA で WordPress 環境を作る [6/9]
この URL をクリック
![Page 22: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/22.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 22
②C4SA で WordPress 環境を作る [7/9]
サイトのタイトル 任意の文字列
ユーザー名 任意の文字列
パスワード 任意の文字列
メールアドレス 受信可能なメールアドレス
プライバシー チェックを外す(任意)
必要事項を入力してWordPress をインストールしてください。
![Page 23: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/23.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 23
②C4SA で WordPress 環境を作る [8/9]
ここをクリック
先ほど入力したアカウントでログイン
WordPress の管理画面の URL → http:// 【キャンバスに設定されているドメイン】 /wp-login.php
![Page 24: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/24.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 24
②C4SA で WordPress 環境を作る [9/9]
WordPress 環境が構築できました!
記事の投稿などお試しください。WordPress のバージョンアップは任意です。
![Page 25: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/25.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
③mobile backend の利用登録
※ 登録済みの方は不要です
![Page 26: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/26.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 26
③mobile backend の利用登録 1/6
http://mb.cloud.nifty.com/ ここをクリック
@nifty 会員未登録の方のみ
まず、 @nifty 会員登録を行います。
※ 右クリックして新しいタブで開くと便利です
![Page 27: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/27.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 27
③mobile backend の利用登録 2/6
ここをクリック
@nifty 会員未登録の方のみ
![Page 28: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/28.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 28
③mobile backend の利用登録 3/6
@nifty 会員未登録の方のみ 必要事項を入力して会員登録してください
![Page 29: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/29.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 29
③mobile backend の利用登録 4/6
mobile backend 未登録の方のみ
http://mb.cloud.nifty.com/ ここをクリック
次に、ニフティクラウド mobile backend の利用登録を行います。
![Page 30: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/30.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 30
③mobile backend の利用登録 5/6
事前にご登録いただいた
@nifty ID でログイン
mobile backend 未登録の方のみ
![Page 31: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/31.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 31
③mobile backend の利用登録 6/6
利用規約に同意して
利用開始!
![Page 32: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/32.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
④mobile backend のアプリを作る
![Page 33: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/33.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 33
④mobile backend のアプリを作る 1/4
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
任意のアプリ名を入力してください
例 :restapi_hands_on
![Page 34: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/34.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 34
④mobile backend のアプリを作る 2/4
アプリが作成されました。
2つのキーは後で使います
OK をクリックすると管理画面が表示されます
※ 後でキーを確認する方法は 次のページに掲載しています。
![Page 35: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/35.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 35
④mobile backend のアプリを作る 3/4
後でキーを確認するには…【その1】
アプリ設定
![Page 36: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/36.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 36
④mobile backend のアプリを作る 4/4
後でキーを確認するには…【その2】
ここにあります
![Page 37: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/37.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
⑤WordPress に 連携用プラグインを導入する
![Page 38: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/38.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 38
⑤WordPress に連携用プラグインを導入する 1/7
https://github.com/ndyuya/ncmb-article-replication連携用プラグインをダウンロードしましょう。
「 release 」をクリック
![Page 39: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/39.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 39
⑤WordPress に連携用プラグインを導入する 2/7
https://github.com/ndyuya/ncmb-article-replication/releases連携用プラグインをダウンロードしましょう。
ncmb-article-replication.zipをダウンロード
![Page 40: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/40.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 40
⑤WordPress に連携用プラグインを導入する 3/7
WordPress の管理画面の URL → http:// 【キャンバスに設定されているドメイン】 /wp-login.php
次に、 WordPress の管理画面でプラグインを追加します。
「プラグイン」をクリック
![Page 41: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/41.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 41
⑤WordPress に連携用プラグインを導入する 4/7
「新規追加」をクリック
![Page 42: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/42.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 42
⑤WordPress に連携用プラグインを導入する 5/7
「アップロード」をクリック
先ほどダウンロードしたZip ファイルを選択して
「いますぐインストール」
![Page 43: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/43.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 43
⑤WordPress に連携用プラグインを導入する 6/7
「プラグインを有効化」する
![Page 44: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/44.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 44
⑤WordPress に連携用プラグインを導入する 7/7
プラグインが追加されました!
![Page 45: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/45.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
⑥ 連携用プラグインを設定する
![Page 46: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/46.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 46
⑥ 連携用プラグインを設定する 1/3
「記事複製( NCMB )」をクリック
![Page 47: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/47.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 47
⑥ 連携用プラグインを設定する 2/3
mobile backend の管理画面から
アプリケーションキーとクライアントキーを
コピーする
![Page 48: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/48.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 48
⑥ 連携用プラグインを設定する 3/3
「変更を保存」をクリック
![Page 49: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/49.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
⑦ 動作確認!
![Page 50: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/50.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 50
⑦ 動作確認 1
「新規追加」をクリック
実際に WordPress で記事を投稿してみましょう!
記事の内容を追加して公開ボタンをクリック
![Page 51: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/51.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 51
⑦ 動作確認 2
mobile backend の管理画面でデータストアを確認するとWPArticle クラスが作成されて、記事が複製されています!
複製されていない場合は、WordPress に設定した2つのキーが正しいかを確認してください。
![Page 52: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/52.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
連携の仕組みについて解説
![Page 53: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/53.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 53
こんなフローで連携していました
REST API
①WordPress で記事を保存する② 保存処理をアクションフックで捕捉
③REST API で記事内容を mobile backendへ登録
![Page 54: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/54.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 54
REST API とは??【出典】 http://e-words.jp/w/RESTful_API.html
mobile backend の機能を使うためのルール
SDK も内部で REST API を呼び出している
![Page 55: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/55.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 55
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形式 で送信する
![Page 56: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/56.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 56
mobile backend の REST API の使い方 2/10
https://mb.api.cloud.nifty.com/2013-09-01/classes/WPArticle
使用プロトコル
ホスト名
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)
![Page 57: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/57.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 57
mobile backend の REST API の使い方 3/10
POST メソッド
操作内容
指定したリソースをどう操作したいかを表す
メソッド 操作内容GET 取得 (中身)
検索(入れ物)
POST 登録(入れ物、ファイルストアのみ中身)
PUT 更新(中身)
DELETE 削除(中身)
![Page 58: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/58.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 58
mobile backend の REST API の使い方 4/10
JSON形式{
“article_id” : 5,”title” : ” テスト投稿です!” ,”content” : ”mbaas とは…” ,“url” : ”http://…”,“status” : ”publish”
}
データは全て JSON形式で取り扱う (ファイルストアを除く)
![Page 59: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/59.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 59
mobile backend の REST API の使い方 5/10
例) データストアに記事データの登録をするには?
https://mb.api.cloud.nifty.com/2013-09-01/classes/WPArticle
に対して POST メソッドで
登録したいオブジェクトを
JSON形式 で送信する
![Page 60: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/60.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 60
mobile backend の REST API の使い方 6/10
①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”}
例) データストアに記事データの登録をするには?
エラー!!
![Page 61: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/61.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 61
mobile backend の REST API の使い方 7/10
足りない情報が2つほど…
どのアプリへの要求なのか?
所有者からの正当な要求なのか?
![Page 62: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/62.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 62
mobile backend の REST API の使い方 8/10
どのアプリへの要求なのか?
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
{“article_id”:5,”title”:” テスト投稿です!” ,”content”:”mbaas とは…” ,“url”:”http://…”,“status”:”publish”}
![Page 63: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/63.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 63
mobile backend の REST API の使い方 9/10
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
{“article_id”:5,”title”:” テスト投稿です!” ,”content”:”mbaas とは…” ,“url”:”http://…”,“status”:”publish”}
所有者からの正当な要求なのか?
![Page 64: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/64.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 64
mobile backend の REST API の使い方 10/10
登録操作
リソース
エンドポイント(ホスト)
操作対象のアプリ
正当なリクエストを証明する署名
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…
![Page 65: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/65.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 65
シグネチャの生成方法 1/4
①署名用文字列をつくる
POST\nmb.api.cloud.nifty.com\n/2013-09-01/classes/WPArticle\n<署名用パラメータ>
メソッド
ホスト名
パス
???
![Page 66: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/66.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 66
シグネチャの生成方法 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
結果
![Page 67: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/67.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 67
シグネチャの生成方法 3/4
①署名用文字列をつくる
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
メソッドホスト名
パス
署名用パラメータ
![Page 68: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/68.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 68
シグネチャの生成方法 4/4
②署名用文字列からシグネチャを計算する
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=
シグネチャ
![Page 69: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/69.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 69
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 ご利用の参考にしてみてください。
![Page 70: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/70.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 70
REST API でよくあるエラー
ヘッダに指定しているタイムスタンプと、シグネチャの計算に使っているタイムスタンプが異なっている
シグネチャ計算時に誤って URL エンコードしていることが多いです… 例)「 : 」が「 %25 」になっている。
クエリストリングを「 & 」で分割して使っていない署名用パラメータの自然昇順ソートを忘れている
{"code":"E403002","error":"Unauthorized operations for signature."}
シグネチャの計算が間違っている時に発生します。以下の点を確認してみてください!
![Page 71: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/71.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 71
まとめ
既存システム (WordPress) とmBaaS の連携を体験しました
REST API の使い方とシグネチャの生成を学びました
![Page 72: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/72.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 72
その他のハンズオンのご紹介
Monaca と mBaaS でWeb コンテンツを
スマホアプリ化しよう
Monaca にプッシュ通知を組み込もう
募集中
7月実施予定
![Page 73: REST APIを使ってmBaaSと既存システムの連携を体験してみよう](https://reader030.fdocument.pub/reader030/viewer/2022013102/55c99748bb61eb3d328b4700/html5/thumbnails/73.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 73