駅すばあと

index.html

<div class="highlight"><pre><code>
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0",cache-control="no-cache, max-age=5">
 <script src="./index.js"></script>

<title>駅すばあと</title>
</head>
<body>

  <p>駅コード検索</p>
  <p>駅名：<input type="text" title = "name" id ="stationName">
  <button type="submit" id="searchCode" onclick="callApiCode()" >駅コード検索ボタン</button></p>
  <p>駅コード：<input type ="text" title = "code"  readonly="readonly"  id="code"></p>
  </br>
  <p>経路検索</p>
  <p>開始：<input type="text" title = "開始" oninput="searchST(1)"  id ="stationFrom">
  <div  id="stationList:1" style="display:none"> </div>
  <p>到達：<input type="text" title = "到達" oninput="searchST(2)"  id ="stationTo">
  <div  id="stationList:2" style="display:none"> </div>
  <button type="submit" id="searchRuter" onclick="callApiRuter()" >経路検索ボタン</button></p>

  <p><div id="courseInfo" ></div></p>
 
</html>
</code></pre>


index.js

<pre><code>

async function callApiCode() {

  // "%E5%B7%9D%E5%8F%A3%E9%A7%85";
  const stationName = "&name=" + document.getElementById("stationName").value;
  const type = "&type=" + "train";
  const res = await fetch("https://api.ekispert.jp/v1/json/station/light?key=0123456789123456" + stationName + type);

  const resp = await res.json();
  var status = res.status;
  document.getElementById("code").value = "";
  if (status = 400) {
    var errorMesg;
    var altMesg;
    errorMesg = resp.ResultSet.Error;
    if (errorMesg != undefined) {
      altMesg = errorMesg.Message;
      alert(altMesg);
    }
  }
  if (resp.ResultSet.Point != undefined) {
    var code;
    if (resp.ResultSet.Point instanceof Array) {
      code = resp.ResultSet.Point[0].Station.code;
    } else {
      code = resp.ResultSet.Point.Station.code;
    }
    document.getElementById("code").value = code;
  }
};

async function callApiRuter() {
  // https://api.ekispert.jp/v1/xml/operationLine?key=0123456789123456 JR電車
  // viaList: 東京:川口
  // date: 20240603
  // searchType: plain
  // sort: teiki
  // answerCount: 20
  // conditionDetail: T3111133232329:F3321121122000:A23121141:
  // key=0123456789123456&name=t&type=train:plane:ship:bus.connection:bus.highway:bus.midnight

  const url = "https://api.ekispert.jp/v1/json/search/course/extreme?key=0123456789123456";
  const fromST = document.getElementById("stationFrom").value;
  const toST = document.getElementById("stationTo").value;
  const viaList = "&viaList=" + fromST + ":" + toST;
  const date = "&date=" + "20240603";
  const searchType = "&searchType=" + "plain";
  const sort = "&sort=" + "teiki";
  const answerCount = "&answerCount=" + "20";
  const conditionDetail = "&conditionDetail=" + "T3111133232329:F3321121122000:A23121141:";

  const res = await fetch(url + viaList + date + searchType + sort + answerCount + conditionDetail);
  var status = res.status;
  const resp = await res.json();

  var courseInfoHtml = document.getElementById("courseInfo");
  courseInfoHtml.innerHTML = "";

  document.getElementById('stationList:1').innerHTML = "";
  document.getElementById('stationList:2').innerHTML = "";

  if (status = 400) {
    var errorMesg;
    var altMesg;
    errorMesg = resp.ResultSet.Error;
    if (errorMesg != undefined) {
      errorMesg.Message instanceof Array ? altMesg = errorMesg.Message[0].text : altMesg = errorMesg.Message
      alert(altMesg);
      return;
    }

  }
  // 松戸営業所／京成ﾊﾞｽ
  // 松戸駅／京成ﾊﾞｽ
  if (status = 200) {
    // console.log(resp);
    var displayRuterInfo;
    var courses = resp.ResultSet.Course;
    var innerHtmlStr = '';

    if (courses != undefined) {

      var coursesArry = new Array();
      courses instanceof Array ? coursesArry = courses : coursesArry.push(courses);
      // 経路情報取得
      coursesArry.forEach((course, index) => {
        var btName = '非表示'
        index == 0 ? btName = '非表示' : btName = '表示';
        var classDisplay = '"display:block"';
        index == 0 ? classDisplay = '"display:block"' : classDisplay = '"display:none"';

        innerHtmlStr = innerHtmlStr + '<p> ' + ('00' + parseInt(index + 1)).slice(-2) + ' <button id="buttonDisplay' + index + '" onclick=callHidden(' + index.toString() + ') >' + btName + '</button>'
        innerHtmlStr = innerHtmlStr + '<p><div id="routeDIV' + index + '" style =' + classDisplay + '>';
        displayRuterInfo = ""

        var lines = course.Route.Line;
        var points = course.Route.Point;
        // ポイント情報取得
        points.forEach((point, index) => {
          var linesName = ''
          if (lines instanceof Array) {
            if (index < Object.keys(lines).length) {
              linesName = ':' + lines[index].Name + ':' + lines[index].direction + ':';

            } else {
              linesName = '';
            }
          } else {
            index == 0 ? linesName = ':' + lines.Name + ':' + lines.direction + ':' : '';
          }
          displayRuterInfo = displayRuterInfo + point.Station.Name + linesName;
        })
        innerHtmlStr = innerHtmlStr + '<P>' + parseInt(index + 1) + '. 経路：' + displayRuterInfo + '</p>';
        innerHtmlStr = innerHtmlStr + '<P>所要時間 (乗車 ：' + course.Route.timeOnBoard + ' その他 ：' + course.Route.timeOther + ' 徒歩 ：' + course.Route.timeWalk + ')分' + '</p>';
        innerHtmlStr = innerHtmlStr + '<P>距離 ：' + (parseInt(course.Route.distance) / 10).toString() + ' km' + '</p>';
        innerHtmlStr = innerHtmlStr + '<P>乗換回数 ：' + course.Route.transferCount + '</p>';
        var price = course.Price;
        var fareSummary;
        var teiki1 = 0;
        var teiki2 = 0;
        var teiki3 = 0;
        price.forEach((value) => {
          if (value.kind == "FareSummary") { fareSummary = value.Oneway; };
          if (value.Oneway != undefined) {
            if (value.kind == "Teiki1Summary") { teiki1 = teiki1 + parseInt(value.Oneway); };
            if (value.kind == "Teiki3Summary") { teiki2 = teiki2 + parseInt(value.Oneway); };
            if (value.kind == "Teiki6Summary") { teiki3 = teiki3 + parseInt(value.Oneway); };
          }
        });
        innerHtmlStr = innerHtmlStr + '<P> 片道金額 ：' + fareSummary + '</p>';
        innerHtmlStr = innerHtmlStr + '<P> 一か月定期代金 ：' + teiki1 + '';
        innerHtmlStr = innerHtmlStr + '； 三か月定期代金 ：' + teiki2 + '';
        innerHtmlStr = innerHtmlStr + '； 六か月定期代金 ：' + teiki3 + '</p></div>';

      });
      courseInfoHtml.innerHTML = innerHtmlStr
    }
  }
};
// ボタン表示制御
function callHidden(index) {
  var divHtml = document.getElementById('routeDIV' + index);
  var btnHtml = document.getElementById('buttonDisplay' + index);
  divHtml.getAttribute('style') == 'display:none' ? divHtml.setAttribute('style', 'display:block') : divHtml.setAttribute('style', 'display:none');
  btnHtml.innerHTML == '非表示' ? btnHtml.innerHTML = '表示' : btnHtml.innerHTML = '非表示';
}
// 駅名検索
async function searchST(num) {
  var inputword
  num.toString() == '1' ? inputword = document.getElementById("stationFrom").value : inputword = document.getElementById("stationTo").value

  // console.log('onchange:', inputword);
  var div_stationList = document.getElementById('stationList:' + num);
  div_stationList.innerHTML = "";
  if (inputword != '') {
    div_stationList.setAttribute('style', 'display:block;background-color:#F5F5F5;padding-top:15px;padding-bottom:15px;margin: 0 20px 0 20px;')
    var url = 'https://api.ekispert.jp/v1/json/station/light?key=0123456789123456&name=' + inputword + '&type=train:plane:ship:bus.connection:bus.highway:bus.midnight'
    const res = await fetch(url);
    var status = res.status;

    const resp = await res.json();
    div_stationList.innerHTML = serchLists(resp.ResultSet, num)

  } else {
    div_stationList.setAttribute('style', 'display:none')
  }
}

function inputMethod(index, num) {
  var inputTextBox
  num.toString() == '1' ? inputTextBox = document.getElementById("stationFrom") : inputTextBox = document.getElementById("stationTo")
  console.log(inputTextBox);
  inputTextBox.value = document.getElementById('stationRow:' + index).innerHTML
  clearWord(num);
}
// 駅名リスト作る
function serchLists(resp, num) {
  var retString = ''
  var respPiont = new Array();

  if (resp.Point == undefined) { return retString; }

  var courseInfoHtml = document.getElementById("courseInfo");
  courseInfoHtml.innerHTML = "";

  resp.Point instanceof Array ? respPiont = resp.Point : respPiont.push(resp.Point);
  var trainSTNum = 0;
  var busTNum = 0;
  var planeTNum = 0;

  respPiont.forEach((obj) => {
    obj.Station.Type == 'train' ? trainSTNum++ : trainSTNum = trainSTNum;
    obj.Station.Type.text == 'bus' ? busTNum++ : busTNum = busTNum;
    obj.Station.Type == 'plane' ? planeTNum++ : planeTNum = planeTNum;
  })

  if (trainSTNum > 0) { retString = retString + '<div id="stationSelect1">電車駅　' + trainSTNum.toString() + ' 件</div><ul>' }
  respPiont.forEach((obj, index) => {
    if (obj.Station.Type == 'train') {
      retString = retString + getstationRow(index, num, obj.Station.Name);
    }
  });
  retString = retString + '</ul>'

  if (busTNum > 0) { retString = retString + '<div id="stationSelect2">バス駅　' + busTNum.toString() + ' 件</div><ul>' }
  respPiont.forEach((obj, index) => {
    if (obj.Station.Type.text == 'bus') {
      retString = retString + getstationRow(index, num, obj.Station.Name);
    }
  });

  retString = retString + '</ul>'
  if (planeTNum > 0) { retString = retString + '<div id="stationSelect3">空港　' + planeTNum.toString() + ' 件</div><ul>' }
  respPiont.forEach((obj, index) => {
    if (obj.Station.Type == 'plane') {
      retString = retString + getstationRow(index, num, obj.Station.Name);
    }
  });
  retString = retString + '</ul>'
  return retString;
}
// 駅名取得
function getstationRow(index, num, name) {
  var indexNum = 0;
  indexNum = (parseInt(index) + parseInt(num) * 100)
  return '<li><div><a id="stationRow:' + indexNum + '" href="Javascript:inputMethod(' + indexNum + ',' + num + ');void(0);" >' + name + '</a></div></li>';

}
// クリア
function clearWord(num) {
  var div_stationList = document.getElementById('stationList:' + num);
  div_stationList.innerHTML = "";
  div_stationList.setAttribute('style', 'display:none')
}
</code></pre>


 *  サンプルコード
 *  https://github.com/EkispertWebService/GUI