Rork Maxカメラ・ギャラリー機能ガイド
モバイルアプリケーションにおいて、カメラアクセスとギャラリー機能は不可欠な要素です。ユーザーが写真を撮影したり、デバイスに保存された画像を選択したりする機能は、SNSアプリ、ECアプリ、ドキュメント管理アプリなど、様々な場面で活用されています。
ネイティブAPIの活用から画像最適化まで、実践的な実装方法をカバーします。
カメラ機能の基本実装
パーミッション設定の重要性
Rork Maxでカメラを使用する際、まず必要なのはパーミッションの設定です。iOSではInfo.plistに、AndroidではAndroidManifest.xmlに、カメラとマイク使用の許可を明記する必要があります。
import { Camera } from 'react-native-vision-camera';
import { useState } from 'react';
export function CameraScreen() {
const [hasPermission, setHasPermission] = useState(false);
// パーミッション要求
const requestCameraPermission = async () => {
try {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'granted');
console.log(`カメラパーミッション: ${status}`);
// 期待出力: カメラパーミッション: granted
} catch (error) {
console.error('パーミッション要求エラー:', error);
}
};
return (
<div>
<button onClick={requestCameraPermission}>
カメラを有効化
</button>
{hasPermission && <p>カメラが利用可能です</p>}
</div>
);
}このコード例では、ユーザーからカメラ使用の許可を取得しています。パーミッション取得はアプリの初期化時に実行することが推奨されます。
ギャラリー機能の実装
画像選択機能
ユーザーが既存の画像を選択する機能は、react-native-image-pickerなどのライブラリを活用して実装できます。
import ImagePicker from 'react-native-image-picker';
import { useState } from 'react';
export function GallerySelector() {
const [selectedImage, setSelectedImage] = useState(null);
const pickImage = async () => {
const options = {
mediaType: 'photo',
quality: 0.8,
maxWidth: 1920,
maxHeight: 1440,
};
ImagePicker.launchImageLibrary(options, (response) => {
if (response.didCancel) {
console.log('画像選択がキャンセルされました');
} else if (response.error) {
console.error('ギャラリーエラー:', response.error);
} else {
setSelectedImage(response.assets[0]);
console.log(`選択画像: ${response.assets[0].fileName}`);
// 期待出力: 選択画像: photo_2026_03_14.jpg
}
});
};
return (
<div>
<button onClick={pickImage}>ギャラリーから選択</button>
{selectedImage && (
<img
src={selectedImage.uri}
alt="Selected"
style={{ maxWidth: '300px' }}
/>
)}
</div>
);
}画像最適化とキャッシング
撮影・選択後の画像処理
高解像度の画像をそのままアップロードするとネットワーク負荷が増加します。画像圧縮・リサイズ処理を導入することで、UX向上とストレージ効率化を実現できます。
import ImageResizer from 'react-native-image-resizer';
export async function optimizeImage(imagePath) {
try {
const resizedImage = await ImageResizer.createResizedImage(
imagePath,
1200, // 幅
900, // 高さ
'JPEG',
85, // 品質 (1-100)
0 // 回転
);
console.log(`最適化完了: ${resizedImage.size} bytes`);
// 期待出力: 最適化完了: 245000 bytes
return resizedImage;
} catch (error) {
console.error('画像最適化エラー:', error);
}
}このプロセスにより、オリジナル画像を約50-70%削減できます。
ユーザー体験の向上
プログレス表示とエラーハンドリング
大きなファイルのアップロード時は、ユーザーに進捗を表示する点が肝心です。
export function ImageUploadWithProgress() {
const [progress, setProgress] = useState(0);
const [isUploading, setIsUploading] = useState(false);
const uploadImage = async (imagePath) => {
setIsUploading(true);
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percentComplete = (e.loaded / e.total) * 100;
setProgress(percentComplete);
console.log(`アップロード進捗: ${Math.round(percentComplete)}%`);
}
});
xhr.addEventListener('load', () => {
setIsUploading(false);
console.log('アップロード完了');
// 期待出力: アップロード完了
});
// アップロード実行 (省略)
};
return (
<div>
{isUploading && <p>進捗: {Math.round(progress)}%</p>}
</div>
);
}パフォーマンス最適化のベストプラクティス
メモリ管理
カメラ機能はメモリを多く消費します。以下の対策を講じましょう：
- 画像キャッシング: 同一画像の重複読み込みを避ける
- メモリリーク対策: コンポーネント卸載時にリソースを解放
- バックグラウンド処理: 重い画像処理は別スレッドで実行
詳しくは、Rork Max ネイティブAPI ガイドを参照してください。
他の認証機能との連携
ユーザープロフィール画像の設定などは、認証システムと連携します。詳細はRork Max ソーシャルログイン実装ガイドをご覧ください。
また、アニメーション効果を加えた画像プレビューについては、Rork Max アニメーション・ジェスチャーガイドで詳しく解説しています。
12年の個人開発で見えてきたこと
リリース直後にチェックしているもの
- クラッシュレポートの上位エラーを24時間ごとに確認しているか
- AdMob/StoreKit の収益ダッシュボードに異常検知が出ていないか
- ユーザーレビューに技術的な指摘が含まれていないか