RORK LABEN
FUNDING — RorkがLeft Lane Capital主導で$15Mのシードを調達しましたRORK MAX — Rork MaxはReact NativeではなくネイティブSwiftアプリを生成しますPLATFORM — iPhone・iPad・Watch・Vision Proに対応し、Live ActivitiesやCore MLまで使えますGROWTH — 月間74.3万訪問・成長率85%と利用が伸び続けていますTEST — Companionアプリで有料Apple Developerアカウント無しに実機テストができますSTACK — 本体はReact NativeとExpoで、ウェブラッパーでない真のネイティブ体験を提供しますFUNDING — RorkがLeft Lane Capital主導で$15Mのシードを調達しましたRORK MAX — Rork MaxはReact NativeではなくネイティブSwiftアプリを生成しますPLATFORM — iPhone・iPad・Watch・Vision Proに対応し、Live ActivitiesやCore MLまで使えますGROWTH — 月間74.3万訪問・成長率85%と利用が伸び続けていますTEST — Companionアプリで有料Apple Developerアカウント無しに実機テストができますSTACK — 本体はReact NativeとExpoで、ウェブラッパーでない真のネイティブ体験を提供します
記事一覧/アプリ開発
アプリ開発/2026-06-30中級

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

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

Rork479Expo127Quick Lookファイルプレビュー個人開発172

プレミアム記事

利用者がアプリ内で受け取った請求書 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-06-27
「本当に削除しますか?」を出す前に — 取り消せる削除という選択肢
リストの項目を消すたびに確認ダイアログを出すと、ユーザーは反射的にOKを押すようになります。Rork(Expo)アプリで「取り消せる削除」を実装し、確認を出すべき場面と出さない場面を切り分ける設計ノートです。
アプリ開発2026-06-29
クリップボード連携のUXを整える — iOSのペースト許可バナーを増やさずに「コピー」と「貼り付け」を成立させる
expo-clipboard で「コピー」と「貼り付け」を実装するとき、iOS のペースト許可バナーが頻発して使い勝手を損なうことがあります。バナーの発生条件を押さえ、hasStringAsync で内容を読まずにボタンを出し分ける設計をまとめました。
アプリ開発2026-06-29
従量制回線と低データモードを尊重して先読みを止める通信設計
画像中心の Rork(Expo)アプリで、従量制回線や低データモードのときに先読みを抑える通信設計を扱います。NetInfo の details から回線の性質を読み、画質を落とし、プリフェッチを遅延させる適応ロジックを実装コードとともに整理します。
📚RECOMMENDED BOOKS
大規模言語モデル入門
山田育矢
LLM開発
生成AIプロンプトエンジニアリング入門
我妻幸長
プロンプト
Claude CodeによるAI駆動開発入門
平川知秀
AI駆動開発
※ アフィリエイトリンクを含みます
もっと見る →