【Rails基礎】Amazon APIでAmazon商品検索ツールを作ってみた

RailsでAmazon APIを使ってみたい

最近、Railsの勉強をサボっていましたが、アフィリエイトリンク作成ツールを自作したくて学習を再開しました。

今回はアフィリエイトリンクツールで Amazon の商品を紹介できるようにしたかったので、

Amazon の API を使って、

Railsで Amazon 商品を検索できるツール

を作ってみました。

その名も、

Amasearch

ですね。

RailsでのAmazon API の使い方を検索してみたところ、こちらの神記事を発見。

Qiita

【Rails】Amazon APIで書籍検索アプリ作成 - Qiita

https://qiita.com/tatsuki-m/items/043f14e7d4504277c947

## 概要以前使用したAmazon APIについてまとめておきたいな〜と思いまして。。。。。実際に導入から実装までの流れを含め、簡単な書籍検索アプリを作ってみました！作成するアプリの内容としては、検索ボックスにキーワードを書き...

この記事を応用して書籍だけではなく、

Amazon.co.jp のすべてのカテゴリの商品を検索できるツールを作ってみました。

Railsで Amazon の API を使う前の準備

まずは Amazon の API を使う準備からですね。

実はAmazon APIを使うためには、

アソシエイト ID
アクセスキー ID
アソシエイトタグ

という3つの情報が必要になってきます。

これらは簡単に言ってしまうと、

Amazon アソシエイトで商品を紹介する時に必要な情報

です。

キーの取得方法は割愛しますが、ググるとザクザク出てくると思います。

RailsでAmazon商品検索ツールを作る方法

準備が終わりましたら、Amazon 商品を検索できるアプリを作っていきましょう。

ちなみに僕の開発環境は

Railsのバージョン：5.0.7.2
Rubyのバージョン：2.3.1

です。

アプリを作成

まずは

$ rails new amasearch

1	$ rails new amasearch

でamasearchというRailsアプリを作ってみましょう。

作成したら、アプリのディレクトリに移動してください。

$ cd amasearch

1	$ cd amasearch

splite3のバージョンを指定する

これは僕だけかもしれませんが、Rails5にアップデートしたところ、必要になってしまった手順です。

Gemファイルの中の

gem 'sqlite3'

1	gem 'sqlite3'

という記述を

gem 'sqlite3', '~> 1.3.6'

1	gem 'sqlite3', '~> 1.3.6'

に変更。

splite3のバージョンを1.3.6に指定してあげましょう。

ぼくの場合、これをやらねばデータベース、コントローラー作成でエラーが出てしまうのです・・・！

FREE SWORDER

Add gem 'sqlite3'というエラーが出てRailsのコントローラーが作成でき...

https://freesworder.net/rails-no-controller/

Railsのコントローラーが作れない！？？どうも、Linです。空気、読みましたね。先日、プロゲートのRuby on Rails5コースを終了し、いよいよローカル環境でRailsアプリを作成し始めました。しかしながら、基本中の基本である、コントローラーを作成するというフ...

Gemファイルに記述したら上書き保存して

$ bundle update

1	$ bundle update

を発動しましょう。

データベース作成

今回のアプリは商品を検索するだけなので、データベースは使いません。

がしかし、Rails自体がデータベースあり前提に作られているので、空のデータベースを用意しておきましょう。

$ rails db:create

1	$ rails db:create

のあとに

$ rails db:migrate

1	$ rails db:migrate

を発動してやります。

コントローラーを作成する

続いてコントローラーですね。

今回はgoods_controller.rbというコントローラーを作っていきます。

$ rails g controller goods search

1	$ rails g controller goods search

また作成時にsearchというアクションをデフォルトで記述しておきますね。

class GoodsController < ApplicationController
  def search
  end
end

class GoodsController < ApplicationController

def search

end

ルーティング設定する

次はルーティング。

routes.rbを開いて、このように記述します。

Rails.application.routes.draw do
  root to: 'goods#search'
end

Rails.application.routes.draw do

root to: 'goods#search'

end

これでルートディレクトリに商品検索画面がくるようになります。

goodsコントローラーのsearchアクションをルートディレクトリに設定できましたね。

モデル作成

続いてモデルですね。

Goodクラスを定義づけるファイルになります。

まずは

$ rails g model Good

1	$ rails g model Good

でモデルファイルを作成。

そして、モデルファイルgood.rbに次のように記述し、Goodクラスでどのようなインスタンスを作るのか書いてあげます。

class Good < ApplicationRecord
  attr_accessor :title, :image_url, :url 

  def initialize(title, image_url, url)
    @title = title
    @image_url = image_url
    @url = url
  end
end

class Good < ApplicationRecord

attr_accessor :title, :image_url, :url

def initialize(title, image_url, url)

@title = title

@image_url = image_url

@url = url

end

これによると、

商品のタイトル
画像の URL
商品の詳細 URL

の3つのプロパティを持ったインスタンスを生成するクラスとわかりますね。

ビューファイルを作成する

続いて、みた目を司るビューファイルを作っていきます。

search.html.erbというファイルを新規で

app>views>goods

配下に新規で作成してください。

  <h1>Amaserach</h1>
<div class='content'>
  <div id="search-box">
    <%= form_tag('/', method: :get) do %>
        <%= text_field_tag :good, "",  id: "good_search", name: "keyword", placeholder: "キーワードを打ち込んでください", style: "width: 200px;"%><button title="検索" type="submit">検索</button>
    <% end %>
  </div>
  <h2>検索結果</h2>
  <div id='good_list'>
     <%= render partial: 'good_list' %>
  </div>
</div>

<h1>Amaserach</h1>

<%= form_tag('/', method: :get) do %>

<%= text_field_tag :good, "", id: "good_search", name: "keyword", placeholder: "キーワードを打ち込んでください", style: "width: 200px;"%><button title="検索" type="submit">検索</button>

<% end %>

</div>

<%= render partial: 'good_list' %>

</div>

検索窓に入れたキーワードがkeywordというname属性になっているので、コントローラー側でparams[:keyword]で取り出せることになります。

商品を表示させる部分は「部分テンプレート」で表現していますので、_good_list.html.erbというファイルも作っておきましょう。

<% if @goods.present? %>
  <% @goods.each do |good| %>
    <div class="list">
    <% if good.image_url %>
      <%= link_to (image_tag(good.image_url, style: "width: 70px;height: 100px;display: inline-block;")), good.url %>
      <%end%>

      <%= good.title %>
    </div>
  <% end %>
<% end %>

<% if @goods.present? %>

<% @goods.each do |good| %>

<% if good.image_url %>

<%= link_to (image_tag(good.image_url, style: "width: 70px;height: 100px;display: inline-block;")), good.url %>

<%end%>

<%= good.title %>

</div>

<% end %>

Amazon商品のオブジェクトを代入した@goodsというクラス変数の配列を、eachメソッドでgoodという変数で個々に取り出し、link_toメソッドで

第一引数：リンク先をgoodのimage_urlプロパティの画像URL
第二引数：商品の詳細URL

に指定して、商品の画像自体に詳細のURLを貼ります。

で、そのあとにgood.titleでgood変数のtitleプロパティ（商品のタイトル）を表示するようになってるのですね。

Gemを追加

いよいよ Amazon API のgemを導入していきます。

Gemファイルに

gem 'amazon-ecs'

1	gem 'amazon-ecs'

を追記して上書き保存しましょう。

アソシエイトキーなどを指定する

Gemfileを上書き保存したら、バンドルインストールは待ってください。

それよりも先にAmazon アソシエイトキーの情報をenvironment.rbに記述しなければならないのです。

階層はconfig/locales/environment.rbになりますね。このファイルを次のように編集します↓

# Load the Rails application.
require_relative 'application'

# Initialize the Rails application.
Rails.application.initialize!

Amazon::Ecs.options = {
      associate_tag:     'xxxxxxx-22',
      AWS_access_key_id: '------------------',
      AWS_secret_key:   '...............'
}

# Load the Rails application.

require_relative 'application'

# Initialize the Rails application.

Rails.application.initialize!

Amazon::Ecs.options = {

associate_tag: 'xxxxxxx-22',

AWS_access_key_id: '------------------',

AWS_secret_key: '...............'

}

このファイルの

associate_tag	アソシエイトタグ
AWS_access_key_id	アクセスキー
AWS_secret_key	シークレットキー

に冒頭で準備しておいた3つの

アソシエイト ID
アクセスキー ID
アソシエイトタグ

を記入してやりましょう。記入して上書き保存したら

$ bundle install

1	$ bundle install

します。

コントローラーを記述する

最後にコントローラーのgoods_controller.rbを編集していきます。

class GoodsController < ApplicationController
  def search
    if params[:keyword].present?

      # Amazon::Ecs::Responseオブジェクトの取得
      goods = Amazon::Ecs.item_search(
        params[:keyword],
        search_index:  'All',
        dataType: 'script',
        response_group: 'ItemAttributes, Images',
        country:  'jp',
              )

      # 本のタイトル,画像URL, 詳細ページURLの取得
      @goods = []
      goods.items.each do |item|
        good = Good.new(
          item.get('ItemAttributes/Title'),
          item.get('LargeImage/URL'),
          item.get('DetailPageURL'),
        )
        @goods << good
      end
    end
  end
end