カラーミーAPIとエクセルを連動して在庫更新を試してみた

正直何がうれしいのか良くわからないレベルです。

ざっくり見た感じいろいろと便利になるWEBアプリ的なものを作れる。

みたいな感じでしょうか？？

そしてなんといっても無料！！感謝！

結局のとこサーバーサイドがいじれんことには始まらんのかなと。

そんな雰囲気を感じながら恐る恐るカラーミーショップAPIドキュメントを見てみる。

必要なもの

カラーミーデベロッパーアカウント
登録はこちら
APIのクライアントには以下が必要です
RESTfulなHTTPリクエスト
JSONのパースやシリアライズ
認可コードの受け取り
カラーミーの認可ページからのHTTPリクエストを受けられるWebサーバ
または、スマートホンアプリのWebView

利用手順

以下の手順で、OAuth2プロトコルでの認証をします。

OAuth、、正直この辺で撃沈です。

が、とりあえず諦めずにサンプルどおりXAMPP環境にて進めてみる。

すると以外とすんなり動かすことができました。

そもそもカラーミーAPIを調べようとした経緯とか

なんかカラーミーで在庫更新するの以外とめんどくさい。と、思ったり。

各モールや店頭などで併用販売している在庫をある程度連動して管理できないかな、、

とか考えておりました。

なんかそーゆーのってAPIとかいうの使ったりすんでしょ？

みたいな気持ちでとりあえず軽く試してみる。

書いてあることは難しそうだが以外と動くじゃん！

ただサーバサイドは良くわかりませんので、とりあえずHTTPリクエストができれば

利用できそうだし、ちょっとした在庫管理によく使われているであろう

エクセルVBAからAPIを利用してみました。

以下Evernoteに殴りメモした内容。乱雑ですいません

目標としてアクセストークンを手に入れて、

在庫管理しているエクセルから連動して在庫の増減などを試みる。

なのでとりあえずローカル環境で全て事足りる感じです。

まずアプリを登録

カラーミー管理画面にログイン ＞ アカウント設定 ＞ カラーミーアプリ開発
新規登録 ＞ （アプリ名） 適当な名前 ＞ （リダイレクトURL） 適当なサイト(自分のカラーミーのサイトでいいんでないでしょうか) ＞ 登録
もどるボタン ＞ 先ほど作成したアプリの修正ボタン

そのページにアクセストークンを取得する際に必要となる

・client_id
・client_secret
・アプリケーション名
・redirect_uri

が表示されます。

そんで認可コードの取得

以下URLをブラウザで普通に読み込む。

https://api.shop-pro.jp/oauth/authorize?client_id= 編集ページのclient_id &response_type=code&scope=write_products&redirect_uri=http://example.shop-pro.jp

・client_id ＞ 編集画面の数値
・response_type ＞ code
・scope ＞ write_products（商品編集だけの場合）
・redirect_uri ＞ http://example.shop-pro.jp（さっきの適当なサイト）

URLバーに普通に入れてリクエストを送る

http://api.shop-pro.jp/login ここにリダイレクトされます

アプリの許可

自分のカラーミーショップのIDとPASSを入力

あなたのショップでアプリケーション
「アプリ名」
の使用を許可しますか？
（自分が作成した（作成する）アプリが、自分のショップの
商品データへの書き込みを許可しますか）

「 承認する」をクリック

http://example.shop-pro.jp（登録した適当なサイト）にリダイレクトされる

アクセストークンの取得

エラーがなければリダイレクト先のURLに?code=承認コード

パラメータが付属される。

この承認コードをアクセストークン取得で使う。

以下VBAでの例ですがこんな感じでとにかくPOSTリクエストするとresponseにJSONが返る

client_id、client_secretの値はカラーミーの画面に記載されています。

codeは先ほどの承認コードです。

以下標準モジュールにはっつけて実行

Sub getToken()
   
    Dim xhr As Object
    Set xhr = CreateObject("MSXML2.ServerXMLHTTP.6.0")
    Dim content As String
   
    content = "client_id=****&"
    content = content & "client_secret=****&"
    content = content & "code=****&"
    content = content & "grant_type=authorization_code&"
    content = content & "redirect_uri=http://example.shop-pro.jp"
   
    xhr.Open "POST", "https://api.shop-pro.jp/oauth/token", False
    xhr.Send (content)
    Debug.Print xhr.responseText
   
End Sub

イミディエイトウィンドウに下記のようなJSONが表示されます。

{"access_token":"アクセストークン","token_type":"bearer","scope":"write_products"}

念願のアクセストークンが手に入ります。

これであとはやりたい放題。

※認可コードからアクセストークン取得するとき変換は1度きりで、制限時間もあるらしい。

ためしに在庫の更新

Sub stockUpdate()
   
    Dim xhr As Object
    Set xhr = CreateObject("MSXML2.ServerXMLHTTP.6.0")
   
    xhr.Open "PUT", "https://api.shop-pro.jp/v1/products/" & Range("A1") & ".json", False
    xhr.setRequestHeader "Authorization", "Bearer アクセストークン"
    xhr.setRequestHeader "Content-Type", "application/json"
    xhr.Send "{ ""product"" : { ""stocks"": 0 } }"
    MsgBox IIf(InStr(xhr.responseText, "error"), "err", "ok")
End Sub

Bearer アクセストークンの部分に先ほどのJSONのアクセストークンを入れる。

Range("A1")にカラーミーの商品IDをいれてこのプロシージャを呼び出せば

その商品の在庫が0になる。

もう少しつっこんでみる

エクセルシートのChangeイベントで呼び出せば

エクセルの在庫数を変更した時ほぼ同時にカラーミーの在庫数へ反映させる的なこともできるのでは？？

例えばこんな感じのエクセル簡易データベースがあったとして

1	品番	品名	単価	在庫数	PID
2	1001	ふんわりクッキー	1000	10	77777777
3	1002	しっとりクッキー	1500	5	88888888
4	1003	ずっしりクッキー	500	8	99999999

エクセルの在庫数を書き換えたときにAPIを呼び出してカラミの在庫も書き換える

'データのあるシートモジュール
Private Sub Worksheet_Change(ByVal Target As Range)

    If Target.Column <> 4 Then Exit Sub
    Call stockUpdate(Target.Value, Target.Offset(0, 1).Value)
    
End Sub

'標準モジュール
Sub stockUpdate(stock, pid)
   
    Dim xhr As Object
    Set xhr = CreateObject("MSXML2.ServerXMLHTTP.6.0")
   
    xhr.Open "PUT", "https://api.shop-pro.jp/v1/products/" & pid & ".json", False
    xhr.setRequestHeader "Authorization", "Bearer アクセストークン"
    xhr.setRequestHeader "Content-Type", "application/json"
    xhr.Send "{ ""product"" : { ""stocks"": " & stock & " } }"
    If InStr(xhr.responseText, "error") Then MsgBox "err"
End Sub

アクセストークンを書き換える。

こんな感じでエクセルの在庫数を書き換えると、同時にカラミーの在庫数も更新。

できるのか？いろいろ問題はありそうですがとりあえずはできそうです。

その他もろもろ

ちなみにアプリの削除（トークンの無効化）は

カラーミーのアプリケーション管理から削除できるようです。

それとあくまでテストでいろいろ試してみただけす！

もしもご参考していただける方いらっしゃってもセキュリティ等自己責任でお願いします！！

次回できれば

逆バージョンというか、受注を監視してローカルの在庫、

また他のモールの監視とカラミの連動などちょっと考えてみたいと思います！

超軽量画像モーダル系jQueryプラグイン

いわゆるLightboxみたいな感じで、

でもいろんな機能とか、派手なアニメーションはいらない。

あとスライドショーもいらない。

ほんっと画像をオーバーレイで表示させるだけ！

っていうか、画像ファイルとか、CSSまで読込みたくない！

そんなシンプルなプラグインを探したけどなかったので作ってみました。

単なる手抜きでもありますが良く言えば軽量！

(function($) {
 $.fn.imgModal = function() {
  $(this).click(function(e) {
   if(navigator.userAgent.match(/msie [6.|7.|8.]/i)) return;
   e.preventDefault();
   var that = this;
   var $loading = $('<div>').text('Loading...').attr('style', 'font-family: Helvetica,Arial; font-size: 17px; color: #eee; text-align: center; position: relative; top: 50%;');
   var $div = $('<div>').attr('style', 'z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); display: none;')
    .on('click', function() { $(this).fadeOut('fast', function(){ $(this).remove() } )})
    .append($loading)
    .appendTo($('body'))
    .fadeIn('fast', function() {
     $('<img>').on('load', function() {
      $(this).fadeIn('slow', function() { $loading.remove() });
     })
     .attr('style', 'max-width : ' + (window.innerWidth - 50) + 'px; max-height: ' + (window.innerHeight - 50) + 'px; width: auto; height: auto; display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 5px;')
     .attr('src', that.href)
     .appendTo($div)
    });
  });
 };
})(jQuery);

IE8以下は切りました。手抜きです。

画像が大きい場合ウィンドウサイズによって縮小されるので

ブラウザによって少々画像が荒くなります、、

それとイベントの設定にonを使用しているのでjQuery1.7未満ですと動きません！



そんで以下で実行。引数はありません。

単純明快、シンプルに。

$(function() {
 $('a[rel="imgModal"]').imgModal();
});

アンカーのrel属性にimgModalを入れればOK。

<a rel="imgModal" href="http://www.example.com/test.jpg">img</a>

よかったらご利用ください。

DEMO