Vue3でバーコードリーダーからISBNコード読み取って書籍の情報取得するアプリ作ってみた

使い方

1. サイトを開くとカメラの使用を聞かれるので「許可」
2. 表示されたカメラにバーコード合わせる
3. コードが読み取れるとダイアログが出るのでコードが合ってれば「OK」を押す
4. openDBのAPIを使って書籍情報取得
5. カメラの下にカードで読み取った書籍表示

ソースとデモ

ソースはこちら
https://github.com/daiki-gaasuu/vue3-barcode-scanner-demo

デモはこちら
https://daiki-gaasuu.github.io/vue3-barcode-scanner-demo/

開発環境

• Vite
• Vue3
• Vuetify3
• TypeScript
• Vue-Router

使用ライブラリ

• @ericblade/quagga2
• axios

書籍情報取得API

• openDB

参考にしたサイト

• https://watchcontents.com/quaggajs-barcode-reader/

ざっくり解説

1. プロジェクト内に必要なライブラリ追加

yarn add @ericblade/quagga2 axios

2. ライブラリのインポート

Home.vue

import Quagga from "@ericblade/quagga2";
import axios from "axios";
import { ref, onMounted } from "vue";

3. Quaggaの初期セットアップ

Home.vue

onMounted(() => {
  Quagga.init(
    {
      inputStream: {
        name: "Live",
        type: "LiveStream",
        constraints: { // サイズ指定
          width: 360,
          height: 240,
        },
        target: document.querySelector("#camera")!,// idがcameraのDOM要素にカメラ画面が挿入される
      },
      decoder: {
        readers: ["ean_reader"], //ISBNコードは基本これらしい
      },
    },
    function (err) {
      if (err) {
        console.log(err);
        return;
      }
      // エラーがない場合は読み取り開始
      console.log("Initialization finished. Ready to start");
      Quagga.start();
    }
  );
});

4. 読み取り時の処理追加

Home.vue

onMounted(() => {
  Quagga.init(
    {
      inputStream: {
        name: "Live",
        type: "LiveStream",
        constraints: {
          // サイズ指定
          width: 360,
          height: 240,
        },
        target: document.querySelector("#camera")!,
      },
      decoder: {
        readers: ["ean_reader"], //isbnコードは基本これらしい
      },
    },
    function (err) {
      if (err) {
        console.log(err);
        return;
      }
      // エラーがなければ読み取り開始
      console.log("Initialization finished. Ready to start");
      Quagga.start();
    }
  );
  // バーコードをデコードが完了したタイミングでの処理
  Quagga.onDetected((success) => {
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const code = success.codeResult.code!;
    if (calc(code)) {
      const result = confirm(`読み込んだISBNコードは「${code}」で合っていますか？`);
      if (result) {
        Quagga.stop();
        getBookData(code);
      }
    }
  });
  // チェックディジット
  const calc = (isbn: string) => {
    const arrIsbn = isbn
      .toString()
      .split("")
      .map((num) => parseInt(num));
    let remainder = 0;
    const checkDigit = arrIsbn.pop();

    arrIsbn.forEach((num, index) => {
      remainder += num * (index % 2 === 0 ? 1 : 3);
    });
    remainder %= 10;
    remainder = remainder === 0 ? 0 : 10 - remainder;
    return checkDigit === remainder;
  };
  //openDB API実行
  const getBookData = async (isbn: string) => {
    try {
      const res = await axios.get(`https://api.openbd.jp/v1/get?isbn=${isbn}`);
      console.log(res);
      bookApiRes.value = res.data[0].summary;
    } catch (error) {
      console.log(error);
    }
  };
});