はじめに
自作ブログに書影付き書誌情報カードを実装した話をします。
「書影付き書誌情報カード」だと少し長いので、以下では「ブックカード」と呼びます。
実装は省略しています。この記事の主な目的はAPIの紹介です。
また、本記事の最後にブックカードの使用例（を示したページのリンク）を載せています。
デザインがかなり気に入っているので、よかったらぜひ見てください。
モチベーション
自分は Astro で個人用のブログサイトを作成・管理しています。
ブログ内で自分が読んだ本を、書影付きで紹介したいことが度々あります。
その際、今までは OGP 画像に書影が設定されているサイト（ブクログなど）へのリンクを貼り付けていました。[1]
最初はこれで満足していたのですが、運用を続けていくうちに
- 書影を得られない本がある
- 「書籍の情報を表示するカード」としては内容もデザインも微妙
という点に不満を感じるようになってきました。
自分で書影を撮影してアップするのは著作権が気になりますし[2]、そもそも毎回「写真を撮る → 整形する → 情報を手入力する」という工程を踏むのは、かなり面倒くさいです。
何かいい方法はないかなと思って調べていたところ、良さげなAPIを見つけたので、それを利用したブックカードコンポーネントを実装することにしました。
API
使用したAPIです。
どちらも非営利・個人で利用する分には、申請などは必要ありません。
また、基本的には13桁のISBNコードを引数としてリクエストします。
手元に本がある場合は、バーコードの辺りを確認すると「ISBNxxxxxxxxxxxxx」（xは数字）というコードが記載されていると思います。それです。
手元に本がない場合でも、例えばamazonの商品ページには下の方に「登録情報」の記載があり、そこでISBNコードを確認することができます。
OpenBD
私たちopenBDプロジェクト（カーリル・版元ドットコム）は書誌情報・書影を、だれでも自由に使える、高速なAPIで提供します。
個人が、SNSやブログで本を紹介するとき
書店が、仕入れや、販売のために本を紹介するとき
図書館が、選書し、利用者に本を紹介するとき
メディアが、本を紹介し評するとき
企業が、書誌情報・書影を利用したあらたなサービスを開発するとき
こうしたときに、自由に使える書誌情報・書影を、高速なAPIで提供するopenBDの提供を開始します。
主に書誌情報の取得に利用しています。
データが存在している場合は書影も取得できますが、あまり数はないという印象です。
書影の取得には主に次のAPIを利用しています。
国立国会図書館サーチが提供する書影API/検索用API
1-1. 概要
国立国会図書館サーチ（NDLサーチ）では、図書館の蔵書検索システム（OPAC）等でご活用いただけるよう書影APIを提供しています。
書影APIは図書のISBNまたはJP-eコードを引数としてリクエストすることで、書影画像（資料の表紙の画像）を返戻するAPIです。
※NDLサーチでは、資料がJP-eコードを持つ場合、「デジタル」の書誌情報にコードを記載しています。
https://ndlsearch.ndl.go.jp/help/api/thumbnailより引用
こちらはISBNコードに加えて、JP-eコードを引数としてリクエストすることもできます。
こちらも任意の書誌に対して書影を返してくれるわけではないですが、量は比較的充実しているという印象です。
注意点として、
- ISBNコードを使うと書影が取得できるが、JP-eコードを使うとできない
- JP-eコードを使うと書影が取得できるが、ISBNコードを使うとできない
という場合がそれぞれ存在します。
JP-eコードは検索用APIから取得することが可能です。
JP-eコードを使って書影を取得したい場合は、「検索用APIでJP-eコードを取得 → そのJP-eコードで書影を取得」という流れになると思います。
ブックカードコンポーネントの仕様
ざっくりとした仕様は以下の通りです。
- 書誌情報はOpenBDから持ってくる
- 書影の元はOpenBD/NDL(ISBN)/NDL(JP-e)の中から選択する
- 著者情報は引数から直接書けるようにする
- 日本十進分類法における区分を日本語で表示する
- ブックカードの枠線の色は22種類の中から選べるようにする
一つ目は、前述の通りです。
二つ目は、それぞれ持っている書影データが違うことを考慮したものです（デフォルト値は NDL(ISBN) にするのが良さそう）。
三つ目は、著者データの形式に揺れがあることを考慮したものです。訳者、イラスト担当者などの情報がまとめて押し込まれていることがあり、上手く正規化するのが難しかったのでこのような仕様にしました。
四つ目は、カードに載せる情報の話です。APIが返す情報の中にNDCコード（小説なら913）[3]があるので、対応する区分名をカードに表示するようにしました。具体的には、あらかじめ分類のデータをダウンロードしておいて、よしなに対応させました。
五つ目は、デザインの話です。書影・本の雰囲気に合わせて、自分の好みで枠線の色を指定できるようにしました。
実装
ChatGPTに投げると、動くものが返ってきます。
CSSだけは最初はかなり壊れていましたが、スクショと合わせて改善点を指摘することを何度か繰り返すと、いい感じにまとまりました。
半年前はこう上手くはいかず、開発者タブとコードを睨みながら半日くらい格闘した記憶があります。AIの進化は早いですね。
ブログサイトのリポジトリのリンクを載せておくので、興味がある方は見てみてください。
実装は自由にコピペしていただいて構いません。
実装したブックカードの使用例は以下のテストページから確認できます。
デザインが良くてとても気に入っています。
-
見た目はテスト用ページの##リンクカードを参照してください。このリンクカードも、ブログサイトを作成した際に自前で用意したものです。https://qiita.com/TARDIGRADE/items/67fb257067739d106cd5#553-リンクカード ↩︎
-
「非営利の個人ブログであっても、自分で撮影した書影を無断で掲載するのは著作権的によくない」という認識でいます。間違っていたら教えてください。 ↩︎
Discussion