QRコードリーダーの実装
QRコードリーダーの実装における、パーミッションの扱いを見ていきましょう。スマートフォンのカメラを使ったQRコード読み取りは、モバイルアプリの中でも特に実用的な機能の一つです。
Expoでは、expo-cameraモジュールを使用することで、簡単にQRコード読み取り機能を実装することができます。以前はバーコードスキャン専用のexpo-barcode-scannerが提供されていましたが、Expo 52ではexpo-cameraにQRコード読み取り機能が統合されました。
expo-cameraでのQRコード読み取り基本
まずは、expo-cameraモジュールをインストールします（リスト1）。
$ npx expo install expo-camera
カメラのパーミッションを取得し、基本的なQRコードリーダーを実装します（リスト2）。
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';
export default function App() {
// (1) カメラのパーミッション状態を管理するstate
const [permission, requestPermission] = useCameraPermissions();
// (2) スキャンされたQRコードのデータを保存するstate
const [scanned, setScanned] = useState(false);
const [qrData, setQrData] = useState('');
// (3) コンポーネントのマウント時にパーミッションを要求
useEffect(() => {
(async () => {
if (!permission?.granted) {
const { status } = await requestPermission();
if (status !== 'granted') {
Alert.alert(
'カメラへのアクセスが必要です',
'このアプリはQRコード読み取りのためにカメラへのアクセスが必要です。設定からパーミッションを変更してください。',
[{ text: 'OK' }]
);
}
}
})();
}, []);
// (4) パーミッションの状態に応じて表示を切り替え
if (!permission) {
return <View style={styles.container}><Text>カメラの許可を確認中...</Text></View>;
}
if (!permission.granted) {
return (
<View style={styles.container}>
<Text>カメラへのアクセスが拒否されました</Text>
<Text>設定アプリからカメラへのアクセスを許可してください</Text>
</View>
);
}
// (5) QRコードがスキャンされたときのハンドラー
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
setQrData(data);
Alert.alert(
'QRコード読み取り成功',
`タイプ: ${type}\nデータ: ${data}`,
[
{
text: '再スキャン',
onPress: () => setScanned(false)
}
]
);
};
// (6) パーミッションが許可された場合、カメラを表示
return (
<View style={styles.container}>
<CameraView
style={styles.camera}
facing="back"
onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
barcodeScannerSettings={{
barcodeTypes: ["qr"],
}}
>
<View style={styles.overlay}>
<Text style={styles.text}>
{scanned
? `QRコード: ${qrData}`
: 'QRコードをスキャンしてください'}
</Text>
</View>
</CameraView>
</View>
);
}
// スタイル定義は省略
（1）では、カメラのパーミッション状態を管理するために useCameraPermissions() フックを使用しています。（2）では、スキャンされたQRコードのデータと状態を管理するための state を定義しています。
（3）では、コンポーネントのマウント時にカメラのパーミッションを要求しています。（4）では、パーミッションの状態に応じて表示を切り替えています。
（5）では、QRコードがスキャンされたときの処理を定義しています。handleBarCodeScanned 関数は、QRコードのタイプとデータを受け取り、それをユーザーに表示します。
（6）では、パーミッションが許可された場合にQRコードスキャナーを表示しています。barcodeScannerSettings プロパティを使用して、QRコードのみを検出するように設定しています。
ちなみに、図1のダイアログのメッセージは、app.jsonでカスタマイズできます（リスト3）。
{
"expo": {
"plugins": [
[
"expo-camera",
{
"cameraPermission": "QRコードを読み取るために $(PRODUCT_NAME) にカメラの使用を許可してください"
}
]
]
}
}
$(PRODUCT_NAME) は、自動でアプリの名前に置き換えられます。iOSアプリの審査では、ダイアログのメッセージでカメラの利用用途を明確にユーザーへ伝えることを求められる場合もあります。QRコード読み取りという目的を明示することで、ユーザーの理解と信頼を得やすくなります。
なお、本連載で次回以降に解説するEAS Buildでビルドしたアプリにはカスタマイズが反映されますが、Expo Goではカスタマイズできない点に注意してください。
図2は、QRコードリーダーが実際に動作している様子です。QRコードを読み取ると、データ内容が画面に表示されます。
このように、Expoでは簡単にQRコード読み取り機能を組み込むことができます。Webサイトへのリンクや連絡先情報など、QRコードに格納されているデータの種類に応じた処理を追加することで、より実用的なアプリケーションを開発できるでしょう。
他にもexpo-cameraモジュールにはカメラ操作に関する便利な機能があるので、公式ドキュメントを参照してみてください。
