No.20 Play Rakuten Web Service API. - データとエンジニアリングのよもやま話

前回No.19では、参加してきたワークショップで講習してきた内容のうち、楽天アフィリエイトについて書いてきました。
今回は、本題の楽天ウェブサービス APIについて書いていきたいと思います。
(レポート2の位置付けです。前回から時間が経ってしまいましたが..)

前回の楽天アフィリエイトは、お手軽に始められる点が利点だと思うのですが、
その分、柔軟性に欠けるのは否めないと思います。
より多くの情報を引き出すには、やはり、楽天ウェブサービス APIを活用するべきでしょう。

特徴は、以下の通りだそうです。

楽天 ウェブサービス API

・楽天市場、楽天Books、kobo、ゴルフ場、オークション、レシピ。(現行はランキングのみ)を取得可能
・アプリケーションは、5つまで作成可能。
・アフィリエイトIDは、ユーザに対して1つの付与。
・APIのレスポンスは、そのまま利用可能。
・楽天の出典元をしっかり明記すること、区別すること。(特に他のサービスと組み合わせて利用する場合)
・楽天 APIのパラメータ一覧あり。(64項目程度あり..)
・formatVersion=2のパラメータを指定すること！
・html側は、"jsonp"を指定すること。(外部からの呼び出しが可能)
・APIを実行しまくるとマズイ！！！(1秒間に3回が限度らしい、、cookieは、1秒を過ぎれば、元の状態に戻る)
・商品情報をDBに保存することはOKらしい(キャッシュでもOK、つまりデータ収集OK！)

さて、楽天ウェブサービス APIを利用するには、登録が必要なようです。

楽天 ウェブサービス APIの使い方

・楽天アフィリエイトの画面右上の「楽天ウェブサービスを利用」をクリック。
・楽天WEB SERVICEの画面右上の「アプリID発行」をクリック。
・必須項目である「アプリ名」と「アプリURL」にアプリ名とURLを入力。(最初は仮のものでOK！)
・入力を終えたら、画面下部の「規約に同意して新規アプリを作成」をクリック。
・現在の情報は、楽天WEB SERVICEの画面右上の「アプリ情報の確認」をクリックすることで、入力情報及びアプリID等が表示される。

これで、楽天ウェブサービス APIが利用できるようになりました！
では、実際にAPIを使っていきましょう。

・楽天WEB SERVICEの画面の「API一覧」をクリック。
・提供されているAPIが一覧として表示されるので、利用したいものを選択。
→ 今回は、楽天市場系APIの「楽天商品検索API」を選択。
・該当APIの「テストフォーム」ボタンをクリック。
・APIテストフォーム画面が表示されるので、返却形式(xml/json)の選択やパラメータを指定する。
→ 今回は、以下のように指定しました。(一先ず、講師に従うのは言わずもがなww)
→ パラメータの詳細は以下を参照とのこと。　
　　楽天ウェブサービス: 楽天商品検索API(version:2014-02-22) | API一覧

f:id:yuu_kimy:20140813123922j:plain

・APIのパラメータ指定が終わったら、画面下部の「GET」ボタンをクリックし、問題なく結果が返ってくるかをチェック。

注意)
・postageFlagやtaxFlagのパラメータ値の指定には注意が必要です。
　これらは、送料込みの有無や税込有無を指定するものですが、0が「込」になるそうです。(つまり、0だと送料込みだったり、税込だったりするわけ..)
・affiliateIdを指定するのを忘れずに！(指定しないと当然ながら、ポイントが付きません。笑)

ここまででAPIを呼び出す準備は完了！
再度、講師に用意して頂いたhtmlに戻ります。

上記のサンプルhtmlの該当箇所(107行目)にAPIを呼び出すURLを貼ると、

<script>
    // API Call
    $.ajax({
        url: "ココにURLを貼付け",
        dataType: 'jsonp',
        success: function(data) {
            $("#tmplResult").tmpl({
                result: data
            }).appendTo("#result");
        }
    });
</script>

サンプルサイトが下記のように表示されます！！

f:id:yuu_kimy:20140813131624j:plain

より細かく、柔軟にサイトに組み込むことができました！！！
今後、ブログでそれっぽいものを見かけたら、「あっ、始めたな、、」と思って頂けたら、と思います。笑

補足

実は、価格表示は、単純に表示すると、カンマ区切りが付かない金額表示となります。
今回は、外部ライブラリを利用して、先ほどの箇所を以下のように書くことでカンマ区切りの金額を表示しています。

cdnjs.com - the missing cdn for javascript and css
# numeral.jsを利用

<script>
    // API Call
    $.ajax({
        url: "ココにURLを貼付け",
        dataType: 'jsonp',
        success: function(data) {
		     $(data.Items).each(function(i, item) {
                item.formattedItemPrice = numeral(item.itemPrice).format('0,0');
            });
		
            $("#tmplResult").tmpl({
                result: data
            }).appendTo("#result");
        }
    });
</script>