はじめに
こんにちは。技術統括本部 プラットフォーム事業部 東と申します。
数年前まで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ではジャンルを問わずに技術大好きなエンジニアを大募集中です。
興味を持っていただいた方は、ぜひこちらをご覧ください!
参考文献
この記事は以下の情報を参考にして執筆しました。