Vue.jsのコンポーネントライブラリを使ってQRコードの生成と読取を試してみた

Vue.js いいですよね、双方向データバインディングの実装がしやすく、jQueryを使っていたためにどうしても複雑になってしまっていたところをシンプルに書くことができるように思います。
既存のWebサービスのフロントを刷新する際に移行するフレームワークの一つとして、弊社でも採用が進んできていますし、Vueコンポーネントライブラリーも充実してきていますので、ちょっとしたものを個人的に作るときにも採用しています。

今回、Vueを使用しているプロジェクトでQRコード機能が必要になった時のために下記のコンポーネントライブラリを試してみたいと思います。

QRコードの生成

まずはQRコードを生成するため、superman66氏が公開している、vue-qartを利用してみます。

vue-qartは任意の画像を元に、QRコードを生成できる、QArt.jsをVueから使用するためのコンポーネントライブラリです。

利用方法

<template>
  <div id="qrGenarate"> 
    <vue-q-art :config=config></vue-q-art>
    QR読み取り内容設定: <input v-model="config.value" style="width:200px">
  </div>
</template>

<script>
import VueQArt from 'vue-qart'

export default {
  components: {
    VueQArt
  },
  name: "qrGenarate", 
  data() {
    return {
      config: {
        // valueにはinput v-modelにて動的に入力した値が設定されるため空文字を設定
        value: "", 
        imagePath: "/img/example.jpg",
        filter: "color",
      }
    };
  },
}
</script>

生成したQRコード

今回は読み取り時のデータとして、このテックブログのURL(https://techblog.istyle.co.jp)を指定してみます。

簡単にQRコードを生成することができました。

ただし、現在のバーション(v2.1.0)はサイズの変更ができないようです。
vue-qartのpackage.jsonを確認してみると、使用していQArt.jsのバージョンが1.1.1となっており、サイズ変更に対応されていると思われる1.1.2を取り込んで弊社久保田がPRを作成したのですが、どうやら問題があるようで、Closeされていました。サイズ変更の対応が待たれるところです。

QRコードの読み取り

QRコードの読み取りについては、読み取りライブラリである、jsQRをVueから利用するためにvue-qrcode-readerを、gruhn氏が公開してくださっています。

利用方法

<template>
  <div class="qrReader">
    <qrcode-reader :paused="paused" @init="onInit" @decode="onDecode"></qrcode-reader>
  </div>
</template>

<script>
  import { QrcodeReader } from 'vue-qrcode-reader'
  export default {
    components: { QrcodeReader },
    name: "qrReader",
    data () {
      return {
        paused: false
      }
    },
    methods: {
      async onInit (promise) {
        // show loading indicator
        try {
          await promise
          // successfully initialized
        } catch (error) {
          if (error.name === 'NotAllowedError') {
            // user denied camera access permisson
          } else if (error.name === 'NotFoundError') {
            // no suitable camera device installed
          } else if (error.name === 'NotSupportedError') {
            // page is not served over HTTPS (or localhost)
          } else if (error.name === 'NotReadableError') {
            // maybe camera is already in use
          } else if (error.name === 'OverconstrainedError') {
            // passed constraints don't match any camera. Did you requested the front camera although there is none?
          } else {
            // browser is probably lacking features (WebRTC, Canvas)
          }
        } finally {
          // hide loading indicator
        }
      },
      onDecode(content){
        this.paused = true
        alert(content)
      }
    }
  }
</script>

実際に試してみた（iOS11.2 safariを利用）

読み取ってみると、生成時に入力したURLをデータとして受け取ることができました。

iOS11からはsafariでもQRコードが読み取れるようになっているのですが、httpsで公開されているページであることが必須となっていますので、今回の内容を実際に試される場合は、皆さんでhttps環境を準備するか、一時的に公開してよいページであれば、https://ngrok.com/といったホスティングサービスを使ってみるとよいでしょう。

最後に

画像を使ったQRコード生成、読み取りが簡単にできるっていいですよね。素晴らしいライブラリー作者の皆様に感謝ですね！！
今回は内部実装まで追いかけてはいませんでしたが、ソースコードの中身を追って、どういった作りなのか探っていこうと思います！

一緒にフロントエンドを開発・改善してくださるメンバー募集中です。