-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetails.html
135 lines (118 loc) · 4.77 KB
/
details.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wikidataを用いた検索システム【詳細表示】</title>
<link rel="stylesheet" href="style.css">
<!-- KG検索用のライブラリ読み込み -->
<script src="js/sparql-min.js"></script>
<script>
//詳細表示ページ用の設定
const keylink = "item"; //リンクのkeyとする変数
const detail_html = "details.html"; //詳細表示用のHTMLファイル
//表示するプロパティの順番(必要に応じて変更する)
const props = [] ;
//const props = ["wdt:P17","wdt:P18"]; //記載例
window.addEventListener('load', async () => {
const sendButton = document.getElementById('send');
//検索実行ボタンの処理
sendButton.addEventListener('click', async () => {
makeQuery();
}, false);
//パラメータ(?key=XXXX)を使ったアクセスの処理
var param = location.search;
if(param!=""){
document.getElementById('QID').value = decodeURI(param.replace("?key=",""));
document.getElementById('head').style.display = 'none';
document.getElementById('menu').style.display = 'none';
makeQuery();
}
}, false);
//検索に用いるSPARQLクエリを生成し，実行する
async function makeQuery(){
const endpoint = "https://query.wikidata.org/sparql";
const resultArea = document.getElementById('result_div');
let query = document.getElementById('query_area').value;
const textQID = document.getElementById('QID').value;
if(textQID!=""){
if(textQID.startsWith("wd:Q")){
query = query.replace( '?QID', textQID );
}
else{
let qid = await getWdIDse(textQID); //getWdIDも使用可能
query = query.replace( '?QID', 'wd:'+qid );
}
document.getElementById('query_area2').value=query;
}
else{
alert("「QID」または「ラベル」を入力して下さい");
}
//SPARQLクエリの実行
resultArea.innerHTML="";
document.getElementById('result_box').style.display="flex";
showSearchIng(resultArea);
const resultData = await sendSPARQLQuery(endpoint, query);
document.getElementById('resjson_area').value = JSON.stringify(resultData,null,' ');
showResultDetails(resultData,resultArea,props); //クエリ結果の表示【詳細表示用】
}
</script>
</head>
<body>
<header id="head" >
<h1>Wikidataを用いた検索システム【詳細表示】</h1>
</header>
<!-- 検索条件設定の領域 -->
<div id="menu" class="container">
<div style="margin-top:4px;">
<!-- 検索条件を設定するには下記のコメントを外す -->
Wikidata ID（例：wd:Q7105556），または，ラベルで検索<br>
<input id="QID" type="text" value="wd:Q7105556" autocomplete="off" size="20"/>
<input type="button" id="send" value="検索の実行" style="margin-top:8px; "><br>
<hr>
<!-- 下記の「クエリの表示・非表示」ボタンは，必要がなければコメントアウトしてもよい -->
<input type="button" id="dis_b" value="クエリの表示"
onclick="document.getElementById('query').style.display = 'block';
document.getElementById('dis_b').style.display = 'none';
document.getElementById('none_b').style.display = 'block';">
<input type="button" id="none_b" value="クエリの非表示" style="display:none"
onclick="document.getElementById('query').style.display = 'none';
document.getElementById('dis_b').style.display = 'block';
document.getElementById('none_b').style.display = 'none';">
</div>
<div id="query" style="display:none">
<b>置き換え前のクエリ</b>：<br>
<!--注：こちらのクエリは【修正しない！】-->
<textarea id="query_area" class="t_area" rows="10">
select DISTINCT ?item ?itemLabel ?o ?oLabel ?p ?prop ?propLabel
where{
BIND(?QID AS ?item)
?item ?p ?o.
FILTER(
(isLiteral(?o)&&((lang(?o)="ja")||(lang(?o)="")))
||(!isLiteral(?o)
&&(!contains(str(?o),"http://www.wikidata.org/entity/statement/"))
)
)
OPTIONAL{?prop wikibase:directClaim ?p.}
SERVICE wikibase:label { bd:serviceParam wikibase:language "ja,en". }
}ORDER BY ?p
</textarea>
<br>
<b>置き換え後のクエリ</b>：
<input type="button" value="WikidataでSPARQL検索"
onclick="openSPARQLendpoint('https://query.wikidata.org#',
document.getElementById('query_area2').value)"><br>
<textarea id="query_area2" class="t_area" rows="10" ></textarea><br>
<b>クエリ実行結果の戻り値(JSON形式）</b>：<br>
<textarea id="resjson_area" class="t_area" rows="10" ></textarea>
</div>
</div>
<!-- 結果表示用の領域 -->
<div id="result_box" style=" display: none; ">
<div id="result_div" class="container" style="flex: 1;"></div>
</div>
<hr>
</body>
</html>