ざっくり解説【バーコードから書籍情報取得】

“`js
const BOOK_API_PREFIX = ‘https://www.googleapis.com/books/v1/volumes?country=JP&q=isbn:’;

function doGet() {
return HtmlService.createHtmlOutputFromFile(‘index’);
}

function addBook(isbnCode) {
try {
const bookInfo = _fetchBookInfo(isbnCode);
_appendBookRow(bookInfo);
} catch (error) {
console.error(error);
}
}

function _fetchBookInfo(isbnCode) {
const searchRes = UrlFetchApp.fetch(BOOK_API_PREFIX + isbnCode);
const searchResJSON = JSON.parse(searchRes.getContentText());

if (!searchResJSON.hasOwnProperty(‘items’)) {
throw ‘書籍が見つかりません’;
}

const bookInfoRes = UrlFetchApp.fetch(searchResJSON.items[0].selfLink + ‘?country=JP’);
return JSON.parse(bookInfoRes.getContentText());
}

function _appendBookRow({volumeInfo}) {
const title = volumeInfo.title;
const authors = volumeInfo.authors?.join(‘,’) ?? ”;
const isbnCode = volumeInfo.industryIdentifiers.find(v => v.type === ‘ISBN_13’).identifier;
const thumbUrl = volumeInfo.imageLinks?.smallThumbnail;
const thumb = thumbUrl ? =IMAGE("${thumbUrl}") : null;

const sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow([thumb, title, authors, isbnCode]);

//サムネ用高さ調整
if (thumb) {
const row = sheet.getLastRow();
sheet.setRowHeight(row, 90);
}
}

</details><a href="https://blog.syn-sophia.co.jp/wp-content/uploads/2022/09/gs_code_paste.webp"><img class="aligncenter size-full wp-image-1398" src="https://blog.syn-sophia.co.jp/wp-content/uploads/2022/09/gs_code_paste.webp" alt="" width="953" height="443" /></a>

### index.htmlファイルの作成

次に`+`ボタンをクリックして、`HTML`を選択し、`index.html`ファイルを追加します。
ファイル名は`index`と入力してください。

<a href="https://blog.syn-sophia.co.jp/wp-content/uploads/2022/08/create_index_html.webp"><img class="aligncenter size-full wp-image-1369" src="https://blog.syn-sophia.co.jp/wp-content/uploads/2022/08/create_index_html.webp" alt="" width="607" height="376" /></a>

index.htmlファイルには下記のコードを貼り付けてください。

<details><summary>クリックしてソースコードの全文を見る</summary>```html



<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js" integrity="sha512-bCsBoYoW6zE0aja5xcIyoCDPfT27+cGr7AOCqelttLVRGay6EKGQbR6wm6SUcUGOMGXJpj+jrIpMS6i80+kZPw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
    body, html {<br />
      margin: 0;<br />
      overflow: hidden;<br />
    }<br />
    #camera-view {<br />
      width: 100%;<br />
      height: auto;<br />
    }<br />
  </style>&nbsp;
<div id="camera-view"></div>
<script>
    Quagga.init({
      locate: false,
      frequency: 2,
      inputStream: {
        type: 'LiveStream',
        target: document.getElementById('camera-view'),
        constraints: {
          width: 1080,
          height: 1080,
          frameRate: 10,
          tryVertical: true,
          facingMode: 'environment',
          focusMode: 'continuous',
          successTimeout: 1000,
        },
        area: {
          top: '20%',
          right: '20%',
          left: '20%',
          bottom: '20%',
        },
      },
      decoder: {
        readers: ['ean_reader'],
        multiple: false,
      },
    }, error => {
      if (error) {
          console.error(error);
          return;
      }

      Quagga.start();
    });

    Quagga.onDetected(async result => {
      if (!confirm('コードを登録しますか？')) {
        return;
      }

      google.script.run.addBook(result.codeResult.code);
    }); 
  </script>