SwiftUIによるmacOSウインドウのカスタマイズ

こんにちは Haotianです SwiftUIチームのエンジニアです このセッションでは 新しいSwiftUI APIを使って macOSアプリのウインドウを カスタマイズする方法をご紹介します

1984年に Appleはデジタル化によって デスクトップ体験に革命をもたらしました

モノクロから

カラーへ

そしてアクアへと変わり

それ以降も デスクトップは macOSでの体験の中心であり続けています

ウインドウは アプリのユーザーインターフェイスを 描画するための基本単位です

一般的なウインドウには認識しやすい 様々なコンポーネントがあります

ウインドウの最前面の層には ウインドウコントロール タイトル ツールバー項目を配置する ツールバーがあります

その下の層に アプリのメインコンテンツがあり 最下層に背景があります さらに影を付けることで 重なりと奥行きを 感じられるようにしています

本セッションでは これらの要素を ウインドウ上でカスタマイズする方法を Destination Videoというアプリを使って 説明します

このアプリは Windowや WindowGroupなどのシーンを使用して ビデオを整理し再生するために構築された SwiftUIアプリです

これらのシーンタイプの詳細については 「Bring multiple windows to your SwiftUI app」と 「Work with windows in SwiftUI」を ご覧ください

では 新しいSwiftUI APIを使用して アプリのコンテンツに合わせて ウインドウを詳細に調整してみましょう

メインウインドウは ビデオコレクションをブラウズするための 主要なインターフェイスです

Aboutウインドウは アプリのバージョンやサポート情報を 表示するウインドウです

Video Playerウインドウは メディア再生に使用します

これらのウインドウを 各々のコンテンツの種類に応じて カスタマイズします 具体的には ウインドウのツールバーと ウインドウの動作 そして配置を変更します

Destination Videoのメインウインドウの ツールバーのカスタマイズから始めましょう

ツールバーは WindowGroupから コンテンツビューを使って作成されています

現在は ツールバーとタイトルが ウインドウに表示されています

このデザインの特徴は ツールバーの下に大きな画像があることです 画像を目立たせるため タイトルとツールバーの背景を削除します .toolbar(removing)と .toolbarBackgroundVisibility()の モディファイアを使います

これで 大きな画像が ウインドウの上端まで広がります

タイトルは ユーザーインターフェイスでは 非表示になりましたが ウインドウへの関連付けは維持されています これは アクセシビリティや その他の機能で使います

例えば メインメニューの項目には 引き続きウインドウのタイトルが表示されます

わずか数行のコードで アプリのデザインに合わせて ツールバーの要素をカスタマイズし ウインドウのコンテンツを 目立たせることができました 次は Aboutウインドウの動作を調整します

すべてのMacアプリにAboutウインドウがあり メインメニューからアクセスできます

アプリのバージョン番号などの 詳細が表示されます

Destination Videoでは カスタムの Aboutウインドウを作成することにしました メインのカタログウインドウの ミニマルな見た目や印象に合わせるためです

まず 前のセクションで使用したものと 同じモディファイアを追加して タイトルを非表示にし ツールバーの背景を削除します

.containerBackground()モディファイアを 使って ウインドウの背景色をマテリアルに置き換え ウインドウに少しスタイルを加えます マテリアルは半透明であり すりガラスのように デスクトップの色が透けて見えます

コンテンツのサイズが固定であるため 緑の ズームコントロールは無効になっています

Aboutウインドウに表示されるのは 静的な情報であり メインメニューから いつでもアクセスできるため 黄色の最小化コントロールを無効にします

これには .windowMinimizeBehavior() モディファイアを使います

さらに Aboutウインドウの 状態復元の動作をカスタマイズします

状態復元は アプリの終了時に ウインドウのサイズと位置を保存し アプリの次回起動時 自動的に 再び同じ状態でウインドウを開く機能です

SwiftUIアプリのウインドウは 自動的に復元されます これはAboutウインドウには必要ありません そのため .restorationBehavior() シーンモディファイアを使って無効にします

これで ウインドウの見た目と動作を調整できました 最後に 画面上の表示位置を正確に調整します

これは Video Playerウインドウで特に重要です

ウインドウの理想的なサイズは 再生するビデオのサイズと ビデオを再生する画面のサイズで決まります 青色の実線のフレームと 黄色の点線のフレームで それぞれ示しています

ビデオには様々なサイズがあります

非常に小さく 簡単に画面に収まるものもあれば

画面より大きいものもあります ビデオか画面のどちらかが 縦長であるために 縦横のどちらかが 画面に収まらないこともあります

どのような外部モニター構成でも問題なく 再生できるようにする必要があります

Video Playerウインドウにおいて 目標となるのは 再生するビデオとその画面に応じた 適切な位置とサイズを使用することです

最初にやることは 新しく作成したplayerウインドウの 初期の位置を指定することです .defaultWindowPlacement モディファイアを使用します

このモディファイアが利用する クロージャには 2つのパラメータがあります

コンテンツのサイズを照会する プロキシビューと 画面の情報に関するcontext値です

contentで.sizeThatFits()を呼び出して ウインドウの理想的なサイズを計算します さらに 使用可能な領域として 画面のvisibleRectを取得します メニューバーとドックのためのスペースが 自動的に考慮されます

ビデオは本来のサイズで 表示されるべきですが 大きすぎて収まらない場合は 画面に合わせて縮小する必要があります

このサイズの配置を返し 明示的な位置は返しません

ウインドウは デフォルトで中央に表示されます

Video Playerウインドウが 開かれている状態でサイズを変更する方法も 考えなければなりません

例えば メニューから を選択すると 自動的にウインドウが大きくなります もう一度を選択すると

ウインドウは元のサイズに戻ります

.windowIdealPlacementモディファイアで ウインドウの拡大時の大きさを制御します

目標は ウインドウを拡大した時に 理想的なアスペクト比を維持しながら 最大の大きさにすることです

使用するクロージャは 理想的な配置を設定した時と同様です 先ほどと同じく context値を使って 画面の可視領域を計算します

今回は ウインドウを画面に合わせて拡大します これには zoomToFitヘルパー関数を使います

たったこれだけの変更で Video Playerウインドウが コンテンツと画面を より適切に考慮したものになりました

カスタマイズにより アプリの各ウインドウが タスクに特化して 最適に設計されたような印象になりました

新しいAPIには大きな可能性があります

macOS Sequoiaでは ほかにも様々な ウインドウのカスタマイズが可能です

例えば プレーンウインドウスタイルで 境界なしのウインドウを構築できます

また 一定の条件下で 起動時に最初に表示される ウェルカムウインドウも作成できます

これらは可能性のほんの一部です みなさんのプロジェクトに インスピレーションを与えることを願っています

次のステップとして ウインドウのコンテンツや目的に合わせて ツールバーのスタイルを変更しましょう

アプリのウインドウの機能に合わせて ウインドウの動作を洗練させましょう

ウインドウの配置を微調整して すべてのディスプレイ構成に対応した 素晴らしい体験を提供しましょう また SwiftUIのドキュメントをチェックして 新しいAPIを試し ご自身のデザインの目標を 達成する方法を検討してみてください

ご視聴ありがとうございました 境界なしのウインドウから これで失礼します