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

カーリルさんがNDC8版/9版のAPIを ndc.dev として公開しているので、国立国会図書館サーチで表示されるNDC情報を拡張してみた、の第２弾というものになります。 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)
                                    })

                                }
                            }
                        }

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