RailsでSpotify APIを叩く

10394 ワード
Rails Spotify 初心者 api 未経験エンジニア Rails テキストリンク

前回の投稿でも書いたアプリの続き、曲と場所を投稿に紐付けたときのメモです。
タイトルにある通りSpotifyのAPIを使用しました。

Spotify API

まずは登録が必要です。こちらから。
既にSpotifyのアカウントをお持ちの方はそちらでログインしてください。

ログインするとこのような画面が出てくるので「CREATE A CLIENT ID」をクリックしてアプリの名前、概要、何を作るのかを入力します。

するとこんな画面になります。商用で使う場合は別途色々あるようです。今回は商用ではないので「NO」を選択します。

商用利用ではないですよーとの確認が出るのでチェックすると、

とこんな感じでできました。CLIENT IDとCLIENT SECRETは後ほど使います。

Authorization

Spotifyの認証方法はこちらにある通り3種類あります。
今回は曲の情報を取得するだけなので「Client Credentials」を使いました。

curlを使ってAccess Tokenを取得するのですが、Railsでやるにはどうすればよいか悩んでいたところ、curlコマンドをRubyに変換してくれるこんなサイトを見つけました。
curl-to-ruby

こちらにcurlコマンドを打ち込んで変換されたものをコントローラに貼ります。
今回は曲を選択する「songselect」というページにアクセスした際にアクセストークンを取得するようにしました。
先程ログインした際に取得したCLIENT IDとCLIENT SECRETをここで使います。


def songselect
    @post = Post.find_by(id: params[:id])
    require 'net/http'
    require 'uri'

    uri = URI.parse("https://accounts.spotify.com/api/token?grant_type=client_credentials")
    request = Net::HTTP::Post.new(uri)
    request.content_type = "application/x-www-form-urlencoded"
    request["Authorization"] = "Basic (CLIENT IDとCLIENT SECRETをbase64でエンコードしたもの)"

    req_options = {
      use_ssl: uri.scheme == "https",
    }

    response = Net::HTTP.start(uri.hostname, uri.port, req_options) do |http|
      http.request(request)
    end

    # response.code
    # response.body
    auth_params = JSON.parse(response.body)
    gon.token = auth_params["access_token"]
end

後ほど曲を検索・取得するのにajaxを使うのでgonというgemを用いて取得したアクセストークンを変数に入れています。

アルバムを検索

こちらを参考に作りました。


var searchAlbums = function (query) {
    $.ajax({
        url: 'https://api.spotify.com/v1/search',
        headers: {
                  'Authorization': 'Bearer ' + gon.token
                },
        data: {
            q: query,
            type: 'album,artist,track'
        },
        success: function (response) {
            resultsPlaceholder.innerHTML = template(response);
        }
      });
  }

ヘッダーに先程取得したアクセストークンを入れてます。
アーティスト名で検索するとアルバム一覧が出てきます。
割愛しますが、アルバム一覧にラジオボタンを設置し、選択するとそのアルバムに収録されている曲一覧が表示されるようにしました。

var fetchTracks = function(){
  $('[name=select_album]').change(function(){
    checkedAlbumId = $("input[name='select_album']:checked").val();
    $.ajax({
      headers: {
                  'Authorization': 'Bearer ' + gon.token
                },
      url: 'https://api.spotify.com/v1/albums/' + checkedAlbumId,
      success: function(response){
        resultsPlaceholder2.innerHTML = template2(response);
        $('#album_info').fadeIn();
      }
    });
  });
};

こちらを参考に、選択したアルバムのIDを取得し、URLに入れました。

これでひとまずSPotify APIを叩いて情報を取得することができました。
30秒だけ試聴できるプレーヤーも設置できるみたいなので手を加えて機能追加していきたいと思います！