MacにおけるSwiftUI: 基盤の構築

♪ (MacにおけるSwiftUI: 基盤の構築)

こんにちは マシュー・トーザーです macOS SwiftUIチームのエンジニアです SwiftUIは根本的には マルチプラットフォームフレームワークで そのゴールは素晴らしいAppを 場所を問わずに構築することです 新しいコンセプトやAPIに着手する時 私たちは各プラットフォームが その機能に何を期待するのか 一歩引いて考えています SwiftUIがすごいのはそのAPIやコンセプトが あらゆるプラットフォームに適することです またこの動画では それらが いかにMac向けに調整されて いるかについても触れます これはcode-alongです スケルトンプロジェクトをダウンロードして 実際にMac Appを書く場所です 始める前に 素晴らしいMac Appには欠かせない 基本原則を見ていきましょう Appで作業する時に よく振り返るものです 柔軟性 親しみやすさ 拡張性 正確性です Mac Appは柔軟で 私たちそれぞれの使い方に 合わせることができます まずはMacを使う物理的な方法 キーボードやマウス スイッチコントロール さらにiPad それからソフトウェアへと拡大します テーブル列やサイドバー 詳細パネルや表示モード そしてウィンドウを調整して ワークフローを 自分に一番合う形にカスタマイズでき それにインターフェイスが適用されます 同時に Mac Appは親しみやすくもあります システムと一貫したコントロールやデザインで 共通の視覚言語によって Appをすぐに親しみやすくできます 例えば 私は何か新しく作成する時は常に ファイルメニューを 開きます 検索バーの外観は全ての Appツールバーで一貫しています ウィンドウの中を分割すれば より親しみやすくできます ナビゲーションと階層はサイドバーに コンテンツは中央に ユーザー機能はトップと右側に配置されています しかし一貫性を重視してもAppをユニークに 目立たせる余地はまだあります Appのアクセントカラーなど カスタマイズできるからです そしてカスタムコントロールが必要な場合 システムコントロールに合うようにデザインします Mac Appには拡張性があります 大型かつ複数のディスプレイには より多くの情報が表示され ドリルインスタイルのナビゲーションスタックに 隠れることなく画面上で整理できます 具体的には 拡張性とは サイドバーのようなコントロールを 概要ビューやサムネイルプレビュー 一時的なポップオーバー パネルとコントロールを切り替えるタブ コンテンツを表示する ディスクロージャグループなどを使うことです 最後に Mac Appは正確です 大きなウィンドウがただあるのではなく ビューの縁やスペースが狭いので コンテンツやコントロールの密度が高くなります またこれらのコントロールは マウスポインターで使えます とはいえ 密度を高めても 必ずしも複雑性が増すわけではありません 1つのシンプルな目的を果たすAppも 優れたMac Appと言えるのです お気に入りのMac Appを 観察してみれば分かるでしょう さてこれらを実践に応用してみます 一緒にMac Appを構築していましょう ここで停止しプロジェクトを ダウンロードしてください セッションの出発点と終着点が含まれています 私は庭が大好きなので 庭を年ごとに追跡できるAppを 作ろうと思います このAppをMac用に構築します 柔軟なウィンドウや情報密度の高さ などのプラットフォーム機能を活用し macOSで使いやすいように Appのデータを操作できるようにします 左のツールバーには 庭プロジェクトの概要ビューが 全て表示されています 庭を選択すると全ての植物の詳細を テーブルビューやギャラリーとして見られます このAppを実装していきます スタータープロジェクトで Session1.workspaceを開くと 植物の配列を含んだ庭の struct があり 私たちをスピードアップするための ビューとヘルパーがありますが ConentViewから始めていきます スライドバーを折り畳み Xcodeプレビューの余地を作ります このMac Appは2列レイアウトになります このTextビューをNavigationViewに埋め込み パディングを取り除いて テキストをSidebarに変更します 次の列は Plant Tableです このフラット化された階層はMacの大画面で 拡張性のあるナビゲーション体験のための 確かな基盤が得られます サイドバーから始めましょう command+クリックすると このビューを 独自のサブビューに抽出できます これを「Sidebar」とします storeへのアクセスが必要です

そして今年の分の庭のリストを表示したいので

庭ごとの名前を葉っぱのsystemImageで 表示します 現在どの庭を表示しているか見たり 履歴をそのセクションに入れたり 見ているものを正確にコントロールしたいので ディスクロージャートライアングルをクリックします ここではDisclosureGroupを使います これは複雑さの管理を簡単に行いつつ システムのナビゲーションを さらにフラット化してくれます List を ForEach に変更し command+クリックすると Listへのエンベットを選択できるようになります 繰り返し処理するコンテンツは すでに定義されているので それをクリアするだけです これで この式は 先程の式と同じものですが ForEach を DisclosureGroup に 埋め込めるようになりました systemImage には ちょっと長いですが chart.bar.doc.horizontal を使います これで私の庭が Outline structureに整理されるようになり 見ているものを柔軟に コントロール可能になりました しかし現在のグループをデフォルトで開くようにし また拡張状態が起動ごとに 維持されることでAppをより親しみやすくしたいです expansionStateを保存するため プロパティをサイドバーに追加します @SceneStorageプロパティラッパーに注釈付けし expansionStateキーを得られるようにします

これがSwiftUIに App終了時にこのプロパティを保存して ウィンドウリストア時にリロードするよう伝えます そしてバインディングを 今年の DisclosureGroup に渡すと

現在のグループが展開されています サイドバーが少しきついので minimumWidthを設定します

セクションで履歴を表示し 先程作った GardenHistoryOutline ビューを使います

expansionStateも同様に渡します

植物が水をいつ 必要とするかハイライトする バッジを加えましょう 右側で詳細を見るには selection を追加する必要があります バインディングを選択された庭のIDに追加します これで selection を List への バインディングとして提供できます サイドバーの親つまり ContentView は その値を持ち続け バインディングを Sidebar とテーブルに渡します これもここにコピーして @SceneStorageに入れて 実行の間に維持されるようにします

これもSidebarに渡します サイドバーはこれで良いでしょう ディスクロージャートライアングルを コントロールできるようになり Macが再起動されると終了時のまま リストアされるようになりました 今では GardenDetail ビューから開始できます バインディングも selection に渡されます command+クリックすると ビューの定義に飛ぶことができます このビューには既に Store へのプロパティや この後使うプロパティが含まれています これは庭の名前と年を navigationTitle や Subtitle として表示するようにも設定されています table を詳細ビューの独自の変数に実装し ここ body から使います まずは庭の植物リストをシンプルに表示してみます

他の植物プロパティを水平スタックビューに 表示できましたが表示データが沢山あり その多くはテキストです また植物をアルファベット順か植えた順に 整理する機能も追加したいです こうした理由から植物をテーブルに表示します テーブルではデータの閲覧やフィルター ソートや編集を拡張UIで正確にでき 画面スペースを有効に使えます 通常 表示する視覚要素があり 複雑なソートが不要な場合にはリストを使います 一方で複数の列が必要な場合は テーブルを使います テーブルをリストに置き換えて 行ごとに列を作ってみましょう

1つの列のテーブルがとても簡単にできました ここに列をいくつか加えます 各植物の成長期間を知りたいので そのための列を追加します KeyPathを出す代わりに TableColumnのコンテンツクロージャを開いて それに植物が渡されます これでどんなビューでも作れますが daysToMaturityプロパティが整数なので テキストビューをフォーマット化 された文字列で提供します 植物は沢山あり今でも植え続けています 列を選択してソートできれば 植物を整理しておくことができます 従ってまずは選択にバインディングを追加します テーブルをソート可能にするには sortOrderバインディングと各列へのKeyPathを 提供する必要があります そのためdaysToMaturityにKeyPathを追加します テーブルをより柔軟に使うには ビューフォルダからさらに列を ペーストしましょう KeyDatesを設定し植物を お気に入りとしてフラグできるようになります

プレビューを切り替えてAppを実行してみましょう

植物のデータができていますね 列を選択して 列のヘッダーをクリックして ソートできるようになっています これは良いのですが庭の管理に必要な 多くの基本アクションが行えなくなっています 新しい植物のテーブルへの追加や 複数の植物を水やり完了とマークするなどです こうしたアクションをするには ツールバーが分かりやすいでしょう macOSユーザーは通常ここで Appを使うための方法を見つけています ここにツールバーを追加し まずは植物を追加するボタンを作ります

「植物を追加」というタイトルのラベルと 「+」のシステムイメージをつけます このように構築し実行すると テーブルに植物を追加できるようになりました

Appインターフェイスのカスタマイズも ツールバーからできます 例えば 庭の表示方法のカスタマイズなどです ここにはDisplayModePickerも追加できます 植物が沢山あるのでオーダーしながら 行の数をすばやく正確に 狭められると便利です Macはハードウェアキーボードに すぐにアクセスできるので テーブルに検索可能な修飾因子を追加し searchTextにバインディングを渡します searchTextは詳細ビューのプロパティで テーブルに渡される 植物配列のフィルターに使われます 検索結果絞り込みの追加もこれでできます ウィンドウ設定の構成はできていますが 野菜の区画と裏庭の花壇を同時に 見られるようにしたいです この機能は既にあるようですね ファイルメニューから次のウィンドウを開くと 各ウィンドウに独自の選択と サイドバー拡張状態があります 各ツールバーはもちろん それぞれのウィンドウに属すので 植物を野菜区画と花畑のいずれかに植えられます 植物には定期的な水やりが必要です 植物をソート・フィルターし 行を選んで水やり完了とマークしたいです こうしたアクションを行うコマンドを macOSメインメニューに加えます メニューは検索しやすく馴染みやすいUIなので ユーザーがAppを探索しやすくなっています 任意のコマンドを追加する前に システムに提供されたコマンドを 追加してみましょう GardenAppファイルへと移動します コマンドの修飾因子を WindowGroupに追加し SidebarCommands()を加えます これでサイドバーがビューメニューや キーボードショートカットから オンオフ可能になりました では任意のコマンドです PlantCommandsファイルを メインメニューフォルダで開きます 一番前のウィンドウから 庭へのアクションを送れるようにしたいので @FocusedBindingプロパティラッパーを使い KeyPatyをFocusedValuesの 拡張で定義した任意のプロパティに渡します 植物コマンドメニューアイテムでは テーブルでどの植物が 選択されているかも把握したいため それらを水やり完了としてチェックすることで その選択も上に渡す必要があります ボディに移動するとコマンドがビューと 同様に宣言されていてメニューを表す 独自で任意の コマンドツリーを作成・構築できます まずは植物追加のアクションです これでツールバーから植物を既に追加できる状態で メインメニューには Appで行える全てのアクションが含まれる一方 ツールバーでは 通常利便性としてのサブセットです これは作成用のアクションなので 馴染みやすい場所に置いておきます CommandGroupを使い ファイルメニューのnewItemの前に置きます 水やりアクションには「Plants」という 新しいCommandMenuを置きます これはAppのビューメニューの横に表示されます

これらのビューには庭を変化させる ボタンや ボタン動作を定義する修飾因子が含まれます ウィンドウが複数あっても メニューバーは1つだけです 花壇にニンジンを置きたくない場合 メニューはどのようにアクションを送る 庭はどれか把握するのでしょうか GardenDetailビューに戻り focusedSceneValue修飾因子をテーブルに加え KeyPatyとバインディングを渡します 選択にも同じ作業をします

これで全シーンがフォーカスされている時 与えられたKeyPathの値を 表示するようシステムに伝わります 最後にGardenAppファイルで先程追加した SidebarCommand()の後に 新しいコマンド追加が必要です するとSwiftUIがそのメインメニューへの 追加を把握します これで植物をメインメニューから 一番手前にあるウィンドウに挿入可能になりました 水やり完了とするべき植物の選択も可能になり これは植物メニューからもできます

Appのアクション全てにメニューを追加すると キーボードショートカットを有効化し Appでアクションを完了する 様々な方法を提供することで Appの柔軟性を高めることができます アクションの見つけやすさも改善され Appの機能を探しやすくなるでしょう パート2ではさらなる機能追加や Appの洗練をJeffが解説します アクセントカラーやテーブル間の ドラッグ＆ドロップ iOSデバイスで写真を撮ったり添付したり する方法などです 今回は盛り沢山でしたね SwiftUIを使ってMac Appのインターフェイスを 一から構築したり各コンポーネントを 優れたMap App構築に役立てる方法を見てきました ご視聴ありがとうございました ♪