【Rails】Amazon PA API v5.0에서 책 검색(비동기 통신)

이 기사의 연속입니다.

전회는 API 제휴 후에 view 파일을 표시시키고 있었습니다만, 이번은 ajax 통신으로 데이터를 취득해 서적 검색 결과를 표시합니다.
(이유는 이쪽이 멋지기 때문입니다 웃음)

완성 이미지

(css로 외형을 조금 정리했기 때문에, 전회의 기사와 조금 외형은 바뀝니다)

처리 흐름

검색 양식을 작성하고 검색 버튼을 누르면(제출) 다음과 같이 처리됩니다.

1. 검색 양식의 키워드 취득
2. json 형식으로 데이터(키워드)를 갖게 하여 지정 URL에 요청(ajax 통신)
3. 컨트롤러로 API 연계를 처리하고 json으로 데이터를 전달합니다.
4. 돌아온 데이터를 사용하여 html을 다시 작성하여 검색 결과를 표시

각 파일

컨트롤러

컨트롤러에 json에서 응답을 반환한다는 설명이 필요합니다.respond_to　〜
searches_controller

class SearchesController < ApplicationController
  before_action :call_client, only: :index

  def index
    si = @client.search_items(keywords: keyword_params, SearchIndex: "Books")
    @items = si.items
    respond_to do |format|
      format.html
      format.json
    end
  end

  private

  def call_client
    require 'paapi'
    @client = Paapi::Client.new(access_key: Rails.application.credentials[:pa_api][:access_key_id],
                                secret_key: Rails.application.credentials[:pa_api][:secret_key],
                                market: :jp,
                                partner_tag: Rails.application.credentials[:pa_api][:associate_tag])
  end

  def keyword_params
    params.require(:keyword)
  end

end

jbuilder

views/[コントローラ名と同じ名前のディレクトリ] 안에 index.json.jbuilder를 만듭니다.
이번에는 controllers 바로 아래에 searches_controller.rb를 만들고 있으므로 views/searches/index.json.jbuilder입니다.

이번에는 json 데이터가 배열이므로 각 요소를 어떻게 처리하는지 작성해야합니다. 꺼내는 데이터는 이미지, 제목, 저자, 출판사의 정보로 하고 있습니다.

index.json.jbuilder

json.array! @items do |item|
  json.image_url item.image_url
  json.title item.title
  json.authors item.authors
  json.publisher item.publisher
end

js 파일

api-search.js

// jQueryを使って記述します

$(function() {

  // 検索結果を表示する関数
  let search_list = $("#books")
  function appendBook(image_url, title, author, publisher) {
    const html = `<div class="search-book-content">
                  <div class="book-image">
                    <img class="book-image" src="${image_url}">
                  </div>
                  <div class="right-content">
                    <div class="book-info">
                      <div class="book-info__title">
                        ${title}
                      </div>
                      <div class="book-info__author">
                        ${author}
                      </div>
                      <div class="book-info__publisher">
                        ${publisher}
                      </div>
                    </div>
                  </div>
                </div>`
    search_list.append(html);
  }

  // 検索中の表示関数
  function dispLoading(msg){
    let dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
    $("body").append("<div id='loading'>" + dispMsg + "</div>");
  }

  // 検索中の表示を消す関数
  function removeLoading(){
    $("#loading").remove();
  }

  // 検索ボタンを押した時にイベント発火
  $("#book-search-form").on("submit", function(e) {
    e.preventDefault();
    const keyword = $("#keyword").val();
    dispLoading("検索中...");

    // ajax通信の詳細
    $.ajax({
      url: '/searches',
      type: 'GET',
      data: {'keywords': keyword},
      dataType: 'json',
      timeout: 10000
    })

    // ajaxがうまくいったとき
    .done(function(items){
      $(".search-book-content").remove();
      items.forEach(function(item){
        let image_url;
        let author;
        let publisher;
        if (item.image_url == null) {
          image_url = `/assets/no_image-267acfcb976ba4942183409c682b62a768afb48c328b6ba60de7b57fd83c3b56.png`
        } else {
          image_url = item.image_url
        }
        if (item.authors.length == 0) {
          author = '不明な作者'
        } else {
          author = `${item.authors[0]}`
        }
        if (item.publisher == null) {
          publisher = '不明な出版社'
        } else {
          publisher = item.publisher
        }
        let title = item.title
        appendBook(image_url, title, author, publisher);
      })
    })
    // ajaxが失敗した時
    .fail(function(){
      alert("検索に失敗しました");
    })
    // ajaxが成功しても失敗しても共通の処理
    .always( function(data) {
      // Lading 画像を消す
      removeLoading();
    });
  });
})

코드를 읽으면 알겠다고 생각합니다만, 처리의 흐름을 써 보겠습니다.

■ 함수 정의

appendBook
책의 데이터를 바탕으로 html 작성하는 함수

dispLoading
검색중인 gif 파일을 표시하는 함수

removeLoading
검색중인 gif 파일을 숨기는 함수

■ 이벤트

submit 액션으로 이벤트 발화

양식에 입력 한 키워드 가져 오기

검색중인 화면 표시

ajax 통신 요청 (url 및 송신 데이터 지정)

ajax 통신이 성공했을 때의 처리
각 데이터를 변수로 하여 appendBook 함수에 먹이게 한다
(데이터를 취득할 수 없는 경우는 불명한 작자등의 데이터가 들어가도록 해 둔다)

ajax 통신이 실패했을 때의 처리

공통 처리로 검색중인 이미지 지우기

검색에 약간의 시간이 걸리므로 검색 중임을 알기 쉽도록 ajax 통신 중에는 gif 이미지를 표시하도록하고 있습니다.

또한 검색에 너무 오래 걸리면 오류가 발생합니다. (10초)
계속 검색 중에 되어 있으면 사용자 측이 불안해지기 때문에.

검색 중인 화면(css 파일)

css 파일

#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}

#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: image-url("loading.gif") center center no-repeat;
}

gif 파일은 무료로 만들 수 있는 사이트가 몇 가지 있으므로 만들어 봅시다.
나는 이 사이트로 만들었습니다.

메모

작동하지 않는 부분을 메모에 남겨 둡니다.
(자세한 분은 가르쳐 주시면 기쁩니다…)

진짜는 keyword_params만을 인수로 하고 싶은 컨트롤러로 keyword를 바탕으로 API를 두드릴 때에, search_items의 인수에는 keyword_params 로서 해시 형식으로 건네주면 깨끗이 합니다만, 왠지 잘 작동하지 않았습니다. (activehash라고 받지 않는 느낌…)

turbolinks를 지우면 제대로 작동하지 않는다 없다는 사태가 되었습니다 웃음. 이 근처의 구조는 곧 이해할 수 없습니다 ...