Rails で Amazon Webサービスを使ってショッピングカートのサイトを作成

Amazon Rails

移転しました。

Amazon ECSを使用してDBを使わないで、ショッピングカートサイトを作ってみる。
Ruby on railsで作成。
開発環境はWindowsXPとする。

0.仕様

Amazon WEB API から本に関する商品のデータを取得し、画面に表示。
画面に表示した商品をユーザーに選択させる。
選択させた商品はAmazonのリモートショッピングカートを利用し、保存
最後にカートの商品を購入してもらうため、Amazonサイトの購入手続き画面に遷移する。

２つ画面作成する
・検索画面
　Amazonから本に関する商品を表示
・カート画面
　Amazonで用意されているカートを使う

1.開発環境

Ruby & Rails インストール

Rails Windows インストール　でググって調べる。

AptanaとRadrailsをインストール

"aptana radrails"でググる

Amazon-ECSライブラリインストール

Amazon WEB API から返されるXMLデータを扱うためのライブラリ

 gem install amazon-ecs
Access Key と Associate Key 取得

以下キーを取得しておく。
・Access Key = Amazon WEB サービスを使用するためのキー
・Associate Key = Amazonのアフィリエイトに参加するためのキー

参考URL
http://www.after1.net/log/2007/10/2007_10_15_1555.php
http://www.google.co.jp/search?q=Amazon+ECS+Access+key&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox-a

2. プロジェクト作成

Ruby Exproler上で右クリックを押し、New - Project - Rails Project を選択
ここではプロジェクト名を cartsample とする。

すると、railsお決まりのディレクトリ構成ができあがる。

      exists  
      create  app/controllers
      create  app/helpers
      create  app/models
      create  app/views/layouts
      create  config/environments
      create  components
      create  db
      create  doc
      create  lib
      create  lib/tasks
      create  log
      create  public/images
      create  public/javascripts
      create  public/stylesheets
      create  script/performance
      create  script/process
      create  test/fixtures
      create  test/functional
      create  test/integration
      create  test/mocks/development
      create  test/mocks/test
      create  test/unit
      create  vendor
      create  vendor/plugins
      create  tmp/sessions
      create  tmp/sockets
      create  tmp/cache
      create  tmp/pids
      create  Rakefile
      create  README
      create  app/controllers/application.rb
      create  app/helpers/application_helper.rb
      create  test/test_helper.rb
      create  config/database.yml
      create  config/routes.rb
      create  public/.htaccess
      create  config/boot.rb
      create  config/environment.rb
      create  config/environments/production.rb
      create  config/environments/development.rb
      create  config/environments/test.rb
      create  script/about
      create  script/breakpointer
      create  script/console
      create  script/destroy
      create  script/generate
      create  script/performance/benchmarker
      create  script/performance/profiler
      create  script/process/reaper
      create  script/process/spawner
      create  script/process/inspector
      create  script/runner
      create  script/server
      create  script/plugin
      create  public/dispatch.rb
      create  public/dispatch.cgi
      create  public/dispatch.fcgi
      create  public/404.html
      create  public/500.html
      create  public/index.html
      create  public/favicon.ico
      create  public/robots.txt
      create  public/images/rails.png
      create  public/javascripts/prototype.js
      create  public/javascripts/effects.js
      create  public/javascripts/dragdrop.js
      create  public/javascripts/controls.js
      create  public/javascripts/application.js
      create  doc/README_FOR_APP
      create  log/server.log
      create  log/production.log
      create  log/development.log
      create  log/test.log

上記ディレクトリ、ファイルが作成される。

3. コントローラー作成

本来ならモデルから作るのだが、今回DBを使わない予定なので、
いきなりコントローラーを作成する。

RadRails Generatorsタブを使用して

[contoroller] [AmazonEcs search]

を入力してGoを押下。以下を出力する。
※左から コマンド名、コントローラー名、メソッド名

      exists  app/controllers/
      exists  app/helpers/
      create  app/views/amazon_ecs
      exists  test/functional/
      create  app/controllers/amazon_ecs_controller.rb
      create  test/functional/amazon_ecs_controller_test.rb
      create  app/helpers/amazon_ecs_helper.rb
      create  app/views/amazon_ecs/search.rhtml

上記ディレクトリ、ファイルが作成される。

4. 検索画面を作成

ユーザーに表示する検索画面のHTMLを作成する。

HTML

・app/views/amazon_ecs/search.rhtml

<h1>Amazon 本　検索画面</h1>
<table>
	<tr>
		<td>
			<%= form_tag :action => 'search' %>
				検索キーワード <%= text_field_tag :keyword, @keyword, {:width => '200'} %>
				<%=image_submit_tag('search_btn.gif') %>
			<%= end_form_tag %>
		</td>
	</tr>
	<tr>
		<td width="10%">画像</td>
		<td width="40%">タイトル</td>
		<td width="20%">作者</td>
		<td width="10%">出版社</td>
		<td width="10%">価格</td>
		<td width="10%">お勧め度</td>
	</tr>
	<% @items.each do |item| %>
	<tr>
		<td>
			<% if item.get_hash('smallimage') != nil %>
			<%=image_tag(item.get_hash('smallimage')[:url], :alt => item.get('title'))  %>
			<% end %>
		</td>
		<td><%=link_to(item.get('title'), 'cart/' + item.get('asin')) %></td>
		<td><%=item.get('creator') %></td>
		<td><%= item.get('publisher') %></td>
		<td><%= item.get('offers/offer/offerlisting/price/formattedprice') %></td>
		<td>
			<% if item.get('averagerating') != nil %>
			<%= image_tag(getStarImage(item.get('averagerating'))) %>
			<% end %>
		</td>
	</tr>
	<% end %>
</table>
Controller

・app/controller/amazon_ecs_controller.rb

class AmazonEcsController < ApplicationController
  require 'amazon/ecs'
  
  def initialize
      Amazon::Ecs.options = {
        :aWS_access_key_id => '*************', # your accesskey
        :associate_tag => "*************",   #Associate ID
        :country => :jp
      }
  end
  
  def search
    res = Amazon::Ecs.item_search(params[:keyword], {
      :search_index => 'Books', 
      :response_group => 'Medium,Reviews,BrowseNodes,OfferListings', 
      :sort => 'salesrank', 
      :browse_node => 465610, 
      :item_page => params[:page]
    })
    @items = res.items
    @keyword = params[:keyword]
  end
end
Helper

お勧め度の星画像を出すため、ヘルパーメソッドを作成。画像はAmazon画像サービスのURLを返却
・app/helper/amazon_ecs_helpler.rb

module AmazonEcsHelper
  def getStarImage(rating)
    ratingNum = rating.to_f
    baseUrl = 'http://images-jp.amazon.com/images/G/09/other/stars-'
    if ratingNum > 4.5
      return baseUrl + '5-0.gif'
    elsif 4.5 >= ratingNum && ratingNum > 4.0
      return baseUrl + '4-5.gif'
    elsif 4.0 >= ratingNum && ratingNum > 3.5
      return baseUrl + '4-0.gif'
    elsif 3.5 >= ratingNum && ratingNum > 3.0
      return baseUrl + '3-5.gif'
    elsif 3.0 >= ratingNum && ratingNum > 2.5
      return baseUrl + '3-0.gif'
    elsif 2.5 >= ratingNum && ratingNum > 2.0
      return baseUrl + '2-5.gif'
    elsif 2.0 >= ratingNum && ratingNum > 1.5
      return baseUrl + '2-0.gif'
    elsif 1.5 >= ratingNum && ratingNum > 1.0
      return baseUrl + '1-5.gif'
    elsif 1.0 >= ratingNum && ratingNum > 0.5
      return baseUrl + '1-0.gif'
    else
      return baseUrl + '0-5.gif'
    end
  end
end
検索画面

f:id:shohu33:20071216223200j:image

次回は、カート部分を作成する。