2014年4月16日

カラーミーAPI実践編2 ポイント表示

前回からの引き続き。さて、カラーミーショップの最近のトピックは、カラーミーAPI。
先月から続きましたカラーミーAPI関連の記事も、今回で最後となります。

前回は、データを取ってくる処理部分をメインにしましたが、今回はデータの受け渡しについてです。
カラーミーAPIを実際使うに当たっては、データの受け渡しが必要になる場合の方が多いのではないでしょうか。

ざっくりと説明すると、こんな感じです(わからない用語については、検索して調べてくださいね)。
クエリストリングスを使って、$_GET(スーパーグローバル変数)として、PHPアプリケーションに必要な情報を渡します。
Ajaxを利用し、結果をショップページに動的に挿入します。Ajaxは、jQueryを使うと、ブラウザ間の差異も気にせずに、簡単にやりとり可能。

とはいえ、ひとつ問題があります。
Ajaxは、同一ドメイン間のやりとりは問題ありませんが、ドメインが異なる場合は、セキュリティの問題で上手くやりとりができません(サンプルの場合でいうと、カラーミーのショップページとPHPアプリケーションのあるレンタルサーバのドメインが違うということ)。
そこで、JSONPという、クロスドメインなデータを取得する仕組みを使います。

サンプルは、「顧客IDを渡して、所持ポイントを取ってくる」というものです。

メニューから、「ショップ作成」-「会員機能設定」-「使用設定」で、「使用する」になっていて、ログインしている場合は、 独自タグ<{$members_id}>(ログイン中の顧客ID)が使えます(変更してもすぐ反映するわけではないようで、時間が少し必要でした)。

HTML+JavaScript部分
<div id="pointDisp"></div>
<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>
jQueryを使用しているので、jquery.jsを先に読み込んでおくこと
実際に使う場合には、未ログイン時の処理を追加する必要があります
?id=~部分がクエリストリングス。セキュリティの話も一読を「IPA - クエリストリングから情報が漏れる
responseに結果が返ってきます
結果を受け取ったら、一行目の<div id="pointDisp"></div>内に表示
【参照】JSONPのやりとりについては、下記リンクの内容を使わせていただきました
Brandons Experimental Archive - jQuery JSONPでPHPでやりとりする方法

getPoint.php54
<?php
$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). ')';
必要な項目は配列としてセットして、JSON形式に変換して、返します
で渡して、で返して、で表示、という流れ
例によって、私はヘテムルを使っていますので、拡張子はphp54となっています

おわりに
ということで、いかがだったでしょうか。
やっかいなクロスドメインでのデータのやりとり部分も、Brandons Experimental Archive様のサンプルを利用するとわりと簡単に設置できます。
Ajaxも、jQueryでらくちん。 昔の記事でちまちまやってたコーディングが、すっきりしましたね。

セキュリティの話は、注意すべきポイントではないでしょうか。
重要な情報をやり取りする場合は、セッションやSSLなんかも勉強しなきゃダメだよ、ってことですよね。

今回のサンプル「ポイント表示」ですが、カラーミーの会員機能はあまり充実していないので、わざわざログインするひとがいるのか、という疑問もあります。
以前「カラーミーショップ - 助け合い掲示板」で話題としてあがっていたので、ためしに作ってみました。

0 コメント:

コメントを投稿