note.sorakakeru.info

国会図書館APIを使用する

この記事は2024/12/8に公開しましたが、2024年1月のAPIリニューアルに伴い改めて書き直しました。

概要

国立国会図書館が提供しているAPIを利用して書誌情報を取得する方法。2024年の1月にリニューアルされた。
以前は返り値もかなり少なかった書影APIも、JPROの提供により大幅に強化されている。

参考（いずれも国立国会図書館・国立国会図書館サーチのWebサイトより）

情報を取得する

以下のAPIを使用して取得する（以下jsで取得）

html
<div id="cover"></div>
<ul>
  <li>タイトル：<span id="title"></span></li>
  <li>ISBN：<span id="isbn"></span></li>
  <li>著者：<span id="author"></span></li>
  <li>出版社：<span id="publisher"></span></li>
</ul>

APIはXML形式で値が返ってくる。書影APIも画像がない場合の返却値はXML形式。

js
document.addEventListener('DOMContentLoaded', () => {


  /* 書籍情報取得（XML形式） */
  const title = document.getElementById('title');
  const isbn = document.getElementById('isbn');
  const author = document.getElementById('author');
  const publisher = document.getElementById('publisher');


  const isbncode = '9784003101117'; //ISBNコード
  const api_url = `https://ndlsearch.ndl.go.jp/api/sru?operation=searchRetrieve&recordPacking=xml&maximumRecords=1&query=isbn=${isbncode}`;
  //console.log(api_url);


  async function xmlLoad() {
    const res = await fetch(api_url);
    const text = await res.text();
    const xml = new DOMParser().parseFromString(text, 'application/xml');
    //console.log(xml);
    title.textContent = xml.getElementsByTagName('dc:title')[0].textContent;
    isbn.textContent = isbncode;
    author.textContent = xml.getElementsByTagName('dc:creator')[0].textContent;
    publisher.textContent = xml.getElementsByTagName('dc:publisher')[0].textContent;
  }
  xmlLoad();


  /* カバー画像取得 */
  const cover = document.getElementById('cover');
  const cover_api = `https://ndlsearch.ndl.go.jp/thumbnail/${isbncode}.jpg`;
  //画像の有無で表示出し分け
  const checkIfImage = (cover_url) => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = cover_url;
      img.onload = () => resolve(cover_url);
      img.onerror = () => reject(cover_url);
    });
  };
  checkIfImage(cover_api)
  .then((cover_api) => {
    cover.innerHTML = `<img src="${cover_api}" alt="カバー画像" width="190" height="280">`;
  })
  .catch((cover_api) => {
    cover.textContent = '画像なし';
  });


});

書影APIで取得するカバー画像をasync/awaitで取得しようとするとCORSエラーとなってしまうため、Promiseを利用して取得している。
このエラーになるならないの違いがよくわからない…。