楽天商品検索APIを用いた実装をしてみる（簡単）

はじめに

Rails 6.0.3.4

今回は楽天商品検索APIを使った超シンプルな検索アプリ実装の手順を記録したいと思います。
おそらくわかりやすいかは置いておいて、1番シンプルなやり方ではないかな・・・？
と勝手に思っています。今回、エラーハンドリングは省きます。

https://webservice.rakuten.co.jp/
上記から登録をして、アプリケーションIDを取得しておきましょう。

itemsコントローラー作成

rails g controller items search

このコマンドをターミナルで入力すると、コントローラーやビュー（search.html.erb)、
更にルーティングの記述もしてくれます（ルーティングは、お好みで修正してください。）

ビューを記述する

<h2 class="product-subtitle-explain">商品を検索してみよう！</h2>

<%= form_with url:product_search_path, method: :get, local: true do |f| %>
<%= f.text_field :keyword, placeholder: "検索キーワードを入力してください", autocomplete: 'off' %>
<%= f.submit "検索" , :name => nil%>
<% end %>

<h2>検索結果</h2>
<%= render partial: 'item_list' %>

大体このような感じでしょうか。
特に保存するものもないので、form_withにはどのアクションに飛ばすか、urlを書いておきます。
:keywordとして、検索ワードを:keywordに格納します。←大事！
placeholder: "検索キーワードを入力してください"として、フォームに例として文字を置いておきました。また、
autocomplete: 'off'で、フォームの自動補完を無効にしてあります。

ここで最後に注目していただきたいのですが、
<%= render partial: 'product_list' %>
として、検索結果を表示する箇所は別のビューファイルに飛ばしています。
なのでここで、app/views/itemに、
_item.list.erbを作成します。さっき作ったsearch.html.erbと同じ場所ですね。

次はrender先の_item.list.erbに、
結果を表示させる記述をしていきます。

<% @items.first(10).each do |item| %>

  <img src="<%= item['smallImageUrls'][0] %>">

  <a href="<%= item['itemUrl']%>" target="_blank"><%= item['itemName']%></a>

  <%= item['itemPrice'] %>円

<% end %>

上から見ていくと、まず
<% @items.first(10).each do |item| %>★<%end%>
として、★の中に、商品の何を写したいのかを記述しました。
.first(10)とすることで、検索に引っかかった最初の１０アイテムを表示しています。
@itemsはこのあとsearchコントローラーで定義していきます！（今ビューを見てもエラーになります）

item['smallImageUrls'][0]
アイテムの1つ目の画像を小さなサイズで取得しています。
item['itemUrl']
アイテムの詳細に行けるURLを取得しています。
target="_blank"
アイテムをクリックしたときに、別タブを開いて楽天の商品詳細ページに行く設定にしてます
item['itemName']
アイテムの名前を取得しています。
['itemPrice']
アイテムの値段を取得しています。
他にもアイテムに関する様々な情報を取得することができます。↓
https://webservice.rakuten.co.jp/api/ichibaitemsearch/

コントローラー記述

https://webservice.rakuten.co.jp/sdk/ruby.html
を基に実装していきます。

gem 'rakuten_web_service'

をgemファイルに付け加えて、bundle installして
ターミナルを再起動させてください。
ここからitemsコントローラーの記述に入ります。

class ProductController < ApplicationController
  require 'rakuten_web_service'

  def search
    if params[:keyword].present?
      @items = RakutenWebService::Ichiba::Item.search(keyword: params[:keyword])
    else
      render :search
    end
  end
end

params[:keyword] は、search.html.erbの入力フォームでキーワードを格納してあります。
paramsで[:keyword]をチェックし、＠itemsに格納しています。
RakutenWebService::Ichiba::Item.searchは決まり文句です。詳しくは
https://webservice.rakuten.co.jp/sdk/ruby.html
を見てみてください。

アプリケーションIDの設定

config/initialize下に、rukuten.rbを作成してください。
その中にアプリケーションIDを記述していきます
タイミングによっては記述方法が異なるので、公式も見るようにしてください。

RakutenWebService.configure do |c|
  c.application_id = '*******************'
  c.affiliate_id = '*******************'　←こちらは任意
end

環境変数を使うときには以下になります

RakutenWebService.configure do |c|
  c.application_id = ENV['RWS_APPLICATION_ID']
  c.affiliate_id = ENV["RWS_AFFILIATION_ID"]
end

うまくいった後は、本番環境でも環境変数を設定してください。
HTML・CSSで整えた後ですが、おそらくこのような感じになるのではないかなと思います