写真ピッカーのアプリへの組み込み

♪ ♪

こんにちは Justinです Photosチームのメンバーです 今日はシステムPhotoPickerの 改善点とアプリで使用できる 新APIについてお話しします iOS 14でPickerのインターフェイスが リデザインされました 検索やズームグリッドなど 素晴らしい機能がたくさんあります 何よりも写真ライブラリへの アクセス承諾が不要です カスタムPickerを システムPickerに 取り替えることをお勧めします APIも非常に使用が簡単です わずか数行のコードで Pickerを提供でき ユーザーが選択した写真を受け取れます 昨年の 「What's new in the Photos picker」で 新APIの詳細をご覧ください ここではアプリに システムPickerを組み込むための 新APIに焦点を当て 写真を選ぶ体験をシームレスにします また新オプションメニューと HDR写真及びHDRビデオ シネマティックモードをサポートする際の ベストプラクティスについてお話しします

まずその前に Pickerのアクセスモデルについてです

これは先程お見せしたPickerです アプリ内で動作しているようですが 実際はアプリ上にレンダーした 別のプロセスを動作しています アプリは直接Pickerにはアクセスできず スクリーンショットも撮れません

ユーザーが選んだものだけが アプリに返されます 今年からアウトオブプロセスPickerに さらなる設定オプションが加わります 新しい変更子 .photosPickerDisabledCapabilitiesは 一部のPicker機能を無効にでき 独自のものを実行できます 例えばselection actionsを無効にすれば CancelボタンやAddボタンを 隠すことができます .photosPickerAccessoryVisibility 変更子はナビゲーションバーやツールバーなど Pickerコンテンツ周辺の アクセサリインターフェイスを隠せます

また.frameや.paddingなどの 基本SwiftUI変更子で Pickerのサイズや位置を 特定することもできます でももしAddボタンが隠れていたら multiple selection modeで どうアセットを受け取るのでしょう？ Selection behaviorを .continuousに設定し live selection updatesを受け取ります そして .photosPickerStyle(.inline)変更子で Pickerをアプリに組み込んで 別のシートで提供する必要がなくなります

Pickerが組み込まれるものの まだレンダーは別プロセスです ライブラリアクセスの承諾がなく 写真が表示されるのを 不安に思うユーザーもいるでしょう ユーザーがアプリを 安心して使用できるように 組み込み型Pickerが 初めて表示された時自動的に 選択した写真のみ アクセスできる由を説明します PrivacyバッジがPickerはプライベートで プロセス外にあることを示します 既にフルサイズPickerを使用しているなら ユーザーがiOS 17に最新化すると バナーが表示されます プライバシー設定画面も更新され さらなる詳細が説明されています さらにライブラリアクセス承諾プロンプトも 変更されました これらの詳細は 「What's new in privacy」 をご覧ください それではAPIに戻りましょう ユースケースをご紹介し それぞれのAPIの詳細をご説明します アウトオブプロセスPickerを組み込む場合 .photosPickerStyle変更子を使います 独自のインターフェイスを使うなら .photosPickerAccessoryVisibility を使用します また特定の縁の周りの アクセサリをコントロールできる 引数もあります デフォルト値はすべての縁です Picker機能を独自のもので 実行したいなら .photosPickerDisabledCapabilities 変更子を使います 最後にselection updatesに リアルタイムで変更及び反応するなら selectionBehaviorを .continuousに設定します では何がアクセサリと考えられるでしょう？ iOSではトップアクセサリは ナビゲーションバーで ボトムアクセサリはツールバーです iPadOSとmacOSでは メインアクセサリはサイドバーです トップとボトムアクセサリは iOSと似ています 次に無効にできるPicker機能と それがどうインターフェイスに 影響するかについてです

検索機能が無効だと検索バーは隠されます Collection navigationが無効だと アルバムtabsは隠されます iPadOSとmacOSでは サイドバーも隠されます Staging areaが無効になると ツールバーはステータスラベルに 置き換えられます Continuous selectionなしで selection actionsを無効にすると Cancelボタンだけが隠され Addボタンはまだ表示されます そうでなければアプリは ユーザーの選択したものを受け取れません Selection behaviorを .continuousに設定した場合 両ボタンとも隠されます 新しいPickerスタイルを見てみましょう .presentationスタイルと .inlineスタイルに加え Pickerは.compactスタイルも サポートします これはデフォルトの .presentationスタイルです これはアクセサリが隠された状態の .inlineスタイルです これが.compactスタイルです 上下のスペースが 非常に限られている時に 一列のPickerを より多くの位置に配置できます ではデモですべてをつないでみましょう 既にテキストで写真に注釈を付ける 簡単なアプリを作ってあります では今何ができるかお見せしましょう Pickerをmodel sheetとして表示し 写真を選び 記述を足します このデモではSelect Photosボタンを 組み込み型Pickerと入れ替えます .photosPickerStyle(.inline)変更子を足し 試してみます

（タイプ音）

うまくいきましたが 見かけがよくありません まだリストの更新に Addボタンを押さねばならず Pickerがリサイズすると ツールバーはデバイスの下端まで 拡張されていません

ご心配なく 少し手を加えるだけでよくなります まずPickerはセーフエリアの挿入を 優美に処理できるため .ignoresSafeArea変更子を使って Pickerを画面の下端まで拡張します 次にPickerで写真を選び次第 リストが更新されるようにします この変更は非常に簡単です Selection behaviorを .continuousに設定するだけです

リストがライブ更新されるようになり ナビゲーションバーボタンは 必要がなくなりました ですので .photosPickerDisabledCapabilities 変更子で除去します

これでPickerが機能しますが ルックスもよくしたいと思います

ナビゲーションバーと ツールバーを隠しましょう またPickerの高さを固定します .photosPickerAccessoryVisibility 変更子で バーを隠し ほかのSwiftUI views同様 Pickerの高さを調整します

（タイプ音）

よくなりました ほんの数分で 組み込み型Pickerを表示できるよう アプリを最新化しました デバイスでテストするためビルドします ズーム可能なグリッドで 写真を簡単にナビゲートできます 写真を選ぶと自動的にアプリに現れます この組み込み型Pickerで写真の選択が 非常に簡単になりました

デモは以上です

iPhoneをデモに使いましたが 同じAPIをiOSでも iPadOSでもmacOSでも使用できます SwiftUIに加えUIKitとAppKitアプリでも 同じAPIが使用できます ではUIKitとAppKit APIを見てみましょう 同じPHPickerConfiguration APIで 組み込み型Pickerを使用できます Selectionを.continuousに設定し continuous selection behaviorを オプトインします またmodeを.compactに設定し Pickerを一行レイアウトに設定します edgesWithoutContentMarginsで ナビゲーションバーなどアクセサリを隠し disabledCapabilitiesで 幾つかのPicker機能を無効にします SwiftUI APIでは .photosPickerStyle(.inline)変更子で Pickerを組み込めますが child view controllerとして container controllerに 足さねばなりません Pickerのフレームは手動で選ぶか Auto Layout制約で Picker viewのサイズと位置を決めます Subviewを追加した後 Pickerに足したことを伝えるだけです

PHPickerConfiguration.Update APIは ユーザーに表示したまま Pickerを更新できます また選んだものの選択解除や再整理は 既存のdeselectAssetや moveAsset APIsを使用します 次は新しいオプションメニューと それがどうアプリに影響するかについてです 新しいオプションメニューで ユーザーは何を共有できるか さらに管理できます デフォルトでは すべてのメタデータが含まれますが 位置情報のような繊細なメタデータを 選んだ写真から取り除くことができます

PhotosPickerとTransferable APIを 使用しているなら 新しいオプションメニューの適用に 何もする必要はありません PHPickerViewController APIを 使用している場合も 何もする必要はありません UIImagePickerController APIを 使用していたり フルライブラリアクセスがある場合は オプションメニューはサポートしません オプションメニューについては以上です 次はシステムPickerを使用する上での HDR写真や動画 そしてシネマティックモードの サポートについてです デフォルトとしてPickerは JPEGなどの互換性ある形式に アセットを自動的に変換します しかし変換されたアセットには オリジナルの情報が 含まれていないかもしれません ですのでHDRコンテンツを受けたいなら 自動変換は避けるべきです オリジナルの形式で 写真と動画を受け取るには .current encoding policyを使用し .imageや.movieなどの 一般的なコンテンツタイプを リクエストします .jpegなどの特定タイプをリクエストすると encoding policyが― .currentの場合でも 変換される可能性があります HDRサポートに関する詳細は 「Support HDR images in your app」 をご覧ください これはオリジナル形式の写真を 受け取るコードの例です preferredItemEncodingが.currentに importedContentTypeが .imageに設定されています シネマティックモードビデオの場合 奥行き効果を焼き込んだ レンダー版をPickerから与えられます もしdecision pointsが必要なら 写真ライブラリアクセスをリクエストし PhotoKitでビデオを フェッチしてください シネマティックモードの詳細は 「Support Cinematic mode videos in your app」をご覧ください 組み込み型Pickerは柔軟性があり いろんな可能性が広がります オプションメニューで 更なる情報の管理方法が得られるため ライブラリアクセス許可のリクエストは 必要がない場合はできる限り避けてください

ご視聴ありがとうございました ♪ ♪