2014年5月24日

カラーミーAPI関連

【仕事サイトにAPI関連記事を書きました】
カラーミーショップAPIの使い方を丁寧に解説します (準備編)
カラーミーショップAPIの使い方を丁寧に解説します (実践編)



カラーミーAPI関連のまとめ


カラーミー公式サイト
カラーミーショップAPIドキュメント
カラーミーAPIインターフェイス v1

当サイトで試したところ
カラーミーAPIを試してみた 1 - 中身薄い導入部
カラーミーAPIを試してみた 2 - OAuth認証の手順
カラーミーAPI実践編1 データ抽出 - データの取り方
カラーミーAPI実践編2 ポイント表示 - アプリケーションと非同期でやりとりする方法
カラーミーでウィッシュリストを作る - カラーミーショップAPI編 - 新しいことは何もなし

2014年4月26日

カートJS機能を実践的にいじる

公式のお知らせにありましたが、「カラーミーショップ、新サポートコミュニティはじめました。」とのこと。これまで重宝していた助け合い掲示板の役割も、新サイトに移行するようです(カラーミースタッフが回答することもあるようです)。

さて今回は、カートJS機能を使って、よくありそうなパターンをサンプルとして作ってみました。
使い道や使い方をご存じない方はこちらから。カラーミーショップ-カートJS機能とは?

いろんなところに「カートに入れる」ボタンがつけられるよ、って機能ですが、実際には、ブログよりも、商品一覧ページやトップページに設置したい、ついでにボタンのデザインも変更したいなぁ、と思うことが多いんじゃないでしょうか。

今回のサンプルでは、デザインをシンプルに画像だけして、購入数も表示しません。
カートJS機能で作成したコードをちょいちょいといじって、ショップページの<{section}>ループ内に設置。


HTML(ショップページのどこか)+JavaScript
<{section name=num loop=$recommend}>

    <script type='text/javascript' src='http://hogehoge.shop-pro.jp?mode=cartjs&pid=<{$recommend[num].id}>&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n' charset='euc-jp'></script>

<{/section}>
上例の場合はおすすめ商品のID。<{$seller[num].id}>、<{$productlist[num].id}>でももちろんOK。
ページによって使える独自タグが異なるので、注意が必要です(ここ重要)。

CSS
.cartjs_cart_in {
    margin-bottom: 0px!important;
}
.cartjs_product_table {
    display: none;
}

input[type=submit] {
    background-image: url(http://hogehoge.heteml.jp/img/cart.png);
    width: 30px;
    height: 30px;
    border-style: none;
    cursor: pointer;
    /* Hide text on input */
    text-indent: -999em; /* Hide the text, works in most modern browsers */
    /* --- Needed for IE --- */
    font-size: 0px; /* works well in IE7. still a black line (basically the text) in IE6. */
    display: block; /* Negative text-indent works in IE(6? worked fine in 7) only if this is added. */
    line-height: 0px; /* Another fix for IE6. */
}
上の2つで、都合の悪いマージンを0にして、購入数テーブルの表示を消しています。

input[type=submit]は属性セレクタと呼び、submitボタンにスタイルを適用できます(IE7以上とのこと)。
標準のボタンから、用意した画像(30×30px)に変更。
cursor: pointer;で、画像上に乗ったらマウスカーソルを変えるようにしています。
購入数テーブルの表示を消していますので、購入数1(=デフォルト)でカートに入ります。

「カートに入れる」という文字を消すのがなかなか面倒でした。
ネットで調べていると、そのものずばりの内容があったので、CSSに追加。
【参考】 SNIPPLER-Hide text on input[type=submit]

おわりに
カートJS機能で作った「カートに入れる」ボタンも、CSSでそこそこいじれるよ、という感じです。
カートJS機能について」で書きましたが、カートJS機能は、やっていることはわりとシンプルです。
もし、CSSでスタイル調整ができない場合があっても、カートJS機能から受け取ったコードをいじって、実現することができるかもしれません。

カート設置に関しては、当サイトでも過去に取り扱いがあります。いろいろいじりたくなった方は、ご一読を。
カートJS機能について」「カートに入れるボタンを商品詳細ページ以外に設置する」

【追記】
商品詳細ページに置くと、新規のセッションの場合において、カートJS機能がうまく動作しないことがある(他ページではそんなことはないが、商品詳細ページでは、すでにあるカートの、user_hash、members_hashと不一致が生じる関係で不具合が出るようだ)。
商品詳細ページに設置したい場合は、「カートに入れるボタンを商品詳細ページ以外に設置する」を使うとよい。
product_formがダブると数量がマズイので、名前を変えておく。
ということで、商品詳細ページに「カートに入れる」ボタンを設置するには、色々やる必要あり。

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なんかも勉強しなきゃダメだよ、ってことですよね。

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

2014年4月10日

カラーミーAPI実践編1 データ抽出

ご依頼があってあれこれ作っていると、こまごましたネタが貯まってきました。
それとは別に、需要の多い(よく検索される)、Smarty、jQuery、カテゴリーの話も、新記事として更新できればなぁと。

さて、カラーミーショップの最近のトピックは、カラーミーAPI。
カラーミーAPIとPHPを使った、よくある一連の流れを模式的に書くとこんな風。

「データ(カラーミー)」→「処理(PHP)」→「結果表示(カラーミー)」

はじめて触れる方には、知っておくべきことが山のようにあります。
・どうやってデータを生成するのか(HTMLの入力フォーム)
・どうやって処理するのか(カラーミーAPIとのやりとり、データ処理・整型)
・どうやってデータの受け渡しをするのか(クエリストリングス、Ajax、JSONPなど)
・どうやって結果表示するのか(JavaScript)

特に結果表示の方法については、用途によっていくつかの方法のなかから選択することになり、PHP初学者には??とになります(PHPという言語の特徴でもあります)。
「カラーミーいじりたおし」的には、実際に一番使いそうな結果表示方法にしぼって、解説することにしています(これは次回、実践編2で)。

今回は、最初としてとっかかりやすい「処理の部分」に焦点を当てて、ワンポイントを。
サンプルは、カラーミーAPIで商品データを検索し、PHPで処理し、メルマガ用のリンクを作るアプリケーションです。

1.メールマガジン用のデータ抽出アプリケーション
<?php
    header("Content-Type:text/html; charset=UTF-8");// 文字化け対策
    $request_options = array(
        'http' => array(
            'method'  => 'GET',
            'header'=> "Authorization: Bearer xxxxxxxxxxxxxxx\r\n"
        )
    );
    $context = stream_context_create($request_options);
    $url = 'https://api.shop-pro.jp/v1/products.json?category_id_big=0123456&limit=50&fields=name,sales_price,id,simple_expl,update_date&update_date_min=' . date('Y-m-d');
    $response_body = file_get_contents($url, false, $context);
    $response_json = json_decode($response_body, true);// 連想配列に
    //print_r($response_json);// 配列の構造と中身が見られます

    //商品名(昇順)& 価格(降順)
    foreach ($response_json['products'] as $key => $row) {
        $name[$key]  = $row['name'];
        $sales_price[$key] = $row['sales_price'];
    }
    array_multisort($name, SORT_ASC, $sales_price, SORT_NUMERIC, SORT_DESC, $response_json['products']);
    /*
    //更新日時順(降順)
    foreach ($response_json['products'] as $key => $row) {
        $update_date[$key]  = $row['update_date'];
    }
    array_multisort($update_date, SORT_NUMERIC, SORT_DESC, $response_json['products']);
    */
   
    for($i=0; $i<count($response_json['products']); $i++) {
        echo $response_json['products'][$i]['name'];//商品名
        echo " ";
        echo number_format($response_json['products'][$i]['sales_price']);// カンマ
        echo "円";
        echo "<br />";
        echo "http://www.hogehoge.com/?pid=";// 商品URL
        echo $response_json['products'][$i]['id'];
        echo "<br />";
        echo $response_json['products'][$i]['simple_expl'];// 商品の簡易説明
        echo "<br />";
        echo "<br />";
    }

2.簡単な説明
header("Content-Type:text/html; charset=UTF-8");
私の使用しているヘテムル PHP5.4という環境では、明示しなくても、UTF-8になっているようです(なので、なくても問題ありませんでした)。XAMPPはデフォルト EUC-JPだそうです。
作成したphpファイルも、もちろんUTF-8で保存します。
カラーミーAPIが返す日本語(2バイト文字)も、UTF-8です。
文字コードをEUC-JPにする場合は、↑この点、注意が必要です。
サンプルで文字コードをミスっていると、商品の簡易説明と、echoの”全角スペース”や”円”が文字化けします。

'header'=> "Authorization: Bearer xxxxxxxxxxxxxxx\r\n"
青色箇所はアクセストークンを埋め込むところ。前回の「カラーミーAPIを試してみた 2」を参照。
ちなみに、Authorization以下の文字列をダブルクォーテションで括っていますが、シングルクォーテーションにすると動きません。
PHPにおいて、シングルクォーテーションとの違いはご存知でしょうか?

カラーミーAPIでショップ・データを参照する一連のコード(サンプルの前半部分)は、前回とほとんど変わりませんが、今回は「リクエストパラメータ」がすこし凝っています。
$url = 'https://api.shop-pro.jp/v1/products.json?category_id_big=0123456&limit=50&fields=name,sales_price,id,simple_expl,update_date&update_date_min=' . date('Y-m-d');
公式ページにある、カラーミーAPIインターフェイス v1の「GET /v1/products.json」を読むと、参照できる商品データについて記載されています。
その下に「リクエストパラメータ」の記述があり、カラーミーAPIに渡すパラメータの説明があります。

今回は、検索キーに大カテゴリーと更新日付。
「limit=50」として、カラーミーAPIに対して、(一度に)最大50件まで返すように求めています。指定しない場合は、デフォルト=10件ですので、この点は注意。
「offset=50」とすると、51件目からとってきます。ということで、複数回リクエストすれば、50件超えたデータも、問題なく受け取れるということです。
「fields=~」は、必要な項目を絞ります。設定しない場合は、参照できる商品データの全項目を受け取ることになります。
「.」は、PHPにおける文字列連結演算子です。

サンプルの後半部分が、PHPによる処理にあたります。
JSON形式で受け取り、デコードし、連想配列に入れて、ソートして、出力しています。
PHPの文法については大したことをしてませんので、ネットのリファレンスや入門書などに丸投げさせていただきます。へぼいコーディングの質問とツッコミは、ご容赦いただければと存じます。
忙しくなければ、、、書籍を一冊くらい読んだほうが良いな、と思います。

3.おわりに
メルマガ用データ抽出というサンプルを作りました。条件を変えれば、色々データ抽出できますよね。例外処理(件数0の場合など)をすこし加えるべきでしょうが、こんなところでご勘弁を。

次回は「カラーミーAPI 実践編2」。
どうやってデータの受け渡しをするのか(+表示を少し)、というお話。
サンプル見れば使えちゃうけど、細かいところまで気にするとややこしいです。

2014年3月27日

カラーミーAPIを試してみた 2

前回「カラーミーAPIを試してみた 1」からの引き続きです。
今回は、OAuth認証~ショップのデータを取得するところまで、私が実際にやって、エラーやメッセージが出たところなどを解説しています。

カラーミーAPI関連の情報は、ネット検索してもあまり多く見つかりません。そのため、「使ってみたいんだけど、OAuth認証(=意味不明)は敷居高いなぁ」って方も多いと思います。
実際のところ、用語、PHPのコーディングについて理解していなくても、「カラーミーショップAPIドキュメント」の内容だけで十分利用できます。

ただし、「カラーミーショップAPIドキュメントの、どのコードをどう使うの?」って点について、ライトユーザー向けのわかりやすい説明は省略されています。

ここでは、その省略された部分を埋めようと考えています。
できるかぎり丁寧に進めてまいりますので、ご参考にどうぞ。

以下は、「カラーミーショップAPIドキュメント」の例を実行して、ショップIDを取得するところまで、です。
カラーミーショップAPIドキュメント」の内容をメインに据えて、当サイトはその補足という形で進めてまいります。ということで、公式ページと平行して読み進めてください。


0.必要なもの
・Webサーバが必要です。(私は)PHPを使用します。
・カラーミーデベロッパーアカウントの登録。

登録はこちらとありますので、メールアドレスとパスワードを設定してください。
しばらくすると、登録したメールアドレス宛に「カラーミーデベロッパー仮登録のご案内」として、メールが届きます。
メール本文内の登録完了のURLをクリックすれば、本登録完了します。
では早速、メールアドレスとパスワードを入力してログインしてみましょう。

1. OAuthアプリケーション登録
「アプリケーションを追加する」をクリックするとページが遷移します。

遷移した先では、アプリケーション名と、リダイレクトURLを入力します。
リダイレクトURLは、あとからでも変更可能ですが、のちほどphpファイルを作成しサーバに置く必要がありますので、そのあたりを考慮して「http://hogehoge.heteml.jp/php/auth.php」 こんな感じで設定しておきます。
アプリケーション名は、「getExpl」としておきます。ここは重要ではないので、サクッと。
そして保存。

ページ遷移後に、クライアントIDクライアントシークレット(英数字の羅列)が表示されます。
これらを取得し、次のステップに行きます。

次のステップですが、ここからが「カラーミーショップAPIドキュメント」の内容だけでは、すこしわかりにくく感じました。
2. カラーミーショップアカウントの認証ページを表示します
3. 認可コードを取得
4. 認可コードとアクセストークンを交換
各節ごとに例が記載されていますが、使いませんのですっとばしてOKです。

クライアントIDクライアントシークレットを持って、認可コードを取得し、さらにアクセストークンに交換する手続きは、「6. その他のAPIの呼び出し」の「アプリケーションのWebサーバのサンプル」というコードです(ここ重要!)。
<?php

define("OAUTH2_SITE", 'https://api.shop-pro.jp');
define("OAUTH2_CLIENT_ID",'XXXXX');      // クライアントIDを入力します。
define("OAUTH2_CLIENT_SECRET", 'XXXXX'); // クライアントシークレットを入力します。
define("OAUTH2_REDIRECT_URI", 'http://example.com/index.php');

$code = $_GET['code'];
// 認可ページへリダイレクトする
if (empty($code)) {
    $params = array(
        'client_id'     => OAUTH2_CLIENT_ID,
        'redirect_uri'  => OAUTH2_REDIRECT_URI,
        'response_type' => 'code',
        'scope'         => 'read_products write_products read_sales write_sales'
    );
    $auth_url = OAUTH2_SITE . '/oauth/authorize?' . http_build_query($params);
    header('Location: ' . $auth_url);
    exit;
}

// 認可後
$params = array(
    'client_id'     => OAUTH2_CLIENT_ID,
    'client_secret' => OAUTH2_CLIENT_SECRET,
    'code'          => $code,
    'grant_type'    => 'authorization_code',
    'redirect_uri'  => OAUTH2_REDIRECT_URI
);
$request_options = array(
    'http' => array(
        'method'  => 'POST',
        'content' => http_build_query($params)
    )
);
$context = stream_context_create($request_options);

$token_url = OAUTH2_SITE . '/oauth/token';
$response_body = file_get_contents($token_url, false, $context);
$response_json = json_decode($response_body);

echo $response_body;// 今回追加した行
サンプルコード上部にクライアントIDクライアントシークレットを入力する箇所があります。早速、さきほどの文字列をコピペしましょう。リダイレクトURLは、アプリケーションの登録で入力したものを。ここでは「http://hogehoge.heteml.jp/php/auth.php」です。
そして、サンプルの一番下に一行、文字列(アクセストークン)を出力するコードを追加します。
以上で、コードの準備は完了です。

ファイル名を「auth.php」としてファイル保存し、phpファイルをWebサーバに置きます。
アプリケーションの登録で入力したリダイレクトURLと同じにする必要があります。ここでは、すぐ上と同様に「http://hogehoge.heteml.jp/php/auth.php」です。

Webサーバに置いたら、ブラウザで「http://hogehoge.heteml.jp/php/auth.php」を開きます。
下図が「2. カラーミーショップアカウントの認証ページを表示します」のいうところの認可ページです。
コンシューマ(アプリケーション提供者)がユーザーのショップ・データにアクセスしますけどいい?って、ユーザー(あなた)に聞いています。今回はコンシューマ=ユーザーなのでもちろんOKです。
カラーミーショップのログインID、パスワードを入力し、ログイン(=承認)します。

承認すると、下図のようにページ遷移します。

リダイレクトURLとphpファイルの置き場所が一致しないと、「404エラー(ページが見つかりません)」が返ってきます。

また、クライアントID、クライアントシークレット、リダイレクトURLが間違っていると、下記のようなエラーがでます。
Warning: file_get_contents(https://api.shop-pro.jp/oauth/token): failed to open stream: HTTP request failed! HTTP/1.1 401 Unauthorized in ~(略)

またまた、インストールされているPHPのバージョンによっては、下記のようなエラーがでます。
Fatal error: Call to undefined function: http_build_query() in ~(略)
http_build_query関数はPHP5以上が必要です(参考:PHP マニュアル)。WebサーバにインストールされているPHPのバージョンを確認し、場合によっては古いバージョンでも動くコードに修正する必要があります。

私が使っているヘテムルの場合は拡張子phpではダメで、php54に修正します(これで、PHP5.4を使うようになります)。
アプリケーション登録のリダイレクトURLと、phpファイル内のリダイレクトURLもあわせて修正(重要!)。

修正を終えたらもう一度。
ブラウザで「http://hogehoge.heteml.jp/php/auth.php54」を開きます。
リダイレクトURLが不一致でなければ、こんな感じで返ってきます。
Notice: file_get_contents(): Content-type not specified assuming application/x-www-form-urlencoded in  ~(略)
{"access_token":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX","token_type":"bearer","scope":"read_products write_products read_sales write_sales"}
1行目のNoticeは無視してOKです(ネット検索すれば原因と消し方も載っています)。
2行目のaccess_token以下の長々とした英数字の羅列が、アクセストークンです。
これを持って、「5. アカウントの情報を取得するには」のサンプルコードへ。
<?php
$request_options = array(
    'http' => array(
        'method'  => 'GET',
        'header'=> "Authorization: Bearer 62971343fdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n"
    )
);
$context = stream_context_create($request_options);

$url = 'https://api.shop-pro.jp/v1/shop.json';
$response_body = file_get_contents($url, false, $context);

$response_json = json_decode($response_body, true);// 今回追加した行
echo $response_json['shop']['id'];// 今回追加した行
サンプルコードの青部分を、さきほど取得したアクセストークンに置き換えます。
そして、一番下に2行追加。データ取得した結果を出力するコードです。

ファイル名を「getExpl.php54」としてファイル保存、Webサーバにアップロード、ブラウザで開く。
私が使っているヘテムルでは、下記のようなエラーメッセージがでました。
Warning: Cannot modify header information - headers already sent by (output started at ~(略)
原因として3つ挙げられていますが、それらはネット検索すると数多く情報が入手できます。
私はヘテムルですので、「nekonomemo.net」様の解説がとてもわかりやすく、助かりました。
php.iniの設定で、output_bufferingをOnにする(ここ、はまった)。

「PA*******」(=ショップID)と結果が表示されれば、カラーミーAPIでのアクセスが無事終了。
お疲れ様でした。


さて、いかがだったでしょうか。
$urlを変更することで、顧客情報や商品情報なども参照できます。 
アクセスできる情報は「カラーミーAPIインターフェイス v1」にあります。 
また、「カラーミーショップAPIドキュメントの一番下」には、更新のサンプルもあります。
実際使うことになった場合には、わかりやすくて助かると思います。

公式ページによると「アクセストークンの有効期限はない」とのことです。
アプリケーション(今回はgetExpl.php54)内に埋め込んで使っています。
毎回取得する必要はなく、アプリケーション毎に取得する必要も、実際のところはありません(とはいえ、機能を制限したアクセストークンを用意し、適切に使うことにはセキュリティの意味では有用です)。


【おわりに、と補足】
前回からの読者の方は、XAMPP使ってないよ!って話ですが。
次回は、もう少し実践的なカラーミーAPIを使ったサンプルを作って、紹介しようと思います(ので、今後はローカルな環境で作成、テストします)。
PHP寄り(整えたり、出力したり)の話題になると思います。

拡張子がphp54なのは、私が使っているヘテムルの仕様です。他のレンタルサーバは、どうなんでしょうね。

PHPの閉じタグ「?>」がないのはなぜ?って興味のある方は、ネットで検索してくださいね。

この記事は、2014年3月末時点のもので、いつのまにか「カラーミーショップAPIドキュメント」の内容が変わっていることも予想されます。あしからずご了承ください。

余談ですが、私はFirefoxのFirebugアドオンを入れているので、HTTPリクエスト、レスポンスを見ることができます。影の薄い認可コードがどう受け渡されたのか、リダイレクトURLが不一致だとなんでマズイのか、そして、auth.phpの$_GET['code']からアクセストークン取得までの一連のコードは、やり慣れない私にとって目新しく、興味深かったです。

2014年3月26日

カラーミーAPIを試してみた 1

カラーミーショップの本気を見た、カラーミーAPI。
Q.何ができるのか? A.むちゃくちゃできます。

太っ腹なことに、一番安いライトプランでも使用可能となっています。
色々と調査していると、すでにアプリケーション(顧客情報からDMを送る、複数のネットショップの在庫管理を一元化する等)が存在するようで、企業がサービスとして提供されているようです。

ここで取り上げるカラーミーAPIの話題は、主にアプリケーションの自作についてです。
(アプリケーションと呼ぶにはおおげさですが)機能追加のための必要データを、サーバから引っ張ってきたり。
ちなみに、参照以外に、更新も可能です(現時点です。今後も機能拡張されるようです)。


カラーミーAPIの使用に際し必要なものは、「カラーミーショップAPIドキュメント」に記載されています。
・カラーミーデベロッパーアカウント → すぐ作れます
・Webサーバ → ヘテムルなど。(私は)PHPを利用することにします


今回のテーマは下記のとおりで、カラーミーAPI利用前の準備編です。
・OAuth2.0やJSONといった用語について
・XAMPP for Windows(PHPのテスト環境)のインストール


1.OAuth2.0とは
カラーミーショップの「カラーミーショップAPIドキュメント」にサンプルがありますので、認証手順については、いちいち理解しなくても事足りますが、一応は読んでおくことをおすすめします。
カラーミーショップAPIドキュメント」中の用語(クライアントID=コンシューマ・キー、認可コード、アクセストークンなど) がチンプンカンプンでは少々心もとないので。
今回はアプリケーションを自作しますので、ユーザー=コンシューマになります。

【参考】
@IT-APIアクセス権を委譲するプロトコル、 OAuthを知る


2.JSON
軽量なデータ記述言語のひとつ。
更新、参照時にデータを送受信する必要がありますが、カラーミーAPIでは、リクエスト、レスポンス、どちらもJSONでやりとりを行います。


3.XAMPP for Windowsのインストール
PHP開発において通常、ローカル環境(たとえば、自分のWindows PC)で作成、テストした後に、サーバ(ヘテムルなど)にアップロードします。
修正→テストのたびに毎回アップロードする手間がかからなかったり、意図しないバグ混入によってサーバに多大な負荷をかけることがなかったり、そんな理由です。
インストール手順と設定については、ネット上に解説記事が数多くあります。セキュリティ設定をするところまでの解説が載っているものを参照してください。
PHPのコーディング自体は、テキストエディタがあれば、いまのところは十分です。

【参考】
XAMPP for Windows のダウンロードとインストールと設定


さて、次回の「カラーミーAPIを試してみた 2」は、「カラーミーショップAPIドキュメント」のサンプルを使って、カラーミーAPIを利用するためのOAuth認証~実際にショップのデータを取得するまで、です。
PHP初学者の方は、「PHPプロ!-PHP基礎講座」で自習しながらお待ちください。
次回につづく!

2014年3月25日

カラーミー追加機能案、あれこれ

クライアント様から、ウェブサイト・リニューアルに伴う機能追加の依頼がありました。
いただいた追加機能案について、カラーミーショップで実現可能か検討してみました。

1.Facebookのいいねボックス設置
→「Facebooke Developer Conference - Like Box

コードが取得できますので、手間をかけることなく完了。
横幅の最小が292pxとなっています。
CSSをいじって、180pxに詰め込んでみましたが、「いいね!」ボタン付近が崩れる場合がありますね。


2.カートの中身をサイドバーに表示
→「カラーミーショップ - 助け合い掲示板」を参考に。

独自タグ<{$incart}>があります。
実装されている無料テンプレートもすでにあるようです。そちらの中を見ても良いです。
マニュアルに載っていない(?)独自タグ<{$incart_delivery}>なんてのも出ているので、一読すべきか。


3.ログイン中のお客様の保有ポイントを表示
→ログイン中の顧客IDが、独自タグ<{$members_id}>にあるのだそうな。

カラーミーAPIで顧客の登録情報を取得できるので、可能だと思います。


4.トップページや商品一覧ページに「カートに入れる」を設置
→「どこでもカラーミー」で可能。デザイン的な裏技を記事にする予定。


5.検索ボタンを押すと検索キーワードがクリアされるのをなんとかして!
→JavaScriptで作れそうかなと思います。


6.商品一覧/検索結果ページ下のナビゲーション
→こんなやつ。できそうですよね。


7.商品画像の表示方法の工夫(漠然と)
→お客様に対して、商品の何をどのように伝えるのか。
いま一度、有名通販サイトなどを取り上げて、どのような工夫がされているのか、検証してみようと思います。


8.より良い検索機能(漠然と)
→ショップ内の商品検索についてです。

わりと重要な課題だと個人的には思っていますので、なにかしらの成果があれば、記事にしようと思います。


9.その他、個人的な調べ物
QRコード、Twitter API、jQueryのオシャレ機能、正規表現、PHP etc.


ということで、小ネタがいくつか溜まりましたので、適宜、記事として消化していく予定。
次回は、大変お待たせしました、カラーミーAPIを試してみた話題についてです。
どうぞおたのしみに。

2014年2月22日

お願い!カラーミー、閉鎖してる

クライアント様から機能追加のご依頼があり、久々に「お願い!カラーミー」を覗いてみたのですが、すでに閉鎖されていたのですね。
カラーミーショップでショップ運営されている多くの方から意見を聞いて、改善していくという仕組みが素晴らしいと思っていたので、なんとも残念……。

遅ればせながら、「お願い!カラーミー」で実現された機能について、ごく私的な視点でピックアップしようと思います(本家ページに一覧はありますので、すべてをチェックしたい方はそちらをどうぞ)。(すでに閉鎖)
文字ばかりで読みにくいですが、興味ある方はお付き合いください。

カラメルの手数料判定基準を変えてほしい
 これはわかるなぁ。
 手前みそですが、過去記事「カラメルと販売手数料について 1

最近チェックした商品の表示
 これも要望多かったですよね。「カラーミーショップ オンラインマニュアル
 過去記事「ほしい物リストを作る 1

商品レビュー機能
 楽天市場を見てると、レビュー盛況ですよね。現在、ギガプランのみ。

アイテム別に配送方法を設定したい
 この商品、メール便無理!って。いいね!

複数語検索(AND検索)が出来るように
 カラーミー七不思議のひとつ。要望も多かったですね。
 過去記事「カラーミーの検索機能+案

定期購入システム導入をよろしくお願いします
 Amazonみたい。要望が多かったようで、気づいたら付いてたんですよね。

ダウンロード販売の機能
 最近のネットショップぽくて、個人的に興味あります。

モバイルでもポイント表示を!
 これは、私もなんでだろうって思っていました。謎仕様。
 過去記事「ショップ独自のポイント制度について 1

各種APIを公開して、独自に開発した受注/在庫管理機能と連動させたい
 これはすごい! 私もカラーミーAPIを勉強してカスタマイズしようと思っています。
 全プラン対応ですから、太っ腹。

・番外編
 カートJS機能。過去記事「カートJS機能について」。便利で、いいね!
 おすすめ、売れ筋商品の掲載数が増量。地味にうれしかったです(以前は12点まで)。


しばらく、注意して見ていないうちに、どっと新機能が増えていました。
ここ二年ほどの、新機能一覧という感じにまとめてみました(わりと私的。こういうのがないとすぐに忘れてしまうので)。

お願い!カラーミー」がはじまって以来、ずいぶんと改善されたなぁと思います。このブログをはじめた頃は、いちいちツッコミを入れながらカスタマイズしていましたが、みんな同じように感じていたんですよね。
安いけど、そこそこ使えるショッピングカートになってきたんじゃないですか。どうでしょう?

次回からは、ご依頼のあった案件のサンプルをいくつかご紹介していきます。