masao/sukilam-search.html

## sukilam-search.html

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script type="application/javascript">
function sem_search() {
  let cos = document.getElementById("cos");
  let cos_id = cos.value;
  console.log(cos_id);
  let div = document.getElementById("result");
  let sparql = `
  select * where {
	?s <https://w3id.org/sukilam-educational-metadata/term/property#指導要領コード> <https://w3id.org/jp-cos/${cos_id}>.
	?s rdfs:label ?label.
	?s <https://w3id.org/sukilam-educational-metadata/term/property#学習指導案> ?url.
  }`;
  console.log(sparql);
  let url = `https://dydra.com/ut-digital-archives/oi/sparql?query=${encodeURIComponent(sparql)}&output=json`;
  console.log(url);
  fetch(url, {
  	format: "json"
  })
  .then(res => res.json())
  .then(obj => {
  	console.log(obj);
  	results = obj["results"]["bindings"];
  	let html = "<ul>";
  	results.forEach(element => {
  		let url = element["url"]["value"];
  		let label = element["label"]["value"];
		html += `<li><a href="${url}">${label}</a>`
  	});
  	html += "</ul>";
  	console.log(html);
	div.innerHTML = html;
  })
  .catch(error => {
  	console.error(error);
  });
}
</script>
<form id="form">
<input type="text" value="8220263217000000" id="cos">
<button onclick="javascript:sem_search();return false;">search!</button>
</form>
<div id="result">
</div>
</body>
</html>

	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
	<script type="application/javascript">
	function sem_search() {
	let cos = document.getElementById("cos");
	let cos_id = cos.value;
	console.log(cos_id);
	let div = document.getElementById("result");
	let sparql = `
	select * where {
	?s <https://w3id.org/sukilam-educational-metadata/term/property#指導要領コード> <https://w3id.org/jp-cos/${cos_id}>.
	?s rdfs:label ?label.
	?s <https://w3id.org/sukilam-educational-metadata/term/property#学習指導案> ?url.
	}`;
	console.log(sparql);
	let url = `https://dydra.com/ut-digital-archives/oi/sparql?query=${encodeURIComponent(sparql)}&output=json`;
	console.log(url);
	fetch(url, {
	format: "json"
	})
	.then(res => res.json())
	.then(obj => {
	console.log(obj);
	results = obj["results"]["bindings"];
	let html = "<ul>";
	results.forEach(element => {
	let url = element["url"]["value"];
	let label = element["label"]["value"];
	html += `<li><a href="${url}">${label}</a>`
	});
	html += "</ul>";
	console.log(html);
	div.innerHTML = html;
	})
	.catch(error => {
	console.error(error);
	});
	}
	</script>
	<form id="form">
	<input type="text" value="8220263217000000" id="cos">
	<button onclick="javascript:sem_search();return false;">search!</button>
	</form>
	<div id="result">
	</div>
	</body>
	</html>