🎃

Vue.jsでQRコードを生成してみる

に公開
Vue.js
QR コード
tech

Vue.jsでQRコードを生成してみる

はじめに

  • Vueは初心者です
  • Windows環境で実装を進めます
  • QRコードを生成する機会がありVueで実現できそうだったので書いてみました

環境準備

Node.js install

Node.jsのインストールが必要なのでこちらからインストールしてください。
インストールは確認は、下記になります。versionが出力されればOKです。

node -v
v19.7.0

プロジェクト作成

今回はvue-qrcode-appとして作成する。

npm init vite@latest vue-qrcode-app -- --template vue

npm install

vue-qrcode-appのカレントディレクトリでnpm installを実行する
Vue.jsを動作させるために必要なリソース群を取得する

npm install

vue-qrcode install

vue-qrcode-appのカレントディレクトリでvue-qrcodeのinstallを実行する

npm install @chenfengyuan/vue-qrcode vue

開発サーバを起動確認

vue-qrcode-appのカレントディレクトリnpm run devを実行する

npm run dev

VITE v4.1.4  ready in 370 ms
 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h to show help

ブラウザでhttp://localhost:5173/にアクセスして下記のページが表示されればOKです。

Vue実装

App.vueを変更する

QRCodeGenerator.vueを新規作成する想定なのでimportを変えています。

<script setup>
import QRCodeGenerator from './components/QRCodeGenerator.vue'
</script>

<template>
  <QRCodeGenerator msg="Vue.jsでQRコードを生成してみる" />
</template>

QRCodeGenerator.vueを作成する

<script setup>
const props = defineProps({
  msg: String
})
</script>

<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";

export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      formInput: {
        placeholder: 'QRコードを生成したい文字を入力してください', ← placeholderをbindするために記述しています。
        size: 50, ← text sizeの指定のために記述しています。
        inputText: "",
      },
      option: {
        errorCorrectionLevel: "M",
        maskPattern: 0,
        margin: 10,
        scale: 2,
        width: 500,
        color: {
          dark: "#000000FF",
          light: "#FFFFFFFF"
        }
      }
    };
  },
  methods: {
    generate: function() {
      this.generateText = this.formInput.inputText;
    }
  }
};
</script>

<template>
  <h1>{{ msg }}</h1>
  <div>
    <div id="inputForm">
      <input type="text" v-model="formInput.inputText" v-on:keydown="generate" v-bind="formInput">
    </div>
    <vue-qrcode v-if="generateText" :value="generateText" :options="option" tag="img"></vue-qrcode>
  </div>
</template>

optionに指定できるproperty

property 概要
version QRコードのバージョン指定になります。画像サイズによって指定する情報
errorCorrectionLevel L,M,Q,H を指定することができる
maskPattern 0～7 を指定することができる
toSJISFunc 文字列を変換する処理を拡張するために用意されている
margin
scale
width
color.dark
color.light

ブラウザで動かしてみる

テキストボックスに文字を入力すると、QRコードが生成されれます。

https://test.com/と入力してみました。

感想

QRコードを生成するライブラリー提供のおかげで、少ない実装量で実現ができました。
感謝感謝

Discussion