機能概要

Google Books APIを用いて、Google Booksから書籍検索をできる機能を作成していこうと思います。

レイアウト作成

はじめに、HTMLとCSSで簡単に画面を作成していこうと思います。
CSSは主に、BootStrapを使用していこうと思います。

このような画面になります。

これで書籍名を入力するフォームはできました。
ここからは、JavaScriptを実装していきます。

JavaScript

以下がJSファイルのコードになります。
あまりスマートなコードじゃなくてごめんなさい。コードの説明はコメントアウトで記入してあります。

そうすると以下のような挙動になるはずです。

1.本のキーワードを入力して、検索ボタンを押す。
今回は「野球」というキーワードを入力してみます。

2.そうすると、入力したキーワードに沿った本の一覧が表示されました。
気になった本のタイトルのリンクを押します。

3.押下した本のGoogle Booksの書籍ページに移動します。

こんな感じで、簡単ですが書籍検索アプリを作成することができました。
[cv:issue_marketplace_engineer]