Rork で作ったアプリの「写真に保存」が一部の端末だけ失敗する——expo-media-library の権限スコープと保存設計

import * as MediaLibrary from "expo-media-library";
 
// 保存専用の権限だけを要求する。
// iOS では add-only（追加のみ）、Android では書き込みに必要な最小権限になる。
async function ensureSavePermission(): Promise<boolean> {
  // 現在の状態をまず確認する（毎回ダイアログを出さない）
  const current = await MediaLibrary.getPermissionsAsync(true); // true = writeOnly
  if (current.granted) return true;
 
  // まだ決まっていない、または再要求が許される場合のみ要求する
  if (current.canAskAgain) {
    const next = await MediaLibrary.requestPermissionsAsync(true); // writeOnly
    return next.granted;
  }
 
  // canAskAgain が false = ユーザーが恒久的に拒否済み。ダイアログは二度と出ない
  return false;
}

{
  "expo": {
    "plugins": [
      [
        "expo-media-library",
        {
          "photosPermission": "保存した壁紙をあなたの写真に追加するために使用します。",
          "savePhotosPermission": "壁紙を写真に保存するために使用します。",
          "isAccessMediaLocationEnabled": false
        }
      ]
    ]
  }
}

import * as FileSystem from "expo-file-system";
import * as MediaLibrary from "expo-media-library";
 
type SaveResult =
  | { ok: true }
  | { ok: false; reason: "permission" | "download" | "save" };
 
async function saveRemoteImage(remoteUrl: string): Promise<SaveResult> {
  // 1. 保存権限（writeOnly）を確保する
  const allowed = await ensureSavePermission();
  if (!allowed) return { ok: false, reason: "permission" };
 
  // 2. 一時ファイルにダウンロードする
  const fileName = `wallpaper-${Date.now()}.jpg`;
  const localPath = FileSystem.cacheDirectory + fileName;
 
  let downloaded;
  try {
    downloaded = await FileSystem.downloadAsync(remoteUrl, localPath);
    if (downloaded.status !== 200) {
      return { ok: false, reason: "download" };
    }
  } catch {
    return { ok: false, reason: "download" };
  }
 
  // 3. 写真ライブラリに保存する
  try {
    await MediaLibrary.createAssetAsync(downloaded.uri);
    return { ok: true };
  } catch {
    return { ok: false, reason: "save" };
  } finally {
    // 4. 一時ファイルを必ず片付ける（成否によらず）
    await FileSystem.deleteAsync(downloaded.uri, { idempotent: true });
  }
}

async function saveToAppAlbum(localUri: string, albumName: string) {
  const asset = await MediaLibrary.createAssetAsync(localUri);
  const album = await MediaLibrary.getAlbumAsync(albumName);
 
  if (album == null) {
    // アルバムがまだ無い場合は新規作成する
    await MediaLibrary.createAlbumAsync(albumName, asset, false);
  } else {
    // 既存アルバムに追加する。
    // 第三引数 copyAsset は iOS でのみ意味を持つ。
    // false にすると元アセットを移動するため、写真アプリの「最近」から消えることがある
    await MediaLibrary.addAssetsToAlbumAsync([asset], album, true);
  }
}

import * as ImageManipulator from "expo-image-manipulator";
import { Dimensions, PixelRatio } from "react-native";
 
async function downsampleForDevice(localUri: string): Promise<string> {
  const { width, height } = Dimensions.get("screen");
  const scale = PixelRatio.get();
 
  // 端末の物理ピクセルを目安に、その2倍を上限とする
  const targetWidth = Math.round(width * scale);
 
  const result = await ImageManipulator.manipulateAsync(
    localUri,
    [{ resize: { width: targetWidth } }], // 高さは縦横比を保って自動計算される
    { compress: 0.9, format: ImageManipulator.SaveFormat.JPEG }
  );
  return result.uri;
}

import { Alert, Linking } from "react-native";
 
async function handleSavePress(remoteUrl: string) {
  const result = await saveRemoteImage(remoteUrl);
  if (result.ok) {
    // 控えめな成功フィードバック（トーストなど）
    return;
  }
 
  if (result.reason === "permission") {
    Alert.alert(
      "写真への保存が許可されていません",
      "設定アプリから写真の追加を許可すると保存できます。",
      [
        { text: "あとで", style: "cancel" },
        { text: "設定を開く", onPress: () => Linking.openSettings() },
      ]
    );
    return;
  }
 
  if (result.reason === "download") {
    Alert.alert("画像を取得できませんでした", "通信環境を確認して、もう一度お試しください。");
    return;
  }
 
  Alert.alert("保存に失敗しました", "時間をおいて、もう一度お試しください。");
}