6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【スマレジアプリを作ってみた#1】アプリの登録とPostman設定

突然ですが、みなさんスマレジってご存じですか?

スマレジは、2019年2月にマザーズ上場を果たした大阪のITベンチャーが
開発・運営を行っているiPhoneやiPadを使用したクラウドPOSレジシステムで、
ショップやレストランなど様々な業態で使用されています。

スマレジには、外部開発パートナーがスマレジのデータを活用して
アプリ開発・販売ができるアプリマーケットがあります。
いろんなアイデアを試してビジネスチャンスを広げるいい機会になると思い、
わたしたちJoBinsは早速「引換券モニターアプリ」を作ってみました!

よくファストフード店なんかに行くとありますが、
料理ができたらレシートに書かれている引換番号がモニターに表示される「あれ」です。
あの機能をスマレジに搭載してほしい店舗はごまんといるはず…!(売れるに違いない!)
そう思い、店舗が呼び出した時にカスタマー用のモニターに引換番号が出て音が鳴る、
というシンプルなWebアプリを作りました。

せっかくなので、このアプリ開発のプロセスについて6回に分けてお伝えしていきます!

前置きがだいぶ長くなりましたが。。。
第1回目はアプリの登録・各種設定方法やPostmanを使ってスマレジのAPIを利用する方法について説明します。

アプリの登録・各種設定

スマレジのAPIを使ってアプリ開発するために、まずはスマレジDevelopersからデベロッパーアカウントを作成します。(ちゃんと利用規約も読みましょう!)

アプリを新規登録する

デベロッパーアカウントをゲットしたらログインし、
サイドメニューの「アプリ」から新規登録を行います。
1.png
2.png

新規登録ボタンから登録フォームにいき、必須項目を入力します。
アプリのアイコンなど、「申請時に必要」な項目もありますが、
これらは後から入力すればOKなのでとりあえず「必須項目」だけ入れて登録しましょう。

アプリ登録フォームの必須項目

  • アプリ区分: 今回はWEBアプリを選択。
  • サービス種類: WEBアプリなので今回は選択不要。
  • アプリ名: 名前から機能を連想できるようなアプリ名にしましょう。(例:引換券モニター)
  • バージョン: アプリのバージョンなので、最初は「1.0.0」とでもしましょう。

登録すると、アプリの概要ページにリダイレクトします。
概要ページでは、APIのスコープ、Webhook、認証リダイレクトURLなどの重要な項目を設定できます。

アプリ新規登録.png

アプリの削除方法

「間違えて登録しちゃった!」という時は、削除したいアプリの「概要を見る」をクリックし、
アプリの概要ページにいきます。
上の「基本情報」タブを開くと、ページの下の方に「削除ボタン」があります。

アプリの削除.png

クライアントIDとクライアントシークレットをチェック

アプリを登録すると、クライアントIDとクライアントシークレットがアプリごとに発行されます。
これらはアプリの概要ページの「環境設定」タブで確認できます。
この2つはスマレジのAPIにアクセスする際に必要になります。

クライアントIDなど.png

Postman設定

では次にPostmanを使ってスマレジのAPIにアクセスしてみましょう!

すべてのAPIには認証が必要なので、access_tokenを取得するには「スマレジ契約ID」、「クライアントID」、「クライアントシークレット」が必要になります。
この access_tokenは、他のAPIをリクエストする際に使用します。

各APIの仕様書はメニューバーの「ドキュメント」の中の「仕様書」タブにあります。

環境によりエンドポイントURLが異なるので、このドキュメントではSandbox環境を対象に例を記載しています。

Sandbox環境         本番環境
アクセストークンAPI  https://id.smaregi.dev https://id.smaregi.jp
プラットフォームAPI https://api.smaregi.dev https://api.smaregi.jp

アプリアクセストークンを取得する

参照: スマレジ・プラットフォームAPI 共通仕様書

アクセストークンを取得するには、次のリクエストパラメータを使用してPOSTリクエストをエンドポイントに送信します。

エンドポイント
https://id.smaregi.dev/app/{contractID}/token

リクエストヘッダー
Authorization: Basic {Base64 client_id:client_secret}
Content-Type: application/x-www-form-urlencoded

リクエストボディ
grant_type: client_credentials
scope: 要求するAPIスコープ。複数の場合は半角スペースで結合して指定します。

要求するAPIスコープは、アプリ概要ページの「スコープ」タブから設定できます。
有効ではないスコープを要求しても無視され、存在しないスコープを含む場合はエラーを返します。
たとえば、店舗リストを取得したい場合は、pos.stores:readを有効にします。

スコープ.png

アプリアクセストークンをPostmanを使って取得する

Postmanで環境変数を設定すればアクセストークンを取得するのは超絶カンタンで、
シンプルにPOSTリクエストをエンドポイントURLに送信するだけです。
設定方法は以下の通り。

Authorization
「Basic auth」に設定し、Usernameにclient_idを、Passwordにclient_secretを入れます。

Headers
Content-Type: application/x-www-form-urlencoded

Body
「x-www-form-urlencoded」にチェックして、以下のように入力します。
grant_type: client_credentials
scope: pos.stores:read pos.stores:write

8.png

これらが正しく設定されていると、下の画像のようにaccess_tokenを取得できます。

9.png

Postmanから店舗一覧を取得する

次に、取得したアクセストークンを使って、店舗一覧を取得できるか確認してみましょう。

①「Authorization」タブでTYPEを「Bearer Token」に設定する
②先程取得したアクセストークンをTokenに入力する
③下記のエンドポイントにGETリクエストを送信する
 https://api.smaregi.dev/{contract_id}/pos/stores/
 ※{contract_id}は自分のidに変更すること

店舗一覧取得の詳細についてはこちらで確認できます。

店舗一覧取得.png

Postman環境設定ファイル

つらつらと書きましたが、「めんどくさいわ!」という方は
Githubにファイルをアップしているのでよかったらご利用ください!


第1回目はアプリの登録Postmanの設定のポイントにについてお送りしました。
次回はアプリの仕様設計についてお届けします!

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
6
Help us understand the problem. What are the problem?