yochn/index.html

## 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>

      <!-- cdジャケット写真9個並べる -->
      <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>

    <!-- 選択したcdの詳細表示 -->
    <div id="detail" v-if="detailFlag">
      <img v-bind:src="selectedImg" width="500px" />
      <ul v-if="trackdata" id="trackdata">
        アーティスト名：{{artist}}<br />
        曲名：{{track}}<br />
        アルバム／シングル名：{{album}}<br />
      </ul>
      <button @click="backList()">戻る</button>
      <button @click="nextList()">次へ</button>
    </div>

    <!-- 選択したcdの類似アーティストのid表示 -->
    <div id="nextArtist" v-if="nextArtistFlag">
      <!-- <ul v-if="genredata">
        <div v-for="n in 9">アーティストid：{{genreid[n-1]}}</div>
      </ul> -->
      <button @click="nextsong()">cdジャケット表示</button>
    </div>

    <!-- 類似アーティストのトップソング表示 -->
    <div id="nextsong" v-if="nextsongFlag">
      <ul v-if="nextdata" id="nextdata">
        <div v-for="n in 9">
          <div :id="nextimg[n-1]" style="text-align: center">
            <img v-bind:src="nextimg[n-1]" width="350px" @click="gonextDetail(n-1)" />
            <iframe height="50" width="350" :src="nextpreview[n-1]" frameborder="0"></iframe>
          </div>
        </div>
      </ul>
    </div>

    <!-- 選択した類似アーティストcdの詳細表示 -->
    <div id="nextdetail" v-if="nextdetailFlag">
      <img v-bind:src="selectnextImg" width="500px" />
      <ul v-if="nexttrackdata" id="nexttrackdata">
        アーティスト名：{{artist}}<br />
        曲名：{{track}}<br />
        アルバム／シングル名：{{album}}<br />
      </ul>
      <button @click="backnextList()">戻る</button>
      <button @click="nextList()">次へ</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: "",
          genredata: "",
          nextdata: "",
          nexttrackdata: "",
          item: "",
          img: [],
          random: [],
          preview: [],
          artist: "",
          selectArtistid: "",
          track: "",
          album: "",
          genreid: [],
          nextimg: [],
          nextpreview: [],
          listFlag: true,
          detailFlag: false,
          nextArtistFlag: false,
          nextsongFlag: false,
          nextdetailFlag: false,
          selectedNum: 0,
        };
      },
      methods: {
        //ボタンを押すとAPIでとったデータを表示する

        //プレイリストからCDジャケット写真の表示
        getAPIdata: function() {
          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch("./list")
            .then(function(res) {
              return res.json(); //responseをjson形式で返す
            })
            .then(function(data) {
              self.appdata = data; //appdataにとってきたデータを代入する
              self.item = data.items;
              for (let i = 0; i < 9; i++) {
                while (true) {
                  self.randoms = Math.floor(Math.random() * self.item.length);
                  if (!self.random.includes(self.randoms)) {
                    self.random.push(self.randoms);
                    break;
                  }
                }
              }
              for (let i = 0; i < 9; i++) {
                const addURL =
                  data.items[self.random[i]].track.album.images[0].url;
                self.img.push(addURL);
              }
              for (let i = 0; i < 9; i++) {
                const preURL = data.items[self.random[i]].track.preview_url;
                self.preview.push(preURL);
              }
            });
        },

        //選択したCDジャケットの詳細表示
        goDetail: function(num) {
          this.selectedNum = num;
          this.listFlag = false;
          this.detailFlag = true;

          const self = this;
          fetch("./list")
            .then(function(res) {
              return res.json();
            })
            .then(function(data) {
              self.trackdata = data;
              self.item = data.items;
              self.artist =
                data.items[self.random[num]].track.album.artists[0].name; //アーティスト名
              self.track = data.items[self.random[num]].track.name; //曲名
              self.album = data.items[self.random[num]].track.album.name; //アルバム名
              self.selectArtistid =
                data.items[self.random[num]].track.album.artists[0].id; //アーティストID
            });
        },

        //CDジャケットが並ぶ画面に戻る
        backList: function() {
          this.listFlag = true;
          this.detailFlag = false;
        },

        //類似アーティストid表示
        nextList: function() {
          this.detailFlag = false;
          this.nextArtistFlag = true;
          this.nextdetailFlag = false;

          const self = this;
          fetch("./genre/" + self.selectArtistid)
            .then(function(res) {
              return res.json();
            })
            .then(function(data) {
              self.genredata = data;
              self.genreid = []; // 一旦初期化
              for (let i = 0; i < 9; i += 1) {
                self.genreid.push(data.artists[i].id);
              }
            });
        },

        //類似アーティストのCDジャケット表示
        nextsong: function() {
          const self = this;
          for (let i = 0; i < 9; i += 1) {
            fetch("./next/" + self.genreid[i])
              .then(function(res) {
                return res.json();
              })
              .then(function(data) {
                self.nextdata = data;

                const nextimgURL = data.tracks[0].album.images[0].url;
                self.nextimg[i] = nextimgURL;
                const nextpreURL = data.tracks[0].preview_url;
                self.nextpreview[i] = nextpreURL;
              });
            self.nextimg = [];
                self.nextpreview = [];
          }

          this.nextArtistFlag = false;
          this.nextsongFlag = true;
        },

        //選択した類似アーティストの詳細表示
        gonextDetail: function(num) {
          this.selectedNum = num;
          this.nextsongFlag = false;
          this.nextdetailFlag = true;

          const self = this;
          fetch("./next/" + self.genreid[num])
            .then(function(res) {
              return res.json();
            })
            .then(function(data) {
              self.nexttrackdata = data;
              self.artist = "";
              self.track = "";
              self.album = "";
              self.selectArtistid = "";
              self.artist = data.tracks[0].artists[0].name; //アーティスト名
              self.track = data.tracks[0].name; //曲名
              self.album = data.tracks[0].album.name; //アルバム名
              self.selectArtistid = data.tracks[0].artists[0].id; //アーティストID
            });
        },

        //類似アーティストのCDジャケットが並ぶ画面に戻る
        backnextList: function() {
          this.nextsongFlag = true;
          this.nextdetailFlag = false;
        },
      },
      computed: {
        selectedImg: function() {
          return this.img[this.selectedNum];
        },
        selectnextImg: function() {
          return this.nextimg[this.selectedNum];
        },
      },
    });

  </script>
</body>

</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>

	<!-- cdジャケット写真9個並べる -->
	<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>

	<!-- 選択したcdの詳細表示 -->
	<div id="detail" v-if="detailFlag">
	<img v-bind:src="selectedImg" width="500px" />
	<ul v-if="trackdata" id="trackdata">
	アーティスト名：{{artist}}<br />
	曲名：{{track}}<br />
	アルバム／シングル名：{{album}}<br />
	</ul>
	<button @click="backList()">戻る</button>
	<button @click="nextList()">次へ</button>
	</div>

	<!-- 選択したcdの類似アーティストのid表示 -->
	<div id="nextArtist" v-if="nextArtistFlag">
	<!-- <ul v-if="genredata">
	<div v-for="n in 9">アーティストid：{{genreid[n-1]}}</div>
	</ul> -->
	<button @click="nextsong()">cdジャケット表示</button>
	</div>

	<!-- 類似アーティストのトップソング表示 -->
	<div id="nextsong" v-if="nextsongFlag">
	<ul v-if="nextdata" id="nextdata">
	<div v-for="n in 9">
	<div :id="nextimg[n-1]" style="text-align: center">
	<img v-bind:src="nextimg[n-1]" width="350px" @click="gonextDetail(n-1)" />
	<iframe height="50" width="350" :src="nextpreview[n-1]" frameborder="0"></iframe>
	</div>
	</div>
	</ul>
	</div>

	<!-- 選択した類似アーティストcdの詳細表示 -->
	<div id="nextdetail" v-if="nextdetailFlag">
	<img v-bind:src="selectnextImg" width="500px" />
	<ul v-if="nexttrackdata" id="nexttrackdata">
	アーティスト名：{{artist}}<br />
	曲名：{{track}}<br />
	アルバム／シングル名：{{album}}<br />
	</ul>
	<button @click="backnextList()">戻る</button>
	<button @click="nextList()">次へ</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: "",
	genredata: "",
	nextdata: "",
	nexttrackdata: "",
	item: "",
	img: [],
	random: [],
	preview: [],
	artist: "",
	selectArtistid: "",
	track: "",
	album: "",
	genreid: [],
	nextimg: [],
	nextpreview: [],
	listFlag: true,
	detailFlag: false,
	nextArtistFlag: false,
	nextsongFlag: false,
	nextdetailFlag: false,
	selectedNum: 0,
	};
	},
	methods: {
	//ボタンを押すとAPIでとったデータを表示する

	//プレイリストからCDジャケット写真の表示
	getAPIdata: function() {
	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	fetch("./list")
	.then(function(res) {
	return res.json(); //responseをjson形式で返す
	})
	.then(function(data) {
	self.appdata = data; //appdataにとってきたデータを代入する
	self.item = data.items;
	for (let i = 0; i < 9; i++) {
	while (true) {
	self.randoms = Math.floor(Math.random() * self.item.length);
	if (!self.random.includes(self.randoms)) {
	self.random.push(self.randoms);
	break;
	}
	}
	}
	for (let i = 0; i < 9; i++) {
	const addURL =
	data.items[self.random[i]].track.album.images[0].url;
	self.img.push(addURL);
	}
	for (let i = 0; i < 9; i++) {
	const preURL = data.items[self.random[i]].track.preview_url;
	self.preview.push(preURL);
	}
	});
	},

	//選択したCDジャケットの詳細表示
	goDetail: function(num) {
	this.selectedNum = num;
	this.listFlag = false;
	this.detailFlag = true;

	const self = this;
	fetch("./list")
	.then(function(res) {
	return res.json();
	})
	.then(function(data) {
	self.trackdata = data;
	self.item = data.items;
	self.artist =
	data.items[self.random[num]].track.album.artists[0].name; //アーティスト名
	self.track = data.items[self.random[num]].track.name; //曲名
	self.album = data.items[self.random[num]].track.album.name; //アルバム名
	self.selectArtistid =
	data.items[self.random[num]].track.album.artists[0].id; //アーティストID
	});
	},

	//CDジャケットが並ぶ画面に戻る
	backList: function() {
	this.listFlag = true;
	this.detailFlag = false;
	},

	//類似アーティストid表示
	nextList: function() {
	this.detailFlag = false;
	this.nextArtistFlag = true;
	this.nextdetailFlag = false;

	const self = this;
	fetch("./genre/" + self.selectArtistid)
	.then(function(res) {
	return res.json();
	})
	.then(function(data) {
	self.genredata = data;
	self.genreid = []; // 一旦初期化
	for (let i = 0; i < 9; i += 1) {
	self.genreid.push(data.artists[i].id);
	}
	});
	},

	//類似アーティストのCDジャケット表示
	nextsong: function() {
	const self = this;
	for (let i = 0; i < 9; i += 1) {
	fetch("./next/" + self.genreid[i])
	.then(function(res) {
	return res.json();
	})
	.then(function(data) {
	self.nextdata = data;

	const nextimgURL = data.tracks[0].album.images[0].url;
	self.nextimg[i] = nextimgURL;
	const nextpreURL = data.tracks[0].preview_url;
	self.nextpreview[i] = nextpreURL;
	});
	self.nextimg = [];
	self.nextpreview = [];
	}

	this.nextArtistFlag = false;
	this.nextsongFlag = true;
	},

	//選択した類似アーティストの詳細表示
	gonextDetail: function(num) {
	this.selectedNum = num;
	this.nextsongFlag = false;
	this.nextdetailFlag = true;

	const self = this;
	fetch("./next/" + self.genreid[num])
	.then(function(res) {
	return res.json();
	})
	.then(function(data) {
	self.nexttrackdata = data;
	self.artist = "";
	self.track = "";
	self.album = "";
	self.selectArtistid = "";
	self.artist = data.tracks[0].artists[0].name; //アーティスト名
	self.track = data.tracks[0].name; //曲名
	self.album = data.tracks[0].album.name; //アルバム名
	self.selectArtistid = data.tracks[0].artists[0].id; //アーティストID
	});
	},

	//類似アーティストのCDジャケットが並ぶ画面に戻る
	backnextList: function() {
	this.nextsongFlag = true;
	this.nextdetailFlag = false;
	},
	},
	computed: {
	selectedImg: function() {
	return this.img[this.selectedNum];
	},
	selectnextImg: function() {
	return this.nextimg[this.selectedNum];
	},
	},
	});

	</script>
	</body>

	</html>
No results found