【開発者】カラーミーショップのAPIを使ったWordPress連携 〜登録編〜

いえとみ

カラーミーショップのアカウントを持っている場合、開発者登録をすることでカラーミーショップが提供するAPIを使い、販売商品のデータなどを取得することが可能になります。

今回はこのカラーミーショップのAPIを利用できるよう、利用者登録を行ってみましょう。

なおカラーミーショップ自体のアカウントは既に作成済みとしています。まだ未登録の場合には下記よりアカウントを作成しておいてください。

開発者登録を行う

カラーミーショップのアカウントを持っているだけでは、まだAPIを利用することはできません。

まず最初に下記のURLから「開発者登録」を行う必要があります。

ここで登録する開発者アカウントは、カラーミーショップのアカウントとは異なりますので、別のメールアドレスやパスワードで登録しても問題ありません。

1つの開発者アカウントで複数のカラーミーショップアカウントのAPIを管理することもできるため、そのあたりを踏まえてアカウントを作成するとよいでしょう。

開発者アカウントにログインする

開発者アカウントが作成できたら、まずダッシュボードにログインしましょう。

ログインに成功すると下記のような画面が表示されます。

こちらで「アプリ」という単位で、カラーミーショップアカウントを追加していきます。

新しくアプリを登録する

次にAPIを利用したいカラーミーショップのアカウントを「アプリ」として開発者アカウントに追加していきます。

開発者ダッシュボードから「アプリを追加」をクリックし、アプリの追加画面を開いてみます。

ここで入力するアプリ名は、管理のしやすい名前をつけておくとよいでしょう。
リダイレクトURIにはショップのトップページを指定しておきます。

登録完了すると、クライアントIDとシークレットIDというものが生成されて表示されます。

認証コードを取得

次に、アプリケーションの認証コード(アクセストークン)を取得しましょう。

認証コードというのは、APIを不正利用されないよう「アクセスする元が認可されていること」を証明するパスワードのようなものです。

この認証コードを取得することで、初めてAPIにアクセスすることができるようになります。

認証コードを取得するためには、指定のURLに指定されたパラメーターを付加してアクセスする必要があります。

アクセスを行うURL

https://api.shop-pro.jp/oauth/authorize

付加する必要のあるパラメータ

  • クライアントID
  • レスポンスタイプ
  • リダイレクトURI
  • 動作モード

クライアントID、リダイレクトURIはアプリケーションの詳細画面に表示されているので、そちらを確認し利用してください。
いずれかが登録した情報と異なっていると、登録することができません。

レスポンスタイプ

レスポンスタイプについては「code」固定となります。
それ以外の設定は仕様として存在しないので、そちらの内容をそのまま指定しましょう。

動作モード

動作モードについては未指定でも認証コードが取得できますが、そのままだと商品データの読み込みができません。
動作モードについてはAPIで行いたい内容によって、以下のいずれかを指定しましょう。

  • read_products ・・・ 商品データを取得する
  • read_sales ・・・ 受注・顧客データを取得する
  • write_products ・・・ 商品データを更新する(APIで商品を登録する、等)
  • write_sales ・・・ 受注・顧客データを更新する(APIで受注データや顧客データを登録する、等)

上記を踏まえて、下記のようなURLを作成してアクセスしましょう。

実際のURL

https://api.shop-pro.jp/oauth/authorize?client_id={クライアントID}&redirect_uri={リダイレクトURI}&response_type=code&scope={動作モード}

なお、アプリケーションの詳細画面に「認可ページへのリンクをテスト」というリンクがありますが、そちらのリンクURLをコピーして、動作モードを付け加えるだけで上記のURLを構成することができます。

そのままクリックしてしまうと、動作モード抜きでの承認要求になってしまうので、必ずコピーして動作モードを付け加えてからアクセスするようにしましよう。

URLにアクセスした場合、利用したいカラーミーショップのアカウントでのログインを求められますので、ログインを行ってください。

ログイン後、アプリをカラーミーショップアカウントに結びつけるかの確認が表示されます。

ここでは「アプリが行う動作」が、自分のAPIで対応させたいものと一致しているかを確認してください。

もし「ショップの基本情報(氏名、住所、メールアドレス等を含む)を参照します。」のみである場合、動作モードの指定がされていない恐れがあります。

URLを確認してもう一度アクセスしてみてください。

問題なければ認可チェックボックスをクリックして「アプリをインストール」してください。

アプリをインストールすると、URLに「認証コード」が付与された状態で、設定した「リダイレクトURI」に転送されます。

URL欄に記載されている認証コードが、APIへのアクセスに必須となりますので、必ずメモをとり保存しておくようにしましょう。

認証コードを使ってAPIにアクセスする

APIにアクセスするための認証コードが取得できましたので、早速APIへの接続を試してみましょう。

下記のようなPHPプログラムで、認証コードを取得したカラーミーショップからデータを取得することができます。

指定されたカテゴリーの商品データを5件取得するスクリプトです。

こちらを実行すると下記のようなレスポンスが得られます。

{
  "products": [
    {
      "id": ******,
      "account_id": "******",
      "model_number": null,
      "name": "テストの商品",
      "category": {
        "id_big": 2473819,
        "id_small": 0
      },
      "group_ids": [],
      "display_state": "showing",
      "sales_price": 1000,
      "price": null,
      "members_price": 1000,
      "cost": null,
      "cool_charge": null,
      "delivery_charge": null,
      "stock_managed": false,
      "stocks": 2,
      "min_num": null,
      "max_num": null,
      "sale_start_date": null,
      "sale_end_date": null,
      "unit": null,
      "weight": null,
      "soldout_display": false,
      "few_num": null,
      "sort": null,
      "simple_expl": null,
      "expl": "商品説明が入ります。商品説明が入ります。商品説明が入ります。商品説明が入ります。商品説明が入ります。商品説明が入ります。商品説明が入ります。",
      "mobile_expl": null,
      "smartphone_expl": null,
      "make_date": 1543822392,
      "update_date": 1543822392,
      "memo": "",
      "image_url": "******",
      "mobile_image_url": "******",
      "thumbnail_image_url": "******",
      "images": [],
      "options": [],
      "variants": [],
      "pickups": [
        {
          "pickup_type": 0,
          "order_num": null,
          "make_date": 1543822392,
          "update_date": 1543822392
        }
      ]
    }
  ],
  "meta": {
    "total": 1,
    "limit": 5,
    "offset": 0
  }
}

このデータを json_decode 関数を使って配列またはオブジェクトに変換することで、任意のデータを表示させることができます。

さいごに

いえとみ

いかがだったでしょうか?

APIアクセスのためにはまず「認証コード」を取得する必要があり、以外とこれが手間です。

ただ、一度認証コードを取得してしまえば、あとはプログラムで簡単にいろいろな情報を取得することができるようになりますので、発想次第でいろいろなことできるようになります。

次回はカラーミーショップのデータを使って、WordPressでページの商品一覧を出力する方法を解説します。

wordpress ECサイト ショッピングサイト ショッピングカート 連携 API

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

Webデザイナー、Webディレクター、Webアプリケーションのプログラミング等の経験を経て独立。インスパイアデザインの取締役、兼エンジニア。 年間100件以上のWordPress案件に対応し、超小規模なブログから大規模なポータルサイトまで開発。 最近ダイエットに目覚め、4ヶ月で96kg→77.4kgを達成。