RailsでSpotify APIを叩く

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

# Spotify API
まずは登録が必要です。[こちら](https://developer.spotify.com/dashboard/)から。
既にSpotifyのアカウントをお持ちの方はそちらでログインしてください。

![spotify_dashboard.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396318/d517057c-a221-a1b0-95c7-262552588d79.jpeg)

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

![spotify_commercial.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396318/c7c6cad5-dc93-ddc6-3db7-e84b6ed920ac.jpeg)

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

![spotify_submit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396318/9fa427f4-e81a-8754-0db0-59c5f89cfcb4.jpeg)

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

![spotify_done.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396318/257ce297-b9ca-2e78-0f58-468332da873e.jpeg)

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

# Authorization
Spotifyの認証方法は[こちら](https://developer.spotify.com/documentation/general/guides/authorization-guide/)にある通り3種類あります。
今回は曲の情報を取得するだけなので「Client Credentials」を使いました。

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

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

```ruby

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](https://github.com/gazay/gon)というgemを用いて取得したアクセストークンを変数に入れています。

# アルバムを検索
[こちら](http://jsfiddle.net/JMPerez/0u0v7e1b/)を参考に作りました。

```javascript

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);
        }
      });
  }
```

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

```javascript
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();
      }
    });
  });
};
```

[こちら](https://developer.spotify.com/documentation/web-api/reference/albums/get-album/)を参考に、選択したアルバムのIDを取得し、URLに入れました。


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