Expoを使ったバーコードスキャナーの実装

Expo

React Native

React Nativeで作成するスマホアプリで、端末のカメラを利用してバーコードスキャナーを実装する方法の紹介です。こちらもExpoを利用することで簡単に実装できます。

以下、QRコードスキャナーの実装の紹介です。

expo-barcode-scanner

ドキュメントは以下です。
https://docs.expo.io/versions/v35.0.0/sdk/bar-code-scanner/

こんな感じ

以前QRコードスキャナーアプリを作成しました。
iOSは純正のカメラアプリでバーコードを読み取れますが、Androidでは何らかのアプリを使う必要があります。気に入ったものがなかったので自分で作成しました。Android使っている人は自分でお気に入りのスキャナーを自作してみるのがおすすめです。

QRコードを読み取り、URLへアクセスできます。取得したURLはローカルに保存してあり、履歴として確認・再アクセスができます。
google play QRコードリーダー

インストール

npm にてインストールを行います。ExpoのSDKを利用しているのであれば「expo」コマンドでインストールすることでSDKのバージョンに適したものがインストールされます。

expo install expo-barcode-scanner

app.jsonに設定を追加

パーミッションを指定しておく必要があります。バーコードリーダーにはもちろんカメラを利用します。パーミッションに追加しておきましょう。

    "android": { 
      "permissions": ["CAMERA"], 
    },

実装

画面のマウント時にパーミッションを尋ねます。承認が得られるまでは待機中のメッセージを表示しておき、承認が得られたタイミングでstateを更新してカメラコンポーネントを描写します。

パーミッションを取得

componentDidMountにてパーミッションを取得します。

import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';

~~~

  componentDidMount() {
    this.getPermissionsAsync();
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  };

~~~

カメラコンポーネント

権限を得られるまではメッセージを表示しておき、権限が承認されたらバーコードスキャナーコンポーネントを描写します。

onBarCodeScannedにてバーコード読み取り結果を受け取った際の処理を定義します。stateの更新を行い画面にデータを表示したり、ブラウザを立ち上げてアクセスしたりすることになります。

import { BarCodeScanner } from 'expo-barcode-scanner';

~~~ 

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ scanned: true, scanUrl: data });
  };

  _scanComponent = () => {
    if (this.state.hasCameraPermission === true) {
      return (
        <BarCodeScanner
          onBarCodeScanned={this.state.scanned ? undefined : this.handleBarCodeScanned}
          style={styles.scanView}
        />
      );
    }else{
      return (
        <View style={styles.scanContainer}>
          <Text style={styles.messageText}>カメラにアクセスしています</Text>
        </View>
      );
    }
  };

~~~