【仕事サイトにカラーミーショップAPI関連記事を書きました】
カラーミーショップAPIの使い方を丁寧に解説します
前回からの引き続き。さて、カラーミーショップの最近のトピックは、カラーミーAPI。
先月から続きましたカラーミーAPI関連の記事も、今回で最後となります。
前回は、データを取ってくる処理部分をメインにしましたが、今回はデータの受け渡しについてです。
カラーミーAPIを実際使うに当たっては、データの受け渡しが必要になる場合の方が多いのではないでしょうか。
ざっくりと説明すると、こんな感じです（わからない用語については、検索して調べてくださいね）。
クエリストリングスを使って、$_GET（スーパーグローバル変数）として、PHPアプリケーションに必要な情報を渡します。
Ajaxを利用し、結果をショップページに動的に挿入します。Ajaxは、jQueryを使うと、ブラウザ間の差異も気にせずに、簡単にやりとり可能。
とはいえ、ひとつ問題があります。
Ajaxは、同一ドメイン間のやりとりは問題ありませんが、ドメインが異なる場合は、セキュリティの問題で上手くやりとりができません（サンプルの場合でいうと、カラーミーのショップページとPHPアプリケーションのあるレンタルサーバのドメインが違うということ）。
そこで、JSONPという、クロスドメインなデータを取得する仕組みを使います。
サンプルは、「顧客IDを渡して、所持ポイントを取ってくる」というものです。
メニューから、「ショップ作成」-「会員機能設定」-「使用設定」で、「使用する」になっていて、ログインしている場合は、 独自タグ<{$members_id}>（ログイン中の顧客ID）が使えます（変更してもすぐ反映するわけではないようで、時間が少し必要でした）。
HTML+JavaScript部分
<div id="pointDisp"></div>jQueryを使用しているので、jquery.jsを先に読み込んでおくこと
<script type="text/javascript">
$.getJSONP = function(url,callback,param) {
return $.ajax({
url: url,
dataType:"jsonp",
success:callback
});
}
$.getJSONP("http://hogehoge.heteml.jp/php/getPoint.php54?id="+<{$members_id}>, onDataHandler)
function onDataHandler(response) {
$("#pointDisp").html("保有ポイント：" + response.point);
}
</script>
実際に使う場合には、未ログイン時の処理を追加する必要があります
?id=～部分がクエリストリングス。セキュリティの話も一読を「IPA - クエリストリングから情報が漏れる」
responseに結果が返ってきます
結果を受け取ったら、一行目の<div id="pointDisp"></div>内に表示
【参照】JSONPのやりとりについては、下記リンクの内容を使わせていただきました
「Brandons Experimental Archive - jQuery JSONPでPHPでやりとりする方法」
getPoint.php54
<?php必要な項目は配列としてセットして、JSON形式に変換して、返します
$request_options = array(
'http' => array(
'method' => 'GET',
'header' => "Authorization: Bearer XXXXXXXXXXXXXXXXXXX\r\n"
)
);
$context = stream_context_create($request_options);
$url = 'https://api.shop-pro.jp/v1/customers/' . $_GET['id'] . '.json';
$response_body = file_get_contents($url, false, $context);
$response_json = json_decode($response_body, true);
//print_r($response_json);
//配列にセット
$output = array(
'point' => $response_json['customer']['points']
);
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $_GET['callback'] . '(' . json_encode($output). ')';
青で渡して、赤で返して、緑で表示、という流れ
例によって、私はヘテムルを使っていますので、拡張子はphp54となっています
おわりに
ということで、いかがだったでしょうか。
やっかいなクロスドメインでのデータのやりとり部分も、Brandons Experimental Archive様のサンプルを利用するとわりと簡単に設置できます。
Ajaxも、jQueryでらくちん。 昔の記事でちまちまやってたコーディングが、すっきりしましたね。
セキュリティの話は、注意すべきポイントではないでしょうか。
重要な情報をやり取りする場合は、セッションやSSLなんかも勉強しなきゃダメだよ、ってことですよね。
今回のサンプル「ポイント表示」ですが、カラーミーの会員機能はあまり充実していないので、わざわざログインするひとがいるのか、という疑問もあります。
以前「カラーミーショップ - 助け合い掲示板」で話題としてあがっていたので、ためしに作ってみました。
