書籍購入をもっと便利に！！openBDで書誌情報検索！

# オンラインで本を買う
書籍をオンラインで買うときに困るのは、本の中身がイマイチよくわからないことです。ショッピングサイトによって掲載している書誌情報もまちまちで、ときには出版社のサイトまで目次を眺めに行ったりします。このひと手間を怠ると、届いてみたら思っていたものと違った、なんてこともあるので油断はできません。

書籍をサクサク検索できて、書誌情報が１ページに集約されいて、なおかつ常に最安値で買えるようなサイトがあれば...。
そんな願いの第一歩として、書籍情報のAPIであるopenBDを活用してサクっと書誌情報を確認できるWEBアプリを作ってみました！

https://openbd.jp/


# 実行環境
#### API
- openBD 書誌API

#### ライブラリ / フレームワーク
- axios
- Vue.js
- Spectre.css

https://picturepan2.github.io/spectre/

#### ホスティング
- netlify

https://www.netlify.com/

#### ブラウザ
- Google Chrome

# 作成したWEBアプリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2135866/3eb5f8d3-7d32-4ef9-30eb-b60b42deab2c.png)

https://adoring-mcnulty-705ba3.netlify.app/

ISBNで検索をかけると目次を含む書誌情報が表示されます。



:::note warn
その他の情報での検索は不可
:::

:::note warn
一定期間後、公開停止予定
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2135866/7221839b-c250-c9c6-90e7-a821127ba3e0.png)


### 最近ほしい本で試す
- 『いちばんよくわかるHTML5＆CSS3デザインきちんと入門』（狩野祐東／著,SBクリエイティブ)
書影も表示できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2135866/2e713a9b-ce78-17c8-1ca8-014624235cb8.png)

- 『インフラ／ネットワークエンジニアのためのネットワーク技術＆設計入門 第2版』（みやたひろし／著,ＳＢクリエイティブ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2135866/79cf38ff-2832-60aa-1107-4cc64505a85b.png)

- 『1日1問、半年以内に習得 シェル・ワンライナー160本ノック』（上田 隆一 ・山田 泰宏・その他 /著, 技術評論社）
たまに見つからないことも。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2135866/816a3b3e-056a-156a-07e4-09bbfc77383f.png)

:::note warn
現状のエラーハンドリングでは、エラーはすべて上記の画面になります。
:::

# 作成したコード（HTML)
### header部分
CDNでVue.js、axios、spectre.cssをインポート

```html
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.min.js"></script>

        <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
        <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
        <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
        <title>openBDで検索！</title>
    </head>
```

### body部分
pタグを並べつつ、それらをdivタグで管理。
Vue.js用のID`<div id="app">`を書いておく、`Spectre.css`の`<div class="columns">`を記述しておく、など。

```HTML
    <body>
    <h1 class="text-bold"
        class="text-center"
    >openBDで検索！</h1>
    
    <div id="app">
        <div class="columns">
            <p>ISBNを入れてね</p>
            <input type="text" value=""
                v-model="ISBN" 
                @keydown.enter="isbnSearch">
            </input>
            <button v-on:click="isbnSearch()" 
                    class="btn btn-primary"
            >検索！</button>
        </div>
        <div class="columns">
            <div class="column col-8">
                <p > タイトル　：{{ book.title }} </p>
                <p> ISBN 　：{{ book.isbn }} </p>
                <p> 著者　：{{ book.author }} </p>
                <p> 出版社　：{{ book.publisher }} </p>
            </div>
            <div  class="column col-4">
                <img :src= "book.coverURL" >
            </div>
            <div class="column col-12">
                <p class="text-small"> 詳細　<br>{{ book.discription}} </p>
                <p class="text-small"> 目次　<br>{{ book.contents}} </p>
            </div>
        </div>
    </div>
    
    
    </body>
```

### script部分
Vueインスタンスを生成して、各種プロパティとメソッドを定義しておく。
要となるのは`isbnSearch()`メソッドで、ここで`axios.get()`でopenBD APIをたたいている。


```html
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                ISBN: '',
                book: {
                    text: '',
                    isbn: '',
                    title: '',
                    author: '',
                    coverURL: 'https://via.placeholder.com/200x100',
                    publisher:'',
                    discription: '',            //書籍の説明
                    contents: ''               //書籍の目次
                }
                },
            methods: {
                intialize: function(){  //変数を初期化する
                    this.book.isbn = '';
                    this.book.title = '';
                    this.book.author = '';
                    this.book.coverURL = 'https://via.placeholder.com/200x100';
                    this.book.publisher = '';
                    this.book.discription = '';
                    this.book.contents = '';
                },
                isbnSearch: function(){
                    //書誌情報をopenBDから取得
                    axios.get("https://api.openbd.jp/v1/get?isbn=" + this.ISBN + '&pretty')
                    .then(response => {
                        //既存の表示内容を消去
                        this.intialize();

                        //受け取った書誌情報の入力
                        this.book.isbn = response.data[0].summary.isbn;
                        this.book.title = response.data[0].summary.title;
                        this.book.author = response.data[0].summary.author;
                        this.book.coverURL = response.data[0].summary.cover;
                        this.book.publisher = response.data[0].summary.publisher;
                        this.book.discription = response.data[0].onix.CollateralDetail.TextContent[1].Text;
                        this.book.contents = response.data[0].onix.CollateralDetail.TextContent[2].Text;

                        //検証用
                        console.log(response.data[0]);
                        console.log(response.status);
                        },
                    )
                    .catch(error => {
                        //既存の表示内容を消去
                        this.intialize();
                        this.book.isbn = this.ISBN + '　エラー：書籍が見つかりませんでした。ISBNを確認してください';
                        
                        //検証用
                        console.log(error.status);
                        }
                    )
                    this.ISBN = '';
                }
            }
        });
    </script>
    <style type="text/css">
    p {
        background: #f7f8f9;
        color: inherit;
        display: block;
        line-height: 1.5;
        overflow-x: auto;
        padding: 0.5rem;
        width: 100%;
    }
    </style>

    </html> 
```

# 課題

- 画面左の余白が足りていない
- 目次の階層構造が崩れる
    - openBDの仕様上、目次情報は一つのテキストで返ってくるため
    - 目次のフォーマットが統一されておらず、成形することも難しい
    - いい方法あればコメントにお願いします！
 
# 展望
- タイトルやジャンルなど、ISBN以外の情報で検索
- openBD以外のAPIからも情報を集める
- 検索結果の画面にAmazonなど各ショッピングサイトのリンクを集約する