機能概要
Google Books APIを用いて、Google Booksから書籍検索をできる機能を作成していこうと思います。
レイアウト作成
はじめに、HTMLとCSSで簡単に画面を作成していこうと思います。
CSSは主に、BootStrapを使用していこうと思います。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<title>書籍検索アプリ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta name="theme-color" content="#7952b3">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h3 class="fw-light">本のタイトルを入力!!</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">タイトル</span>
<input type="text" id="formText" name="myFormText" class="form-control" placeholder="書類タイトルを入力" aria-label="books" aria-describedby="basic-addon1">
</div>
<button id="btn" class="btn btn-primary my-2">本を検索！</button>
<p>
</p>
</div>
</div>
</section>
<div id="bookItem" class="album py-5 bg-light">
</div>
</main>
</body>
<script src="index.js"></script>
</html>
このような画面になります。
これで書籍名を入力するフォームはできました。
ここからは、JavaScriptを実装していきます。
JavaScript
以下がJSファイルのコードになります。
あまりスマートなコードじゃなくてごめんなさい。コードの説明はコメントアウトで記入してあります。
index.js
const btn = document.getElementById("btn");
btn.addEventListener('click', async() => {
// フォームに入力されたテキストの取得
const textValue = document.getElementById("formText").value;
// 書籍検索ができるGoogle Books APIのエンドポイントにフォームから取得したテキストを埋め込む
const res = await fetch(`https://www.googleapis.com/books/v1/volumes?q=${textValue}`);
const data = await res.json();
const bookItem = document.getElementById("bookItem");
for(let i = 0; i < data.items.length; i++){
// 例外が起きなければtryブロック内のコードが実行される
try{
// JSONデータの取得
// 画像を表示するリンク
const bookImg = data.items[i].volumeInfo.imageLinks.smallThumbnail;
// 本のタイトル
const bookTitle = data.items[i].volumeInfo.title;
// 本の説明文
const bookContent = data.items[i].volumeInfo.description;
// 各書籍のGoogle Booksへのリンク
const bookLink = data.items[i].volumeInfo.infoLink;
// 取得したデータを入れるための要素を作成
const makeElement = document.createElement("div");
// 要素別に識別できるようにidに数字を埋め込む
makeElement.setAttribute("id", `bookItem${i}`);
// 取得した要素に作成した要素を挿入
bookItem.appendChild(makeElement);
// 作成した要素を習得
const getBookItem = document.getElementById(`bookItem${i}`);
// APIで取得したデータの分だけHTML要素を作成し、取得した要素にを埋め込む
const setBookElement = `
<div class="container">
<div class="col">
<div class="card shadow-sm">
<div class="card-body">
<img src="${bookImg}"><br>
<a id="link${i}" class="card-text" target="_blank">${bookTitle}</a>
<div class="d-flex justify-content-between align-items-center">
<p>${bookContent}</p>
</div>
</div>
</div>
</div>
</div>
`;
// APIから取得した、実際のGoogle Booksのサイトに飛ばすためのリンクを埋め込む
getBookItem.innerHTML = setBookElement;
const link = document.getElementById(`link${i}`);
link.href = bookLink;
// 途中で例外が発生した場合はcatchブロック内のコードが実行される
}catch(e){
continue;
};
};
});
そうすると以下のような挙動になるはずです。
1.本のキーワードを入力して、検索ボタンを押す。
今回は「野球」というキーワードを入力してみます。
2.そうすると、入力したキーワードに沿った本の一覧が表示されました。
気になった本のタイトルのリンクを押します。
3.押下した本のGoogle Booksの書籍ページに移動します。
こんな感じで、簡単ですが書籍検索アプリを作成することができました。