ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
AppKitの新機能
AppKitを使用したMac App開発に関する最新の進歩について確認します。新しいコントロール機能やSF Symbols 3を使用してAppのデザインを強化したり、TextKit 2を使用してパワフルなテキスト体験を構築したり、最新のSwift機能をAppに活用したりする方法を紹介します。
リソース
関連ビデオ
WWDC21
-
ダウンロード
♪ (AppKitの新機能) 「AppKitの新機能」にようこそ AppKitスタッフの Jeff Nadeauです 素敵なアップデートについてご紹介します macOS MontereyのMac Appで 素晴らしい新機能や機能強化が追加されました 皆さんに是非活用していただきたいです ユーザーインターフェイスデザインの更新や コントロールの強化 SF Symbolsの大規模なアップデート 全く新しいテキストエンジンのTextKit 2 パワフルで新しいSwift言語機能 そしてMacで利用可能となった Shortcutsの自動化です まずはmacOS ユーザーインターフェイス のアップデートから詳しくお話しします macOS Big Surでデビューした システム全体の再デザインに 盛大な反響をいただきました 素晴らしいAppの非常に多くがほんの数か月で 新デザインの採用を完了させました macOS Momtereyでは 引き続き新デザインの反復や精錬を行っているので 新しい部分にいくつか気付くかもしれません 中でも大規模で分かりやすいものには 新しいアニメーションで表示や非表示できる ポップオーバーや クリックするとスムーズにスライドする スライダーなどがあります 微調整した部分もあります ツールバーコントロールのメトリクスや 検索ボタンに簡単にテキストやトークンを 挿入するサポートなどです テーブルセクションの間にはスペースを増やし 見やすくしました 今後も新デザインの反復や強化をきめ細やかに 行っていきます こうしてコントロールを強化することで 皆さん自身のデザインの洗練化にもつながります まずはコントロールについてです ボタンや Segmented Control スライダーで カスタムティントができるようにしました 各コントロールでは bezelColor selectedSegmentColor trackFillColor のAPIのうちいずれかを使って カスタムティントを受け取ります Touch Barで個々のコントロールのティントを 指定できるよう macOS Sierraに こうしたAPIを導入しました macOS Montereyから ウィンドウ内コントロールでも機能します まとめるとコントロールのほとんどは アクセントカラーで描画します これはSystem Preferencesで設定可能です これによりMacのテーマを 好きな色に代えられます マルチから―オプションではApp独自の色を 定義することができます 広いテーマでは Appのアセットカタログでカスタムの アクセントカラーを定義できます この新しいティントAPIでは特定のコントロールで 色をオーバーライドできます これは意味的に重要な色を適用したい時に とても便利です 例えば通常の購入と事前注文を見分けるために あるオレンジ色をAppで使う場合 ティントつきボタンでデザインを強化できます 例えばビデオ会議Appでは 通話を開始・終了ボタンが Appで最も意味のあるアクション機能です ボタンを緑と赤でティントして強調すれば その機能が一目で分かるようになります ここで注意したいのはティントつきボタンは 白かグレーで表示される 通常のプッシュボタンとは違い アクティブ状態でも色付きになることです ティントカラーは中心に表示されます しかしデフォルトボタンを混乱させないよう 気を付けてデザインしましょう デフォルトボタンもカラフルになるからです 最後に色以外を使ってコントロールの目的を 伝えることも大事です 色の区別が困難な人にも コントロールの目的が分かりやすいように しなければならないので 明確なラベルやアイコンを使うようにしましょう ボタンデザインの変更でもう1つ大事なのは プッシュボタンではもう クリックでアクセントカラーを使った ハイライトがされないことです これでボタンが segmented control segment や スライダーノブ ステッパーなど その他クリック可能要素と並びます これは重要な変化です ハイライトしながらカラフルになるような カスタム描画をする場合 例えばトップに白いコンテンツを描こうとすると macOS Montereyでは 正しく表示されないかもしれません ハイライト状態をチェックする代わりに interiorBackgroundStyle プロパティを使って 描画することができます このプロパティはボタンベゼルの 基盤スタイルを反映するので 無色状態には.normalを常に返し ティントつきボタンやデフォルトボタン 「オン」状態にトグルされるボタンなど 有色強調状態には .emphasizedを返します 最後にボタンの Flexible Push スタイルも アップデートしました 以前はRegular Squareと呼ばれ 高さを変えられるプッシュボタンとして 機能していました 現在は同じ構成を全て通常の プッシュボタンとしてサポートします つまりデフォルトボタンとして機能するので ティントできるということです 角の丸みやコンテンツのパディングを コントロールサイズで 通常プッシュボタンに合わせられ 他のコントロールとぴったり合いますが 縦にリサイズ可能なデザインなので より大きなアイコンや改行付きテキストも きちんと入るということです プッシュボタンの多くでは引き続き 通常の高さを固定したスタイルが必要ですが この新しい拡張スタイルでは 縦に長いコンテンツを入れる時など 特殊ケースにも柔軟に対応することができます もう1つ重要なコントロールのアップデートは メニューキーボードショートカットの 自動ローカリゼーションです 世界には様々なレイアウトの キーボードが存在するので キーボードショートカットの ローカリゼーションは とても複雑です ものによってはキーコンビネーションが難しく 入力が全くできないものもあります さらに方向キーショートカットが右横書き言語で 逆になることがあります ここで朗報です macOS Montereyでは AppKitにお任せできます ローカリゼーションのメリットを受ける ショートカットに ⌘ と \ があります 米国英語キーボードでは問題ないのですが 日本語のキーボードでは入力不可能です バックスラッシュキーがないからです macOS Montereyからは システムがショートカットを再マップし 入力しやすい対等なショートカットを提供します もう1つよくあるケースは 向きに意味のあるキーボードショートカットです 例えば Safariでは ⌘ と 括弧で 履歴を行ったり来たりします 右横書き言語で左括弧を使って 後ろに戻るのは直感的ではないため AppKitでは右横書き言語で動作させる場合には 右括弧に自動的に切り替わるようにしました これは角括弧や中括弧 丸括弧や矢印キーでも使えます このミラリングを無効にしたい ケースもあるかもしれません 例えば左寄せなどメニューアイテムの 方向が絶対的に決まっていて 左括弧を右横書き言語でも 使いたい場合です こうしたケースへのオプトアウトを用意しています NSMenuItemで新しいプロパティを使って コントロール可能です allowsAutomaticKey EquivalentMirroringでは 括弧など方向キーの ミラーリングコントロールが可能で allowsAutomaticKey EquivalentLocalization では キーボードマッピングやミラーリングなど ローカリゼーション機能を全てコントロールします キーボードショートカットのローカリゼーションが 既にきちんとできている場合や Appのキーボード ショートカットバインディングで 重度のカスタム実装している場合 この機能はApp全体で 無効にしたほうが良いでしょう やり方は このAppのデリゲート方法である applicationShouldAutomatically LocalizeKeyEquivalents を実装して偽を返します これはほとんどのAppでは必要ありません 特定のアイテムオプトアウトには 個々のメニューアイテムの APIが好まれており ほとんどのAppではオプトアウトが 全く不要だからです さてシンボル画像にも大幅な強化が行われました Big SurのmacOSにSF Symbolsが加わり 印刷上均整の取れた美しいシンボル画像を 全てのMac Appで利用可能になりました macOS Montereyでは新世代のSymbol APIと SF Symbols 3ツールを用意しました シンボルイメージワークフローの全ての要素が 大幅にアップデートされ AppKit Appで利用できます SF Symbols 3はSF Symbol Appの シンボル画像プレビューや書出・読込の機能が 拡大されています またカスタムシンボル注釈フォーマットも更新され シンボル画像の中の注目すべきレイヤーを 定義することができ さらにAppKitやUIKit SwiftUIのAPIも拡大され シンボルの各レイヤーを個々に色付けできます Big Surには シンボル用の2つの レンダリングモードが提供されていました まず従来のTemplateスタイルで シンボル全体を1つの色や効果を使って 描きます 次はMulticolorで フルカラー画像のように各パスの要素を シンボル画像自体に定義された色を 使って描きます SF Symbols 3には新たに 2つのレンダリングモードを追加 これは新しいシンボル画像フォーマットで示された レイヤー情報を活用するものです まずHierarchicalでシンボルの特定の部分を強調し 他の部分は目立たせずに1つの色を使って 描きます 2番目はPaletteです シンボルの各レイヤーに 好きな色をあてます こうしたレンダリングモードには新しいAPIである NSImage.SymbolConfigurationでアクセスできます NSColorパラメーターを丸で示したので 生成されたシンボルにどう対応しているか 見てみましょう Hierarchicalモードでは1つの色を使い これは透明度を下げた状態で シンボルレイヤーに適応されます Paletteモードは色の配列を受け取り これはレイヤーに逐語的に適用されます またMulticolorモードを好む 設定を作ることもできます
1つの基盤となるシンボルからバリアントを マッピングできる新APIも追加しました 例えばハート型のシンボルなら 塗りつぶしたバリアントや 丸の中に入れたもの 斜線を入れたバリアントにマッピング可能です これはシンボルのスタイルをコンテキストに 合わせたい状況では 非常に便利です 具体的には非選択のときには輪郭で 表示したいピッカーコントールがあるが 選択したものは塗りつぶし表示したい時です 通常 このコントロールには 画像の選択・非選択を表示するための 2種類の画像プロパティが必要です しかしバリアントAPIは1つの基盤となる シンボルを受け取るだけで 塗りつぶし状態を自動的に生成できます このコントロールでは選択時に塗りつぶし状態を 優先するのにimage(with:.fill)を呼び出し 塗りつぶしのバリアントがどこにあっても適切な バージョンを自動で選択します シンボルバリアント各タイプの定数もあり それらを組み合わせて 囲みや塗りつぶしなど複数のバリアントを リクエストできます これはSF Symbols 3機能説明を 短く説明したにすぎません シンボルワークフロー全体の 新機能全てを詳しくまとめた 動画コレクションもあるので 是非チェックリストに加えてください macOS MontereyではTextKit 2という形で テキストシステムも大幅に更新されました TextKitはテキストレイアウト レンダリングエンジンで 全てのAppleデバイスで使える 実績のあるテキストエンジンです TextKitは線形のテキストレイアウトエンジンです つまり始めから終わりまでテキストブロックを タイプセットするのです プラットフォームや技術を進化させる中で 非線形テキストレイアウトがもっと良くなる ケースを沢山発見しました そこで基本に立ち返り TextKitの新バージョンを作り それがTextKit 2になりました TextKit 2にはいくつかの主要なゴールがありました いつもと同様スクリプトやレイアウトを問わず 世界中のテキストに最高の体験を提供したいのです また他のタイプのコンテンツと テキストを組み合わせしやすくしたいとも思いました そしてついに非常に高速でテキストを効率的に シェイプ・レンダリングできる TextKit 2が設計されました 短いラベルでも 膨大な文書でスクロールされる一部であってもです TextKit 2は TextKit 1と共存するので テキストビューでどちらを使うか選択できます ではある秘密をお教えしましょう Big Surから始めたならMacで既にTextKit 2を 実行しているのです TextEditはプレーンなテキスト文書にそれを使うので AppKitテキスト欄はTextKit2を ほとんどの設定で使っています だから今までそれをちらっと既に目にしているのです TextKit 2の主な違いの1つは 常に非線形のレイアウトシステムを使うことです つまりテキストレイアウトをよりきめ細やかな レベルで実行し 不必要な仕事を避けることができます 例えばテキストの一部のみがスクロール 表示される膨大な文書では 線形システムは過去のテスト全てを レイアウトしなければなりません この場所を示すためだけにです 一方でTextKit2など非線形システムでは 最寄りの段落境界でレイアウトを開始できます 大量の文書にとってはかなりのスピードアップです 新しいレイアウトエンジンには 堅牢なカスタマイズポイントが 用意されておりレイアウトシステムの拡大や 独自の行動の追加がシンプルになっています 非線形レイアウトシステムは非テキスト要素の テキストレイアウトへのミックスも行います また膨大な文書でもパフォーマンスを改善しながら この全てを行います 詳しくは「TextKit 2について」をご覧ください 新しいAPIのデザインや使い方を 詳しく説明しています 次にSwiftのAppKitに行われたアップデートについて コンカレンシーから説明します Swift 5.5ではコンカレンシー管理用の 言語レベルの重要な機能が導入されました まず コルーチンのように動作する 非同期メソッド呼び出しを許可するasync/awaitです 次はアクタタイプで アクセスを 1つの実行スレッドに隔離して ミュータブルをデータ競合から保護します AppKitはこれら新機能とスムーズに連携します async/awaitでは 多くの非同期メソッドがAppleKitにあり continuationを完了ハンドラブロックとして 取るメソッドは asyncバリアントも提供するように SDKの中で変更されました その単純な例のNSColorSamplerは スクリーンのどこからでも色を拾えるようにします 非同期と呼ばれるのは ユーザーが好みの色を拾うのを待つためです 完了すると完了ハンドラを実行します async/awaitではこれを 非同期関数呼び出しとして示すことができます 非同期の作業が完了するのを待っている間 実行スレッドを空け その後 中断したところからすぐに再開します これはguard命令文からでもできます さて次にやらないといけないcontinuationですが もう完了ハンドラブロックの中に ネストされていません その代わりコードがシーケンスの中で 自然に読めます アクタは1つの実行スレッドを隔離することで コンカレントアクセスから状態を保護します これが親しみやすく感じるのは ビュー階層やレスポンダチェーンなど AppKit状態のほとんどは 1つの実行スレッド〜メインスレッドのみから アクセスされるのと似ています この制限はアクタモデルによくフィットするので メインスレッドからアクセスされるべきタイプである MainActorコンセプトを導入したのです AppKitでは NSViewやViewController WindowControllerのサブクラス NSResponder Application NSCell Alert Document DocumentController を MainActorsとして設計しました MainActorで実行中のコードは 他のMainActorタイプのメソッドを自由に呼び出せます これは既にメインスレッドに いることが分かっているからです しかしMainActorで実行中でないコードは MainActorのコンテキストでUI作業を行うには 新しいasync/awaitを使う必要があります これをコンパイラレベルで実行することで SwiftはUIコードでコンカレンシーをミックス中でも よくあるバグを回避することができます Swiftコンカレンシーの動画では新言語機能について 詳しく説明しています 是非ご覧ください またSwift 5.5では新しく AttributedStringの値型が利用可能になりました 価値あるセマンティクスを提供する上で Type-safeな属性と 属性の範囲を列挙・操作する 優れたSwiftのエルゴノミクスを備えています AppKitでAttributedStringを使う時 テキスト描画システムに関連する属性への アクセスを自動的に得ることができます 文字表示色や段落スタイルなどです AttributedString構造体から 参照型のNSAttributedStringの間で変換できるので NSAttributedStringを使用するAPIと 相互運用することができます 「Foundationの新機能」では AttributedStringのデザインや使い方を 詳しく説明しています 最後にご紹介するSwiftの機能強化は NSViewsの更新を促進することに関係しています Swiftのプロパティラッパーを使って ビュープロパティでよくある ボイラープレートを劇的に減らします 例を見てみましょう これはカスタムビューで いくつかのプロパティで構成を変更可能です 良さそうに見えますが 実際にはビューのプロパティ宣言に 沢山のdidSetや 余計な副作用が含まれやすくなっています 何か変更があると再描画や レイアウト制限の更新が必要になるのは よくあることだからです それでボイラープレートが多いのです そこで Swiftプロパティラッパーを このケース用に新しく作ってシナリオを改善しました Invalidating と呼ばれます NSView下にネストされラップされたプロパティで 変更がある時にインバリデートするビュー要素を 1つまたはそれ以上特定可能にします didSetと括弧が全て無くなり プロパティ自体の定義に フォーカスしやすくなります
AppKitには内蔵インバリデーション ケースが複数あります 表示 レイアウト 制約 固有のコンテンツサイズ 復元可能な状態です こうしたインバリデーションは ビューで意味を成すのみなので プロパティラッパーを制限し NSViewのサブクラスでのみ動作するようにしました またEquitableに準拠する必要があります この準拠を利用して 重い再描画やレイアウトを行う前に 値の変更に意味があるかチェックしています カスタムしたい場合は NSViewInvalidatingプロトコルに準拠させることで 独自のインバリデーションを定義することもできます 最後にShortcutsです macOS MontereyではフルパワーのShortcutsを Macに提供しました AppKit AppとのShortcuts統合が含まれます 素晴らしいのはAppがServicesに対応し Shortcutsに既に対応している場合 今Servicesが使える全ての同じ場所に Shortcutsが表示されることです この機能が初めてでも 慣れるのが簡単です AppKitはレスポンダチェーンをチェックすることで 文脈的に適切なショートカットはどれか決定します 各レスポンダに書くショートカットで 予想されるデータタイプを提供・受け取りできるか 尋ねます これはpasteboardタイプを使って表せます ほとんどの場合 UTI に対応するものです validRequestorをSendTypeとreturnTypeメソッドに 実装するだけです また特定タイプを受け取るか提供する時は NSServicesMenuEwquestorプロトコルに 準拠するオブジェクトを返します ほとんどの場合プロトコルを直接実装し selfを返すだけです Shortcutが呼び出されると Shortcutが入力と出力に使う 特別なpasteboardからデータを読み書きするための 呼び出しを得ます それだけです Shortcutsではこんなに簡単にAppを統合できます またmacOSでSiri Intentも追加し XcodeでIntent Extenttionを作成することで Intentをハンドルできるようになりました あるいはメインAppからハンドルする必要があれば Intentハンドラをapplication delegateから 返すこともできます app delegate で application handlerForIntent: メソッドを実装し 処理できるできる Intentへハンドラオブジェクトを返します 全てのIntentには返されたオブジェクトが準拠する 独自のハンドラプロトコルがあります ハンドラオブジェクト実装について詳しくは Intentフレームワークドキュメントを 参照してください では新しい情報を得たところで 次はどうしましょうか まずティントコントロールなどの機能や SF Symbols 3ではAppのデザインを強化できます 次にTextKitを使い カスタムのテキスト体験を作るには 「TextKit 2について」動画を見て 新APIをお試しください TextKit 2でカスタムレイアウトやリッチコンテンツ 表現の簡単さを気に入ると思います このアーキテクチャの主な部分は Appがコンカレンシーを管理する方法です またSwiftの新しいコンカレンシー機能は この分野での大きな前進となるでしょう さて今度はasync/awaitなどの 機能が皆様のAppで並列のワークロードを どう形作るか 見ていきたいものですね 最後に AppKitの自動ツールを採用して AppでShortcutsを使えるようにしましょう ご視聴ありがとうございました macOS Montereyの強化ポイントを お楽しみいただけたらと思います ♪
-
-
4:18 - Determining a button's background style
class NSButtonCell { /* Use to adjust your drawing for the underlying state of the bezel Returns .normal for colorless states Returns .emphasized for colorful/emphasis states */ var interiorBackgroundStyle: NSBackgroundStyle }
-
14:40 - Pick a color
@IBAction func pickColor(_ sender: Any?) { Task { guard let color = await NSColorSampler().sample() else { return } textField.textColor = color } }
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。