1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Obsidianで読書管理しやすくするプラグインを作った

1
Posted at

こんにちは🌤 駆け出しフルスタックエンジニアのここあです!

普段はWezTermとObsidianを行き来している生活をしております。

今回は「ISBNを入力するだけで書籍ノートが自動生成される」Obsidianプラグイン「Obsidian Bookshelf」を作ったので紹介します。

本が好きで読書記録をObsidianで管理したい方、手入力が面倒だと感じている方にぜひ読んでいただきたい内容です!


そもそもどうやって管理しているのか?

私は、ObsidianのコアプラグインのBasesというものを使って、本のデータを本棚フォルダに入れ、カードビューで表示しています。

各本のカードを開くとノートになっているので、読書のメモや感想を書くことができます。


私が感じた「課題」

Obsidianで読書記録をつけようとすると、毎回こういう作業が発生していました。

  1. タイトル・著者・出版社・ISBNを手でコピペ
  2. 表紙画像を検索してダウンロード
  3. フロントマターに手動で貼り付け
  4. ステータスや評価のフィールドを書く

「ISBNさえあれば全部自動でやってほしい」

具体的に足りていないと感じた機能は次の3つです。

  • 書籍情報の自動取得(タイトル・著者・出版社・表紙を自動で入れたい)
  • 本棚ビュー(読みたい / 読書中 / 読了をカード形式で管理したい)
  • 表紙画像の管理(WebP変換・キャッシュまで面倒みてほしい)

これらを解決するために作ったのが「Obsidian Bookshelf」です。


Obsidian Bookshelf:できること

① ISBN から書籍ノートを自動生成

リボンアイコンまたはコマンドパレットから「ISBN から本を追加」を実行し、ISBNを入力するだけで書籍ノートが自動生成されます。

書籍情報は以下の順でAPIを叩いて取得します。

API 用途
NDL(国立国会図書館) 日本語書籍の優先取得(ISBN が 978-4 始まりの場合)
Google Books API 国際書籍・カバー画像の取得
Open Library フォールバック

日本語書籍はまずNDLから取得するので、和書の精度が高いのがポイントです。

また、表紙画像の取得には openBD API も活用しています。NDLは書誌情報は充実しているものの表紙画像を持っていないため、和書の場合は openBD → Google Books → Open Library の順で表紙を補完します。

自動生成されるフロントマターはこんな感じです。

---
title: "書籍タイトル"
author: "著者名"
publisher: "出版社"
isbn: "9784000000000"
publishDate: "2023-01-01"
pages: 300
cover: "Books/covers/9784000000000.webp"
status: "to-read"
progress: 0
startDate: ""
endDate: ""
rating: 0
language: "ja"
tags:
  - book
---

② 確認フォームで内容をチェックしてから登録

ISBNで書籍情報が取得できた場合も、いきなりノートを作成せず確認フォームを経由するようにしました。

フォームには取得した情報が自動入力されており、表紙画像のプレビューも表示されます。内容を確認・修正してから「登録」を押すことで、ノートが作成されます。

「あれ、著者名の表記がちょっと違う」「表紙がうまく取れていない」といった場面でも、ここで直接修正できます。

③ 表紙画像の自動ダウンロード・WebP変換・キャッシュ

取得した表紙画像は自動でWebPに変換してVault内に保存します。一度キャッシュされれば次回以降はAPIを叩きません。

また、APIで取得できなかった場合でもあとから以下の方法で表紙を追加できます。

  • ドラッグ&ドロップ
  • クリックでファイル選択
  • Ctrl+Vでクリップボードから貼り付け

④ 本棚ビュー(Bases連携)

プラグインが自動で 本棚.base ファイルを生成します。Obsidianの Bases 機能を使ったカードビューで、ステータス別に本を管理できます。

ビュー名 表示条件
本棚 すべての書籍
読みたい status: to-read
読書中 status: reading
読了 status: completed

⑤ 書籍ノートの編集モーダル

ノートを開いた状態でコマンドを実行すると、以下の項目をGUIで編集できます。

項目 操作
タイトル / 著者 / 出版社 / 出版日 テキスト入力
ページ数 / 言語 テキスト入力 / ドロップダウン
ステータス ドロップダウン(読みたい / 読書中 / 読了 / 中断)
進捗 スライダー(0〜100%)
評価 スライダー(0〜5)
開始日 / 終了日 テキスト入力
表紙画像 D&D / クリック / Ctrl+V

インストール方法

手動インストール

  1. GitHubリリースページ から最新版をダウンロード

  2. Vault の .obsidian/plugins/ob-book/ フォルダを作成

  3. main.jsmanifest.jsonstyle.css を配置

  4. Obsidian を再起動 → 設定 → コミュニティプラグイン → 有効化

コミュニティプラグインから(リリース予定)

今しばらくお待ちくださいませ(+_+)


使い方

書籍を追加する

ISBNから追加(推奨)

  1. リボンの📖アイコン または コマンドパレットで「ISBN から本を追加」を実行

  2. ISBN-10 または ISBN-13 を入力して「検索して追加」

  3. 確認フォームで書籍情報・表紙プレビューを確認

  4. 必要であれば修正して「登録」→ 書籍ノートが作成される

  5. 本棚.Basesの設定をする

    • ビューの種類をカードビューに

    • フィルターを指定したフォルダに

    • プロパティを表示したいものに

手動で追加

ISBNがわからない・検索でヒットしない場合は「手動で入力」から登録できます。

書籍ノートを編集する

  • リボンの🔖アイコン → 書籍を検索して選択
  • コマンドパレットで「書籍ノートを編集」(アクティブなノートに対して実行)

ステータスを管理する

本棚.base を開くとカードビューでステータス別に管理できます。編集モーダルからステータスを変更すると、自動で対応するビューに反映されます。


設定

設定項目 デフォルト値 説明
書籍ノートの保存フォルダ Books 書籍ノートを保存するフォルダ
表紙画像のキャッシュフォルダ Books/covers WebP画像を保存するフォルダ
Google Books API キー (空) レート制限緩和のために任意で設定
重複ISBN時の動作 既存ノートを開く 上書き / 新規作成も選択可能

技術的なメモ

ISBN-10 → ISBN-13 変換

入力されたISBNが10桁の場合は自動でISBN-13に変換してからAPIを叩きます。チェックディジットの計算もきちんとやっています。

function convertIsbn10To13(isbn10: string): string {
  const digits = `978${isbn10.slice(0, 9)}`;
  let sum = 0;
  for (let i = 0; i < 12; i++) {
    sum += Number.parseInt(digits[i]) * (i % 2 === 0 ? 1 : 3);
  }
  const check = (10 - (sum % 10)) % 10;
  return digits + check.toString();
}

和書の表紙取得に openBD を活用

NDLは和書の書誌情報(タイトル・著者・出版社)の精度が高い一方、表紙画像は持っていません。そこで和書の場合は表紙の補完に openBD API を使うようにしました。

書誌情報の取得:NDL → Google Books → Open Library
表紙画像の取得(和書):openBD → Google Books → Open Library

openBD は日本の出版社・取次が提供する書誌DBで、JPEGの表紙画像を無料で取得できます。登録されていれば高品質な表紙が取れることが多く、和書においては非常に頼りになるAPIです。

表紙画像のWebP変換

requestUrl で取得したバイナリを createImageBitmap → Canvas → toBlob("image/webp") の流れで変換しています。Obsidianのデスクトップ環境(Electron)ならCanvasが使えるので、Node.js依存のsharpなどは不要です。

また、Open LibraryのプレースホルダーCover(1×1px画像)を除外する処理も入れています。

const imageBitmap = await createImageBitmap(blob);
if (imageBitmap.width <= 1 || imageBitmap.height <= 1) {
  throw new Error("プレースホルダー画像のため保存をスキップしました");
}

Bases ファイルの自動生成

プラグインロード時に 本棚.base が存在しなければ自動生成します。Basesのスキーマ(JSON)を直接書き出しているので、ユーザーが手動でファイルを作る必要がありません。


まとめ

課題 解決
書籍情報をいちいち手入力するのが面倒 ISBNから自動取得(NDL / Google Books / Open Library)
和書の表紙が取れないことがある openBD APIで和書の表紙を補完
登録前に内容を確認・修正したい 確認フォームを経由してから登録
表紙画像の管理が煩雑 自動ダウンロード・WebP変換・キャッシュ
本棚ビューがない Bases連携でカードビューを自動生成
フロントマターの編集がやりにくい GUIの編集モーダル(スライダー・D&D対応)

ObsidianでISBN駆動の読書管理を試してみたい方はぜひ使ってみてください!

GitHubでオープンソースとして公開していますので、バグ報告や機能要望はIssuesでお待ちしています。


リンク


おわりに

このプラグインはClaude様とペアプロをして作成しました。
毎度毎度ありがとうございます。☕

1
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?