google books apiを使った本屋オンライン可視化サービス
はじめに
私は大学4年生のソフトウェアエンジニアです。エンジニアとして活動し始めてから、受託案件を一人で全てこなすことが、一つの目標でした。そんな目標を今回達成することができたので、ブログに記します。
サービス概要
本サービスは、横浜に実店舗を構える「友達本屋」の書籍やイベントなどをオンラインで可視化・発信するWebプラットフォームです。
「友達本屋」は、個人が棚の一区画のオーナーとなり、自身の選んだ本を自由に展示・販売する「シェア型書店」の形態をとっています。
以下が今回開発した、主要機能です。
1.オンラインでの書籍紹介: 各棚オーナーが店頭で販売している書籍の情報を、オンライン上でリアルタイムに反映・紹介するページ。
2.オーナー紹介ページ: 棚を契約しているオーナー（店主）のプロフィールや、どんな本を売っているのかを紹介するページ。
3.イベント紹介ページ：「友達本屋」が開催するイベントを告知、イベント詳細を閲覧できるページ。過去のイベントや開催予定のイベントを分けて見ることができます。
4.管理者向け機能: 店舗側が書籍情報やオーナー情報、イベント情報を容易に追加・更新できる管理画面を提供するページ。
サービスの意義
今回webサービスを導入した意義や目的は以下の二点です。
インフルエンサーの「読む本」を可視化:
実は「友達本屋」の棚オーナーには、インフルエンサーが多く参加しています。彼らが「実際にどんな本を読んだのか」をオンラインで可視化することで、ユーザーはより質の高い読書体験を得ることができます。これは、個人の発信力と書籍を結びつける、Webと非常に親和性の高いと考えられます。
天井をなくす認知度向上と販売機会:
実店舗だけでは、サービスの認知や売り上げに天井が見えていたものを、最大化できます。
具体的には、web上にサービスがあることで圧倒的にマーケがしやすくなります。
案件獲得の経緯
開発実績ゼロの状態から、何とかして案件を獲得し経験を積みたいと考え、朝活コミュニティ「HAYANE」に参加しました。コミュニティのオーナーの方に直接お話しさせていただく中で、「Webの力で課題を解決したい」「そのための実績を作りたい」という思いを率直にぶつけました。
その熱意を受け止めていただき、今回の本屋のサービスの開発案件をご紹介いただきました。
他とは違う受託案件
このプロジェクトが通常の受託開発と大きく違う点は、お客様の中に「こんなシステムが欲しい」という具体的な要望がまだ固まっていなかったことです。
お客様が現状どのような課題を感じているのか、それをWebでどう解決できるのか、全くのゼロベースから一緒に考え、アイデアを出し合いました。その上で、私が技術的に貢献できることと照らし合わせながら要件定義を進めるという、半分コンサルティング、半分は自社開発のような、二人三脚のプロセスを経験しました。
結果的にお客様と共にサービスを作り上げる当事者としての視点を持って要件定義に関わることができ、すごくいい経験になりました。
店頭で販売している書籍の情報を、オンライン上でリアルタイムに反映する仕組み
本サービスは、店頭で販売している書籍の情報を、オンライン上でリアルタイムに反映する仕組みを提供します。具体的には、以下のような実装をしています
Google Books APIを活用した書籍情報の自動取得
本の裏表紙に記述されている、ISBNという本の一意なユニークIDのような番号を、本サービスの管理ページに入力してもらうだけで、本の題名、サムネイル、著者、あらすじを自動で取得することができます。なので、棚のオーナーが店頭に本を売りに来た時にISBNを入力するだけで本の情報がweb上で同期されるようなフローです。
APIリクエスト
- ISBNパラメータを受け取る
- Google Books APIにISBNをクエリとしてリクエスト
- レスポンスから必要な情報（タイトル、著者、説明、サムネイル）を抽出
- 元のサムネイルURLをそのまま返す
フロントエンドでのデータ処理
- APIレスポンスを受け取る
- サムネイルURLをconvertToHttps関数でHTTPSに変換
- 本のプレビューデータをsupabaseに保存
export async function GET(request: NextRequest) {
try {
const { searchParams } = new URL(request.url);
const isbn = searchParams.get('isbn');
if (!isbn) {
return NextResponse.json(
{ error: 'ISBNパラメータが必要です' },
{ status: 400 }
);
}
const apiKey = process.env.NEXT_PUBLIC_GOOGLE_BOOKS_API_KEY;
const query = `isbn:${isbn.replace(/-/g, "")}`;
const res = await fetch(
`https://www.googleapis.com/books/v1/volumes?q=${query}&key=${apiKey}`
);
//以下省略
if (data.items && data.items.length > 0) {
const volumeInfo = data.items[0].volumeInfo;
// サムネイルURLを取得（処理せずそのまま使用）
const thumbnailUrl = volumeInfo.imageLinks?.thumbnail || "";
console.log('Original Thumbnail URL:', thumbnailUrl);
const bookData = {
title: volumeInfo.title || "",
authors: volumeInfo.authors || [],
description: volumeInfo.description || "概要はありません。",
thumbnail: thumbnailUrl,
};
return NextResponse.json(bookData);
//以下
各ページ（ユーザー側）
ホーム
オーナー一覧ページ
オーナー詳細ページ
イベント一覧ページ
イベント詳細ページ
書籍一覧ページ
運営者ページ(全ての情報を運営者が簡単に管理できるページ）
本管理
イベント管理
オーナー管理
技術スタック
フロントエンド
TypeScript,Next.js,Tailwindcss,RedixUI
バックエンド
Typescript,Next.js
データベース
supabase
その他
figma,vercel,google cloaud platform
サービスの今後の展望
今回EC機能は搭載せず、まずはMVPでのサービス運用をする方向性で実装しました。
今後、このサービスのユーザーが増えていき、出版社とも繋がりを作れればECサービス化し、メルカリのようなサービスへ発展していければ嬉しいです。
Discussion