[Rails] 楽天検索APIを使用する

# はじめに

今回楽天のAPIを使用してページ取得などをしてみたので

こちらも記述していきます。

githubも日本語版があってありがたや。:relaxed:

# 開発環境

macOS Big Sur 11.2.1

Ruby 2.6.5

Rails 6.1.1


# 実装

まずはGemをインストールします。

```ruby:Gemfile

gem 'rakuten_web_service'
```

「bundle」でインストールをしていきます。

```ruby

bundle
```

<br>

アプリケーションIDが必要なのでアプリケーションの登録をします。↓

[RakutenDevelopers](https://webservice.rakuten.co.jp/app/create)

登録するとIDが取得できます:zap:

## config

「config」の「initializers」に記述します。

```ruby:config/initializers/goods.rb

RakutenWebService.configure do |c|
  c.application_id = 'アプリケーションID'  # (必須)
  c.affiliate_id = 'アフィリエイトID'      # (任意)
  c.max_retries = 3         # リクエストのリトライ回数(任意)
  c.debug = true            # デバッグモード (任意)
end
```
`IDは公開しないように注意です。`

## routes

```ruby:routes.rb

Rails.application.routes.draw do

       # (他は省略しています)
  get 'rakuten_search' => 'goods#search'
end

```

## controller

「params」で「keyword」を受け取るようにします。

```ruby:goods_controller

class GoodsController < ApplicationController
  def search
    if params[:keyword]
      @goods = RakutenWebService::Ichiba::Item.search(keyword: params[:keyword])
    end
  end
end
```
## view

viewを記述していきます。

```html:goods/search.html.erb

　　　<!-- 検索をしたいものを入力する部分 -->
<div class='goods-content'>
    <div class="search-box">
      <%= form_with url: rakuten_search_path, method: :get do |f| %>
        <%= f.text_field :keyword %>
        <%= f.submit '検索' %>
      <% end %>
        </div>
    </div>
  
　　　　<!-- 表示する部分 -->
    <div class="goods-search-main">
      <div class="goods-search-box">
        <ul>
          <% if @goods.present? %>　　<!-- （１０）は商品を出力する個数 -->
            <% @goods.first(10).each do |item| %>
              <div class="goods-list">
                <div class="goods-img">
                  <li><img src="<%= item['mediumImageUrls'][0] %>"></li>
                </div>
                <div class="goods-list-right">
                  <div class="goods-name">
                    <li><a href="<%= item['itemUrl'] %>" target="_blank"><%= item['itemName'] %></a></li>
                  </div>
                  <div class="goods-price">
                    <li><%= item['itemPrice'] %>円</li>
                  </div>
                </div>
              </div>
            <% end %>
          <% end %>
        </ul>
      </div>
    </div>
  </div>

```
そうするとこのように情報を取得することができます。

[![Image from Gyazo](https://i.gyazo.com/9c1b5058b7359fdbd7cda839afe1522d.gif)](https://gyazo.com/9c1b5058b7359fdbd7cda839afe1522d)

# 商品表示

表示のみバージョンも、Githubを見本にして記述していきました。


## controller変更

```ruby:goods_controller

class GoodsController < ApplicationController
  def search
      @goods = RakutenWebService::Ichiba::Item.search(keyword:  'Ruby')
  end                                                  # ↑こことか変更
end
```
お手本通りにrubyを入れてみます。

## viewを変更

ここはとりあえず消すだけ。

```HTML:goods/search.html.erb

　　　<!--検索する部分を削除-->

     <!-- 表示する部分だけを残す -->
   
<div class="goods-search-main">
      <div class="goods-search-box">
        <ul>
          <% if @goods.present? %>
            <% @goods.first(10).each do |item| %>
              <div class="goods-list">
                <div class="goods-img">
                  <li><img src="<%= item['mediumImageUrls'][0] %>"></li>
                </div>
                <div class="goods-list-right">
                  <div class="goods-name">
                    <li><a href="<%= item['itemUrl'] %>" target="_blank"><%= item['itemName'] %></a></li>
                  </div>
                  <div class="goods-price">
                    <li><%= item['itemPrice'] %>円</li>
                  </div>
                </div>
              </div>
            <% end %>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
```

そうすると、

表示されました！！

![スクリーンショット 2021-02-14 17.15.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892628/f114da15-d4c3-9241-719c-f4ee35ac9a2c.png)

バンザーイ。

これでランキングを表示したり、レシピを見たりなどが可能になります！！

パラメーターも変えると、色々なものを出力することができます。

CSSなど装飾はお好みで・・・

## さいごに

検索機能を実装中にeachメソッドのところに「if文」を入れていなく、「NoMethodError」になって少し時間がかかりました、が・・！！

パラメーターもサイトを見ながらテストフォームを活用し、内容を確認しながら実装してみて、色々な情報を表示することができました！！


もっといいやり方があるのかはわかりませんが、とても便利です。

また次回もっと細かくさわっていきたいを思います。

お疲れ様でした！！！！！

# 参考

細かくはこちらに書いています。

[Github:rakuten-ws/rws-ruby-sdk](https://github.com/rakuten-ws/rws-ruby-sdk/blob/master/README.ja.md)

こちらも大変参考になりました。ありがとうございます！:tada:

[Railsで楽天APIで商品検索機能を実装してみた！](https://www.tom08.net/entry/2016/08/29/133539)

[Ruby on Rails で楽天商品ページを取得してみた](http://takoyarosan.hatenablog.com/entry/2018/07/28/211709)