すざか市民バス｜Mash up the Linked Open Data

Play
JavaScript
CSS
HTML
概要
保存した実行結果

//アコーディオン//
$('.accordion_dl dd').hide();
$('.accordion_dl dt').click(function(){
    $(this).toggleClass("active");  
    $(this).siblings("dt").removeClass("active");
    $(this).next("dd").slideToggle();
    $(this).next("dd").siblings("dd").slideUp();
});

//路線一覧//
//infoウィンドウの初期化
var currentwindow=null;	// データをLinkDataから取得
addOnload(function() {var fileValue2 = ' suzaka_shiminbus_Line ';
	var workId = "rdf1s3545i";
	var　tmp_a_data =  new Array();
	
	$.each(LinkData.getWorks(), function(workKey, workValue) {
		//$("#result2").append("<h3>Work: " + workValue + "</h3>");
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue2) {
			$.each(LinkData.getSubjects(workValue, fileValue2), function(subjKey, subjValue) {
				var tmp_data = {}
				tmp_data["id"] = subjValue;
				$.each(LinkData.getProperties(workValue, fileValue2), function(propKey, propValue) {
					$.each(LinkData.getObjects(workValue, fileValue2, subjValue, propValue), function(objKey, objValue) {
						if(propValue == "http://imi.ipa.go.jp/ns/core/Core22.html#路線"){
							tmp_data["name"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("furigana")){
							tmp_data["kana"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("days_out_of_service")){
							tmp_data["off"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("up_rout_1")){
							tmp_data["up1"] = objValue;
                        }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("up_rout_2")){
							tmp_data["up2"] = objValue;
	                    }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("up_rout_3")){
							tmp_data["up3"] = objValue;
		                }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("up_rout_4")){
							tmp_data["up4"] = objValue;
			            }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("up_rout_5")){
							tmp_data["up5"] = objValue;
				        }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("up_rout_6")){
							tmp_data["up6"] = objValue;
		                }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_1")){
							tmp_data["down1"] = objValue;
                        }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_2")){
							tmp_data["down2"] = objValue;
	                    }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_3")){
							tmp_data["down3"] = objValue;
		                }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_4")){
							tmp_data["down4"] = objValue;
			            }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_5")){
							tmp_data["down5"] = objValue;
				        }else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_6")){
							tmp_data["down6"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("down_rout_7")){
							tmp_data["down7"] = objValue;
						}else if(propValue == " 	http://imi.ipa.go.jp/ns/core/Core22.html#Webサイト"){
							tmp_data["URL"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("busstop_name")){
							tmp_data["stop"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("min_fare")){
							tmp_data["min"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3545i#" + encodeURIComponent("max_fare")){
							tmp_data["max"] = objValue;
							
						}
					});
				});
				tmp_a_data.push(tmp_data);
			});
		});
	});

//全データ
	all_data = tmp_a_data;
	//路線のデータを表示
	$(".select").append("<option value='-1' selected='selected'>バス路線を選択してください。         </option>");
	for (var i in all_data){
		if (all_data[i].name ){ 
                var all_id=all_data[i].name;

$(".select").append("<option value='"+ all_data[i].id +"'>" + all_data[i].name+ "</option>");
		}
		}

//路線が選択、変更された時の処理
	$(".select").change(function() {
	//詳細データのリセット
		$("#result2").empty();
	//選択された路線の詳細データの表示
		var sectionKey = $("option:selected", $(this)).val();
		if (sectionKey == -1) {
			//$("#result2").html("");
			return;
		}
		$("#result2").append();
		for (var i in all_data){
			var detail_c = sectionKey;
			if (all_data[i].id === detail_c){
				$("#result2").append("<div>【運休日】<br/>　" + all_data[i].off +"<br/>【運賃の目安】<br/>　" + all_data[i].min + "円～" + all_data[i].max +"円<br/>【上り】※は須坂病院に停車します<br/>　" + all_data[i].up1 + "<br/>　"  + all_data[i].up2 + "<br/>　"  + all_data[i].up3+ "<br/>　"  + all_data[i].up4+ "<br/>　"  + all_data[i].up5+ "<br/>　"  + all_data[i].up6+ "<br/>【下り】※は須坂病院に停車します<br/>　"  + all_data[i].down1+ "<br/>　"  + all_data[i].down2+ "<br/>　"  + all_data[i].down3+ "<br/>　"  + all_data[i].down4+ "<br/>　"  + all_data[i].down5+ "<br/>　"  + all_data[i].down6+ "<br/>　"  + all_data[i].down7+ "<br/>【バス停】<a href='"+all_data[i].URL+"'>MAPはこちら<br/></a>"  + all_data[i].stop + "<br/></div>");
	}
		}
	});
 });

//タブの設定
$ (function(){
    	$('#tabs a[href^="#panel"]').click(function(){
		$("#tabs .panel").hide();
		$(this.hash).fadeIn();
		return false;
	});
	
	//タブを切替
	$('#tabs a[href^="#panel"]:eq(0)').trigger('click');
})

///////////////////////////
// グローバル変数の定義
///////////////////////////
var touchdev;
var canvas1,ctx1;
var canvas2,ctx2;
var phase_load = 0;
var phase_init = 1;
var phase_idle = 2;
var phase_anime = 3;
var phase_finish = 4;
var phase;
var picture;
var pieceno,piecedata;
var lastpieceno,animeseq;
var loaded;
var gameno;
var width = (1+49*4);
var height = (1+49*4);
var lasttouchx,lasttouchy;
var animestarttick;
var lastanimeseq;

///////////////////////////
// 初期化
//////////////////////////
window.onload = function() {
  // 描画コンテキストの取得
  canvas1 = document.getElementById('id_canvas1');
  if (!canvas1 || !canvas1.getContext) {
    alert("本ページの閲覧はHTML5対応ブラウザで行ってください");
    return false;
  }
  ctx1 = canvas1.getContext('2d');
  canvas2 = document.getElementById('id_canvas2');
  ctx2 = canvas2.getContext('2d');
  ctx2.fillStyle = "rgb(0,0,0)";
  ctx2.fillRect(0,0,width,height);
  // ゲームの初期化
  pieceposx = new Array(16);
  pieceposy = new Array(16);
  pieceno = new Array(16);
  piecedata = new Array(16);
  lastpieceno = new Array(16);
  
  phase = phase_load;
  loaded = false;
  loadpicture(gameno);
  // プラットフォームの判定
  touchdev = false;
  if (navigator.userAgent.indexOf('iPhone') > 0　|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    touchdev = true;
  }
  // インターバルタイマー関数の登録
  setInterval('timerfunc()', 10);
  // マウス/インターバルタイマーイベント関数の登録
  if (touchdev == false) {
    canvas2.addEventListener('click',clickfunc,false);
  } else {
    canvas2.addEventListener("touchstart", touchstart, false);
    canvas2.addEventListener("touchmove", touchmove, false);
    canvas2.addEventListener("touchend", touchend, false);
  }
};
/////////////////////////////
// 各種処理関数
/////////////////////////////
function loadpicture(gameno) {
  picture = new Image();
  picture.onload = function() {
                     ctx1.drawImage(picture,0,0);
                     loaded = true;
		   };
  picture.src = "http://app.linkdata.org/asset/c7ef892d.jpg";
}
function initgame() {
  var pos;
  var str,tm;

pos = 0;
  ctx1.font = "bold 14px 'italic bold 20px sans-serif' "; 
  ctx1.fillStyle = "rgb(255,50,50)";
  for (var y = 0; y < 4; y++) {
    for (var x = 0; x < 4; x++) {
      str = String(pos+1);
      tm = ctx1.measureText(str);
      ctx1.fillText(str,x*48+48-tm.width-3,y*48+42);
      piecedata[pos] = ctx1.getImageData(x*48,y*48,48,48);
      pieceno[pos] = pos;
      pos += 1;
    }
  }
  pieceno[15] = -1;
}
function shuffle() {
  var dirnum;
  var dirx,diry;
  var x,y;
  var movedir;

dirx = new Array(4);
  diry = new Array(4);
  for (var i = 0; i < 500; i++) {
    for (var j = 0; j < 16; j++) {
      if (pieceno[j] < 0) {
        x = j%4;
        y = Math.floor(j/4);
        break;
      }
    }
    dirnum = 0;
    if (x >= 1) {
      dirx[dirnum] = -1;
      diry[dirnum] = 0;
      dirnum += 1;
    }
    if (x <= 2) {
      dirx[dirnum] = 1;
      diry[dirnum] = 0;
      dirnum += 1;
    }
    if (y >= 1) {
      dirx[dirnum] = 0;
      diry[dirnum] = -1;
      dirnum += 1;
    }
    if (y <= 2) {
      dirx[dirnum] = 0;
      diry[dirnum] = 1;
      dirnum += 1;
    }
    movedir = Math.floor(Math.random()*dirnum);
    move(x+dirx[movedir],y+diry[movedir]);
  }
}

function move(piecex,piecey) {
  var blankx,blanky;
  var dx,dy;

for (var i = 0; i < 16; i++) {
    if (pieceno[i] < 0) {
      blankx = i%4;
      blanky = Math.floor(i/4);
      break;
    }
  }
  if (piecey == blanky) {
    dy = 0;
    if (blankx < piecex) {
      dx = 1;
    } else {
      dx = -1;
    }
  } else {
    dx = 0;
    if (blanky < piecey) {
      dy = 1;
    } else {
      dy = -1;
    }
  }
  pieceno[blankx+blanky*4] = pieceno[(blankx+dx)+(blanky+dy)*4];
  pieceno[(blankx+dx)+(blanky+dy)*4] = -1;
  if (piecey == (blanky+dy) && piecex == (blankx+dx)) {
    return;
  }
  move(piecex,piecey);
}

function checkmove(piecex,piecey) {
  var blankx,blanky;

for (var i = 0; i < 16; i++) {
    if (pieceno[i] < 0) {
      blankx = i%4;
      blanky = Math.floor(i/4);
      break;
    }
  }
  if (blanky == piecey || blankx == piecex) {
    if (blanky == piecey && blankx == piecex) {
      return false;
    }
    return true;
  }
  return false;
}

function checkfinish() {
  for (var i = 0; i < 15; i++) {
    if (pieceno[i] != i) {
      return false;
    }
  }
  return true;
}

function initanime() {
  for (var i = 0; i < 16; i++) {
    lastpieceno[i] = pieceno[i];
  }
  animeseq = 0;
  lastanimeseq = 0;
  animestarttick = (new Date()).getTime();
}

function exeanime() {
  animeseq = Math.floor(49*((new Date()).getTime()-animestarttick)/200);
  if (animeseq > 49) {
    animeseq = 49;
  }
}

function checkanimeend() {
  if (animeseq == 49) {
    return true;
  }
  return false;
}

function draw() {
  var lx,ly,posx,posy;

ctx2.fillStyle = "rgb(200,200,200)";
  ctx2.fillRect(0,0,width,height);
  for (y = 0; y < 4; y++) {
    for (x = 0; x < 4; x++) {
      no = pieceno[x+y*4];
      if (no < 0) {
        continue;
      }
      if (no == lastpieceno[x+y*4] || phase != phase_anime) {
        ctx2.putImageData(piecedata[no],1+x*49,1+y*49);
        continue;
      }
      for (var i = 0; i < 16; i++) {
        if (lastpieceno[i] == no) {
          lx = i%4;
          ly = Math.floor(i/4);
          break;
        }
      }
      posx = 1+lx*49;
      posy = 1+ly*49;
      if (lx == x) {
        if (ly > y) {
          posy -= animeseq; 
        } else {
          posy += animeseq; 
        }
      } else {
        if (lx > x) {
          posx -= animeseq;
        } else {
          posx += animeseq;
        }
      }
      ctx2.putImageData(piecedata[no],posx,posy);
    }
  }
}

function drawfinish() {
  var str,tm;
  var imagedata;
  var datasize;

imagedata = ctx2.getImageData(0,0,width,height);
  datasize = width*height*4;
  for (var pos = 0; pos < datasize;) {
    imagedata.data[pos++] /= 2;
    imagedata.data[pos++] /= 2;
    imagedata.data[pos++] /= 2;
    pos += 1;
  }
  ctx2.putImageData(imagedata,0,0);
  ctx2.fillStyle = "rgb(255,0,0)";
  ctx2.font = "20px 'Times New Roman'";
  str = "おめでとう!!";
  tm = ctx2.measureText(str);
  ctx2.fillText(str,(width-tm.width)/2,height/2+10);
}

function execlick(x,y) {
  var piecex = Math.floor((x-1)/49);
  var piecey = Math.floor((y-1)/49);

switch (phase) {
  case phase_init:
    if (piecex == 3 && piecey == 3) {
      // 空きマスがクリックされた場合はゲーム番号をリセット
        loaded = false;
      
      phase = phase_load;
    } else {
      // ゲームを開始
      shuffle();
      draw();
      phase = phase_idle;
    }
    break;
  case phase_idle:
    if (checkmove(piecex,piecey)) {
      initanime();
      move(piecex,piecey);
      phase = phase_anime;
    }
    break;
  case phase_finish:
    loaded = false;
    loadpicture(gameno);
    phase = phase_load;
    break;
  }
}
/////////////////////////////
// イベント処理関数
/////////////////////////////
// マウスイベントの処理関数
function clickfunc(event) {
  var rect = event.target.getBoundingClientRect();
　var x = event.clientX - rect.left;
　var y = event.clientY - rect.top;
  execlick(x,y);
}

function touchstart(event) {
  var rect = event.target.getBoundingClientRect();
  var x = event.touches[0].pageX - rect.left;
  var y = event.touches[0].pageY - rect.top;
  lasttouchx = x;
  lasttouchy = y;
}

function touchmove(event) {
  var rect = event.target.getBoundingClientRect();
  var x = event.touches[0].pageX - rect.left;
  var y = event.touches[0].pageY - rect.top;
  lasttouchx = x;
  lasttouchy = y;
}

function touchend(event) {
  execlick(lasttouchx,lasttouchy);
}

// インターバルタイマーの処理関数
function timerfunc() {
  switch (phase) {
  case phase_load:
    if (loaded) {
      initgame();
      draw();
      phase = phase_init;
    }
    break;
  case phase_anime:
     if (checkanimeend()) {
       if (checkfinish()) {
         gameno += 1;
         if (gameno == 4) {
           gameno = 0;
         }
         drawfinish();
        
         phase = phase_finish;
       } else {
         phase = phase_idle;
         draw();
       }
       break;
　　 }
     exeanime();
     if (lastanimeseq == animeseq) {
       break;
     }
     lastanimeseq = animeseq;
     draw();
     break;
  }
}
// onloadイベントを追加する。 
        function addOnload(func) 
        { 
            try { 
                window.addEventListener("load", func, false); 
            } catch (e) { 
                // IE用 
                window.attachEvent("onload", func); 
            } 
        }

body, input {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 12px;
    margin: 2px;
    padding: 0;
	
}

.left {
	float: left;
}

.right {
	float: right;
}

.cf:after {
	display: block;
	content: "";
	clear: both;
}

.hide {
	display: none;
}

.nextTo {
	padding-right: 2em;
}

#pageContainer {
	background-color: #ffffcc;
	min-width: 100px;
	width: 100%;
	min-height: 500px;
	font-size:120%;
}

#pageContainer .body {
	height: auto;

}

#pageContainer .body .bodyContainer {
	width: 100%;
}

#pageContainer .header .headerContent {
	width: 100%;
}

#pageContainer .header,
#pageContainer .footer {
	height: 50px;
	color: #ffffff;
	text-align: center;
	background-color: #009933;
}

#pageContainer .header .headerContent {
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about,
#pageContainer .header .headerContent .pageTitle {
	font-size: 170%;
	padding: 5px;
}

#pageContainer .header .headerContent .pageTitle{
	cursor: pointer;
	margin: 0;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about{
	cursor: pointer;
	margin: 7px 0 0 20px;
}

#pageContainer .header .headerContent .contact a,
#pageContainer .header .headerContent .about a {
	text-decoration: none;
	color: #FFFFFF;
}

#pageContainer .body .bodyContainer {
	height: auto;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#pageContainer .body .select  { /* 路線選択セレクトの設定 */
	height: 100％;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 100%;
	margin: 5px auto;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}

#pageContainer #infoBox {
	margin: 0 5px;
}

#pageContainer #infoList .info { /* 情報ウィンド内の設定 */
	margin: 7px 7px;
	padding: 2px 5px;
	text-align: left;
	background-color: #FFFFFF;
	word-break:break-all;
}

#pageContainer #infoList .error {
	text-align: center;
}

#pageContainer #infoList .info .tagList {
	width: 100%;
}

#pageContainer #infoList .info .highlight {
	color: #0084F7;
}

#pageContainer .bodyContainer .moreInfo,
#pageContainer #infoList .info {
	border: 1px solid #666666;
	border-radius: 3px;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileImageArea {
	margin-right: 1px;
	min-width: 100px;
	position: relative;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea {
	width: 100%;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .name {
	font-size: 1.0em;
	position: relative;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .orgName {
	margin-right: 3px;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .tag {
	background-color: #FFFCE2;
	border: 1px solid #E6CB00;
	color: #E6CB00;
	margin: 3px 3px 3px 0;
	padding: 0 3px;
	border-radius: 5px;
	cursor: pointer;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .expandAll, 
#pageContainer #infoList .info .callButton {
	background-color: #F7DA00;
	border: 1px solid #E6CB00;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 0 5px;
	margin: -20px 0 0 0;
	cursor: pointer;
	font-size: 0.9em;
}

#pageContainer #infoList .info .profileInfoArea .mainPaper {
	max-width: 80%;
	margin: 0 0 3px;
	word-wrap: break-word;
}

/* アコーディオンメニューの設定 */
section h1,
dt {
    background-color: #ccff99;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 1px;
    padding: 15px;
    color: #000000;
    cursor: pointer;
    position: relative;
	font-size:100%;
	text-align: left;
}

section h1:before,
dt:before {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  background: #FFF;
}
 
section h1:after,
dt:after {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -13px;
  background: #ccff99;
}
 
section h1.active:before,
dt.active:before {
  margin-top: -2px;
}
 
section h1.active:after,
dt.active:after {
  margin-top: 3px;
}
 
section li,
dd {
    background-color: #ffffcc;
    border-bottom: solid 0px #D6D6D6;
    padding: 0px 0 3px 0px;
}
 
section li a {
    position: relative;
    display: block;
}
 
section li a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 17px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #9CF;
}
 
section li a:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #F2F2F2;
}

#tabs ul {overflow:hidden; height:2em; list-style:none; border-bottom:1px solid #cccccc;}
	#tabs li {float:left; display:inline; margin-left:10px; padding:5px; border:1px solid #ccc; border-bottom:none; border-radius:10px 10px 0 0;}

<div id="pageContainer">
	<div class="header">
		<div class="headerContent cf">
			<div class="pageTitle">すざか市民バス</div>
		</div>
	</div>
<div id="tabs">
	<ul>
		<li><a href="#panel1">メインメニュー</a></li>
		<li><a href="#panel2">待ち時間つぶし</a></li>
	</ul>

<p>2020.6.23現在の最新情報です<br/>（2018.10.1改正）<br/></p>

<dl class="accordion_dl">
	<dt>■お知らせ</dt>
		<dd>
			<p>▼工事に伴い「須坂病院」停留所の使用ができません▼<br/>
　平成28年9月5日から平成29年6月30日までの期間、須坂病院新棟建設に伴いロータリー内の「須坂病院」停留所の利用ができません。ご迷惑をおかけしますが『須坂病院入口』の停留所をご利用下さい。<a href="http://www.city.suzaka.nagano.jp/seikatsu/koutsu/koukyoukoutsu/" target="_blank">詳しくはこちら (須坂市ホームページ）</a><br/><br/>
▼「KURURU（くるる）」の利用が始まりました▼<br/>
　平成27年10月31日から、すざか市民バスでバス共通ICカード<a href="http://www.ic-kururu.jp/" target="_blank">「KURURU（くるる）」</a>の利用が始まりました。<br/>これに伴い、すざか市民バスで回数券の取扱いが終了となります。回数券の使用期限は平成28年10月31日（月曜日）ですが、使用期限を過ぎても、長電バス山田温泉線と長電タクシーではご利用いただけます。<br/><br/>
▼市民バス以外のバスも運行しています▼<br/>
　須坂市民バス以外にも長電バスが運行しています。山田温泉線・屋代須坂線・須坂屋島線は<a href="http://www.nagadenbus.co.jp/local_index.html" target="_blank">こちら (長電バスホームページ）</a><br/><br/>
▼市民バスの詳細▼<br/>
<a href="http://www.city.suzaka.nagano.jp/seikatsu/koutsu/koukyoukoutsu/" target="_blank">こちらをご覧ください(須坂市ホームページ）</a></p>
			
		</dd>

<dt>■運休日と運行便</dt>
          <dd><div class="body">
             <h3><div class="left"><select class="select"></select></div></h3><br/>
             <p></p> 
		     <div id="result2"></div>
	         </div>
		 </dd>
		<dt>■バス停マップ</dt>
          <dd><p>アイコンをクリックするとMAPアプリに移ります</p>
  		   <a href="http://app.linkdata.org/run/app1s1150i"><img src="http://app.linkdata.org/asset/b2e734a6.jpg" alt="アイコンmap" width="60" height="60" align="middle"/></a>地図からバス停を探す<br/><br/>
		</dd>

<dt>　仙仁線(湯っ蔵んど・仁礼方面）</dt>
		<dd><p>アイコンをクリック</p>
  		   <a href="http://app.linkdata.org/run/app1s1118i"><img src="http://app.linkdata.org/asset/455698e9.jpg" alt="アイコンS10" width="60" height="60" align="middle"/></a><br/>　S10（須坂駅―仙仁）<br/>
		   <a href="http://app.linkdata.org/run/app1s1126i"><img src="http://app.linkdata.org/asset/16f3c6d8.jpg" alt="アイコンS20" width="60" height="60" align="middle"/></a><br/>　S20（須坂駅―湯っ蔵んど―仙仁）<br/>
   		   <a href="http://app.linkdata.org/run/app1s1127i"><img src="http://app.linkdata.org/asset/4e97a6ba.jpg" alt="アイコンS21" width="60" height="60" align="middle"/></a><br/>　S21（須坂駅―市役所西回り―湯っ蔵んど―仙仁）<br/>
		 <a href="http://app.linkdata.org/run/app1s1128i"><img src="http://app.linkdata.org/asset/4d65b1ee.jpg" alt="アイコンS30" width="60" height="60" align="middle"/></a><br/>　S30（須坂駅―湯っ蔵んど）<br/>
		  <a href="http://app.linkdata.org/run/app1s1129i"><img src="http://app.linkdata.org/asset/a6b7cb0b.jpg" alt="アイコンS40" width="60" height="60" align="middle"/></a><br/>　S40（須坂駅―旧道入口）<br/>
			  
		  </dd>
		<dt>　米子線（米子不動尊・豊丘方面）</dt>
          <dd><p>アイコンをクリック</p>
			  <a href="http://app.linkdata.org/run/app1s1130i"><img src="http://app.linkdata.org/asset/b8da77ff.jpg" alt="アイコンY10" width="60" height="60" align="middle"/></a><br/>　Y10（須坂駅―豊丘―米子不動尊）<br/>
			  <a href="http://app.linkdata.org/run/app1s1131i"><img src="http://app.linkdata.org/asset/bed4cdb2.jpg" alt="アイコンY20" width="60" height="60" align="middle"/></a><br/>　Y20（須坂駅―豊丘小学校―米子不動尊）<br/>
			  <a href="http://app.linkdata.org/run/app1s1132i"><img src="http://app.linkdata.org/asset/4a58927b.jpg" alt="アイコンY21" width="60" height="60" align="middle"/></a><br/>　Y21（須坂駅―市役所西まわり―豊丘小学校―米子不動尊）<br/>
			  <a href="http://app.linkdata.org/run/app1s1133i"><img src="http://app.linkdata.org/asset/71990d14.jpg" alt="アイコンY30" width="60" height="60" align="middle"/></a><br/>　Y30（須坂駅―豊丘上町―米子不動尊）<br/>
			  <a href="http://app.linkdata.org/run/app1s1134i"><img src="http://app.linkdata.org/asset/2bf090ff.jpg" alt="アイコンY40" width="60" height="60" align="middle"/></a><br/>　Y40（須坂駅―豊丘上町）<br/>
		  </dd>
		<dt>　明徳団地（臥竜公園・明徳方面）</dt>
          <dd><p>アイコンをクリック</p>
			  <a href="http://app.linkdata.org/run/app1s1135i"><img src="http://app.linkdata.org/asset/9cf682ee.jpg" alt="アイコンM10" width="60" height="60" align="middle"/></a><br/>　M10（須坂駅―明徳団地）<br/>
		 </dd>
		<dt>　北相之島線（旭ヶ丘・相之島方面）</dt>
          <dd><p>アイコンをクリック</p>
			  <a href="http://app.linkdata.org/run/app1s1136i"><img src="http://app.linkdata.org/asset/e65d6852.jpg" alt="アイコンK10" width="60" height="60" align="middle"/></a><br/>　K10（須坂駅―北相之島町）<br/>
			  </dd>
		<dt>　おはようライナー（通勤・通学用）</dt>
		<dd><p>アイコンをクリック</p>
			<a href="http://app.linkdata.org/run/app1s1138i"><img src="http://app.linkdata.org/asset/e8a4cf4f.jpg" alt="アイコン仙仁豊丘" width="60" height="60" align="middle"/></a><br/>　（仙仁→亀倉→豊丘→須坂駅）<br/>
		<a href="http://app.linkdata.org/run/app1s1139i"><img src="http://app.linkdata.org/asset/bd236d65.jpg" alt="アイコン米子明徳" width="60" height="60" align="middle"/></a><br/>　（米子不動尊→豊丘→明徳団地→須坂駅）<br/> 
		</dd>
		<dt>　おかえりライナー（帰宅用）</dt>
          <dd><p>アイコンをクリック</p>
			  <a href="http://app.linkdata.org/run/app1s1137i"><img src="http://app.linkdata.org/asset/e319002b.jpg" alt="アイコンおかえり" width="60" height="60" align="middle"/></a><br/>　（須坂駅→豊丘→亀倉→仙仁）<br/>
		</dd>
   </dl>
	
    </div>      
	<div id="panel2" class="panel">
		<h3>懐かしのスライドパズル</h3>
		<p>パネルをクリックして絵を元に戻します。
			<br/>　＜完成図＞</p>
	<canvas id="id_canvas1" width=280 height="280"></canvas>
	<canvas id="id_canvas2" width=280 height="280"></canvas>
		
	</div>
		
</div>
	
	<div class="footer">このアプリは長野県須坂市のオープンデータ<br/>
		<a href="http://opendata.city.suzaka.nagano.jp/" target="_blank">
			須坂市市民バス</a> を利用しています。</div>
</div>