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




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

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

 

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

Image from Gyazo

 

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

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

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

 

Image from Gyazo

 

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

 

 

楽天APIを使う前の準備

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

それは、

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

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

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

ここでは

  • アプリ名
  • アプリURL

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

 

 

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

アプリ ID

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

 

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

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

とまぁこんな感じで、

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

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

これで準備完了です。

 

 

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

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

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

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

  • Railsのバージョン:5.0.7.2
  • Rubyのバージョン:2.3.1

 

アプリを作成する

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

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

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

$ rails new rakusearch

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

$ cd rakusearch

 

splite3のバージョン指定する

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

Gemファイルの

gem 'sqlite3'

という記述を

gem 'sqlite3', '~> 1.3.6'

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

 

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

今回はデータベースを利用しないのですが、Railsはその仕様上、データベースを作成しなければなりません。

$ rails db:create

のあとに

$ rails db:migrate

を発動してやりましょう。

 

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

コントローラーの作成ですね。

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

$ rails g controller goods search

また作成時にsearchというアクションをデフォルトで作成しておくと後々捗りますね。

class GoodsController < ApplicationController
  def search
  end
end
このくだりは Amazon の商品検索アプリと同じですね

 

ルーティング

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

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>

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

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

 

Gemを追加する

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

gem 'rakuten_web_service'

を追記して保存し、

$bundle install

を発動。

 

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

後は準備編で取得した

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

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

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

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

 

search.html.erbのフォームで検索された言葉をparams[:keyword]で受け取って、そいつが入力されているかif 文にかけてやります。

RakutenWebService::Ichiba::Itemというオブジェクトのsearchメソッドで商品情報が格納されているオブジェクトを配列で受け取り、@itemsというクラス変数に代入。

その@itemsという配列を_good_list.html.erb上でitemという変数に展開していくわけですね。

展開したitemのプロパティを表示させてあげれば、商品のタイトル、商品の画像 URL などが取得できるようになっています。

 

このitemというオブジェクトがどのようなプロパティを持っているのかは楽天 API の公式ページを見るといいですね。

僕も今まだ勉強中なんですが、とりあえず、

  • item.name→商品名
  • item.url→商品の詳細URL
  • item[“mediumImageUrls”][0]→商品の画像1枚目

は取得できました。

画像URLのプロパティは最大3枚までの画像を配列で受け取れて、[0]とすれば商品の1枚目の画像URLをゲットできますね。

 

いやああ、奥が深い。。。

なんとかアプリを作れましたが、どんな値を取得できるかはまだ未知です。

 

Image from Gyazo

 

 

勉強の余地があるのでトレーニングを継続していきたいと思います!

 

それでは!

Lin




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍