令和最新版！モバイルアプリの開発指南 写真・動画のファイルの読み込み編 (React Native Meetup #21 登壇資料)

令和最新版！ モバイルアプリの開発指南 写真・動画ファイルの読み込み編 IMANAKA, Kouta React Native Meetup #21 ft. menu.inc

「よくある機能実装」を再考する ● 「令和最新版」のベストプラクティスを検討する ○ プラットフォームやツールは更新され続けている ○ 一般で言われているよりも、 よりよい実装方法があるかもしれないし、 もうやらなくて良いことがあるかも知れない ○ 既存の実装を疑ってみて、新しい実装に改めていくことで、 開発者もアプリユーザーも幸せになれるかも知れない ○ 歴史的経緯も交えながら、令和のベストプラクティスを模索する

本日のお題: 写真・動画を読み込む実装

今回のテーマ: 写真・動画を読み込む実装 ● ユーザーの写真や動画をアプリで利用する実装 ○ アバター画像を登録して個性的なユーザーアイコンを設定 ○ 他のユーザーに皆でダンスした動画を共有 ○ AIに昼食を解析させてカロリー計算 ● スマホのファイルのうち、写真と動画は利用頻度が高いのでプ ラットフォーム上でも特別扱いされている

どう実装しますか？ どういうライブラリを使い ますか？

よくある実装要素: 実行時権限 ● 実行時権限(Runtime Permission)の認 可チェックおよび認可ダイアログの表示 a. 拒否されたときのフォールバック （設定画面に飛ばす仕組み） b. カメラロールの一部だけ 許可されたとき・・・？

よくある実装要素: フォトピッカー実装 ● カメラロールを表示して、 写真を選択させる方法 ○ Discordのような強い結合？ ■ カメラロールにアクセスする APIから取得したデータを FlatListで描画 ○ ChatGPTのような弱い結合？ ■ モーダル画面を表示し、 メディア単体を取得する

令和最新版の実装方法の提案 以下の条件を満たす アプリであるとき... ● 実行時権限ダイアログが不要 ● プラットフォーム固有の しっかり作り込まれたUI ● 独自UIを実装しない ● EXIF情報がなくてもいい ● Location情報がとれないかも 煩わしいランタイムパーミッションの分岐 ● Android ≥ 11 (※) が不要に！ ● iOS ≥ 14 ● 数行のみの実装で実現 ※: Android 4.4 - Android 10 および Android 11,12が導入されたAndroid Goデバイスでも動作しますが、 AndroidManifestに少々手入れが必要（Expo環境であれば自動で対応してくれるはず）

フォトピッカーの例

実装するために利用できるライブラリ Expo ● React Native expo-image-picker ● react-native-image-crop-picker (ivpusic/react-native-image-crop-picker) ○ 余談: UIを作り込むならexpo-media-library react-native-image-picker は2025年4月時 点ではまだ対応されていません ただしExpo Goでは動かせない (Development buildが必要) 作り込むなら react-native-cameraroll 当然パーミッションの対応もする必要がある

でもそれって ふつうのこと なんじゃないの？ 🤔

歴史的経緯: iOS ● ≥ iOS10: 写真ライブラリ利用の説明責任 ○ ただし一度許可をすると全てのメディアにアクセスし放題になる ● ≥ iOS14: ユーザーはライブラリ内の 一部のメディアだけアクセスを許可できる ● ≥ iOS14: PHPickerViewController ○ 実行時権限不要で選択された画像だけがそのとき限りで受け取れる

歴史的経緯: iOS ● ≥ iOS10: 写真ライブラリ利用の説明責任 ○ ただし一度許可をすると全てのメディアにアクセスし放題になる PHPhotoLibrary を用いたアクセス （例えるなら、高校の卒業アルバムを他人に預けるような操作） ● ≥ iOS14: ユーザーはライブラリ内の 一部のメディアだけアクセスを許可できる ● ≥ iOS14: PHPickerViewController プラットフォームの UIを使って Uriをもらう ○ 実行時権限不要で選択された画像だけがそのとき限りで受け取れる （アルバムから特定の写真だけ抜いて渡すような操作）

歴史的経緯: Android (1/2) ● Intent.ACTION_OPEN_DOCUMENT などで別アプリを呼び出すと、 呼び出し元に権限が付与されてなくてもファイルUriを取得できる仕組みが昔か らある ○ ただしUIは別アプリのものになるので見た目がよくない ● 2022年10月に"フォトピッカー"が発表 ○ 親和性の高いボトムシート UIによる、プラットフォーム管理されたメディア選択 UI ● 2023年4月に"フォトピッカー"の提供範囲が拡大し、 GooglePlay開発者サービスを通じてAndroid 4.4以上で使えるように展開 ○ 古い実装(ACTION_OPEN_DOCUMENT)に対しても自動適用されるようになった https://medium.com/androiddevelopers/permissionless-is-the-future-of-storage-on-android-3fbceeb3d70a https://android-developers.googleblog.com/2023/04/photo-picker-everywhere.html

• https://medium.com/androiddevelopers/permissionless-is-the-future-of-storage-on-android-3fbceeb3d70a
• https://android-developers.googleblog.com/2023/04/photo-picker-everywhere.html

歴史的経緯: Android (2/2) ● < Android 6: AndroidManifestで READ_EXTERNAL_STORAGE 権限を 宣言するだけで全てのファイルにアクセス出来た ● ≥ Android 6: ランタイムパーミッション導入 ○ ● ただしいちど許可すれば以降は黙ってアクセスし放題 ≥ Android 10: Scoped Storage ○ 自分が作った画像を適切な APIを用いて保存した場合に限り その画像の読み込みは READ_権限不要 ● ≥ Android 13: 権限の細分化 ○ 画像 `READ_MEDIA_IMAGES` ○ 動画 `READ_MEDIA_VIDEO` ○ 音声 `READ_MEDIA_AUDIO` ● ≥ Android 14: 選択的メディアアクセス ○ 選んだ写真だけが MediaStore APIから返却される → API経由でのファイルアクセスは複雑さが高まり続けている

歴史が とっても ややこしい！ 💥😵💥

ようするに・・・ iOSもAndroidも、作り込むべき理由がなければ、 ユーザーからの同意ダイアログを表示しなくても カメラロールの画像を取得することができる！ ↓ もし既存実装でパーミッションチェックでガードしている 実装があるなら、それはもう不要かも知れませんよ

何が言いたいかっていうと・・・（まとめ） ● （歴史的に混沌としているがそれは一旦忘れて） 現代においては、ほとんどのケースにおいて もはやユーザーから実行時権限を得る必要がない ● 新規プロジェクトでは何も考えずにやればいい ● 長期運用されているreact-nativeプロジェクトでは 無意味な実行時権限ロジックを見直すチャンス！

おわり （シリーズ化を検討しています。ご意見・ご感想・聞いてみたいお題・苦情は私まで）