yochn/index.html

## gistfile1.txt
//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) => { // /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 && response.statusCode === 200) { //こういう書き方をする

      //アクセストークンを使ってAPIを使いデータを取ってくる
      var token = body.access_token;
      var options = {
        url: 'https://api.spotify.com/v1/playlists/37i9dQZEVXbKXQ4mDTEBXq/tracks',
        headers: {
          'Authorization': 'Bearer ' + token,
          'Accept-Language': 'ja;q=1' //日本語表記にする
        },
        json: true
      };

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

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

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!-- HTML -->
  <div id="app">

    <div id="list" v-if="listFlag">
      <button @click="getAPIdata()">APIデータの取得</button>

      <ul v-if="appdata" id="appdata">
        <div v-for="n in 9">
          <div :id="img[n-1]" style="text-align: center">
            <img v-bind:src="img[n-1]" width="350px" @click="goDetail(n-1)">
            <iframe height="50" width="350" :src="preview[n-1]" frameborder="0"></iframe>
          </div>
        </div>
      </ul>
    </div>

    <div id="detail" v-else>
      <img v-bind:src="selectedImg" width="500px">
      <ul v-if="trackdata" id="trackdata">
        アーティスト名：{{artist}}<br>
        曲名：{{track}}<br>
        アルバム／シングル名：{{album}}
      </ul>
      <button @click="backList()">戻る</button>
    </div>

  </div>

  <!-- JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>
    let app = new Vue({
      el: '#app',
      data: function() {
        return {
          appdata: '',
          trackdata: '',
          item: '',
          img: [],
          preview: [],
          artist: [],
          track: [],
          album: [],
          listFlag: true,
          selectedNum: 0
        }
      },
      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にとってきたデータを代入する
            self.item = data.items;
            for (let i = 0; i < 9; i++) {
              self.addURL = data.items[i].track.album.images[0].url;
              self.img.push(self.addURL);
            }
            for (let i = 0; i < 9; i++) {
              self.preURL = data.items[i].track.preview_url;
              self.preview.push(self.preURL);
            }
          });
        },
        goDetail: function(num) {
          this.selectedNum = num;
          this.listFlag = false;

          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch('./list').then(function(res) { // /listというものに対する命令
            return res.json(); //responseをjson形式で返す
          }).then(function(data) {
            self.trackdata = data; //trackdataにとってきたデータを代入する
            self.item = data.items;
            self.artist = data.items[num].track.album.artists[0].name; //アーティスト名
            self.album = data.items[num].track.album.name; //アルバム名
            self.track = data.items[num].track.name; //曲名
          });
        },
        backList: function() {
          this.listFlag = true;
        }
      },
      computed: {
        selectedImg: function() {
          return this.img[this.selectedNum];
        }
      }
    });

  </script>
</body>

</html>

## style.css
body {
  background-color: #000;
}

#appdata {
  display: grid;
  grid:
    grid-template-rows: 350px 350px 350px;
  grid-template-columns: 350px 350px 350px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-content: center;
}

img:hover {
  opacity: 0.6;
}

#detail img:hover {
  opacity: 1.0;
}
#detail{
  text-align: center;
}


#trackdata {
  text-align: center;
  color: #fff;
}
	//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) => { // /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 && response.statusCode === 200) { //こういう書き方をする

	//アクセストークンを使ってAPIを使いデータを取ってくる
	var token = body.access_token;
	var options = {
	url: 'https://api.spotify.com/v1/playlists/37i9dQZEVXbKXQ4mDTEBXq/tracks',
	headers: {
	'Authorization': 'Bearer ' + token,
	'Accept-Language': 'ja;q=1' //日本語表記にする
	},
	json: true
	};

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

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

	<head>
	<meta charset="UTF-8">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
	<!-- HTML -->
	<div id="app">

	<div id="list" v-if="listFlag">
	<button @click="getAPIdata()">APIデータの取得</button>

	<ul v-if="appdata" id="appdata">
	<div v-for="n in 9">
	<div :id="img[n-1]" style="text-align: center">
	<img v-bind:src="img[n-1]" width="350px" @click="goDetail(n-1)">
	<iframe height="50" width="350" :src="preview[n-1]" frameborder="0"></iframe>
	</div>
	</div>
	</ul>
	</div>

	<div id="detail" v-else>
	<img v-bind:src="selectedImg" width="500px">
	<ul v-if="trackdata" id="trackdata">
	アーティスト名：{{artist}}<br>
	曲名：{{track}}<br>
	アルバム／シングル名：{{album}}
	</ul>
	<button @click="backList()">戻る</button>
	</div>

	</div>

	<!-- JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
	let app = new Vue({
	el: '#app',
	data: function() {
	return {
	appdata: '',
	trackdata: '',
	item: '',
	img: [],
	preview: [],
	artist: [],
	track: [],
	album: [],
	listFlag: true,
	selectedNum: 0
	}
	},
	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にとってきたデータを代入する
	self.item = data.items;
	for (let i = 0; i < 9; i++) {
	self.addURL = data.items[i].track.album.images[0].url;
	self.img.push(self.addURL);
	}
	for (let i = 0; i < 9; i++) {
	self.preURL = data.items[i].track.preview_url;
	self.preview.push(self.preURL);
	}
	});
	},
	goDetail: function(num) {
	this.selectedNum = num;
	this.listFlag = false;

	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	fetch('./list').then(function(res) { // /listというものに対する命令
	return res.json(); //responseをjson形式で返す
	}).then(function(data) {
	self.trackdata = data; //trackdataにとってきたデータを代入する
	self.item = data.items;
	self.artist = data.items[num].track.album.artists[0].name; //アーティスト名
	self.album = data.items[num].track.album.name; //アルバム名
	self.track = data.items[num].track.name; //曲名
	});
	},
	backList: function() {
	this.listFlag = true;
	}
	},
	computed: {
	selectedImg: function() {
	return this.img[this.selectedNum];
	}
	}
	});

	</script>
	</body>

	</html>
	body {
	background-color: #000;
	}

	#appdata {
	display: grid;
	grid:
	grid-template-rows: 350px 350px 350px;
	grid-template-columns: 350px 350px 350px;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	justify-content: center;
	}

	img:hover {
	opacity: 0.6;
	}

	#detail img:hover {
	opacity: 1.0;
	}
	#detail{
	text-align: center;
	}


	#trackdata {
	text-align: center;
	color: #fff;
	}