GoogleBooksAPI概要
- Googleに登録されている本を検索する事ができる。
- 登録なしで使える：1000件/日
- 情報の精度、検索結果が少し弱い
使用API
公式リファレンス
* base_url
* https://www.googleapis.com/books/v1/volumes? + 検索queryq=ウーロン茶
* response:json
{
"kind": "books#volumes",
"totalItems": 1484,
"items": [
{
"kind": "books#volume",
"id": "kFIgNwAACAAJ",
"etag": "wn0MtLjELK0",
"selfLink": "https://www.googleapis.com/books/v1/volumes/kFIgNwAACAAJ",
"volumeInfo": {
"title": "烏龍茶の魅力",
"subtitle": "ポリフェノールに秘められた効果と効能",
"authors": [
"松井陽吉"
],
- 検索クエリのkeyを
qにし、以下のいずれかの必須パラメータを含める。- intitle:検索ワード
q=intitle%検索ワード - inauthor:検索ワード
- inpublisher:検索ワード
- subject:検索ワード
- isbn:検索ワード
- lccn:検索ワード
- oclc:検索ワード
- intitle:検索ワード
- その他オプション
- Pagination
- maxResults:1ページあたりの表示件数
- Pagination
完成図
-
URLSearchParams
- javascriptでは検索パラメーターを作成するにはURLSearchParamsコンストラクタを使用する。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="keyword" />
<button @click="Saerch(keyword)">検索</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data() {
return {
keyword: "",
saerchResults: [],
};
},
methods: {
//クエリストリングの作成
async Saerch(keyword) {
this.saerchResults = []
const baseUrl = "https://www.googleapis.com/books/v1/volumes?";
const params = {
q: `intitle:${keyword}`,
maxResults: 40,
};
const queryParams = new URLSearchParams(params);
console.log(baseUrl + queryParams)
//fetchでjson取得
const response = await fetch(baseUrl + queryParams)
//responseをjsonに変換
.then(response => response.json())
.then(console.log())
for (let book of response.items) {
//jsonオブジェクトのtitle,imageLinks, descriptionまでアクセス
let title = book.volumeInfo.title
let img = book.volumeInfo.imageLinks ? book.volumeInfo.imageLinks : ''
let description = book.volumeInfo.description
//必要な情報をpush, title情報なければ空を追加
this.saerchResults.push( {
title: title ? title : '',
image: img.thumbnail ? img.thumbnail : '',
//40文字以内
description: description ? description.slice(0, 40) : ''
} )
}
},
},
});
</script>
</body>
</html>
