Vue.jsでJSONをQRコードに変換して画面に表示した話

はじめに

こんにちは。技術統括本部 プラットフォーム事業部 東と申します。
数年前までCOBOLでプログラムを書いていたコボラーです。
現在はOPTiM Cloud IoT OS(以下CIOSと呼ぶ)のIoT機能のフロントエンドの開発をしています。
よろしくお願い致します。

開発の背景

CIOSのIoT機能の拡張案として、カメラ付きのIoT端末を簡単にCIOSに接続したいという要望が上がりました。
そのため、CIOSに接続する際に必要となる情報をQRコードに変換する機能を実装しました。

環境

• npm: 6.13.4
• node: 12.14.0
• vue: 2.6.12
• @chenfengyuan/vue-qrcode: 1.0.2

ライブラリのインストール

QRコード生成用のライブラリをインストールします。

$ npm install @chenfengyuan/vue-qrcode vue

オブジェクトの定義

次にJSON形式でdata()にオブジェクトを定義します。 オプションの詳細はこちらをご参照ください。

  data () {
    return {
      /** QRコード形式でデータを持たせるオブジェクト */
      qrJson: {
        user: {
          name: 'user0001'
        },
        device: {
          id: 123,
          device_name: 'device0001'
        }
      },
      /** QRコードの生成オプションを定義します */
      option: {
        errorCorrectionLevel: 'M',
        maskPattern: 0,
        margin: 10,
        scale: 2,
        width: 300,
        color: {
          dark: '#000000FF',
          light: '#FFFFFFFF'
        }
      }
    }
  },

JSON形式のデータをエンコード

当ライブラリはJSON形式に対応していないため、Base64にエンコードしてからQRコードにします。

  created () {
    this.qrSrc = btoa(JSON.stringify(this.qrJson))
  }

実装

<template>
  <vue-qrcode
    v-if="qrSrc"
    :value="qrSrc"
    :options="option"
  />
</template>

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

export default {
  components: {
    VueQrcode
  },
  data () {
    return {
      /** QRコード形式でデータを持たせるオブジェクト */
      qrJson: {
        user: {
          name: 'user0001'
        },
        device: {
          id: 123,
          device_name: 'device0001'
        }
      },
      option: {
        errorCorrectionLevel: 'M',
        maskPattern: 0,
        margin: 10,
        scale: 2,
        width: 300,
        color: {
          dark: '#000000FF',
          light: '#FFFFFFFF'
        }
      }
    }
  },
  created () {
    this.qrSrc = btoa(JSON.stringify(this.qrJson))
  }
}
</script>

QRコード

ブラウザを開くとQRコードが生成されています。

デコード

IoT端末側で読み取った文字列をatob関数を使ってデコードすればJSON形式でデータを取り出すことが出来ます。

さいごに

OPTiMではジャンルを問わずに技術大好きなエンジニアを大募集中です。
興味を持っていただいた方は、ぜひこちらをご覧ください！

参考文献

この記事は以下の情報を参考にして執筆しました。

• @chenfengyuan/vue-qrcode
• Vue.jsでQRコード生成
• MDN Web Docs Base64