MacにおけるSwiftUI: 最後の仕上げ

♪ （MacにおけるSwiftUI: 最後の仕上げ） 講演第2部へようこそ SwiftUIですばらしい Mac Appを構築しましょう SwiftUIチームエンジニアの ジェフです 同僚のマシューが担当した 本講演の第1部を お楽しみいただけたなら幸いです まだご覧いだだいていない場合は そちらを先にご覧ください そこでお話しした変更内容を基に Appを構築していきます マシューの講演の冒頭からここまで ガーデニングAppを構築してきました SwiftUIを使えばAppを ほんのわずかな機能で 非常に短時間で構築できます しかし ユーザーは様々な方法で Appを使う傾向があり 特に優れたmacOS Appでは このことが重要になります これを念頭に置きつついくつかの方法を見ていき いろんな人に合うAppを構築しながら マシューが第1部で説明した 原理にも従って進めます まず 完全カスタマイズ可能な macOS Appとは何かを見ていきます ここでは変更処理をシステム全体と 独自App内で行います ドラッグアンドドロップで ユーザーがデータを操作するワークフローを 追加することでも 柔軟なユーザー体験を提供できます そして ファイルシステムで作業する方法として Appのデータをエクスポートできるようにします 最後に 連係カメラのサポートを追加し シームレスなワークフローを作成して 画像をAppにインポートできるようにします 最初に お話しする内容は 個別のAPIに関するものではなく SwiftUIで構築したAppを どうmacOSのカスタマイズ性に 適合させるのか詳しく話します では ガーデニングAppを開き システム設定を見てみましょう ダークモードに切り替えます Appのインターフェイス更新が 自動的に確認できます システム設定は開いたままで サイドバーのアイコンサイズも 大きく更新します ダークモードのようにApp自体で システム設定に合わせて調整されました このような細かい調整は開発者としては 自動で行うことができ ユーザーとしてはお使いのAppが 自分の好みを配慮してくれることになります システム設定を閉じて Appに注目する前にアクセントカラーを マルチカラーに設定しておきましょう この機能によって開発者は App固有のアクセントカラーを 設定できるようになり オペレーティングシステムが Appのボタン 選択強調表示 サイドバー記号を カスタマイズします Appでアクセントカラーをサポートしたいので プロジェクトのアセットカタログを開き AccentColorを選択します コンテンツをシステムグリーンに変更して Appのテーマに合わせます ご覧のように サイドバーのアイコンと選択に 変更がすべて反映されました オペレーティングシステム全体に及ぶ変更を 自動反映する方法を見てきましたが App固有の設定はどうでしょうか？ ユーザーがガーデニングAppを カスタマイズできるインターフェイスを 追加しましょう GardenAppファイルを開きます WindowGroupシーンにそろえて Settingsシーンを追加します このシーンでメニュー項目を設定できます 選択すると ビューのあるウィンドウが開きます 設定したSettingsViewを使い これにモデルを渡します

さらに Settingsシーンは Appのメインメニューに 適切なメニューを追加して コマンドカンマの 標準キーボードショートカットを 設定することもできます これですばらしいスタートを切れます では SettingsViewで インターフェイスを定義しましょう macOSのAppでは一般的に ツールバーアイコンを持った 設定インターフェイスがあり 別のペインと切り替えができます 特にAppに数多くの設定がある場合 個々のカテゴリに 分けられている場合があります ここのメインビューではTabViewを使います

そして2つの子を指定します GeneralSettingsと ViewingSettingsウィンドウの ツールバー領域のタブのコンテンツには tabItemを使います このコンテンツではLabelだけが使用できます 表示するテキストを指定します ここでは「General」とし systemImageも付けます GeneralSettingsは「gear」を使います ViewingSettingsも同じようにしましょう tabItemとLabelを追加します 「Viewing」と名付けて systemImageは「eyeglasses」にします よし これで2つのタブの コンテンツが準備できました GeneralSettingsを入力していきましょう ユーザーに役立つと考えられるものは 庭が選択されていないときに デフォルトで使用する庭を定義する機能です ここではPickerを追加して…

最初の項目をText("None")にします 他の項目についてはForEachをデータ内の すべての庭に追加します

各庭に対してTextを追加し 庭名とdisplayYearを指定します ここで庭のIDを使ったタグも 準備する必要があります 「None」の値にはnoneのタグを指定できます

他の庭には庭のIDに対応した タグを指定します

最後に Pickerの選択の 状態を指定します このように設定インターフェイスを 準備する際は 状態を維持して 起動時やOS更新時を通じてユーザーの選択を Appに記憶させることが重要です SwiftUIで実現するには AppStorageのプロパティラッパーを使用します このプロパティラッパーは UserDefaultsシステムで 値を維持します これこそがここでの目標です では selectionの紐付けに AppStorageプロパティラッパーを追加します これでキーを取得します 「defaultGarden」を指定し 「selection」とします 任意のGarden.IDも付けます これの機能はユーザーのデフォルトシステムで 選択値を維持することです fixedSizeもPickerに追加し フォームにパディングも追加します

ここでContentViewに切り替えて AppStorageを追加し 使用した同じキーを指定します

「defaultGardenID」にして 任意のGarden.IDも付けます そしてここにselectionの紐付けがあります これをBindingと置き換え 「get」はselectedGardenIDを最初に使用します 設定されていない場合は defaultGardenIDに戻ります セッターについては selectedGardenIDのみ更新します defaultGardenは更新しません 「selectedGardenID = $0"」とします よし Appを実行します 設定を開くと メニュー項目があり Indoor Plantsを デフォルトの庭に選択します 新しいウィンドウを開くと Indoor Plantsが選択されています 設定にカスタマイズサポートを 準備することが 柔軟なユーザー体験を 構築する1つの方法です 別の方法として 同じ操作に対する 代替ワークフローの準備があります 第1部の中で マシューが選択した庭に 植物を追加するための メインメニュー項目の追加について 説明しました これはAppのすばらしい機能ですが 一般的なmacOSのユーザー操作で 似た機能を実装できる 別の方法も見てみましょう それはドラッグアンドドロップです ここに表があります 少し調整して ドラッグ元指定と ドロップ先指定をサポートします まずやるべきことは 初期化子から「plants」を削除します 次に末尾まで移動して 行ビルダーを追加します この行ビルダーの内容には ForEachを追加して 事前に準備した植物を使用します

各植物に対して TableRowを作成します これでitemProviderの修飾子を追加して TableRowをそれぞれ カスタマイズしていきます plant.itemProviderをここで返します これはモデルに設定した演算プロパティです これで各行がドラッグ元指定を サポートしました 植物をドラッグできる変更は 完了しましたが それを受け入れる側がなければ あまり役立ちません 表へのドロップのサポートも 追加して修正しましょう onInsert修飾子が ドラッグアンドドロップの一端を担います これはコンテンツタイプのリストを取得して Plant.draggableTypeをここで渡します これはモデルに設定したカスタムタイプです クロージャーも取得して 2つのパラメーターを渡されます 1つはドロップが発生したインデックスで もう1つは項目プロバイダーのリストです Plant.fromItemProvidersを呼び出し モデルを作成すると これらのプロバイダーを渡します これが植物のリストを返し モデルの更新に使用できます garden.plants.insert(contentsOf: plants)を 発生したインデックスで呼び出します

Indoor Plantsを新しいウィンドウで開き Backyard Flower Bedから花を選択して ドラッグするとコピーできるようになりました

ドラッグアンドドロップは App内でのデータ移動に優れた方法ですが Appとオペレーティングシステムの データ移動についてはどうでしょうか？ ユーザーはこのすべてのデータを エクスポートできたらいいのに と考えることでしょう おそらくバックアップや 別Appへのインポートに使います このワークフローを簡略化するため 一般的なファイル形式で データベースをエクスポートして 他のAppと共有できる メインメニュー項目を追加します メニュー項目を含む型は既に作成しており コマンドプロトコルに適合しています このコマンドにImportExportCommandsを 追加してstoreに渡します そのファイルに切り替えましょう bodyでは CommandGroupを追加して システム指定のimportExport配置を 置き換えます これの機能はメニュー項目を ファイルメニューの 目的の場所に追加することです CommandGroupの内容には SectionとButtonを追加します 「Export」のラベルを指定し 後ろに三点リーダーを付けます 三点リーダーはユーザーに その項目を選択すると ウィンドウや保存ダイアログが 開くことを示します Buttonは状態を変更できます 「isShowingExport = true」とします ここにも状態を追加しましょう

これでボタンが準備でき 一部状態を変更しています fileExporter修飾子もここで追加します isPresentedパラメーターで 状態への紐付けを指定します isShowingExportと ドキュメントも取得します これはファイルドキュメントプロトコルか 参照ファイルドキュメント プロトコルのいずれかに 適合させる必要がある型です 私は既にstoreへの適合を追加しているので それを渡します さらにコンテンツタイプを取得します Store.readableContentTypes.first を指定します これはCSVタイプです 最後にクロージャーを取得し 成功か失敗の演算の結果が 渡されます これでエクスポートメニュー項目が 選択できるようになり ファイルを指定して 保存名を「plants.csv」とし エクスポートを押せば ファイルがディスクに保存されます Appとオペレーティングシステムでの データ移動について 取り上げましたが お話ししたい内容がもう1つ残っています このAppには 植物に関する 多くのテキストデータはありますが 画像も追加すればもっと優れたAppになります 時間の経過とともに植物の写真を撮影すれば 成長を追跡できます このインポートフローを可能にするのは 連係カメラの使用です この機能を使ってユーザーは iOS デバイスで植物の 写真を撮影し Appに直接インポートできます ではメニュー項目を追加してギャラリービューで 植物を選択時に このフローを有効化する方法を見てみましょう importExportCommandsの後ろに ImportFromDevicesCommandsを追加して メインメニュー項目を指定します GardenDetailファイルに 切り替えて bodyの末尾に importsItemProvidersの修飾子を追加し インポートをサポートする タイプのリストを取得します 何が選択されてもこれを基準にするので ここでselectionを使用します これが空だった場合 空の配列を返します 空ではない場合 Plant.importImageTypes を 返します システムの全画像タイプのリストになります この修飾子はクロージャーを取得し 項目プロバイダーのリストが渡されます これらのプロバイダーを取得して Plant.importImageFromProvidersを 呼び出し プロバイダーを渡します これで 画像をディスクに保存した URLが返されます そして 選択したすべてのIDを ループしてモデルを更新し…

…植物への参照を取得して imageURLを更新します Indoor Plantsの庭を選択して ギャラリーモードに切り替えます 少し大きく表示してみましょう ここで植物を選択します メインメニュー項目で iPhoneからインポート そして写真撮影を選択します

すると ギャラリーが更新されます 優れたMac Appを定義する 様々な方法を紹介してきましたが ご満足いただけたなら幸いです 皆様のAppが macOSプラットフォームを すばらしいものにしてくれることを 期待しています 引き続きWWDC 2021を お楽しみください ♪