写真ピッカーの最新情報

写真ピッカーの最新情報

PHPickerにより、ご利用のAppとシステムの写真ライブラリ間での簡単かつ安全な統合が実現します。SwiftUIやTransferableが、iOS、iPadOS、macOS、WatchOSにわたって統合を提供する仕組みをご覧ください。また、AppKitやNSOpenPanelを使用して、Macの写真ピッカーをご利用のmacOS向けのAppに取り込む方法も紹介します。写真ピッカーの詳細については、WWDC21の「App内の写真アクセスの改善」をご覧ください。

リソース
関連ビデオ

WWDC23
- 写真ピッカーのアプリへの組み込み
WWDC22
- PhotoKitの変更履歴について
WWDC21
- App内の写真アクセスの改善
WWDC20
- 新しいPhotosピッカーの紹介
ダウンロード

♪ 明るい音楽ヒップホップミュージック♪ ♪ こんにちは私はJustinと申します Photosチームでエンジニアをしています本日は写真ピッカーシステムの改善点についていくつか紹介したいと思います写真ピッカーシステムによりほとんどのAppから iOS上で写真や動画を取得することができますピッカーが処理を実行するために Appは使用するライブラリにアクセスするためのリクエストをする必要がありません直感的なUIと使いやすいAPIを搭載しています PHピッカー APIにあまり馴染みがない場合は昨年度のWWDC セッションで詳細に説明していますのでご確認ください本日のセッションではピッカーに搭載した新しい機能の概要から説明していきたいと思いますその後ピッカーが対応するプラットフォームやフレームワークについて話していきますでは始めましょうピッカーの導入により画像や動画 Live Photosをフィルタすることができます Appによっては他の要件が必要な場合があることを理解しています例えばスクリーンショットを加工するAppではピッカーではスクリーンショットだけを表示したいかもしれません本年度追加した新しいスクリーンショットフィルタでそれが可能になりましたスクリーンショットに付随して画面記録やスローモション動画など他のアセットタイプも追加しました PHAsset.PlaybackStyle を使用して新しいフィルタを作成することもできるようになりましたシネマティックビデオ被写界深度エフェクト写真・バースト以外の新しいフィルタがすべてバックポートされます AppがiOS 15向けの場合 iOS 16 SDKでコンパイルしている限りそのまま使用することができます複合フィルタは従来の「any」に加え「all」と「not」も使用することができますそれらは iOS 15にもバックポート可能ですいくつかのコードの例を見ていきます動画とLive Photosを表示するためには「any」を使用して閲覧可能ですまたはスクリーンショットだけを表示したい場合もありますスクリーンショットなしのすべての画像を表示するには「all」と「not」を使用して画像とスクリーンショットのフィルタを掛け合わせることができます最後の例では iOS 16に対応している場合 .cinematicVideos フィルタを使用します次にハーフハイトピッカーに関連する改善点について説明します iOS 15では UIKitには新しい UISheetPresentationController APIが搭載されておりハーフハイトモードでピッカーを使用することができますこれはすでに複数のケースでうまく機能していますしかしカスタムUIを実装して選択したアセットを調整しその変更をピッカーに反映させたいと考える方もいるかと思います iOS 16ではアセット識別子を使用してアセットを外すことができるようになりますここで示すように deselectAssetsを呼び出した後ピッカーで2枚目の写真が選択されなくなります moveAssetメソッドを呼び出して順序を調整することもできますこれで新しいピッカーの機能についてすべて知ることができましたのでプラットフォーム対応について話していきましょう現在では写真ピッカーシステムは iOSおよびiPadOSApp のみに対応しています今年は写真ピッカーをさらに 2つのプラットフォーム macOSおよびwatchOSに導入します iPadOS ピッカーは iPad専用の新しいデザインに刷新されましたまずは新しいiPad UI について見ていきましょうピッカーにはiPadのディスプレイの大きさを生かしてサイドバーが表示されるようになりましたサイドバーにより異なるコレクション間の移動が速くなりましたスプリットスクリーンモードなど十分なスペースがない場合は従来のコンパクトピッカー UIに戻ります次はmacOSの場合です macOS ピッカーはMacスタイルでサイドバーも搭載しておりますまた iOSのピッカーと同様に複数選択やグリッド内のスムーズなズームに対応し人・場所・その他多くのものを検索できる強力な検索機能が搭載されています新しいピッカー UIは NSOpenPanelでも利用可能ですシステムの写真ライブラリからアセットを選択できるほか今回初めてiCloud写真に保存されているアセットを含めて選択できるようになりました Appは導入作業をする必要なく無料で新しいUIを取得できますドラッグ＆ドロップには NSOpenPanel ピッカーで対応していますこれは iOS・iPadOS・macOS上で標準のピッカーでも対応しています Appがいくつか画像や動画を選択するだけの場合 NSOpenPanel APIだけで足りるかもしれませんしかし写真ライブラリで選択されたファイルはシステムによっていつでも削除される場合があることを留意してください長期的に利用可能な状態を維持する必要がある場合は Appが管理する場所にコピーしておく必要がありますメディア中心のmacOSAppでは最高のユーザー体験のために新しい写真ピッカーをデフォルトで使用することを推奨します一方でAppはNSOpenPanel APIを使用してファイルシステムからアセットを選択する別の方法を提供する必要性もありますユーザーが写真ライブラリ以外のアセットを選択したい場合などです最後になりましたが watchOSについてです今回初めて新しいAPIを使ってウォッチに保存されている画像が表示できるようになりました watchOS ピッカーもiOSや macOS ピッカーと同様のプロセスで実行されるためライブラリへのアクセスをリクエストなしに使用できます iOS ピッカーに類似したUIがあり小さい画面に対して最適化されていますグリッドやコレクション単位で写真を閲覧することができますピッカーは選択制限を指定したり選択順を表示するように構成もできます iOSやmacOSとは異なり watchOS ピッカーには画像だけが表示されますデバイスに500枚以上の画像がある場合は最新の500枚のみが表示されます「PHPickerViewControllerは UIKitベースのため macOSまたはwatchOSAppでどのように使うことができるのか」と思われるかもしれませんご存知のように AppKitとSwiftUIで新しいピッカー APIが利用可能になりましたまず最初にAppKit API を見ていきましょう実際 UIKit APIと類似しています PHPickerConfigurationの同じタイプとそのプロパティを取得します少しの違いがありそれはPHPickerViewControllerは AppKit AppではNSViewController のサブクラスであるということです AppKitベースのPHPickerが導入されたことによりレガシーのメディアライブラリブラウザから離れましょう PHPickerはより強化されています UIKitとAppKitのAppをどちらも同時に開発する場合でもメンテナンスが簡単です最後に SwiftUI API について話します
セッションの冒頭でご覧いただいた iOS ピッカーを思い出してみてください数行のSwiftUIのコードだけで表現することができますさらに重要なのはピッカーが対応しているすべてのプラットフォーム OS・iPadOS・macOS・watchOSで PhotosPicker APIにアクセスできますピッカーはプラットフォームや Appの構成利用可能な画面スペースに応じて最適なレイアウトを自動的に選択しますピッカー UIがどうあるべきか気にする必要がないため Appの改善に集中することができます
詳細をデモで新しいAPIを見る前にまず最初に選択した写真や動画を読み込む方法について説明します SwiftUIのバインディングを介して受け取る選択項目はプレースホルダーオブジェクトだけが含まれますオンデマンドで実際のアセットデータをロードする必要がありますいくつかのアセットデータは直ちにロードされることがないことを留意してくださいピッカーがiCloud写真からデータをダウンロードしようとした際にデバイスがインターネットに接続されていないなどのエラーが発生した場合ロード操作に失敗する場合があります動画などの大きなファイルはダウンロードに時間がかかる場合があるためブロッキングローディング識別子の代わりにアイテムごとのインラインローディング UIを表示することを推奨します写真ピッカーは Appや拡張機能間でデータを転送するための新しいSwiftUIのプロトコルである Transferableを使用しています Transferable経由で直接 SwiftUI Imageをロードできますが高度なユースケースの場合ロードしたいデータのタイプを完全に管理するために Transferableプロトコルに準拠した独自のモデルオブジェクトを定義する必要があります Transferableの詳細情報については「Transferableの紹介」セッションを確認できます Appが同時に多くのアイテムを処理する必要がある場合や動画などの大きなアセットを処理する場合すべてを同時にメモリに読み込むことは現実的でない場合がありますメモリ使用量を減らすために FileTransferRepresentationを使用して選択したアセットをファイルとしてロードすることができますアセットをファイルとしてロードする場合 Appにそのライフサイクルを管理する責任があることに留意してくださいファイルを受信したら常に Appディレクトリにコピーし不要になったら削除してくださいではデモを行いますアカウントのプロフィールページを表示してこのAppのデモの準備を済ませています現在プロフィール画像はプレースホルダーアイコンになっています編集ボタンを追加して PhotosPicker APIを使用しプロフィール画像を変更したいと思いますプロフィール画像ビューはビューモデルで定義された画像の状態にすでに応答できておりピッカーの選択を受け取った際に画像の状態の更新だけを行う必要がありますまず最初にビューモデルについて見ていき新しいimageSelection プロパティを追加します選択のバインディングとして PhotosPicker APIに送信されますプロフィール画像ビューに戻りピッカーを導入するオーバーレイボタンを追加します
ではここで今追加したコードを見ていきましょう PhotosPickerビューを追加し先ほど定義した選択バインディングを取得し画像のみを表示するために設定しました PhotosPickerのラベルは円を背景にした鉛筆のグリフだけですここまでの内容をビルドして実行してみましょう編集ボタンをクリックしてピッカーを表示させることができます画像をタップしてピッカーを自動的に閉じますがプロフィール画像は更新されませんどうしてでしょうか画像の選択および画像の状態をつなげる必要がありますでは始めましょうビューモデルに戻り設定した画像選択didsetに応答します画像選択がnilの場合画像状態をemptyにしますそうでなければ画像のロードを開始します loadTransferableメソッドをまだ実装していないためコンパイルエラーが表示されていますでは修正しましょう
実装は非常に単純ですハンドラーの完了に応答してリクエストがまだ最新のものであれば画像の状態を更新することが必要ですアクションで確認するためにビルドおよび実行をしましょう編集ボタンをタップして画像を選択することができますいいですね! 期待通りに機能しています実はこのプロジェクトはmacOSで実行するための準備もできています先ほど追加したコードは macOSでも自動的に機能しますビルドおよび実行して見ていきましょうコンパイルできました! ピッカーを開いて画像を選択して Appに反映することができますデモはこれで以上です iOSおよびmacOSのデモをご覧いただきましたが同じコードでwatchOSで同様に機能しますしかし留意していただきたいことがいくつかあります
watchOS ピッカーは単純なフローおよび短いインタラクションで設計されます画像はデバイスのサイズに応じて調整されます通常はペアリングされた iPhoneから同期されます Family Setupを使えば iPhoneを持っていない家族も Apple Watchの機能やメリットを活用することができますデバイスがFamily Setup モードの場合ピッカーで iCloud写真の最新画像1000枚を選択することができますピッカーはインターネットからいくつか画像をダウンロードする必要がありますその場合は閉じる前にピッカーにローディングUIが表示されます
最後に一言だけ残したいと思いますほぼすべてのAppが写真や動画にアクセスできる最善の方法としての写真ピッカーの開発のために私たちは日々努力を重ねていますまだカスタムピッカーを使用している場合ぜひこちらに切り替えてくださいありがとうございます WWDCの素晴らしい機能を楽しんでください! ♪

var configuration = PHPickerConfiguration()
configuration.filter = .images
configuration.selection = .ordered
configuration.selectionLimit = 10

let picker = PHPickerViewController(configuration: configuration)

0:02 - PHPickerFilter

var configuration = PHPickerConfiguration()

// iOS 15
// Shows videos and Live Photos
configuration.filter = .any(of: [.videos, .livePhotos])

// New: iOS 15
// Shows screenshots only
configuration.filter = .screenshots

// New: iOS 15
// Shows images excluding screenshots
configuration.filter = .all(of: [.images, .not(.screenshots)])

// New: iOS 16
// Shows cinematic videos
configuration.filter = .cinematicVideos

0:03 - PHPicker Example (AppKit)

var configuration = PHPickerConfiguration()
configuration.filter = .images
configuration.selectionLimit = 10

let picker = PHPickerViewController(configuration: configuration)

0:04 - PhotosPicker Example (SwiftUI)

struct ContentView: View {
    @Binding selection: [PhotosPickerItem]
    
    var body: some View {
        PhotosPicker(
            selection: $selection,
            matching: .images
        ) {
            Text("Select Photos")
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC22

WWDC21

WWDC20