Rork Max カメラ・ギャラリー機能ガイド — 写真撮影と画像選択を実装する

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>
  );
}

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>
  );
}

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);
  }
}

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>
  );
}