インターナショナル・オープンデータ・デイ2019（IODD2019）の大阪会場に参加してきた。
今回のテーマは、ウィキデータの編集。
「ウィキペディア本文」を編集したり新規で項目を作成するのは相応の知識が必要だが、今回はウィキデータに地理情報を追加するという、誰でも手軽に実施できる内容。
具体的には、ウィキペディアに掲載されている様々な施設について、そのウィキデータを見て、座標や住所などの地理情報データがないものを、ネットで情報を調べてどんどん追加していくというもの。
私自身はこれまでウィキペディアの編集やウィキデータの利用をしたことがなかったため、当イベントは、自身の見識を深め、新たなアイディアのインスピレーションを得るのに大いに参考になった。
また、当イベントのおまけ成果物として、ウィキデータを使ったWEBアプリを会場でこしらえた。
これ→ https://www.mirko.jp/iodd2019/
ウィキデータはオープンなSPARQL APIで提供されており、またCORS（クロスオリジンリソースシェアリング）にも対応しているため、ブラウザJavascriptのみで手軽に活用アプリが作成できる。
以下、私がよく使うJavascriptのみのお手軽Webアプリのひな形だ。
これをベースとして色々作れちゃうので、ご参考に。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ウィキデータ可視化アプリ</title>
<script>
function execute() { // ボタンクリック時の動作
var endpoint = 'https://query.wikidata.org/sparql'; //Endpointをセット
var method = "POST"; //メソッド（POST or GET）
//都市コードを取得
var index = document.selectForm.cityselect.selectedIndex;
var cityCode = document.selectForm.cityselect.options[index].value;
//クエリ文字列をセット
var query = 'SELECT DISTINCT ?s ?label ?point ';
query += 'WHERE{ ?s rdfs:label ?label;';
query += 'wdt:P131 wd:' + cityCode +';';
query += 'wdt:P625 ?point.';
query += 'FILTER(lang(?label)="ja")}';
sparqlQuery(query,endpoint,method) ; //スパークルクエリ送信
}
function sparqlQuery(queryStr,endpoint,method) { // XMLHttpRequestでクエリ送信
var querypart = "query=" + encodeURIComponent(queryStr);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, endpoint, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.setRequestHeader("Accept", "application/sparql-results+json");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200 || xmlhttp.status == 201 ) {
onSuccessQuery(xmlhttp.responseText);
} else {
document.getElementById("results").innerHTML = "エラー" ;
}
}
}
xmlhttp.send(querypart);
}
function onSuccessQuery(text) { // 結果(JSON文字列)を配列に格納
var jsonObj = JSON.parse(text);
var head , rows ;
if (jsonObj.responseJSON) {
head = jsonObj.responseJSON.head.vars;
rows = jsonObj.responseJSON.results.bindings;
} else {
if(!(jsonObj.head)){
document.getElementById("results").innerHTML = "スパークル構文エラー" ;
return;
}
head = jsonObj.head.vars;
rows = jsonObj.results.bindings;
}
if (rows.length === 0) {
document.getElementById("results").innerHTML = "検索条件の該当データなし" ;
return;
}
makeTable(head, rows);
}
function makeTable(head, rows) { // 配列をテーブルにして出力
var html = "<table border='1'><tr>";
for (var i=0; i<head.length; i++) { //ヘッダ部分の書込み
html += "<th>" + head[i] + "</th>";
}
html += "</tr>";
for (var i=0; i<rows.length; i++) { //内容の書込み
html += "<tr>";
for (var j=0; j<head.length; j++) {
var col = head[j];
if(rows[i][col] != null){
html += "<td>" + rows[i][col].value + "</td>";
}else{
html += "<td></td>";
}
}
html += "</tr>";
}
html += "</table>";
document.getElementById("results").innerHTML = html;
}
</script>
</head>
<body>
<form name="selectForm">
<select name='cityselect'>
<option value="Q35765">大阪市</option>
<option value="Q193428">堺市</option>
<option value="Q335423">高槻市</option>
<option value="Q270912">枚方市</option>
<option value="Q467479">豊中市</option>
<option value="Q243863">東大阪市</option>
<option value="Q740456">岸和田市</option>
<option value="Q653510">吹田市</option>
<option value="Q502403">茨木市</option>
<option value="Q389633">寝屋川市</option>
</select>
<input type="button" value="クエリ実行" onclick="execute()">
</form>
<div id="results"></div>
</body>
</html>
0 件のコメント:
コメントを投稿