NDC.DEVのAPIでNDLサーチを拡張してみるテスト(その2)

カーリルさんがNDC8版/9版のAPIを ndc.dev として公開しているので、国立国会図書館サーチで表示されるNDC情報を拡張してみた、の第2弾というものになります。 NDC8/9版にラベルを表示するとともに、上位項目+下位項目(とラベル)を表示できるようにしてみました。

書誌詳細画面を開いた状態で開発者ツールを起動しコンソールに下の方のコードを入れると、NDC関係のラベルが前よりもうちょっとリッチになるはずです。

  • Before:
  • After:

あとは、Chrome拡張にするとかすればよいでしょうかね。

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
var makeReqUrl = (code, ver = "9") => {
const baseUrl = "https://ndc-api-beta.arukascloud.io/"
let url = baseUrl
if (ver == "8") {
url += "ndc8/";
} else if (ver == "9") {
url += "ndc9/";
} else {
throw "invalid version";
};
if (code.match(/^\d{1,3}[\.]?\d*$/)) {
url += code;
} else {
throw "invalid NDC format";
}
return url
}

var makeNdcDiv = function (json) {
let label = json['label@ja'];
let notation = json['notation'];
let jumpLink = "https://iss.ndl.go.jp/books?search_mode=advanced&ndc=" + notation;
let div = document.createElement('div');
div.setAttribute("style","display:table-row;white-space:nowrap")
let notationSpan = document.createElement('span')
notationSpan.setAttribute("style","display:table-cell")
let a = document.createElement('a');
a.setAttribute("href", jumpLink);
a.innerText = notation;
notationSpan.appendChild(a);
notationSpan.innerHTML += " : ";
div.appendChild(notationSpan);
let labelSpan = document.createElement('span')
labelSpan.setAttribute("style","display:table-cell")
labelSpan.innerText = label;
div.appendChild(labelSpan)
return div;
}

// Add Font Awesome
var script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/js/all.min.js";
document.head.appendChild(script)

let table = document.getElementById('itemcontent').getElementsByTagName('table')[0];
let tr = table.getElementsByTagName('tr')
Array.prototype.forEach.call(tr, function (tr) {
let th = tr.getElementsByTagName('th')[0];
if (th) {
if (th.innerText.includes('NDC')) {
console.log(th.innerText)
let ndcVer = ""
if (th.innerText.includes('9版')) {
ndcVer = "9";
} else if (th.innerText.includes('8版')) {
ndcVer = "8";
}
if (ndcVer) {
let td = tr.getElementsByTagName('td')[0];
let ndcTdValue = td.innerText.trim();
if (ndcTdValue.match(/\d{3}.?\d*/)) {
let ndc = ndcTdValue.match(/\d{3}.?\d*/)[0];
console.log(ndc);
let reqUrl = makeReqUrl(ndc, ndcVer);
fetch(reqUrl).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('API Response:' + response.status);
}).then(json => {
let div = makeNdcDiv(json)
td.innerHTML = ""
td.appendChild(div)
let broader = json['broader']
let narrowers = json['narrower']
if (broader || narrowers) {
let nav = document.createElement("nav");
nav.setAttribute("style", "background-color:#eee;font-size:80%")
td.appendChild(nav)
if (broader) {
let reqUrl = makeReqUrl(broader, ndcVer)
fetch(reqUrl).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('API Response:' + response.status);
}).then(json => {
let div = makeNdcDiv(json)
let broaderSign = document.createElement("i")
broaderSign.setAttribute("class", "fas fa-chevron-up")
broaderSign.setAttribute("style", "color:royalblue; margin: 0 1em")
div.insertBefore(broaderSign, div.firstChild)
nav.appendChild(div)
})
}
if (narrowers) {
for (narrower of narrowers) {
let reqUrl = makeReqUrl(narrower, ndcVer)
fetch(reqUrl).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('API Response:' + response.status);
}).then(json => {
let div = makeNdcDiv(json)
let narrowerSign = document.createElement("i")
narrowerSign.setAttribute("class", "fas fa-chevron-down")
narrowerSign.setAttribute("style", "color:royalblue; margin: 0 1em")
div.insertBefore(narrowerSign, div.firstChild)
nav.appendChild(div)
})

}
}
}

});
}
};
};
};
})