RORK LABEN
BUILD — RorkはReact Native(Expo)でネイティブのiOS/Androidアプリを生成。平易な説明からデプロイ可能な実コードが出力されますMAX — Rork Maxはnative Swiftを出力し、iPhone・iPad・Apple Watch・Apple TV・Vision Pro・iMessageに対応しますMAX — 本物のSwift生成で性能とApp Store審査の通しやすさを両立。現状ほぼ唯一の選択肢ですDEPLOY — テスト用の共有リンク作成とiOS/Android双方の自動ビルドに対応し、別々の開発工程を省けますPRICE — 無料で始められ、有料プランは月$25から。個人開発で試作から配布まで無理なく回せますFOCUS — BoltやLovableのようなWeb中心ツールと違い、Rorkはモバイルに特化していますBUILD — RorkはReact Native(Expo)でネイティブのiOS/Androidアプリを生成。平易な説明からデプロイ可能な実コードが出力されますMAX — Rork Maxはnative Swiftを出力し、iPhone・iPad・Apple Watch・Apple TV・Vision Pro・iMessageに対応しますMAX — 本物のSwift生成で性能とApp Store審査の通しやすさを両立。現状ほぼ唯一の選択肢ですDEPLOY — テスト用の共有リンク作成とiOS/Android双方の自動ビルドに対応し、別々の開発工程を省けますPRICE — 無料で始められ、有料プランは月$25から。個人開発で試作から配布まで無理なく回せますFOCUS — BoltやLovableのようなWeb中心ツールと違い、Rorkはモバイルに特化しています
記事一覧/開発ツール
開発ツール/2026-06-26上級

ユーザー自身の画像を「ファイル」アプリから取り込む — Rorkアプリのドキュメントピッカーとセキュリティスコープ付きURL

写真アプリにない画像を「ファイル」アプリやiCloud Driveから取り込むと、選んだはずのURLが直後に無効になります。expo-document-pickerとセキュリティスコープ付きURL、サンドボックスへの確実なコピーまでを、動くコードで整理します。

Rork455Expo109iOS83ドキュメントピッカーファイル管理

プレミアム記事

壁紙アプリに「お手持ちの画像も壁紙にできます」という一文を足したくなったのは、あるユーザーから「自分で撮った写真を加工して使いたい」という要望をいただいたときでした。写真ライブラリから選ぶだけなら expo-image-picker で十分です。ところが、ユーザーが使いたい画像はカメラロールにあるとは限りません。クラウドに置いたデザイン素材、AirDropで受け取った1枚、iCloud Driveに整理したフォルダ。これらは「写真」ではなく「ファイル」アプリの領域にあります。

そこで expo-document-picker を入れてみると、選択まではあっさり動くのに、取り込んだ画像が翌日には開けなくなる、という現象に遭遇しました。原因は、iOSがファイルアプリの実体を直接渡しているわけではない、という一点に尽きます。以下では、私自身が個人開発の現場でつまずいた順番のまま、ドキュメントピッカーの最小実装から、URLが消える理由、サンドボックスへの確実なコピー、そしてRork Maxでネイティブに踏み込む場合の作法までを順に追います。

写真ピッカーで届く範囲、ファイルピッカーが必要な範囲

expo-image-picker が扱うのは Photos フレームワークの世界、つまりカメラロールとアルバムです。一方で「ファイル」アプリは、オンマイiPhone・iCloud Drive・サードパーティのクラウド(Dropbox や Google Drive のプロバイダ拡張)まで横断する別の入口です。

両者は技術的にも権限モデルが違います。写真ピッカーは「ユーザーが選んだ1枚だけをコピーして渡す」設計で、アプリにフォトライブラリ権限は不要です。ドキュメントピッカーも「選んだ瞬間だけ」のアクセスを渡しますが、その渡し方が曲者で、対象がアプリのサンドボックスの外にある以上、URLには寿命があります。ここを理解しないまま uri を保存すると、後から必ず壊れます。

expo-document-picker の最小実装と、最初の壁

まずは素直に書いてみます。

import * as DocumentPicker from 'expo-document-picker';
 
async function pickImageFromFiles() {
  const result = await DocumentPicker.getDocumentAsync({
    type: ['image/jpeg', 'image/png', 'image/heic'],
    copyToCacheDirectory: true,
    multiple: false,
  });
 
  if (result.canceled) return null;
 
  const asset = result.assets[0];
  // asset.uri / asset.name / asset.size / asset.mimeType
  return asset.uri;
}

copyToCacheDirectory: true を指定すると、Expoが裏でファイルをアプリのキャッシュ領域へコピーし、そのfile://のURIを返してくれます。ここまでは問題なく表示できます。落とし穴は次です。キャッシュディレクトリ(FileSystem.cacheDirectory)はOSがいつでも空にできる一時領域です。ストレージ逼迫時やアプリ更新時に消えても文句は言えません。つまり、このuriを AsyncStorage に保存して「次回も同じ壁紙」を再現しようとすると、ある日突然読めなくなります。

copyToCacheDirectory: false にすると、コピーを挟まないぶん高速ですが、返ってくるのはセキュリティスコープ付きの一時URLです。これは選択直後のコールバックの中でしか有効でなく、外に持ち出した瞬間に無効化されます。Androidでは content:// が返り、こちらも長期保存には向きません。

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること
copyToCacheDirectory の真偽で挙動が変わる理由と、キャッシュ消失を避ける documentDirectory への退避コード
Rork Max のネイティブSwiftで startAccessingSecurityScopedResource と NSFileCoordinator を正しく扱う iOS 16+ のネイティブ実装
iCloud Drive の未ダウンロードファイル・HEIC・巨大ファイル・複数選択でつまずく具体的な対処
Stripe による安全な決済 · いつでもキャンセル可能

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または
メンバーシップなら全記事が読み放題 →
シェア

お読みいただきありがとうございます

Rork Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • コピー&ペーストで使える実装コード付き
  • 毎日新しい上級ガイドを追加
  • ¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

関連記事

開発ツール2026-06-15
Rork 製アプリのウィジェットにタップで動くボタンを置く — App Intents で「アプリを開かない操作」を実装する
Rork が生成する Expo アプリのウィジェットに、タップしてもアプリを開かずに状態を変えるボタンを置く方法です。App Intents と WidgetKit を App Group で結び、reloadTimelines まで往復させる実装を、詰まった2か所も含めて手順で整理します。
開発ツール2026-06-14
アプリを開かなくても更新される、を Expo で実際に届ける — Background Task の現実的な設計
Rork が生成する Expo アプリで『毎朝コンテンツが更新される』体験を作ろうとすると、iOS のバックグラウンド実行は思ったほど律儀に動きません。expo-background-task の最小実装と、実行されない前提で破綻しない設計をまとめました。
開発ツール2026-06-12
Rork 製アプリにホーム画面ウィジェットを追加する — Expo の制約を越えて WidgetKit を動かすまで
Rork が生成する Expo アプリにはホーム画面ウィジェットを直接追加できません。config plugin と App Group を使って WidgetKit を組み込む実装ルートを、詰まった点も含めて手順で整理します。
📚RECOMMENDED BOOKS
大規模言語モデル入門
山田育矢
LLM開発
生成AIプロンプトエンジニアリング入門
我妻幸長
プロンプト
Claude CodeによるAI駆動開発入門
平川知秀
AI駆動開発
※ アフィリエイトリンクを含みます
もっと見る →