◉RORK LABEN
●GPT-6.1 SOL — Rork のモデルメニューに追加(09-29)。Low/Medium/High を選べ、Pro・Max に含まれます●SONNET 5.5 — UI づくりが得意で、Sonnet 5 より出力が速いモデルが選べます(09-28)●SDK 58 — Beta が 09/15 から。stable の案内はまだなく、Expo Go でのプロジェクト実行は 09/03 からログインが必要です●WIDGET — iOS のウィジェットが本番ビルドだけ真っ黒になる原因を追った報告が出ています●OBSERVE — EAS Observe がネイティブクラッシュも記録します(SDK 57.0.21 以降・10/07)●NEW — 起動広告が、背面から戻った回にしか出ていませんでした。「前面に戻った」合図が、…●GPT-6.1 SOL — Rork のモデルメニューに追加(09-29)。Low/Medium/High を選べ、Pro・Max に含まれます●SONNET 5.5 — UI づくりが得意で、Sonnet 5 より出力が速いモデルが選べます(09-28)●SDK 58 — Beta が 09/15 から。stable の案内はまだなく、Expo Go でのプロジェクト実行は 09/03 からログインが必要です●WIDGET — iOS のウィジェットが本番ビルドだけ真っ黒になる原因を追った報告が出ています●OBSERVE — EAS Observe がネイティブクラッシュも記録します(SDK 57.0.21 以降・10/07)●NEW — 起動広告が、背面から戻った回にしか出ていませんでした。「前面に戻った」合図が、…
記事一覧/アプリ開発
◇ アプリ開発/2026-06-30中級

Rork アプリでファイルを「その場で見せる」— Quick Look をアプリから安全に呼ぶ設計

PDF や画像、Office 文書をアプリの外に出さずにその場で見せる、Quick Look(QLPreviewController)をRork(Expo)から呼ぶ設計です。リモートファイルの事前ダウンロード、ローカル URL の条件、Android の FileProvider 代替、共有ボタンの扱いまで実装手順でまとめます。

Rork585Expo219Quick Lookファイルプレビュー個人開発218

✦ プレミアム記事

利用者がアプリ内で受け取った請求書 PDF をタップしたとき、Safari に飛んで戻ってこられなくなる――個人開発でアプリを作っていて、この「外に出ていったきり」の体験をどうにかしたいと感じたことがあります。閲覧のためだけにアプリを離れさせると、せっかくの利用文脈が途切れてしまいます。

iOS には、まさにこの用途のために Quick Look(QLPreviewController)という仕組みが用意されています。PDF、画像、テキスト、CSV、Word や Excel などの Office 文書を、アプリの中で全画面プレビューとして開けます。標準の Rork アプリは React Native(Expo)で生成されるので、この native の Quick Look を薄い橋渡しモジュール経由で呼ぶ形になります。設計の勘所は、何を渡せて何を渡せないかを正確に押さえることでした。

実装の全体像を手順で押さえる

細かいコードに入る前に、本番で動かすまでの流れを手順として並べておきます。

  1. 表示したいファイルがリモートにあるなら、まず expo-file-system でキャッシュへダウンロードする
  2. 保存先のローカル URL(file://)と正しい拡張子を確保する
  3. iOS なら QLPreviewController、Android なら FileProvider+ACTION_VIEW へ、同じ呼び出し口から渡す
  4. 共有・印刷ボタンを出すかを、ファイルの性質に応じて決める
  5. 閉じたあとのキャッシュを掃除する

この五手のうち、初学者がつまずくのは 1 と 2 です。私自身、最初はここを飛ばしてリモート URL を直接渡し、無言の空白に悩みました。順序を守れば残りは素直に組めます。

Quick Look が開けるもの・開けないもの

まず前提を整理します。Quick Look はローカルファイルのプレビュー機構です。ここを取り違えると最初の実装でつまずきます。

  • 開けるのはローカルのファイル URLです(file:// で始まるパス)
  • https:// のリモート URL を直接渡しても開けません。先にダウンロードしてローカルに置く必要があります
  • 対応形式は PDF・画像(JPEG/PNG/HEIC)・テキスト・CSV・RTF・iWork・Microsoft Office 文書・USDZ(3D)など幅広いです
  • 拡張子が正しいことが型判定の手がかりになります。document.tmp のような拡張子なしでは、中身が PDF でも開けないことがあります

私が最初にハマった落とし穴は、サーバーから取得した署名付き URL をそのまま渡してしまった点でした。Quick Look は黙って空白を表示するだけで、エラーも出ません。リモートのものは必ずキャッシュに落としてから開く、という前提を最初に固めるのが、この落とし穴を回避する近道です。

✦

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

この記事の続きを読む

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

この記事で得られること
✦PDF・画像・Office 文書を外部アプリに渡さず、アプリ内でそのまま閲覧させる導線を実装できるようになります
✦リモート URL を直接渡すと失敗する理由と、expo-file-system でキャッシュへ落としてからローカル URL で開く正しい手順が動くコードで分かります
✦iOS の Quick Look と Android の FileProvider+ACTION_VIEW を一つの呼び出し口に畳む設計と、共有ボタンを抑える判断軸が身につきます
Stripe による安全な決済 · いつでもキャンセル可能
✦

この記事を購入する

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

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

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

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

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

関連記事

◇ アプリ開発2026-09-10
Rork のリポジトリに置く最初の EAS Workflow と、失敗した回にだけ届かない通知
Rork から書き出したリポジトリに .eas/workflows を二本置くまでの手順と、needs でつないだ通知が失敗した回にだけ届かなくなる理由を、手元で走る検査スクリプトの実行結果つきで書き残します。
◇ アプリ開発2026-08-16
グラフが壊れて見えるのは、データが多いときではなく最初の数日でした
記録アプリの折れ線グラフが、データの少ない最初の数日だけ線が消える。原因はY軸の幅が0になり座標がNaNになることでした。実測した挙動と、描画前に置く小さな正規化層を紹介します。
◇ アプリ開発2026-09-18
prebuild が requires the standard Expo SDK 57 Swift AppDelegate で止まったとき、まず確かめる3行
iOS 27 のために ios.enableSceneSupport を有効にすると prebuild が止まることがあります。原因は SDK の版ではなく AppDelegate.swift の形でした。確かめる3行と、手で書くときに SDK 58 の手順を真似てはいけない理由をまとめます。