Expoでモバイルアプリを開発するとき、ユーザーの
個人情報や端末の機能
を扱うには、先に権限を要求する必要があります。
カメラを使うにはカメラ権限、位置情報を取得するには位置情報の権限が必要です。
Expoには、権限の要求を簡単にする道具があります。
今回は公式の
Expo Permissionsガイド↗ を基に、一つずつ確認します。
Expoでは、
expo-modulesと
expo-permissionsを通じて、さまざまな権限を要求できます。
通常は次の順序で処理します。
現在の権限状態を確認する
権限を要求する
結果に応じて機能を実行する
基本的な構造は次のとおりです。
import * as Location from 'expo-location' ;
const getLocation = async () => {
const { status } = await Location. requestForegroundPermissionsAsync ();
if (status !== 'granted' ) {
alert ( '위치 권한이 필요합니다.' );
return ;
}
const location = await Location. getCurrentPositionAsync ({});
console. log (location);
};
ユーザーに位置情報の権限を要求し、許可された場合だけ位置情報を取得します。
Expoでは多くの権限を扱えます。
代表的なものを、例とともに確認します。
🖐️
devモードが必要です。各パッケージのインストール後、コマンドでネイティブコードと同期してください。
npx expo prebuild --platform ios
npx expo run:ios
npx expo prebuild --platform android
npx expo run:android
npx expo install expo-camera
app.jsonへ次の設定を追加します。
{
"expo" : {
"plugins" : [
[
"expo-camera" ,
{
"cameraPermission" : "Allow $(PRODUCT_NAME) to access your camera" , // 카메라 권한 요청 메시지
"microphonePermission" : "Allow $(PRODUCT_NAME) to access your microphone" , // 마이크 권한 요청 메시지
"recordAudioAndroid" : true // 마이크 권한 요청 여부
}
]
]
}
}
カメラ権限を要求するコードはこちらです。
import * as Camera from 'expo-camera' ;
const requestCameraPermission = async () => {
const { status } = await Camera. requestCameraPermissionsAsync ();
if (status !== 'granted' ) {
alert ( '카메라 접근 권한이 필요합니다.' );
return ;
}
console. log ( '카메라 권한이 승인되었습니다.' );
};
npx expo install expo-media-library
app.jsonへ次の設定を追加します。
{
"expo" : {
"plugins" : [
[
"expo-media-library" ,
{
"photosPermission" : "Allow $(PRODUCT_NAME) to access your photos." ,
"savePhotosPermission" : "Allow $(PRODUCT_NAME) to save photos." ,
"isAccessMediaLocationEnabled" : true
}
]
]
}
}
メディアライブラリーの権限を要求するコードはこちらです。
import * as MediaLibrary from 'expo-media-library' ;
const requestMediaLibraryPermission = async () => {
const { status } = await MediaLibrary. requestPermissionsAsync ();
if (status !== 'granted' ) {
alert ( '사진 접근 권한이 필요합니다.' );
return ;
}
console. log ( '사진 권한 승인 완료' );
};
npx expo install expo-notifications
通知権限を要求するコードはこちらです。
import * as Notifications from 'expo-notifications' ;
const requestNotificationPermission = async () => {
const { status } = await Notifications. requestPermissionsAsync ();
if (status !== 'granted' ) {
alert ( '알림 권한이 필요합니다.' );
return ;
}
console. log ( '알림 권한 승인됨' );
};
app.jsonへ次の設定を追加します。
{
"expo" : {
"plugins" : [
[
"expo-av" ,
{
"microphonePermission" : "Allow $(PRODUCT_NAME) to access your microphone."
}
]
]
}
}
マイク権限を要求するコードはこちらです。
import * as Audio from 'expo-av' ;
const requestMicrophonePermission = async () => {
const { status } = await Audio. requestPermissionsAsync ();
if (status !== 'granted' ) {
alert ( '마이크 권한이 필요합니다.' );
return ;
}
console. log ( '마이크 권한이 승인되었습니다.' );
};
npx expo install expo-location
app.jsonへ次の設定を追加します。
{
"expo" : {
"plugins" : [
[
"expo-location" ,
{
"locationAlwaysAndWhenInUsePermission" : "Allow $(PRODUCT_NAME) to use your location."
}
]
]
}
}
位置情報の権限を要求するコードはこちらです。
import * as Location from 'expo-location' ;
const requestLocationPermission = async () => {
const { status } = await Location. requestForegroundPermissionsAsync ();
if (status !== 'granted' ) {
alert ( '위치 권한이 필요합니다.' );
return ;
}
console. log ( '위치 권한이 승인되었습니다.' );
};
状態は通常、次のいずれかです。
undetermined:まだ要求していない
granted:許可済み
denied:拒否された
const checkCameraPermission = async () => {
const { status } = await Camera. getCameraPermissionsAsync ();
if (status === 'granted' ) {
console. log ( '이미 권한이 승인됨' );
} else {
console. log ( '권한이 아직 없거나 거부됨' );
}
};
事前に状態を確認すると、不要な権限要求を減らせます。
権限を求めるときは、ユーザーが納得できる説明を示すとよいでしょう。
単に「権限が必要です」ではなく、「写真をアップロードするために写真へのアクセスが必要です」のように、目的の機能と結び付けて説明すると効果的です。
この説明は、ストア審査で差し戻されやすい点でもあります。
Expoの権限処理は直感的ですが、iOSとAndroidの細かな設定やユーザー体験も考えると、慎重な対応が必要です。
単なる技術処理ではなく、ユーザーの信頼に直結します。
権限ごとの目的を明確にし、必要なときだけ丁寧に要求する習慣を付けるとよいでしょう。
今回の例を参考に、プロジェクトに合った権限要求の流れを組み立ててみてください。