書籍に載っている参考文献をまとめるサイトを作成したので紹介

書籍に載っている参考文献をまとめるサイトを作成したので紹介

目次

はじめに#

書籍の参考文献まとめサイト
書籍の参考文献まとめサイト

書籍の参考文献をまとめたサイトを公開したので紹介します!
技術的にはいつもどおりにAstroを使用して作成しました。

書籍の参考文献まとめサイト
書籍の参考文献をまとめたサイトになります。参考文献以外にも関連書籍やガイドブックに出てきた書籍も掲載しています。
書籍の参考文献まとめサイト favicon
sankoubunken.com
書籍の参考文献まとめサイト

作成した利用#

次に読む本を探す際に、読んできた本の参考文献や関連書籍、ガイドブックに出てきた書籍から読むことがあります。なので、参考文献がまとめられたサイトはないのかなと思ってたのですが、現状存在しないので、作成して公開してみました!

このように個人的に欲しいからといった理由で作成したので、手持ちにある本や読んでいる本に載ってる参考文献を登録していくので、まだ登録されている本は少ないですが、今後も増やしていきたいと思います!

また、収益化も達成したいと思ってたので、参考文献をまとめたサイトはいい感じになるのではという期待もあります。

技術的なこと#

フレームワークとしてはいつもどおりにAstroを使用して作成しました。最初は勉強のためにバックエンドやデータベースも用意して作成しようと思ったのですが、費用がかかるのと、面倒だったので、結局AstroのContent Collectionsを使用して作成しました。

ディレクトリはcontentフォルダの中にbookreferenceの2つのディレクトリを作成し、bookディレクトリには本の情報を、referenceディレクトリには参考文献の情報を入れるようにしました。

src
├── content
│   ├── book
│   └── reference

全て手動で登録するのは大変なので、Google Books APIを使用して、ISBNコードから本の情報を取得して登録できるようなスクリプトを作成しました。

ISBNから本を登録するスクリプト
import fs from "fs";
import path from "path";
import "dotenv/config";
 
const isbn = process.argv[2];
 
if (!isbn) {
  console.error("ISBNを指定してください");
  process.exit(1);
}
 
const API_KEY = process.env.GOOGLE_BOOKS_API_KEY;
 
const fetchWithRetry = async (url, retries = 5) => {
  for (let i = 0; i < retries; i++) {
    const res = await fetch(url);
 
    if (res.status !== 429) return res;
 
    const wait = 2 ** i * 500;
    console.log(`429 → ${wait}ms 待機`);
    await new Promise((r) => setTimeout(r, wait));
  }
 
  throw new Error("429: Retry上限に到達");
};
 
const fetchBook = async () => {
  const googleRes = await fetchWithRetry(
    `https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}&country=JP&key=${API_KEY}`,
  );
  const googleJson = await googleRes.json();
 
  if (!googleJson.items?.length) {
    throw new Error("書籍情報が見つかりません");
  }
 
  const v = googleJson.items[0].volumeInfo;
 
  return {
    title: v.title,
    subtitle: v.subtitle || "",
    authors: v.authors || [],
    publisher: v.publisher || "",
    publishedDate: v.publishedDate || "",
    description: v.description || "",
    isbn,
    image: v.imageLinks?.thumbnail || "",
    createdAt: new Date(),
  };
};
 
(async () => {
  const book = await fetchBook();
 
  const frontmatter = `---
isbn: "${book.isbn}"
title: "${book.title}"
subtitle: "${book.subtitle}"
authors:
${book.authors.map((a) => `  - "${a}"`).join("\n")}
publisher: "${book.publisher}"
publishedDate: "${book.publishedDate}"
description: "${book.description.replace(/"/g, '\\"')}"
image: "${book.image}"
category: ""
amazonLink: ""
createdAt: ${book.createdAt.toISOString()}
---
`;
 
  const fileName = `${book.isbn}.mdx`;
  const outputPath = path.resolve("src/content/book", fileName);
 
  fs.writeFileSync(outputPath, frontmatter);
  console.log(`✔ 作成完了: ${outputPath}`);
})();

まだ、AmazonのAPIが利用できないので、Google Books APIを利用してますが、利用できるようになったら、もっと楽に登録できるようにしたいと思います!

おわりに#

書籍の参考文献をまとめたサイトを作成して公開したので紹介しました!書籍に載っている参考文献は信頼できる面白い本の場合が多いかと思うので、眺めてみるだけでも楽しめるかと思うのでぜひ覗いてみてください!

長い目で本の登録をしていき続けていきたいと思います!

Related Post
初学者向けのWeb制作についてのメディアサイト「Feylo」を作成したので紹介
image

はじめに

Web制作についてのメディアサイト「Feylo」

この度、初学者向けの Web 制作についてのメディアサイト「Feylo」を作成したので紹介します! 技術的には、Nuxt.js を使用して作成しました!技術的な部分はコードを見ていただければなので、この記事ではデザインに関して参考にしたサイトなどを紹介します。

https://feylo.dev

リポジトリは下記で公開してます!

https://github.com/nono-k/feylo

参考にしたサイト

このメディアサイトを作成するにあたり、参考にしたサイトを紹介します。

全体的なデザイン

JY-CONTENTS UNIQUE BLOG

https://jy-contents.com/

前から Web 製作についてのメディアサイトを作りたいと思っていたのですが、当初はブログサイトみたいな感じなのでアニメーションなどは付ける予定はありませんでした。

ですが、このサイトを見てブログサイトなのに、すごく目立っていて印象に残るサイトで良いなと思ったので自分が作ったサイトもアニメーションを駆使して初見で目立ち印象に作るサイトにしたいと思い作成しました。

文字の無限ループや、ホバーアニメーション、ハンバーガーメニュー、ブログ詳細のページ、ランダム記事など多くの部分で参考にさせていただきました。

Meta Data
公開日:2025-07-06
Tags:
#実績紹介
#Web
Astro製のブログにCloudinaryを導入する
image

はじめに

このブログと技術ブログは、Astro の Content Collection を使ってマークダウンでブログを書いていて、記事は GitHub で管理してます。

Astro の Image コンポーネントを使うために、ブログ記事の画像も src/assets/images/配下に配置していました。しかし、ローカルで画像を管理したくないなと思ったので Cloudinary を導入してみました。

Astro での Cloudinary の導入方法について、この記事では紹介します。 Cloudinary の詳しいオプションなどは解説しないのと、Cloudinary のアカウントが既にあるのを前提に説明します。

まだの方は下記 URL からアカウントを作成してください。

https://cloudinary.com/

Astro Cloudinary のインストール

Astro で使える Cloudinary のコンポーネントが用意されてます。下記コマンドで Astro Cloudinary をインストールしましょう。

npm install astro-cloudinary

インストールできたら、プロジェクトのルートに.envファイルを作成して、Cloudinary のアカウント情報を記述します。

PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
Meta Data
公開日:2025-05-19
Tags:
#Web
#Astro
技術ブログをアドセンスに合格するのに1年かかった話

はじめに

Web 制作に関して書いている技術ブログの方で、1 年越しでアドセンスに合格したので、その経緯について書いていきます。

同じようにブログをやっていて、なかなかアドセンスに受からない…と悩んでいる方の参考になれば幸いです。

https://hypb.dev

始まり:技術ブログを始めた理由

未経験から Web 制作会社に転職してから半年が過ぎた頃、日々の学びや試行錯誤をアウトプットする場所が欲しくてブログを始めました。(あとは少しの収益が欲しかった笑)

技術系の内容がメインで、以下のような記事を書いていました。

  • Astro についての情報
  • GSAP や Swiper などのライブラリーを使ったアニメーション表現
  • 自分の開発環境など

「どうせ書くなら収益化もできたら嬉しいな」と思い、ブログ開設から数記事でアドセンスに申し込んでみたのですが…

不合格の連続:何が悪いのか分からない

最初の審査結果は「不合格」。理由は「価値の低いコンテンツ」とのことでした。

Meta Data
公開日:2025-05-14
Tags:
#Web
Info