FiveStars!を作る上で勉強したことをまとめていく。
まず、準備として、アマゾン・Webサービスを利用するにはここでユーザとして登録する。
これはアマゾンの商品データベースを検索・参照するために必要。
また、アマゾンへのトラフィックを作ることによって収益を得たいと思うならば、各国のアマゾン・アソシエイトとして登録する必要がある。
ただし、アマゾン・アソシエイトの方は、収益を得たいと思っている国の全てで登録しなければならない。（Webサービスの方は利用できる全ての国で共通のアカウント）
次にサイトの構成。
今回はAjaxを利用することで、ユーザからの操作に対してページ内の必要な部分のみを更新して行くような設計にした。
大体、次のような感じ。
- サーバ側
AmazonAWS.php
<?phpサーバ側のAmazonAWS.phpは、クライアントからのリクエストをアマゾン・Webサービスのエンドポイント（http://ecs.amazonaws.jp/onca/xml）に送り、そのレスポンスをJSONに変換してクライアントに返す。
define("KEY_ID", "Your Access Key ID");
define("ASSOCIATE_ID", "Your Associate ID");
$request = "http://ecs.amazonaws.jp/onca/xml?Service=AWSECommerceService";
$request.="&AWSAccessKeyId=".KEY_ID;
$request.="&AssociateTag=". ASSOCIATE_ID;
$request.="&Operation=ItemSearch";
$request.="&SearchIndex=" . $_GET["SearchIndex"];
$request.="&Title=" . $_GET["Title"];
$request.="&Author=" . $_GET["Author"];
$request.="&Publisher=" . $_GET["Publisher"];
$request.="&Keywords=" . $_GET["Keywords"];
$response = file_get_contents($request);
$xml = simplexml_load_string($response);
$json = json_encode($xml);
echo($json);
?>
index.html
<html>クライアントはアマゾンの商品データベースへの検索フィールドを送り、返ってきたJSON形式のレスポンスから必要な情報を抽出する。上の例では検索結果のタイトルをリストにして表示する。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing Amazon Associates Web Service</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var option = {
success: function(json) {
$("#SearchResults").empty();
for (var i = 0; i < json.Items.Item.length; i++) {
$("#SearchResults")
.append(
$("<li></li>")
.html(json.Items.Item[i].ItemAttributes.Title)
);
}
},
dataType: "json"
};
$("#ajaxForm").ajaxForm(option);
});
</script>
</head>
<body>
<form id="ajaxForm" action="AmazonAWS.php" method="get">
<table>
<tr><td>タイトル</td><td><input type="text" name="Title"></td></tr>
<tr><td>著者</td><td><input type="text" name="Author"></td></tr>
<tr><td>出版社</td><td><input type="text" name="Publisher"></td></tr>
<tr><td>キーワード</td><td><input type="text" name="Keywords"></td></tr>
</table>
<input type="radio" name="SearchIndex" value="Books" checked>和書
<input type="radio" name="SearchIndex" value="ForeignBooks">洋書
<button type="submit">検索</button>
</form>
<ul id="SearchResults"></ul>
</body>
</html>
また、今回はjQueryを利用することでソースコードを簡略化しているので、上の例を動作させるためにはjQueryとそのフォームプラグインが必要となる。
投稿
0 件のコメント:
コメントを投稿