【Rails基礎】楽天APIで商品検索アプリを作ってみた

楽天APIを使ってRailsアプリを作ってみたい

どうも、Linです。詰め、寄られてます。

アフィリエイトツールを自作するために前回、AmazonのAPI を使って「Amasearch」という怪しい商品検索ツールを作ってきました。

FREE SWORDER

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

https://freesworder.net/rails-amazon-api/

RailsでAmazon APIを使ってみたい最近、Railsの勉強をサボっていましたが、アフィリエイトリンク作成ツールを自作したくて学習を再開しました。今回はアフィリエイトリンクツールで Amazon の商品を紹介できるようにしたかったので、Amazon の API を使って、Railsで...

今回はもう一歩踏み込んで、

楽天APIを用いて、楽天市場から商品を検索できるアプリ

をRailsで作る挑戦をしてみました。

なお、執筆にあたりこちらの神記事を参考にしました↓

地方でリモートワーク

Railsで楽天APIで商品検索機能を実装してみた！ - 地方でリモートワーク

http://www.tom08.net/entry/2016/08/29/133539

意外と簡単に実装できました!

Qiita

Railsで楽天APIを使って商品検索をする(楽天APIの導入からRailsに組み込むまで) - ...

https://qiita.com/fujitora/items/94d048a25e7d0d94799c

##Rakuten Web Service APIについて(http://webservice.rakuten.co.jp/)##商品検索APIについて[楽天商品検索API...

楽天APIを使う前の準備

まず準備でやるべきことがあります。

それは、

楽天APIを使うためのアプリ登録ですね。

こちらのページから「新規アプリ登録」と進んで、

新規作成フォームを記入します。

ここでは

アプリ名
アプリURL

を記入する必要がありますが、今は存在しないもので大丈夫です。

記入して「作成」を押したら、

アプリ ID

がゲットできると思います。

アフィリエイトタグ付きリンクを発行したい場合は、アフィリエイト ID も必要になってきます。

楽天アフィリエイトに登録してみてくださいね。

とまぁこんな感じで、

アプリ ID
アフィリエイトID

という2つのコードを取得できましたね？

これで準備完了です。

楽天 APIとRails を使って楽天市場の商品検索アプリの作り方

さて、いよいよ楽天 APIを使ったRailsアプリを作っていきましょう。

API こそ異なりますが、流れは前回見てきた Amazon APIのアプリとだいたい一緒。

FREE SWORDER

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

https://freesworder.net/rails-amazon-api/

※今回僕の開発環境はこちらです↓

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

アプリを作成する

まずは楽天市場検索アプリを作成して行きます。

Railsアプリの新規作成は$ rails new アプリ名でしたよね。

今回はrakusearchというアプリを作ってみましょう。

$ rails new rakusearch

1	$ rails new rakusearch

作成したらアプリのディレクトリに移動します。

$ cd rakusearch

1	$ cd rakusearch

splite3のバージョン指定する

Rails 5を使っている方はこの動作も必要かもしれませんね。

Gemファイルの

gem 'sqlite3'

1	gem 'sqlite3'

という記述を

gem 'sqlite3', '~> 1.3.6'

1	gem 'sqlite3', '~> 1.3.6'

に編集してバージョン指定してあげましょう。

空のデータベースを作成する

今回はデータベースを利用しないのですが、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

このくだりは Amazon の商品検索アプリと同じですね

ルーティング

トップページに「検索画面」と「商品一覧」がくるようにルーティングを設定していきます。

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

Rails.application.routes.draw do

root to: 'goods#search'

end

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

ビューファイルを作成していきます。

今回は

search.html.erb

  <h1>Rakuserach</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>Rakuserach</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>

_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 %>

という2ファイルを作ります。

Gemを追加する

楽天 APIのGemを追加していきます。

gem 'rakuten_web_service'

1	gem 'rakuten_web_service'

を追記して保存し、

$bundle install

1	$bundle install

を発動。

イニシャライザを定義する

後は準備編で取得した

アフィリエイト ID
アプリ ID

をイニシャライザーで定義していきます。

config/initiallizerの配下にrakuten.rbというファイルを作成し、次のように記述してやってください。

RakutenWebService.configuration do |c|
    c.application_id = 'xxxxxxxxxxxxxxxx'
    c.affiliate_id = '-------------------------------------'
end

RakutenWebService.configuration do |c|

c.application_id = 'xxxxxxxxxxxxxxxx'

c.affiliate_id = '-------------------------------------'

end

アフィリエイトIDは任意みたいですね〜

コントローラーを編集する

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

class GoodsController < ApplicationController
  def search
    if params[:keyword]
    @items = RakutenWebService::Ichiba::Item.search(keyword: params[:keyword])

  end
  end
end