概要

JavaScriptで動的にQRコードの生成できたりしないかなと思って調べてみたら、vue-qrcodeというライブラリを発見したので試しに使ってみました。

デモ

QRコードに設定したい文字列を入力して生成ボタンを押すとQRコードが表示されます。
GitHubリポジトリはこちら

解説

インストール方法

$ npm install @chenfengyuan/vue-qrcode vue

実装

QRCodeGenerator.vue

<template>
  <div>
    <div>
      <label>文字列</label>
      <input type="text" v-model="inputText">
      <input type="button" @click="generate" value="生成">
    </div>
    <vue-qrcode v-if="targetText" :value="targetText" :options="option" tag="img"></vue-qrcode>
  </div>
</template>

<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      inputText: "",
      targetText: "",
      option: {
        errorCorrectionLevel: "M",
        maskPattern: 0,
        margin: 10,
        scale: 2,
        width: 300,
        color: {
          dark: "#000000FF",
          light: "#FFFFFFFF"
        }
      }
    };
  },
  methods: {
    generate: function() {
      this.targetText = this.inputText;
    }
  }
};
</script>
<style scoped>
</style>

生成タイミング

<template>内に記述したコンポーネント(今回は<vue-qrcode>)のvalueが更新されたタイミングで生成されます。
ただし、valueの中身が空だとライブラリ本体の中で例外が投げられる(動作に問題はありませんが)ので、気になる方は上記のソースのようにコンポーネントにv-ifで表示条件を設定しておく事で、条件に合致しない場合はライブラリのQRコード生成処理が呼ばれないようにできます。

と、いうことで今回の実装では生成ボタン押下時、generateメソッド内でtargetTextを書き換えることでQRコード生成処理を呼び出しています。

Optionについて

QRコードを生成するにあたり、いくつかのオプションを指定できます。

version
errorCorrectionLevel
maskPattern
toSJISFunc
margin
scale
width
color.dark
color.light

version

QRコードのバージョンを指定します。(1～40)
バージョンとは、QRコード内に持たせるデータ量や文字の種類、誤りレベルによって決まるコードのサイズです。
指定しなければvalueに設定された文字列に合わせて自動で決定されます。

errorCorrectionLevel

使用する誤り訂正機能を指定します。(L,M,Q,H)
誤り訂正機能とは、QRコードが多少汚れていてもうまいこと補完して正しい内容を読み取れるようにする機能です。

maskPattern

QRコードのマスクパターンを設定します。(0～7)
マスクパターンとは、QRコードの形を整える(白黒の割合をいい感じにする)ためのマスク処理のパターンの事で、8種類のパターンが存在します。

toSJISFunc

QRコードに保持する文字列に漢字(文字コードSJIS)を含ませたい場合、変換処理を独自の関数で定義できます。
(特に設定しなくても大抵の漢字は正しく使用できるようです。)

margin

QRコードとして表示する画像データの余白を指定します。

scale

QRコードの１セルの大きさを指定します。(pixel)

width

QRコードの画像サイズを指定します。
上述のscaleとwidthが同時に設定された場合、widthの設定が優先されるようです。

Vue.jsでQRコード生成

概要

デモ

解説