Apple APIをRuby on Railsで使ってみよう！

アジェンダ

• この記事の対象者
• 開発環境
• 注意
• 目的
• 手順
• おわりに
• 参考資料

この記事の対象者

• railsの基礎を学び、もう少し発展的な機能を実装してみたい！
• apiを使ってみたい！

開発環境

• Rails5
• windows10
• vagrant

注意

　アプリの準備等はご自身でお願いいたします。(scaffoldでもよい）
　その他each等の基礎事項については特に解説しておりません。
　

目標

　apple music上の曲を検索して自分のアプリで表示する

手順

1.itunes-search-apiのgemを導入する

ターミナル.

 gem install itunes-search-api

2.ソースファイルを編集する
　１でインストールしたバージョンは古いので、対象ファイルを書き換えていきます。
　具体的には、アプリケーション/lib配下にitunes-search-api.rbファイルを作成し、
　その中に下記のコードを貼り付けます。

lib/itunes-search-api.rb

require 'httparty'

class ITunesSearchAPI
  include HTTParty
  base_uri 'https://itunes.apple.com'
  format :json

  class << self
    def search(query={})
      get("/search", :query => query)["results"]
    end

    def lookup(query={})
      get("/lookup", :query => query)["results"]
    end
  end
end

今回は検索のみなのでlookupは不要な気がしますが、一応書いておきます。

3.検索機能を実装していく
- 任意のcontrollerファイルに下記を記述してみましょう。

search.controller.rb

require 'itunes-search-api'
# この記述で先ほど導入したitunes-search-apiを呼び出す

def search
      @searchs = ITunesSearchAPI.search(
           :term => params[:term],
           :country => 'jp',
           :media => 'music',
           :lang => 'ja_jp'
           :limit => '4'
           )
           #limitで検索結果の表示数を決める。
           #4件では少ないのでページネーションを用いて数を増やした方が見栄えは良い。
end

これで検索して楽曲の情報を取り込むことはできるようになった。

4.検索結果をhtmlに出力する
では楽曲の情報がどのように取り込まれているのかを見ていこう。
search.controller.rbに記述を加える。

search.controller.rb

require 'itunes-search-api'

def search
      @searchs = ITunesSearchAPI.search(
           :term => params[:term],
           :country => 'jp',
           :media => 'music',
           :lang => 'ja_jp'
           :limit => '4'
           ).each do |item|
                p item
           end
end

eachで一つひとつの楽曲の情報をターミナルに出力します。
ターミナルで"collectionId"=> ~~~~~~~ や"trackId"=> ~~~~~~~ という出力を探してみましょう。
その二つの ~~~~~~~ の数字が楽曲を表示する際に必要になるものです。
ではそれをもとにコードをかいていきましょう。

search.html.erb

<% @searchs.each do |track| %>

       <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/jp/album/%E7%82%8E/<%= track['collectionId'] %>?i=<%= track['trackId'] %>"></iframe>

<% end %>

とても長いですね…
これはapplemusic公式サイトから埋め込みコードを引っ張ってきて、少々コードを改変したものです。
<%=track['collectionId'] %>, <%=track['trackId'] %>の中にeachで取り出した|track|の先ほどの数字が入るようになっています。

その前のstyle等は装飾の部分なので、ご自身で調べて変更するのもよいでしょう。

おわりに

長くなりましたが以上になります。
track['']によって楽曲の情報を取り出せるので、使い方次第では詳細ページやいいね機能なども作れます。
もし気に入っていただけたらＬＧＴＭをしていただけると幸いです。
お疲れ様でした！

参考にしたサイト