<h1 class="bandname">はっぴいえんど</h1>
<div class="spec">
  <section class="album">
    <h2 class="title"></h2>
    <p class="release"></p>
    <ol class="track"></ol>
  </section>
</div>
</section>

//jsonファイルURL
var dmain = 'dl.dropboxusercontent.com';
var directory = 's/x6tsr4ah8cfe9ta';
var file = 'happyend';
var url = 'https://' + dmain + '/' + directory + '/' + file + '.json';

//json読み込み
  fetch(url)
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {

    //外枠アクセス
    var spec = document.querySelector('.spec');

    //テンプレ複製
    //（アルバム枚数-1枚）
    for (var i=1; i < json.length; i++) {
      var clone = spec.firstElementChild.cloneNode(true);
      spec.appendChild(clone);
    }
    
    //タイトル、発売日、曲名アクセス
    var specTitle = document.querySelectorAll('.title');
    var specRelease = document.querySelectorAll('.release');
    var specTrack = document.querySelectorAll('.track');
    
    //アルバムデータ入力（アルバム枚数分）
    for (var i=0; i < json.length; i++) {  
      //タイトル入力
      specTitle[i].innerHTML = json[i].title;
      //発売日入力
      specRelease[i].innerHTML = json[i].release;
      //曲名入力（曲数分ループ）
      for(var t=0; t < json[i].track.length; t++) {
        var list = document.createElement('li');
        list.innerHTML= json[i].track[t];
       specTrack[i].appendChild(list);        
      }
    }
  });