React、Typescript、Styled-componentでカスタマイズQRコードを作る

f:id:bobchan1915:20181107180910p:plain

本記事

本記事ではQRコードを使う中で、実用的に使えるまでに必要となるまでの知識をつけて、実際にTypescirptで生成できるまでを目指します。

また、今回はReact上でやってみようと思います。

QRコードについて

何をするものなのか

バーコードと似たような仕組みで、バーコードは横方向の情報しか持たないのに対して、QRコードは2次元で情報を表現することができる。

格納できるデータは文字列、画像などいろんなメディアに対応している。

元は自動車部品の管理などで使われる用途であったが、その利便性の高さから広く普及しました。

データ容量

QRコードで格納できるデータ量が以下の通りである。また、このデータはバージョンを現段階で最大の40にして、誤り訂正レベルを最低にしたときのものである。

対象	容量
数字のみ	7089文字
英数(US-ASCII)	4296文字

用語

バージョン

バージョンは1~40まであって、セル構成が異なる。

例えばバージョン1は21×21セルであり、バージョン40は177×177セルである。

誤り訂正レベル

QRコードに欠損や、何かしらの障害物で一部読み取れなくても誤りを修正するような仕組みがあり、その修正レベルを誤り訂正レベルという。

レベルL: 7%程度復元できる
レベルM: 15%程度復元できる
レベルQ: 25%程度復元できる
レベルH: 30%程度復元できる

Typescriptで生成してみる

使うライブラリ

github.com

インストール

以下のようにライブラリをインストールをします。

yarn add qrcode.react

このときにTypescriptを使うので型の情報が必要となります。

以下のように@types...もインストールしてください。

yarn add @types/qrcode.react

コンポーネントを作る

私の場合、QRコード単体で呼び出すはなく、ラベルなどをつけて表示したいので、以下のようにコンポーネントにしてしまいます。

まずはimportをします。スタイルづけも同時にしたいので以下のようにstyled-componentsを使います。

import * as React from 'react';
import styled from 'styled-components';
import * as QRCode from 'qrcode.react'
...

次に以下のように実際のクラスを作ります。

export interfare Iprops {
     value: string,
     label?: string
}

export default class QRCode extends React.Component<Iprost, {}> {
    public render(){
        return(
            <StyledContainer>
                    <QRCode value={this.props.value}/>
                    { this.props.label && <p>{this.props.label</p>}
            </StyledContainer>
          )
    }
}
....

スタイリングは以下の通りです。

const StyledContainer = styled.div`
     display: flex;
`

これで完成です。

これで呼び出すときに以下のようにすれば良いです。

public render(){
      <QRCode value="https://somelink" label="これはテストです" />
}

すると以下のようになります。

f:id:bobchan1915:20181107183455p:plain

QRコードをカスタマイズ

はじめに

QRコードの場合は最初の説明にもあったように一部なら破損しても構いません。

今回はレベルをHにして、30%程度かけていてもいいので画像をかぶせたいと思います。

先ほどのQRCodeコンポーネントにpropsを追加します。

<QRCode value={this.props.value} size={64} level="H"/>

すると64×64のQRコードが生成されます。

つまり、画像の大きさは30×30ならばQRコードとしては認識するはずです。

初期配置

まず、以下のように配置します。

ここまではこのようになっています。

<QRCodeContainer>
       <QRCode value="https://google.com" size={64} level="H"/>
       <CoverImage src="https://cdn.iconscout.com/icon/free/png-256/google-231-432517.png" />
</QRCodeContainer>


const QRCodeContainer = styled.div`
`

const CoverImage = styled.img`
`

f:id:bobchan1915:20181107185436p:plain

Styled-Componentで整えて行く

以下のように変更します。

const QRCodeContainer = styled.div`
    position: relative;
`

const CoverImage = styled.img`
    position: absolute;
    height: 30px;
    width: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white
`

すると、以下ようにすることができます。

[ f:id:bobchan1915:20181107194653p:plain

まとめ

簡単にQRコードを生成することができ、画像などをかぶせることでカスタマイズすることができることを知って、何かサービスに活かせそうだなと思いました。

Kekeの日記

エンジニア、読書なんでも