ブクログで管理している本をブログに本棚表示する方法

2 min read



読んだ本をブクログ管理しつつ、Bloggerに本棚を表示したい

読んだ本の記録は、長年「ブクログ」を使っている。

特に不便を感じているわけではないが、個人ブログは自己の記録を残す場所でもあるので、読んだ本をブログ上にも表示したくなってきた。

ブクログ公式の本棚埋め込みはすでに終了している

ブクログには以前、ブログに埋め込める公式の本棚パーツがあったが、現在は正式提供が終了している。

今でもAPIを使って表示させる方法はあるものの、

  • デザインの自由度が低い

  • どこか古臭い印象がある

という理由から、ChatGPTに相談しながら自作してみることにした。

参考：ブクログの本棚を埋め込む方法 - Tech Ecology@六菱忍軍

やりたいこと

やりたい流れは以下の通り。

  • ブクログで読書管理

  • ブログに本棚として表示

このブログは Blogger を使っているため、GitHub Pagesのように自動更新するのは少し難しい。

そこで、ブクログから本の一覧をHTMLとして出力し、それを固定ページに貼り付けるという方法を取ることにした。

基本的な作業の流れ

Mac環境で、以下の手順を行う。

  • デスクトップに作業用フォルダを作成
  • テキストエディットで build.js を作成
  • ターミナルで node build.js を実行

すると output.html が生成される。テキストエディットを保存する時には拡張子をjsで保存する必要があるので注意。

このHTMLを、Bloggerの固定ページ → HTML表示モード に貼り付ければ完成。

build.jsには以下のコードを書く。

つまずきポイント①：本が途中までしか取得できない

最初に試したとき、本棚の本が途中までしか取得できなかった。原因はコードではなく、ブクログ本棚の仕組みだった。

ブクログの本棚は、

  • ページを下にスクロールすると

  • 追加の本が 動的に読み込まれる（遅延ロード）

という構造になっている。

そのため、

  • 表示されていない本はHTMLに存在しない

  • ページ保存時点で見えていた分しか取得できない

対策として、本棚ページを一番下までスクロールしてから保存することで、すべての本を取得できるようになった。

つまずきポイント②：書影がボヤける

これで完成…と思ったが、一部の本の書影がボヤけて表示される。

原因は、

  • ブクログの書影が小さい

  • それをブログ側で大きく表示している

ためだった。

Amazonの書影を使うことにした

このままでも問題はないが、どうせなら綺麗な書影を使いたい。

そこで、

  • ISBNを元にAmazonの書影を取得

  • クリック時はAmazonアフィリエイトリンクへ遷移

するように変更した。

最初はJSON APIやRSSを試したが、うまく動作せず、最終的に ブクログの本棚ページをHTML保存して解析する方法に落ち着いた。

実際のやり方

  • ブクログの本棚ページを開く

  • 一番下までスクロール

  • 右クリック →「ページを別名で保存」

  • 保存形式は「Webページ、完全」

  • ファイル名を saved.html にして保存

フォルダ構成は以下のようになる。

booklog/

├ build.js

├ saved.html

└ taka-book-log_files/   ← 自動生成（無視してOK）

build.jsは以下のコードに差し替える。

build.js を実行すると output.html が生成されるので、これをBloggerの固定ページに貼り付ければ完了。

更新方法（運用）

更新は月1回行う。

ブクログ本棚（HTML）手動で保存（月1回）→saved.html→build.js→output.html（Bloggerに貼る）

完全自動ではないが、月1回の作業で読書記録をブログに残せるようになった。作成した本棚ページは冒頭の写真のように一覧で表示され、クリックするとAmazonのページに飛ぶようになっている。動作は以下リンクから確認できる。

書棚 | t_mlog

参考


 

※ 本記事で紹介している方法は、ブクログの公式APIや公式機能ではありません。HTMLを保存して加工する非公式な手法のため、ブクログ側の仕様変更により動作しなくなる可能性があります。

コメントを投稿