Mac Catalyst Appのインターフェイスの最適化

Mac Catalyst Appのインターフェイスの最適化

Xcodeの新しい「Optimize Interface for Mac」オプションを使用することで、アピアランスも操作感もMacらしくなるようにMac Catalyst Appをカスタマイズする方法をご覧ください。Catalyst App向けの新しいレイアウトおよびアピアランスオプションを知り、それらによってグラフィック性能の向上、よりシャープなテキスト、そしてAppleのデスクトップとラップトップ専用にデザインされたインターフェイスを提供できることを学びましょう。ここでは、それらのオプションを利用して複数のプラットフォームを開発する際に、コードを体系化するベストプラクティスをご紹介します。Mac Catalystプロジェクトに積極的に取り組んでいるデベロッパは、このセッションを最大限に活用できるでしょう。Catalystを扱うのが初めての方は、まず"Designing iPad Apps for Mac"と"Introducing iPad Apps for Mac"をご覧になることをお勧めします。Mac Catalystでの作業の詳細については、"What's new in Mac Catalyst"をご覧ください。

リソース
関連ビデオ

WWDC21
- 優れたMac Catalyst Appの条件
- Mac Catalystの新機能
WWDC20
WWDC19
ダウンロード

こんにちは WWDCへようこそ
“Mac Catalyst Appのインターフェイスの最適化” Cocoaエンジニアのニック･タイスラーですこの後同僚のジェイク･カーターも加わります
今回皆様にご紹介するのは Mac Catalyst Appのインターフェイスを最適化する方法です
Mac Catalyst Appの次なるレベルを “Mac向けの最適化”と呼んでいます最適化することで Macライクなビジュアルとコントロールを iPadに合わせてスケーリングされた Catalyst Appに導入します
Mac向けの最適化はビルド設定の変更で行い起動時に適用されます Macに最適化されたAppは Mac向けイディオムで起動し iPadに合わせてスケーリングされた Catalyst Appは iPad用イディオムで起動します
この設定自体はコンパイルには影響しませんのでビルドエラーやフレームワークの問題が発生することなく iPadに合わせてスケーリングされた Catalyst Appを最適化できますお勧めしたいのは Catalyst Appであらかじめ作業をしてから Macに移行することです Macに最適化する前にやることがたくさんありますメニューバーアクションのキーボードショートカットを追加したり UIContextMenuInteraction APIで右クリックの処理を追加するなどです
WWDC 2019のセッションで Catalyst Appに追加できる機能が紹介されていますこれらは Mac向けの最適化の前に実施しますそれでは実際の“Mac向けの最適化”を見ていきましょう具体的に何を最適化するのでしょうか？ “何が最適化されるか？” Mac向けの最適化とは要はビジュアルをMacライクにすることです iPad Appを最適化された Catalyst Appにする場合コンテンツを1:1でレンダリングします “コンテンツスケール” Catalyst Appを iPadのビューに合わせる時の 77％ダウンスケールと比較してみましょうコードでの100ポイントは画面では77ポイントになります
Mac向けに最適化する場合コードでの100ポイントは常に画面での100ポイントになりますコンテンツのスケーリング以外にも App全体で多くのビジュアルが改善されています
“macOS用システムコントロール” UIButtons UISlider UISwitch などのコントロールや― UIActivityIndicatorを使っている場合 macOS用システムコントロールとしてレンダリングされますこちらは iOS用システムボタンです最適化すると Mac向けシステムボタンとしてレンダリングされます
最適化されたコントロール表示のサイズとメトリクスは Macのコントロールに対応します iPadの表示と同じサイズにはならないかもしれませんレイアウトを少し変更することになります “macOS用フォントメトリクス” CatalystをMacに最適化するとテキストスタイルとサイズ― たとえば本文タイトルコールアウトが Macに合わせて調整されます iPadに合わせてスケーリングされた Catalyst Appと違いテキストはスケーリングされませんテキストスタイルとサイズは異なります
たとえば本文テキストのスタイルは iPadに合わせてスケーリングされた Catalyst Appでは17ポイント Mac向けに最適化された Catalyst App では13ポイントを返します元のフォントサイズの方がスケーリングされたフォントサイズよりもずっとシャープに見えます “ハードコードされたサイズは調整されない” またハードコードされたフォントサイズは調整されません従って― UILabelやUITextFieldでは残念な結果になるかもしれません一部ですがおよそ23％は Macではしっくりこないでしょう
“macOS標準スペーシング” 最後に知っておくべき明らかな変化は自動レイアウトがMac向けスペーシングを使用することですビルドの制約条件でシステムのスペーシングを使用する場合ですシステムのスペーシングは通常 Macの方がiOSよりも大きいです “何が最適化されるのか？” これらは上級機能ですが Mac Catalyst Appを Mac向けに最適化する際に影響します
CatalystのMac向け最適化について考えてみましょう AppをMacに移行する場合のオプションは増えています CatalystをMac向けに最適化するか CatalystをiPadに合わせてスケーリングするかどちらかを選ぶことになります両方はできません２つを直接比較してみましょう “優れたMac向けApp” まずどちらかが使えなくなることはありません iPadに合わせてスケーリングするほうが Appには好都合かも知れません引き続き優れたAppを両方のイディオムで利用できます “Mac向けAppへの早道” スケーリングはMac向けAppへの早道です Macで実行できるようになりますビューを書き直すことなく優れたMacバージョンを作成できますこれはスケーリングの理念のひとつでもあります Mac向けAppをすぐに実行するには少々トレードオフがあります “スケーリングされた Appの次のステップの可能性” トレードオフには好ましいものとそうでないものがあり Appによって異なります Mac向けの最適化が次のステップになるかもしれません “iPadとの互換性を備える” スケーリングされたAppは iPad Appとの互換性を備えます Catalystができることは全てしてくれるため Appのコードを全面的に変更する必要はありませんそれでも Macに合ったアピアランスを実現できます “本格的なMac向けルックアンドフィール” 最適化されたAppは本格的なMac向けルックアンドフィールを備えます CatalystがMacのコントロールに変換しテキストサイズは保持され Appのインターフェイスは Macでベストの表示になります “レイアウトを保持” スケーリングされたAppは AppのiPadバージョンと互換性があるためレイアウトは可能な限り保持されますほとんどの場合ビューを変更する必要はありませんそのまま Macで適切にレイアウトされます “レイアウト作業の必要性” しかし最適化ではコントロールの見た目が完全に異なるためある程度のレイアウト作業が必要になるでしょうコントロールのサイズが暗黙的に仮定されている場合がそうです最適化とイディオムの差異について理解できたところでどのようなAppで最もメリットが大きいか考えてみましょうどのようなAppを最適化するとアピアランスがよく表示されるのでしょうか？ “候補となるAppの特徴は？” 表示テキストが多いAppではビジュアルがはっきりと向上します元のテキストサイズが得られテキストがスケーリングされないためです “テキストが多い” Swift Playgroundsは今年発表のBig Surで― Mac向けに最適化される Catalyst Appです Swift Playgroundsのリッチテキストエディタで Appのビジュアルが向上しています手間をかけるだけの価値はあります “グラフィック重視” グラフィック重視のAppも向上する可能性があります “SceneKitまたはMetal” MetalまたはSceneKitによるグラフィックを多用したAppでは大幅な向上が見られました Swift PlaygroundsはLearn to Code Seriesで SceneKitを使用しています Mac向けに最適化したことでフレームレートの向上と電力消費の低下が統合ディスクリート― どちらのグラフィックシステムを搭載したMacでも見られました “カスタムアートワーク” グラフィック重視のもうひとつのタイプが高カスタム性の細密なアートワークです Catalystのスケーリングと最適化の相違は表示した時の視覚的な差異― すなわち pngをあるサイズにスケーリングしたものと元のサイズの違いと同じことです Appを並べてみれば見た目の違いを簡単に評価できます MapKitのアートワークはこれを示すよい例です MapKitには膨大なカスタムデザインとアイコンがあります拡大されたバージョンで場所マークのピクセルパーフェクトのアイコンを見てみますスケーリングありなしの差が分かります
左はスケーリングされた― “カリフォルニア科学アカデミー”のアイコンです右はスケーリングなしの画像です建物の窓や柱を数えられるでしょうかこうした細部はスケーリングされたグラフィックでは失われます
道を下ると“デ･ヤング美術館”がありますここでもスケーリングなしはテキストもシャープです
最後は“グッゲンハイム美術館”ですスケーリングなしのMapKitアセットでは建築物の丸みがより完全に表現されています
アイコンは画面ではずっと小さくレンダリングされますのでユーザーから見た視覚的な差異はここで見るほどは目立ちません “パリ”
とはいえこれはMapKit全般に言えることですパリのような密集した都会を低い拡大率で道路網まで細部に表示することは Catalyst Appを最適化する強い動機になります MapKitでは顕著です “コントロールビュー” 候補となるAppのもうひとつの特徴はコントロールビューが多いことです可変値を表示する Popoverなどですこの場合 Mac向けに最適化するとビューの表示がよくなるでしょう地図ではこのメリットが大きいですこのようなチェックボックスはスライドスイッチよりも表示が向上します最後にサードパーティへの依存状況が制限要因になるかもしれませんフレームワークデベロッパの皆様にとっては Catalystのターゲットのサポートだけでは十分でないかもしれません特にお使いのフレームワークが UI中心の場合 Mac向けの最適化をサポートすることはクライアントを限定しないために必要になるでしょうジェイクが後ほど皆様にコードを変更して Mac向けイディオムをサポートする方法をご紹介します “iPadに合わせてスケーリング” ここからは Mac向けの最適化によって iPadに合わせてスケーリングされた Appのビューの状態を見てみます左はタルトのレシピの最初に出てくるシンプルなビューですスタックビューでできたレイアウトに５つの要素― ボタンラベルスライダー画像テキストビューがあります
レイアウトを調整せずにMac向けに最適化します詳しく見てみましょう
“Mac向けに最適化” このレイアウトでよさそうです
最初に目に入る違いは左側のシステムiOSボタンが右側のシステムMacボタンに変わる点でしょうボタンは実行時のサイズが変わりビューのレイアウトによっては原点も変わります
ウィンドウを見てください Macの画面上でまったく同一のポイントサイズです
ただし― 左のウィンドウのポイントサイズと全てのコンテンツは実際にはコード上のサイズの 77％だということです
これはCatalinaで最初に Catalystがリリースされた時の動作ですこのことをこの後の変更でも頭に入れておきましょう
次にそれぞれのウィンドウのリーディングエッジを見てみますウィンドウのリーディングエッジとテキストビューの間のスペースは右よりも左の方がはっきりと小さいです前に見たとおりシステムのスペーシング値が Macでは全般的に大きいのです
従って― Mac向けに最適化されたビューでは水平方向の余白が広くなりますレイアウトした時にビューの幅が少なくなりますこのためテキストが次の行に折り返して表示されていますまたスライダーの幅も狭くなっています
しかし幅が減少するにも関わらず画像ビューは Mac向けに最適化したほうが多くのスペースを占めていますこれは必要な幅と高さの制約に従い組み込みコンテンツサイズに合うようレイアウトされるのです
これで Mac向けに最適化すると幅が広がる理由がお分かりでしょうこの画像は元のサイズの 77％から 100％になったのです
状況に応じてこれに対処する方法がいくつかあります MacまたはiPad固有のアセットをアセットカタログで表示する方法が最適です
適切にサイズ調整されたアセットがなければ Interface Builderの Trait Variationを使用してイディオムごとに別のサイズを割り当てますこれでスライダーのアピアランスに対処できますスライダーが余ったスペースを占めるよう構成します余白と画像の幅が広くなりスライダーのスペースが狭くなりました
実は Mac向けに最適化されたスライダーは余白と画像幅の増分を合計した量だけ狭くなります
レイアウトはこれでよいでしょうアピアランスを見ていきましょう
左側のスライダーはシステムのUISliderですカスタマイズはしていません
右側では― 新しくデザインされたmacOS用スライダーのアピアランスが適用されています
トラックの高さやノブの影がわずかに違います皆様とユーザーにとって重要になるのはこのスライダーが他のMacのスライダーと同じであることですこのスクリーンショットでははっきりとはテキストのレンダリングの違いが分かりませんこのテキストビューは本文テキストスタイルです左側は iPad標準の17ポイントのフォントサイズです右側は Mac標準の13ポイントです視覚的にフォントのサイズは揃っていますしかし Mac向けに最適化されたビューでは元の13ポイントになるためテキストはよりシャープです折り返し表示で行が増えるのは水平方向の幅が減少したためでテキストのレンダリングやサイズとは無関係です具体的な数字を知りたい場合はこのスライドにレイアウト値がありますのでこれまでの変化と合わせて確認してみてください
これら全てを総合するとご自身である程度の作業を行って Mac向けに最適化すればシンプルなレイアウトもリファクタリングできるのです
このMac向けレイアウトを整理しましょう
AppはMacに合っていますのでレイアウトに一般則を適用することよりもどの要素がどう変わるかを理解するために見てきました完成したAppがこちらです完璧になじんでいます
このビューを終える前に左側の“Get Cooking”ボタンを見てみましょうティントカラーがsystemTealにセットされていますが右側では― Macのアピアランスにまったく反映されていませんティントカラーのボタンはMac標準ではなくユーザーには違和感があるため Macの最適なアピアランスからは外されています実はコントロールのカスタマイズにはさらに大きなカテゴリがあり Mac向けに最適化すると使用できません iPadでは一般的なカスタマイズでも Macではそうでないかあるいは Macのビジュアルでサポートされていないためです “UIControlのジェスチャー認識” よくジェスチャー認識をUIButtonに割り当てて長押しを検出し複数のアクションをボタンにオーバーロードしますが UIButtonのジェスチャー認識は Macのアピアランスに合わせたシステムボタンでは呼び出されません
これに対処する方法はいくつかありますまず iPadの操作をMacに移行しようとしていないことを確認します Appのメニューバーのメニュー項目か UIButtonのメニュープロパティを使ってメニューを割り当てる方がうまくいきますマップがその例です Appの最適化ではカスタマイズされたコントロールを― イベント処理レベルで監査することをお勧めしますこれは UIButtonなどのコントロールのジェスチャー認識や UIControlのイベント追跡メソッドのオーバーライドたとえば― beginTrackingTouchWithEvent などを含めてですジェスチャー認識が不可欠な場合はカスタムボタンタイプはMacのアピアランスでレンダリングされずかつ iPadと同じイベント追跡が維持されジェスチャー認識の機能は失われないことを覚えておいてくださいカスタマイズされたスライダーバーを見てみます “UIControlの視覚的なカスタマイズ” ただいま離陸しました minimumTrackTintColorは白 maximumTrackTintColorは青円形のつまみを飛行機に変更しています
これをMacに移行すると乱気流に遭遇するかもしれません Mac向けイディオムではこれらのカスタマイズを利用できません考え方としてはシステムコントロールを使用するとアピアランスのカスタマイズに制限があり Mac標準のアピアランスでは UIKit APIを重ねられません
それではジェイクに交代してスケーリングされた― Catalyst AppをMacに最適化する際の変更点を紹介してもらいます
XcodeチームのエンジニアのジェイクですシンプルなMac Catalystの料理本Appをご紹介します早速デモをお見せしましょう
まずこのAppのクイックツアーを行い Mac向けに最適化します左のスライダーバーでエリアに簡単にアクセスできます “全てのレシピとお気に入り” などです次にレシピのリスト最後がレシピです
新しいレシピは “New Recipes”ボタンで追加します
レシピの詳細と写真を追加できますこのAppは Macでも問題ありませんが場違いに感じる点がいくつかあります iOS風のボタンやナビゲーションバーです Xcodeに切り替えて始めましょう
ターゲットの全般的な設定です Mac向けチェックボックスの隣に新しいポップアップボタンがあります
“iPadに合わせてインターフェイスをスケーリング”がデフォルトでは選択されます Xcode 12とmacOS 10.16で新たに “Mac向けにインターフェイスを最適化”のオプションが加わりますこれを選びます
これは UIKitに対し Appを Mac向けイディオムで実行したいと伝えます Macライクなルックアンドフィールになります Build & Runをしてどう変わるか見てみましょう
“iPadに合わせてインターフェイスをスケーリング”と “Mac向けにインターフェイスを最適化”の両方を同時に見られるようにしてありますまずウィンドウが大きいです加えてウィンドウの中のコンテンツも大きいですスケーリングされなくなったためです
次にこの“タイマー”ボタンです “Mac向けにインターフェイスを最適化”に変更することでこのボタンが自動的に Macライクなアピアランスになっています
他にも変化がありますスケーリングされなくなってボタン表示が大きくなったのに加え異なるメトリクスが使用されていますつまりどういうことでしょう？
一部のサイズは実際に変更されていますたとえばフォントは大きくなりテキストとボタンの間の余白も増えました
このように変わったせいでボタンのフレームが大きくなっていますこのようなメトリクスの変更を考慮して変更後のレイアウトを監査する必要があります
レシピのリストを詳しく見てみましょう左の画像と右の“お気に入り”アイコンがスケーリングされなくなりやや大きくなっていますただしよく見るとテキストのサイズは変わっていません動的テキストスタイルを使用しているため自動的に読みやすく調整されていますテキストのサイズはよさそうですリストの見た目は― 画像と“お気に入り”アイコンが元のようにもう少し小さいとよいのですが Xcodeに戻ってリストを改善しましょう
レシピのリストを制御する View Controllerですここでレイアウトを生成しています高さは絶対値指定で 100ポイントです
自動レイアウトの制約を設定した方法により高さが小さいとレシピ画像も小さくなります
先ほど調整してみたところ 80ポイントがちょうどよさそうでした
このイディオムをチェックする行を更新します Macなら高さを80ポイントにそうでなければ 100ポイントのままにします今度は “お気に入り”アイコンです
アセットカタログで画像を指定してあります “Universal”Versionとだけしておいて― どこでもAppを実行できるようにしていますこの場合 iPhone iPad Macですテキストの隣に表示される画像が Macで実行した時に大きすぎました
Mac向けイディオムで実行したいので― アセットカタログで定義される Mac向けアセットにアクセスします画像を特別に手作業で正しいサイズにして使えます
Mac向けアセットを有効にするにはインスペクタの“Device”セクションの “Mac向け”チェックボックスをクリックするだけですアイコンのMacバージョンをドラッグして―
できましたビルドと実行でまたリストを見てみましょうセルの高さが小さくなりレシピ画像も小さくなりました右の“お気に入り”アイコンもテキストに合ったサイズです Mac向けの特別なアセットを使用したためです
“新しいレシピ”画面を見ていきましょう
“写真を選ぶ”ボタンが Mac風になりましたいいですねそれでも Macでは場違いに感じるのが― 上のナビゲーションバーですナビゲーションView Controllerとナビゲーションバーは Child View Controller間の切り替えに便利です小さい画面に多くのデータを表示できますこのような操作は Macでは違和感がありますよく使うボタンをナビゲーションバーに配置するのも一般的ですが Macの場合ウィンドウタイトルを表示するツールバーがよりよい選択ですそこで “保存”と“キャンセル”ボタンは移動して上のツールバーか下のビューにナビゲーションバーはなくしてしまいます “保存”と“キャンセル”ボタンはこのビューで入力されたデータに対するアクションでまた両方ともウィンドウを閉じるのでこのビューの下に移動するとよりMacライクになりますまたバグがあります Mac向けイディオムで実行するとタイトルラベルが他の２つのラベルよりも大きいです Xcodeに戻って修正してしまいましょう
“新しいレシピ”ウィンドウで使う RecipeEditorViewControllerです Macでの実行時にナビゲーションバーを非表示にします
これを修正するにはイディオムをチェックします Macならナビゲーションバーを非表示にシンプルですね次にストーリーボードを見てみます
このプロジェクトは Mac向けイディオムをサポートするので下のデバイスバーにイディオムの選択が表示されます
Macに切り替えるので上のビューを見てください
キャンバスが更新されていますコントロールがずっと Macライクになりました Mac標準のスペーシングとメトリクスが使われています
ここでまず修正したいのがタイトルラベルです他の２つよりも大きく表示されていました
インスペクタの “Font”属性を見ると 17ポイントのシステムフォントに設定されていますニックの説明にもあったとおりこれはおよそ13ポイントにスケールダウンされていました “Mac向けにインターフェイスを最適化” オプションを選択したためスケーリング前の 17ポイントでレンダリングされますこれが大きく表示された理由ですでは他の２つはなぜそのまま？
他の２つのラベルはどちらも本文テキストスタイルに設定されています先ほど説明したようにテキストスタイルは動的でレンダリングされるプラットフォームに適切なサイズに調整されるのですなるべくこのようなテキストスタイルを使うことをお勧めしますタイトルラベルを更新してこれも“本文”テキストスタイルにしましょう
次は“保存”と“キャンセル”ボタンの処理ですコード上で既にナビゲーションバーを非表示にしましたのでここで見えていても実行時には表示されません新しい“保存”と“キャンセル”ボタンをこのビューの下に追加して Mac向けイディオムでのみ表示されるよう設定します
まずボタンテキストビューをリサイズして新しいボタンの場所を作ります
この時 Interface Builderでキャンバス内のフレームが自動レイアウトで計算されるフレームと一致しないと警告されますとりあえずボタンの場所を作ります
スタックビューをドラッグして―
右下にピン留めします
スペーシングをシステム標準のスペーシングに―
さらに“配分”を“等分”にセットしてボタンのサイズが揃うようにします
次にボタンをドラッグしてタイトルを更新します
“キャンセル”“保存” これらのボタンは Mac向けイディオムの時だけ表示したいのでスタックビューを選択して―
“Installed”属性を使います属性インスペクタの下の方です
ビューについてはこの属性は実行時にビュー階層に追加されるかどうかを指定します “Installed”をチェックするとこのスタックビューは常にビュー階層に追加されますただし Trait Variationを左下の＋ボタンをクリックして追加できます
“イディオムに基づくバリエーション導入幅高さ色域” トレイトに基づき属性を変えられます Xcode 12では新たに Mac向けイディオムに基づきトレイトを変えられるようになりましたこれらのトレイトに基づきバリエーションを追加します
新しいMac向けイディオムのバリエーションでは “Installed”をチェックしたままに― “デフォルト”ケースではチェックを外します
これでこれらのビューは Mac向けイディオムの時だけ設定されます
次にテキストビューが新しいボタンに重なっていないか確認します
Controlキーを押しながらスタックビューにドラッグします
“垂直方向のスペーシング垂直方向のベースライン標準スペーシング” キーボードでOptionキーを押し続けると上の選択内容が垂直方向のスペーシングから垂直方向の標準スペーシングに変わりますこちらを選びます
制約が追加されましたが他の制約が赤色になってしまいました条件を満たさない制約があるという意味です下の赤色の制約はテキストビューとスーパービューの間のスペーシングが 20ptのままですこれが先ほど追加した制約と競合しています
古い制約を削除するだけでは iPadで実行した時に新しいボタンが設定されませんテキストビューの高さを別の方法で指定する必要があります方法はいくつかありますここでは制約の優先度を変更します
現在は“Required”にセットされていますが “High Priority”に変更してみましょう制約を満たせない場合は無視されます
全ての制約がオレンジ色に戻りました “Update Frames”ボタンをクリックします右下にあります
これで MacとiPad 両方のイディオムで機能しますもう一度デバイスバーのイディオム選択で確認します
“新しいレシピ” “新しいレシピ”ウィンドウを表示するとタイトルラベルのサイズは適切にナビゲーションバーは非表示に “保存”と“キャンセル”ボタンは下に配置されていますよりMacライクになりましたスライダーバーに戻ってまとめてみましょう “まとめ” “Mac向けにインターフェイスを最適化” オプションを選んで Mac向けイディオムで実行したいと UIKitに伝えますルックアンドフィールがよりMacライクになりますただしレイアウトが変わってしまいます Mac標準のスペーシングとコントロールのメトリクスが適用されるためですコントロール画像ビューフォントサイズが変更されます変更された後のレイアウトを監査する必要がありますログをチェックして条件を満たさない制約の警告を調べるとよい場合がありますコントロールのサイズが変更されたために起きた問題を探すのに役立ちます先ほど見たようにアセットカタログの Mac向けアセットでも解決できる場合があります
ここで考慮すべきことは Mac向けアセットが見つからないとシステムは Mac向けスケーリングと iPad用アセットにフォールバックします “Universal”アセットはその後ですデモで見たようにこれらのアセットのサイズは最適でないかもしれません画像を監査してなるべく Macバージョンを表示します最後に MacとiPadのパラダイムの違いを見てきましたナビゲーションバーやボタンの配置などですこのような差異を考慮して Mac Catalyst Appをデザインします
詳しくは Appleのヒューマンインターフェイスガイドラインで Macですばらしく見せるデザインの洞察を得られます
Mac向けに最適化された Mac Catalyst Appをバックデプロイすることも可能ですが考慮すべき点がいくつかあります “Mac向けに最適化されたインターフェイス” Catalinaでの実行時に Macライクなルックアンドフィールになりませんまた iPadとMacの両方のイディオムをサポートすることを意味しますバックデプロイ時の作業の大半はレイアウトが両方のイディオムのメトリクスに対処することの確認ですまた MacでサポートされないフレームワークやAPIを使わないようにします
traitCollectionでイディオムをチェックするか―
条件付きコンパイルブロックを検討してくださいこの条件付きコンパイルブロックはイディオムに関わらず同じです
両方のテクニックを使うことが適切な場合があります
私からは以上です再びニックから SwiftUIの最適化を説明してもらいましょうありがとうジェイク料理本 Appが Macでうまく表示されるようになりました
SwiftUIで Catalyst Appを iPadに合わせてスケーリングできますが “Mac向けに最適化されたSwiftUI” SwiftUIは Mac向けの最適化にも使用できます SwiftUIはUIKitと似たアプローチを取りますが得られるものはより多いです宣言型シンタックスとレイアウトのおかげで趣向を凝らしたビューを Mac向けに最適化できます
SwiftUIをお使いの方はコンテキストアウェアな方法でビューが調整されることをご存じでしょうたとえばフォームやメニューならボタンスタイルを変えるなどです SwiftUIはビューがMac向けイディオムで使われているかも把握していますコントロールのアピアランスが iPadOSビューで変わるように Mac向けに最適化された時も異なる表示がなされます
やはり少々のレイアウト作業を行い SwiftUIインターフェイスを Mac向けに最適化します SwiftUIのレイアウトは全体的にビューの構成に使用するコンテナに基づき変わりますいつもどおり柔軟性のある再利用可能なレイアウトの構築はビューのモジュール化とコンテナの適切な使用により可能です
では駆け足で SwiftUIコントロールのアピアランスの変化を見ていきましょう iPadに合わせたスケーリングから Mac向けの最適化への変化です今年 GroupBoxが iOSとiPadOSに新たに加わります GroupBoxは構造化コンテンツのレイヤー化に使用し適切なセマンティックカラーを自動的に受け取ってコンテンツの背景とします “基本情報” “詳細の記述” ここでは GroupBoxを別のGroupBoxにネストされたVStackに使用しますビューは自動的に異なる背景色にレンダリングされました SwiftUIのGroupBoxは Mac向けGroupBoxのように Macに最適化されたアピアランスになります同時に自動余白とレイアウト調整が行われます
コードにToggleをセットしましたこれは Boolのバインディングに変数completedを使用します iPadOSでSwiftUIの Toggleのデフォルト表現はスライドスイッチです
Mac CatalystとUIKitでは Mac向けチェックボックスを利用できました SwiftUIでも利用できます Macに最適化された CatalystではデフォルトのToggleのアピアランスはチェックボックスです ToggleStyle構造体と ToggleStyleモディファイアを使ってデフォルトが合わない場合スタイルを特定できます
UIKitと同じくシステムiOSボタンにはネイティブのMacのアピアランスが適用されます横にSF Symbolsを付けることもできます
どちらもすばらしいボタンです私の場合一方がよりクリックしやすく感じます
DatePickerは少々違います右側は Catalystの両方のイディオムの DatePickerです DefaultDatePickerStyleは Catalyst全体で同じようにレンダリングしますここでももちろん別のスタイルも利用できます DefaultDatePickerStyleはどちらのイディオムでもコンパクトです “サイズ” このコンテンツビューではサイズを小中大から選べます sizeIndexプロパティでバインディングを設定します stringの値またはenumでバインドすることもできます
Mac向けに最適化すると Mac向けピッカーを使用できますこれは Macでユーザーにおなじみのコントロールですスクロール式のピッカーよりもずっとMacライクな体験を提供します segmentedControlStyleも両方のプラットフォームのオプションです
最後のコントロールですシステムボタンを利用できますが SwiftUIボタンではカスタマイズ性を犠牲にすることはありませんシステムボタンのアピアランスを使わない場合カスタムボディを使いますこのコードのように SwiftUIの ButtonStyle APIで柔軟で再利用可能なボタンスタイルにしてみてください
SwiftUIとCatalystはカスタムボタンを Macのアピアランスでレンダリングしませんカスタムボタンはそのまま表示されます
ここでは完全にカスタマイズした懐かしの90年代風 ButtonStyleを書いてみましたビューのモディファイアとして ContentViewのボディにあるボタンに適用しています Catalystのおかげで iOSでもMacでもコードを追加しなくても利用できます
私も皆様と同様 SwiftUIで実験してきました SwiftUIはUIKit Appでシームレスに実行できますコンテンツビューをとても簡単に SwiftUIプレビューキャンバスで構築できますそして UIKitのコードの UIHostingControllerにドロップします
私の印象では― ジェイクの料理本Appのテキストのみのビューは模様替えできると思います
インタラクティブなレシピビューを全てSwiftUIで作成しましたレシピを見ながら調理の進捗をチェックできます
上のピッカーで計量単位を選びます
各手順はGroupBoxに含まれており―
Toggleで完了にマークできます
カスタムの青色のタイマービューとカスタムSwiftUIボタンを使用してタイマーを制御していますさてこのiPad用の機能は Mac向けに最適化されたCatalyst App ではどうなるでしょうかこちらはプレーンテキストの調理手順のビューこちらが iPad SwiftUIのビューコードはまったく変えていませんうまく変更され満足です
ピッカーはデフォルトのMacのアピアランスを適用しています iOSスタイルのGroupBoxは Macスタイルになっています GroupBoxを使ったのでさらにMacライクなレイアウトにできましたそうでなければ自分で書かなければなりませんでした
Mac向けGroupBoxは Mac向けメトリクスを使用しますビューの周囲がややゆとりがなく GroupBoxのラベルは外に移動しています調理手順の見た目にも影響しています
スライドスイッチは全てチェックボックスになりチェックボックスのラベルはボックスの右側に配置されていますまたラベルはクリックしてチェックボックスをトグルできスライドスイッチのラベルとは動作が異なります
このカスタムビューはそのままで正しくスケーリングされています
とても簡単にこのAppに SwiftUIを導入できましたレシピを簡単によりインタラクティブに MacとiPadの両方で使えます今日学習した内容をまとめましょう Catalystインターフェイスの最適化で変わる点について見てきました
Mac向けの最適化の候補になりそうな Appの特徴を確認しました XcodeでAppを最適化する方法はジェイクが説明してくれました Interface BuilderのTrait variationとコードのイディオムチェックを使用します
最後に SwiftUIをMac向けに最適化する方法を見てきましたそしてどれほど簡単に SwiftUIビューをUIKit Appに統合できるかを確認しました
ご視聴ありがとうございました WWDC 2020をお楽しみください

22:04 - Hide Navigation Bar in Mac Idiom

if traitCollection.userInterfaceIdiom == .mac {
    navigationController?.setNavigationBarHidden(true, animated: false)
}

29:33 - Idiom vs conditional compilation block

// Idiom vs conditional compilation block

if traitCollection.userInterfaceIdiom == .mac {
    // "Optimize Interface for Mac" specific code
}


#if targetEnvironment(macCatalyst)
    // Mac Catalyst specific code
#endif


if traitCollection.userInterfaceIdiom == .mac {
    // "Optimize Interface for Mac" specific code
} else if traitCollection.userInterfaceIdiom == .pad {
    #if targetEnvironment(macCatalyst)
        // Mac Catalyst specific code
    #else
        // iPad specific code
    #endif
}

31:26 - SwiftUI GroupBox

// Nested GroupBoxes

struct ContentView: View {
    var body: some View {
        GroupBox {
            VStack {
                Text("High level information")
                GroupBox {
                    Text("Some elaborate details")
                }
            }
        }
    }
}

32:00 - SwiftUI Toggle

// DefaultToggleStyle

struct ContentView: View {
    @State var completed: Bool = false

    var body: some View {
        Toggle("Complete?", isOn: $completed)
    }
}

32:35 - SwiftUI Button

// System Button with SF Symbol

struct ContentView: View {
    var body: some View {
        Button(action: { }, label: {
            HStack {
                Image(systemName: "rays")
                Text("Click Me!")
            }
        })
    }
}

32:56 - SwiftUI DatePicker

// DefaultDatePickerStyle

struct ContentView: View {
    @State var dueDate = Date()

    var body: some View {
        DatePicker("Due:", selection: $dueDate)
    }
}

33:14 - SwiftUI Picker

// DefaultPickerStyle

struct ContentView: View {
    @State var sizeIndex = 2

    var body: some View {
        Picker("Size:", selection: $sizeIndex) {
            Text("Small").tag(1)
            Text("Medium").tag(2)
            Text("Large").tag(3)
        }
    }
}

33:55 - SwiftUI Nineties Style Button

// Custom gradient button

struct CustomNinetiesButtonStyle: ButtonStyle {
    var angle: Angle = .degrees(54.95)

    func gradient(shifted: Bool) -> AngularGradient {
        let lightTeal = Color(#colorLiteral(red: 0.2785285413, green: 0.9299042821, blue: 0.9448828101, alpha: 1))
        let yellow    = Color(#colorLiteral(red: 0.9300076365, green: 0.8226149678, blue: 0.59575665, alpha: 1))
        let pink      = Color(#colorLiteral(red: 0.9437599778, green: 0.3392140865, blue: 0.8994731307, alpha: 1))
        let purple    = Color(#colorLiteral(red: 0.5234025717, green: 0.3247769475, blue: 0.9921132922, alpha: 1))
        let softBlue  = Color(#colorLiteral(red: 0.137432307, green: 0.5998355746, blue: 0.9898411632, alpha: 1))

        let gradient = Gradient(stops:
                                    [.init(color:lightTeal, location: 0.2),
                                     .init(color: softBlue, location: 0.4),
                                     .init(color: purple, location: 0.6),
                                     .init(color: pink, location: 0.8),
                                     .init(color: yellow, location: 1.0)])

        return AngularGradient(gradient: gradient, center: .init(x: 0.25, y: 0.55), angle: shifted ? angle : .zero)
    }

    func makeBody(configuration: ButtonStyleConfiguration) -> some View {
        let background = NinetiesBackground(isPressed: configuration.isPressed,
                                            pressedGradient: gradient(shifted: false),
                                            unpressedGradient: gradient(shifted: true))
        return configuration.label
            .foregroundColor(configuration.isPressed ? Color.pink : Color.white)
            .modifier(background)
    }

    struct NinetiesBackground: ViewModifier {
        let isPressed: Bool
        let pressedGradient: AngularGradient
        let unpressedGradient: AngularGradient

        func body(content: Content) -> some View {
            let foreground = content
                    .padding(.horizontal, 24)
                    .padding(.vertical, 14)
                    .foregroundColor(.white)
            return foreground
                .background(Capsule().fill(isPressed ? pressedGradient : unpressedGradient))
        }
    }
}
struct ContentView: View {

    var body: some View {
      Button("Awesome", action: {})
          .buttonStyle(CustomNinetiesButtonStyle())
    }
}

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

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

リソース

関連ビデオ

WWDC21

WWDC20

WWDC19