楽天ウェブサービスAPIの商品検索APIを使用して商品を表示するサンプル

楽天ウェブサービスのAPIを利用して商品検索をして結果を表示する単純なプログラムをPHPとjQuery（JavaScript）で作成しました。

楽天ウェブサービスの商品検索APIのサンプルとメモ

Webサービス：楽天商品検索API
データ形式：XML、JSON
使用時の注記：楽天ウェブサービス規約
利用時の登録：必要

下のPHPプログラムは、楽天の商品検索APIにリクエストして結果を取得するプログラムです。

<?php
$request_rakuten = 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222';
$appid_rakuten = 'アプリケーションID';
$query_rakuten = $_POST['query'];
$base_url = "$request_rakuten?applicationId=$appid_rakuten&keyword=$query_rakuten";

$json = file_get_contents($base_url);
$json = mb_convert_encoding($json, 'UTF-8');//jsonなら不要
header('Content-type: application/json; charset=UTF-8');
print($json);

下のjQuery（JavaScript）は、入力したキーワードを取得して、上のPHPプログラムに問い合わせをして結果をJSON形式のデータで受け取って商品を表示します。

$(function() {
  $('#button').on('click', function(e) {
    e.preventDefault();
    $.ajax({
      url:'appid.php',
      type: 'post',
      dataType: 'json',
      async: 'true',
      data: {
        query: $('#word').val(),
      }
    })
    .done(function(data) {
      $('#content').empty();
      goods = data.Items;
      for(var i = 0; i < 1; i++) {
        var img_goods = $('<img>').attr('src', goods[i].Item.mediumImageUrls[0].imageUrl);
        $('#content').append('<p>' + goods[i].Item.itemName).append(img_goods);
      }
    })
    .fail(function(data) {
      alert('data');
    });
  });
});

下のHTMLは、キーワードの入力と結果を表示するものです。

<input type="text" id="word" value="" />
<input type="button" id="button" value="送信" />
<div id="content"></div>