備忘録のような何か

何か += 備忘録( 日々のこと, 妄想, IT, DIY, 畑仕事 );

【開発日誌/Ruby】楽天ブックス書籍検索APIを使ってみよう

「読書録」って作ったはいいけど、データ入力が面倒なんですよね。
ということで、楽天のwebAPIを使って入力作業の省力化を図りたいと思います。

まずは楽天APIのサイトへ行って、アプリIDを発行してもらいます。
webservice.rakuten.co.jp

楽天にはいろいろな種類のAPIが用意されているけど、
今回は楽天ブックス書籍検索APIを使いますよ。
検索対象が書籍ですからね(*^∀゜)

さて、アプリIDをゲットしたのでプログラムに手を入れていきましょう。
(あーでもない、こーでもないとやりつつ、この形に落ち着くまで2日くらいかかった^^;)

f:id:m_uta:20160214185804j:plain
完成後の見た目はこんな感じ。

まずは、コントローラで検索項目の選択肢を定義します。
とりあえず「タイトル」と「ISBN」だけでお試し。

(app/controllers/books_controller.rb)

  before_action :init_form, only: [:new, :edit]
〜
  private
    def init_form
      @itemSel = {
        :title => "タイトル",
        :isbn  => "ISBN"
      }
    end


次はビューに検索ボックスを追加。

(app/views/books/_form.html.erb)

<%= label :q, "Search for:" %>
<%= select :s, "itemSel", @itemSel.map{|k, v| [v, k]} %>
<%= text_field :q, "search" %>
<%= link_to "Search", {}, {:id => "searchBtn"} %>


APIの呼び出しはJavaScriptで実装します。
CoffeeScriptコンパイルすることでJavaScriptが生成される)を書いたの初めてだったので、
いろいろと苦戦しました。。。
けど、慣れると便利関数とか結構使い勝手がいいかも(・∀・)

(app/assets/javascripts/book.coffee)

$ ->
  $("#searchBtn").click ->
    base = "https://app.rakuten.co.jp/services/api/BooksBook/Search/"
    version = "20130522"
    applicationId = "applicationId=<アプリID>"
    title = getQuery("title", true)
    isbn = getQuery("isbn", false)

    query = title + isbn
    url = base + version + "?" + applicationId + query

    # API呼び出し
    $.ajax({
      type: 'GET',
      url: url,
      dataType: 'jsonp',
      success: (json) ->
        for key, val of json.Items[0].Item
          obj = $("#book_" + key)
          obj.val(val) if obj
    })

    return false

#---------------------------
# 検索条件を取得
getQuery = (key, enc) ->
  if $("#s_itemSel").val() is key
    val = $("#q_search").val()
    val = encodeURIComponent(val) if enc
    return "&" + key + "=" + val
  else
    return ""


最後に、ページ遷移時にJavascriptの読み込みがされないバグ(?)の対応を。

qiita.com
こちらの記事を参考にさせて頂きました。

(Gemfile)

gem 'jquery-turbolinks'


(app/assets/javascripts/application.js)

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks   ←これを追加
//= require turbolinks
//= require_tree .


実装は以上です。ふぅ〜。

ちょっと動かしてみましょう。

f:id:m_uta:20160214191925p:plain
検索条件を入力して、「Searchリンク」をポチッ。

f:id:m_uta:20160214191931p:plain
おぉ!

入力チェックやら、該当の書籍が複数件HITした場合とかとか、
なんも対応してないのでこのままでは使えませんけどねw

(。・ω・)ノシ