APIを使って音楽を聴くきっかけを作ろう②

ヨコチ🦖UGOK
2020/07/27 18:01

お久しぶりです。UGOKのヨコチ🦖です。

前回までは自分が今後制作するウェブアプリケーションに似ている既存のウェブアプリケーションや論文についてまとめていました。今回からは実際にウェブアプリケーションを作っていこうと思います。

制作していくウェブアプリケーションの概要はこちらです。

今回やること

Node.jsというコマンドプロンプトを使用してSpotify Web APIを使ってみる。手始めに自分のユーザー情報を取得し、ウェブ上に表示させてみる。

Spotify Web APIのチュートリアルを翻訳した過去などがありますが、実際に作るとなると全くわからず進まずだったので、偉大な先生のお力と偉大なネットのお力を存分に頼らせていただきました😊🎶

//node.jsにインストールするもの
const express = require('express');
const request = require('request');
const cors = require('cors');
const app = express();

// CORSの設定
app.use(cors());

// webフォルダの中身を公開する
app.use(express.static('web'));

// API
app.get('/list', (req, res) =&gt; { // /listというものが含まれているときに行う反応
  
  var client_id = ' '; //SpotifyのクライアントID
  var client_secret = ' '; //Spotifyのクライアントシークレット

  //認証を行う
  var authOptions = {
    url: 'https://accounts.spotify.com/api/token',
    headers: {
      'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
    },
    form: {
      grant_type: 'client_credentials'
    },
    json: true //基本固定
  };

  //取りたい情報は何か、目的のための命令
  request.post(authOptions, function (error, response, body) {
    if (!error &amp;amp;&amp;amp; response.statusCode === 200) { //こういう書き方をする

      //アクセストークンを使ってAPIを使いデータを取ってくる
      var token = body.access_token;
      var options = {
        url: 'https://api.spotify.com/v1/users/gwuv8fcoawadj2lds1lefiv3h',
        headers: {
          'Authorization': 'Bearer ' + token
        },
        json: true
      };

      request.get(options, function (error, response, body) {
        res.json(body);
      });
    }
  });
});

//3000というポート番号（サーバー）に表示させる
app.listen(3000, () =&gt; console.log('Listening on port 3000'));

SpotifyのクライアントID、クライアントシークレットは事前に取得し、先に入力しておく形にしています。今回は、自分のユーザー情報を取得したいので、「url:'https://api.spotify.com/v1/users/{user_id}'」という形の中の{user_id}の部分に自身のIDである'gwuv8fcoawadj2lds1lefiv3h'を入力しました。

このように、欲しい情報をリクエストした後は、得た情報を表示させます。

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;body&gt;
  &lt;div id="app"&gt;
    &lt;button @click="getAPIdata()"&gt;APIデータの取得&lt;/button&gt;
    &lt;ul v-if="appdata"&gt;
      //apiデータ内からキーとデータをきれいに表示させる
      &lt;li v-for="(data, key) in appdata"&gt;
        {{key}}: {{data}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

  &lt;!-- JavaScript --&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

  &lt;script&gt;
    let app = new Vue({
      el: '#app',
      data: function() {
        return {
          appdata: ''
        }
      },
      methods: {
        //ボタンを押すとAPIでとったデータを表示する
        getAPIdata: function() {
          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch('./list').then(function(res) { // /listというものに対する命令
            return res.json(); //responseをjson形式で返す
          }).then(function(data) {
            self.appdata = data; //appdataにとってきたデータを代入する
          });
        }
      }
    });
  &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Vue.jsを使ってとってきた情報を表示させています。また、情報を取得したことがわかりやすいようにボタンを作成し、ボタンを押すことでデータを表示させるようにしました。

実行結果

Content image — Spotify Web APIを使って自分のユーザー情報を表示させてみた❕

ユーザー情報として、以下の8個の情報を取得することができます。

・display_name（ユーザー名）
・external_urls（このユーザーの、外部に公開されているURL）
・followers（このユーザーのフォロワーに関する情報）
・href（このユーザーのWeb APIエンドポイントへのリンク）
・id（このユーザーのSpotify user ID）
・images（ユーザーのプロフィール画像）
・type（オブジェクトタイプ）
・uri（このユーザーのSpotify URI）

アカウントを作ったばかり、そして全然利用していないこともあり、フォロワーの数やプロフィール画像の値が空白であったりしますがちゃんと自分のアカウントの情報を取得することができました！☺