はじめに
ReactでQRコードリーダを作ります。
create-react-app と react-qr-reader を使って簡単に作ります。
QRコードリーダの作成
最初にcreate-react-appを使って、React環境を作成します。
今回は、qrcode-readerというディレクトリに作成します。
npx create-react-app qrcode-reader
次に、react-qr-readerをインストールします。
react-qr-readerのページに書かれているインストール方法で、
以下のコマンドを実行します。
cd qrcode-reader
npm install --save react-qr-reader
最後に、react-qr-readerのサンプルコードを参考にsrc/App.jsを書き換えます。
import React, { Component } from 'react'
import QrReader from 'react-qr-reader'
class App extends Component {
state = {
result: 'No result'
}
handleScan = data => {
if (data) {
this.setState({
result: data
})
}
}
handleError = err => {
console.error(err)
}
render() {
return (
<div>
<QrReader
delay={300}
onError={this.handleError}
onScan={this.handleScan}
style={{ width: '100%' }}
/>
<p>{this.state.result}</p>
</div>
)
}
}
export default App;
QRコードリーダの確認
作成したコードが動作するか確認します。
以下のコマンドでローカルサーバを起動します。
npm start
この後ブラウザで、http://localhost:3000/ を表示します。
カメラでQRコードを読むと、画面の下にQRコードの文字列を表示します。
スマホから確認
QRコードリーダがスマホでも動くか確認します。
ローカルサーバを起動した開発マシンと同一ネットワークに
存在するスマホのブラウザで確認します。
npm startした時に画面上に以下のような文字が出ていると思います。
IPアドレスは、環境により異なるので、画面上に出ているURLを
ブラウザに入力します。これで作成したコードがスマホで実行できるか確認できます。
On Your Network: http://192.168.0.1:3000/
上記の方法では、iPhone(iOS12.2)では、うまく表示できませんでした。
最初は、開発コードのバグかと思いましたが、iOS12.2のsafariでは、
httpsではないとカメラにアクセスできないようです。
HTTPSでローカルサーバを起動
ローカルサーバにhttpsでアクセスできるように、以下のコマンドでローカルサーバを
起動します。このコマンドは、Linuxとmac用です。他のOSの場合は、参考文献に書いてある、create-react-app公式ページ(Using HTTPS in Development)を確認ください。
HTTPS=true npm start
HTTPSでローカルサーバを起動
以下のコマンドで公開用ビルドを作成します。
npm run build
ビルド結果は、buildディレクトリに生成されます。
このディレクトリをWEBサーバに設置することで公開できます。
環境
- react-qr-reader 2.2.1
- create-react-app 3.0.0