macOSの新しい外観の採用

こんにちは　WWDCへようこそ “macOSの新しい外観の採用” こんにちは　Apple Parkへようこそ 私はジョン･テグマイヤー AppKitのエンジニアです 今日はこの後に 同僚のジェフ･ナドーも参加します macOSの新たなルックを ぜひとも紹介したいと思います ご覧の通り macOSには新デザインが満載 Mac Appのアピアランスと構造では 劇的なアップデートが見られます フルハイトのサイドバー カラフルなアイコンに アップデートされたシンボルアイコノグラフィ

全く新しいツールバーには インラインタイトルと大きく大胆なコントロール 下にはSplit Viewセクションが 統合されています

新たなインセット選択スタイルを採用した コンテンツリストのアピアランス

大きな変化ですが あなたのAppへの影響はどうでしょう？ 素晴らしいことに デザイン変更の多くは自動的に行われます フレームワークが重い作業をこなして あなたのネイティブのMac Appは macOS Big Surでも見事に表示されます しかし適合が少し必要です もう一手間で 輝かせることができます 今日はその点を説明します 今回の新デザインは 主に３つのセクションに分かれます １つ目はウインドウ構造のアップデート サイドバーやツールバーなどの要素は あなたのAppの成功の鍵となります 次はコントロール系統の 素晴らしい新機能 最後はmacOSにやってきた シンボルイメージ まずはサイドバーとツールバーの アップデートから見ていきましょう 最も目に付くアップデートの１つは メールに見られるような 美しいフルハイトのサイドバーでしょう AppをBig Surで構築するだけで 無料で使えます なぜなら既存のAPIを利用するからです

特にサイドバーは NSSplitViewコントローラで構築してください Split Viewアイテムは サイドバービヘイビアで設定されます

APIの２番目のピースは フルサイズコンテンツビューのウインドウマスク これによりコンテンツを タイトルバー用スペースの下にレイアウト可能

まだフルサイズコンテンツビュースタイルを 利用していないのなら macOS Big Surでは さらに簡単に適合できます NSViewにはビューのセーフエリアを見つける 様々な方法があります

これらの新セーフエリアは Interface Builderでも利用できます サイズインスペクタの新ボックスをチェックして セーフエリアレイアウトガイドを表示させます

次にセーフエリアレイアウトガイドが ビューに表示され すぐに利用できます

Interface Builderで 新しいMac Appを作る場合 事前設定されたサイドバーを作成する 素晴らしいオブジェクトがCatalogにあります

これがサイドバー付きの Split Viewコントローラを設定し 自動的にウインドウを フルサイズのコンテンツビューに調整します 特別な設定は必要ありません

稀にフルハイトのサイドバーを 使いたくない場合もあります NSSplitViewアイテムには オプトアウトできる新しい特性があります これが役立つのは 普段 サイドバーが閉じている場合や またはツールバーが混雑していて もっとスペースが欲しい場合などです

この特性はサイドバービヘイビアを持った アイテムのみに影響します

サイドバーはカラフルな新アイコンで 彩り豊かとなりました 全てのサイドバーアイコンはデフォルトで アクセントカラーが付いています しかしNSOutlineViewDelegateメソッドで カスタマイズが可能です

Delegateメソッドは NSTintConfigurationインスタンスを戻して いくつかの異なるTintを与えます

最初はアクセントカラーを使う デフォルト設定

モノクロームを選択すれば 色のないアピアランスとなります Catalinaのサイドバーアイコンと 似た感じですね

PreferredColorで デフォルトアクセントカラーを指定できます アクセントカラーをカスタマイズすれば その色に変更されます 例えば メールのフォルダは デフォルトの青色で引き立ちますが 赤色では埋もれてしまいます 最後にfixedColorは 決して変わらない色を指定します 良い例がメールのVIPフォルダ 常に黄色の星ですね

この特性を使えば サイドバーのセクションの区別が可能 あなたのApp仕様にできます 色を特定のアイテムに 強く結び付けることもできます またはモノクロームを選択すれば サイドバーの２次グループを目立たなくして 重要なアイテムに 注目させることができます

次にツールバーを見てみましょう Big Surではツールバーのデザインが 一新されました アイテムの背後に 見えるものはもうありません その代わりにウインドウのコンテンツと 統一されています これは自動的に行われます ツールバーの新アピアランスの他にも 新しいスタイルのツールバーが 多くあります それぞれに目的があり ウインドウの存在感にインパクトを与えたり 縮小させて コンテンツに注目させたりできます

NSWindowにはtoolbarStyleという 新たな特性があります 新ルックのコントロールが可能となります 最初はツールバーの標準ルックとなる 統一スタイル このスタイルがツールバーの コントロールを強調します より大きくなり アイコンも大胆になっています ツールバーの先端 サイドバーの隣にある 新しいインラインタイトルもサポート

これがツールバーの新標準ルックですが 他のスタイルの要件に合わない 多くのウインドウにとって良い選択となります 大きくなったコントロールと スリムになったタイトルが macOSの新ルックの中で あなたのAppを輝かせます

統一スタイルのバリエーションが 統一コンパクトスタイルです このスタイルは より簡潔なレイアウトです 通常サイズのコントロールと 低いツールバーが付いています

以前もウインドウタイトルを隠す設定で 見られたルックです このスタイルはBig Surで 任意のインラインタイトルをサポート ウインドウのコンテンツに注目させる場合は このスタイルがいいでしょう ツールバーも混雑しません

環境設定の新スタイルは Appの環境設定ウインドウ用になっています ツールバーの選択可能アイコンを引き立たせ 似たサイズで中央揃えにして ウインドウに統一感をもたらします

最高なのは この環境設定スタイルが 適合なしで使用できる点 ツールバーTabStyleのある NSTabViewControllerを使用する場合 まだ準備できていないなら このクラスから始めてください なぜならタブの切り替えが とても簡単だからです このルックも無料で使用できます

拡張スタイルは お馴染みでしょう 以前はツールバーの 標準レイアウトでしたからね ウインドウのタイトルが ツールバー最上部にある点に注目してください 必要であればタイトルを ウインドウ内で広げることも可能

このスタイルがオススメなのは ウインドウのタイトルが長い時や ツールバーがアイテムで一杯の時です 既存のツールバー構造との互換性を 維持したい場合にも有効です

最後は自動スタイル あなたのウインドウ構造を使って 選ぶべきスタイルを決定します これはデフォルト値で Big Sur以前にリンクされた Appの既存レイアウトを維持します ツールバーのコントロールのデザインも一新 適合も全く必要ありません 通常使用の間 背後に境界線が表示されなくなりました しかしマウスをコントロールの上で動かすと 再び境界線が浮き上がり 視覚フィードバックが得られます

ほとんどのコントロールの周りに 境界線はありませんが テキスト付きコントロールは ストローク境界線で囲まれます これにより ツールバーの空きエリアが分かり ウインドウのドラッグが可能となります コントロールに影響する もう１つの変更は 統一ツールバースタイルで使用される 新たなラージサイズ コントロールとアイコンが より大きく より太字で表示されています

新たなコントロールサイズにより 側面にクリッピングが付いた ボタンも見られます これはツールバーアイテムで定義された ミニ･最大サイズが今では小さすぎるからです

AppKitにビューを自動測定させるため これらの特性が廃止されています これはMojave以降で可能です 多くの場合 これらの要件を完全に取り除けます これは最も簡単な適合です アイテムサイズをよりコントロールする場合 制限をかけることもできます

インラインタイトルとツールバーが さらに強化されています メールでは未読メッセージ数が ウインドウタイトルの下に小さく表示されます

これはNSWindowの新サブタイトル属性により 可能となりました これは未読数のような ２次テキストを表示するのに最適です 統一ツールバースタイルでは プライマリタイトルの下にテキストが表示 スペースの節約になります 拡張スタイルで使用すれば サブタイトルがプライマリタイトルの横に表示 自動的に分離されます

ウインドウタイトルと言えば ツールバーに“進む” “戻る”といった コントロールが含まれる場合 これらのアイテムは ウインドウの先端に属します NSToolbarItemの 新ナビゲーション属性により これらのアイテムを指定すれば あとはシステムが処理してくれます ツールバーをカスタマイズした場合も ナビゲーションアイテムに特別なビヘイビア

これらのアイテムは ツールバーの内外へカスタマイズ可能 しかしタイトルリーディングポジションからは 動かせません ツールバーで新体験をもたらす 特別なコントロールが検索コントロールです ウインドウが十分大きい時 検索フィールド全体が通常表示されます しかしウインドウを縮めると 検索フィールドがボタンに変わります

このボタンをクリックすれば 検索フィールドが戻ります ウインドウのサイズに関係なく いつでも検索が可能です

このビヘイビアを実行するため NSSearchToolbarItemと呼ばれる 新アイテムが追加されました このアイテムは適合を できるだけ容易にするために作られました 既存の検索フィールドを維持できます

ここに あなたのAppにもあるような 既存のコードがあります 新検索アイテムの適合は ２つのステップだけで済みます 最初にアイテムのクラスを NSSearchToolbarItemにします

次にアイテムのView属性を 設定する代わりに searchfield属性を設定します この２つの変更だけで 新しい検索体験ができます

Interface Builderでは検索アイテムが オブジェクトCatalogに追加されています 素晴らしいのは このオブジェクトが 後方互換性を維持している点 Appが古いシステムで動いている場合 標準Search Fieldが 現在のものと同様に使用されます 実行時間のチェックも必要ありません

いくつかのコード変更だけで フルハイトのサイズバーや 新しいツールバースタイル アイテムのレイアウトが調整できます これら特性の多くに 変更は全く必要ありません macOSの新ルックを ウインドウにフル活用させて 適合を次のレベルへと 引き上げることができます

メールAppでは ウインドウのコンテンツセクションと ツールバーのアイテムが揃っています

Split Viewのデバイダが ウインドウの最上部まであり 美しいフルハイトセクションを 構築しています デバイダをリサイズすると ツールバーアイテムもついてきます 影響するコンテンツを表示しながら 有益な背景をコントロールに与えます

これらツールバーセクションの適合は 一手間かかりますが 大変ではありません NSTrackingSeparatorToolbarItemで これらは作られています 各アイテムは特定のデバイダを追うよう 設定されています 残りはツールバーが行います

カスタマイズ中 これらのセクションは削除できません しかしセクション内のコンテンツは カスタマイズ可能です

これらアイテムの作成に必要なのは １行のコードだけ コンストラクタを使って アイテムを作成し 追跡するSplit Viewを割り当てて 揃えるデバイダを指定します

アイテム作成中に Split Viewを使えなくても問題ありません ウインドウが表示される前に 割り当てるだけです

この追跡アイテムを使えば フルハイトサイドバーの上に コントロールを置くことも可能 これを容易にするためAppKitは 新標準の項目識別子を追加しました フルハイトのサイドバーを自動的に 見つけてくれます セパレータの前に置かれた ツールバーアイテムは フルハイトのサイドバーの上に表示されます

ツールバーの下にデバイダがないことに お気づきでしょうか？ 常にそうではありません ツールバーとスクロールするコンテンツの間に 自動的にシャドウが現れ コンテンツが収まる 視覚ポケットが生まれます これはスクロールビューのある ウインドウの各セクションで起こります

このビヘイビアを見るためには スクロールビューがセクションのフレームを 完全に埋めるようにしてください 先ほど話したコンテンツマスクも必要です それ以外はコンテンツのスクロールに関わらず セパレータが現れます

スクロールシャドウよりも セパレータが欲しい場合は またはセパレータ不要の場合 Split Viewアイテムごとに titlebarSeparatorStyleを使えば可能です これによりスクロールポケットの 現れるセクションを指定できます

またはウインドウ全体での スタイル指定も可能です ウインドウのスタイルはSplit Viewアイテムで 指定されたスタイルに優先します スタイルのコントロールを アイテムの管理下に置きたい場合 ウインドウスタイルを“自動”に 設定してください

新デザインの驚くべきウインドウレベル特性を 見てきましたね

これらの特性はNSToolbarと NSSplitViewControllerに直接組み込まれてます これらのクラスの利点を まだ活かしていないなら 今こそシステムに 重い作業をさせてみてください

ウインドウを成功に導く設定は以上です 次はジェフ･ナドーがエキサイティングな コントロールの改善点を説明します ありがとう ジョン ウインドウ構造の次は macOS Big Surが App内部のコントロールにもたらす効果です システムコントロールがBig Surの モダンな新デザインを取り入れました AppKitはこれらのアップデートを あなたのAppに自動的に提供します 特に嬉しいアップデートがいくつかあります 最初はアクセントカラーのアップデート macOSで使用できるアクセントカラーは 皆さんご存知でしょう これらの色は あらゆるUIエレメントに影響します コントロールから選択背景 フォーカスリングまで macOS Big Surで我々は アクセントカラーの新チョイスを加えました 好きな色を選べます App特有の色がある場合 カスタムアクセントカラーとして 指定することができます これらのマルチカラーオプションが システム環境設定で選択されると あなたがカスタムしたアクセントカラーが あらゆる箇所に適用されます

それはコントロール リストセレクション サイドバーアイコン メニュー フォーカスリングにも見られます あなたのAppで ユニークな個性が表現できます

カスタムアクセントカラーの設定は簡単 アセットカタログ内だけで済みます 最初にAppのアセットカタログで 新しい名前の色を作成します 新規作成されたAppでは Xcodeがこれを追加してくれます 好きな色に設定します 既存のシステムカラーをエイリアス化するか 自分で色を選択します またダークモードでは 異なる影を選択できます

色に満足したら Xcodeのビルドシステムが 認識できるように プロジェクトエディタで アクセントカラーの名前を指定します これだけです Big SurでAppを実行すれば UI中にカスタムカラーが見られます

これはシステム環境設定がマルチカラーに 設定されている時だけ可能です 我々はアクセントカラーで 個性化をサポートしていきます 皆さんが好きな色を選んで Mac上のあちこちで使えるように ですから カスタムアクセントを ハードコードするのではなく 指定したシステムカラーで 魅了してください これらの色は自動的に アクセント環境設定に従います システムの他の部分にも 必要なだけ適用されます これはAppが個性を表現する 楽しい手段となるでしょう 次は大人気になりそうな 新コントロールスタイルを見てみましょう それがラージコントロール

時として大きなボタンが 必要になることもあります このようなオンボーディングフローでは よく見られますね ウインドウ中央に コールトゥアクションが１つあります このようなUIはますます人気です 多くのAppではカスタムボタンを 構築する必要がありました

今ではラージコントロールが 標準サイズと言えるでしょう controlSizeをlargeに設定すれば 大きなボタンが使えます それがシステムテーマとも 常にマッチします

しかしボタンだけではありません ほとんどのボタンのスタイルで ラージサイズが使えます ポップアップでも プルダウンでも セグメント化したコントロール テキスト･検索フィールドでも使えます

実はこれらが最もよく見られる場所が ツールバーの新統一スタイルです ツールバーの全てのアイテムで 大きなコントロールサイズが使われています

システムアラートでも見られます アラートで利用可能なアクションが 表示されていますね 次に紹介したいコントロールがあります それがスライダ macOS Big Surで スライダのルックが新しくなりました 新スタイルではスライダに チェックマークが表示されます スライダのチェックの有無で レイアウトを統一します 新SDKに対して構築する場合に この新ルックが自動的に適用 そこで知っておくべきことが いくつかあります １つ目にレイアウトに影響を与える 可能性があります ラベルとスライダのトラックポーションを 手動で揃えていた場合 Appが新スタイルになると ラベルが揃っていないことに 気づくでしょう コントロールフレーム内でトラックと チェックマークが別々に並んでいます 解決法はラベルをスライダに ベースライン整列すること スライダが隣接したラベルテキストに合った ベースラインオフセットを計算します この技術はCatalina 2で利用可能 いずれのバージョンでも制限を設定して 見栄えの良いラベル配置が可能です 次はTableViewのアップデートを 見てみましょう

テーブルセレクションの新ルックに 気づいたことでしょう これは我々がNSTableViewに加えた 新インセットスタイルです

インセットスタイルですが適用されるのは セルビュー周辺の超水平パディングと 最上部と底の列周辺の 垂直パディングです デフォルトの列の高さも 若干高くなっています マルチコラムテーブルのスペースも 広くなりました NSTableViewの新スタイルプロパティで スタイルをコントロールできます オプションは４つ まずautomaticはデフォルト値です これはテーブルの設定を基に スタイルを選びます fullWidthスタイルは表の端から端まで 選択範囲を表示します Catalina以前でも同様でしたね Insetは新しいインセットスタイルです sourceListはサイドバーソースリストの 新アピアランス用です Styleプロパティでは 好きなスタイルを設定できます effectiveStyleは 読み取り専用のプロパティ どのように自動スタイルが 解決されているかが分かります

自動スタイルリゾルブは TableViewの設定を基にしています サイドバー内にある場合は sourceListのアピアランスを選択します 境界線付きスクロールビューのテーブルでは fullWidthスタイルを使います それ以外は新インセットスタイルが デフォルトとなります

インセットスタイルは レイアウトへの影響を考えて 新SDKを使ったAppのみで 使用されます しかしサイドバーは常に 新sourceListスタイルを使用します

新スタイルプロパティは古いsourceListの ハイライトスタイルを完全に置き換えます よってソースリストを設定する際は 新スタイルプロパティを選ぶべきです 古いハイライトスタイルは 徐々に廃止されます これで素敵なコンテンツリストができます 次はAppのタイポグラフィについて 見ていきましょう

大ニュースとしてテキストスタイルが macOSにやってきました 他のプラットホームで見られた タイポグラフィックスタイルです macOSのテキストコンテンツでも 遂に利用可能となったのです

サイズとウェイトはMacデザインに フィットするよう調整され 13ポイントの標準フォントサイズが 中心になります これはダイナミックタイプとは違います これらのサイズシステムを調整する スライダはありません これらのシステムテキストスタイルと コードの使い方です preferred font for text styleで NSフォントを使うか または フォント記述子を使いたいなら 推奨FontDescriptorforTextStyleが 使えます

フォントピッカーとinterface builderも テキストスタイルをサポートしています 素敵なコントロールと タイポグラフィが使えますね ここでアイコノグラフィーを 見てみましょう

macOS Big Surシステムの 新アイコノグラフィーに気づいたでしょうか？ 実はSF Symbolsを Macに採用したのです 2,500以上のビルトインシンボルイメージを 使えるようになりました 自分だけのシンボルを デザインすることも可能です

シンボルイメージはAppのタイポグラフィを 引き立てるアイコノグラフィーに最適です フォントサイズごとにスケールし 様々なフォントウェイトに合わせます システムテキストスタイルと 相性抜群です シンボルイメージは 様々な設定にも適応します 例えば 新統一ツールバーの 大きなアイコンを思い出してください これらのアイコンはシンボルイメージです サイズは13ポイント ミディアムウェイト 大きなシンボルスケールを使用しています ツールバーコントロールはシンボルイメージを ツールバーのサイズとスタイルに自動調整します よって どんなスタイルのツールバーでも 一貫したルックが得られます

シンボルイメージの多様性は それだけではありません シンボルは 素晴らしいサイドバーアイコンになります このようにNSOutlineViewが自動的に テキストラベルとシンボルイメージをスケール システム環境設定の 推奨サイドバーサイズに合わせています サイドバーの３つのサイズが 簡単にサポートできるようになりました

システムシンボルのアクセスには systemSymbolNameinitializerの新initを使用 システムシンボルを作成する際には アクセシビリティ情報も提供できます これは強く推奨します

Interface Builderでもシステムシンボルを 指定できます メニューにある各シンボルのプレビューで 使いたいシンボルが見つかります

自分のUIで シンボルイメージを使う場合 NSImageViewを使うのが最善です 推奨タイポグラフィック属性や ディスプレイスケールなどに対して シンボルイメージを 適切に解決してくれます またシンボルイメージの 最も効率的な表示法も分かっています 我々はNSImageViewに ２つのプロパティを追加しました symbolFontとsymbolScaleを 設定するのに役立ちます イメージビューはシンボルイメージの ユニークな整列プロパティを扱います 特にベースラインですね NSImageViewで シンボルイメージを使う場合 自動レイアウトでイメージを隣接するラベルと ベースライン整列することができます シンボルイメージは置かれた環境から pointSize weight scaleを解決します 例えば ボタン内のシンボルイメージは常に ボタンのフォントと一致します

シンボルイメージの特性を 手動で指定したい場合は SymbolConfigurationメソッドで 関連する設定を含んだNSImageを作成します

シンボル設定は pointSize weight scale使って作成します 新たに導入されたテキストスタイルを 参照することもできます 手動でシンボルイメージを 描きたい場合 配置整列に関して 重要な情報があります イメージの座標空間で NSImageSizeプロパティと同じサイズの 境界ボックス内にグリフが収まります 境界ボックス内には 整列レクトがあります シンボルイメージはベースラインから 大文字の高さまで広がります これらのタイポグラフィ特性に対して 手動で整列させたい場合は 整列レクトを使って 図を調整することができます

Layer?.contentsで直接NSImageを 使うのは避けてください macOSの多くのバージョンで 問題が起きていますが 特にシンボルではNGです レイヤーコンテンツとして設定されると 文脈依存性が全て失われます またディスプレイスケールなどに 適応できなくなります

このシナリオではレイヤーの 適切なサイズ変更と配置が困難です ぼやけたシンボルができてしまいます NSImageViewのみの使用を推奨します

シンボルに関して最後に１つ 我々は既存のシステムイメージを更新して シンボルイメージへ直接マッピングしました 例えば NSImageNameShareテンプレートを 使いたい場合 矢印が上を向いた 四角いシンボルが表示されます この変更でAppの図やレイアウトが 影響を受けるかもしれません そこで新SDKに対して構築されたAppだけに このマッピングを行います AppをBig Sur用に再構築したら この点に注意してください

凄い点がたくさんあるので 次のステップに活かしてみましょう 新SDKに対してAppを構築したら フルハイトのサイドバーを作って モダンなウインドウ構造と合わせてください 次にツールバーを見て あなたのAppに合うスタイルを考えましょう ウインドウが Split View構造になっている場合 ツールバーに スプリットトラッキングを加えれば メールのような明確なセクションに 分割することができます 次にアセットカタログで カスタムアクセントカラーを指定しましょう これはAppで個性を表現できる 最高の手段です 最後に シンボルイメージを使用しましょう 高品質のApple製シンボルの ライブラリーが利用できます 様々なシンボルが揃っています あなたのAppのタイポグラフィと 連携させてください macOS Big SurはmacOSデザインの 大きなアップデートです 新しいデザインを あなたのAppで活用してください ありがとうございました