空間コンピューティングのためのウインドウ表示型アプリの向上

♪ ♪ ♪ こんにちは！ SwiftUIのHarlanです この新しい空間プラットフォームで 目を見張るような ウインドウ表示アプリを提供しましょう 空間コンピューティングでは アプリは周りの環境内に存在し まったく新しい 3次元体験を提供します

ほかのプラットフォーム同様 SwiftUIがアプリの作成に最も適しています SwiftUIはこの新プラットフォームの機能を すべて活用するための 数々のAPIや動作を追加しました もしまだならぜひ 「Meet SwiftUI for spatial computing」で このデバイスにおける SwiftUIの利用方法をご覧ください ここではSwiftUIに注目しますが UIKitでも たくさん利用できることがあります 「Meet UIKit for spatial computing」で 最高のUIKit体験の構築方法を 学ぶことができます 既存のiPhone及びiPadアプリがあり iOS体験を維持したいのであれば 「Run your iPad and iPhone apps in the Shared Space」をご覧ください ほかのAppleプラットフォームから 移行する場合でも まったく新しいアプリの場合でも SwiftUIはアプリを スムーズに動作させるためには 最高の方法です ここではSwiftUIアプリを このプラットフォーム用に更新します まず組み込み型コントロールが 読みやすさやインタラクションに対し どう順応するか探求し このデバイスの 新しいビジュアルや入力技術を カスタムビューとコントロールに どう活用するか お話しします そしてこのデバイスだけで 実現される最新機能を応用してみます このプラットフォームはSwiftUIを念頭に 一から構築されました 実際 システムアプリは ほとんどがSwiftUIで書かれています その例が「Keynote」や 「Freeform」 そして「TV」で 見慣れたインターフェイスを あなたの環境に展開します これらのアプリは iPad版に似ていますが このプラットフォームの 新デザイン言語や対話方法を 大いに活用しています 一緒にiPadアプリをアップデートし どのようにアプリに応用できるか 見てみましょう これは「Backyard Birds」で 庭に来る鳥に 餌をやり それを記録する バーチャル野鳥観察アプリです Swiftデベロッパの私は 鳥が好きで 私向きのアプリです これはSwiftUIで書かれています マルチプラットフォーム SwiftUIアプリのいい例で iPhoneとiPadとMacと Apple Watchをサポートします そのリストにもう一つ足しましょう 「Backyard Birds」を 共有スペースで輝かせるのです まずこのプラットフォームを サポートさせるため XcodeのSupported Platformsメニューで アプリを追加します

新しいrun destinationを追加し それを選んでアプリを Simulatorで実行します

Simulator内でカーソルを動かすと 目で見ているかのようにアプリは反応します 「Backyard Birds」を実行すると iPadと同じ基本レイアウトですが 何かが少し違います まず最初に気付くのが グラスのバックグラウンドです グラスはウインドウの デフォルトバックグラウンドで 照明状態と背後のオブジェクトの色に基づき コントラストとカラーバランスを調整します そのためこのプラットフォームでは 外観において ライトとダークの区別がありません どこで使用するにしろグラスは 読みやすさを確保します もう少し「Backyard Birds」を探求します トップレベルに ナビゲーションスプリットビューがあり ビューの切り替えに このサイドバーを使用します 詳細ビューから視覚的に隔離するため サイドバーはグラス上の背景を 自動的に暗くします カーソルをリスト上に移動すると わずかにハイライトされます iPadのようにこれらをタップし ビューを切り替えます スプリットビューの右側が ナビゲーションスタックです 裏庭の一つをタップすると 詳細ビューにナビデートされます ここからこの庭の鳥のために どれだけ餌と水があるかがわかります 下にスクロールすると 最近訪れた鳥のリストが見れます ナビゲーションバーの丸いボタンは 見るとハイライトされます お気に入りボタンを押すと スケールダウンし お気に入りの状態をトグルします これらは共有スペースでの アプリの充実のため SwiftUIが行う向上例の一つです 「Backyard Birds」を探求し 組み込み型コントロールの 自動の動作を見たところで カスタムビューとコントロールを 馴染ませる方法を見てみます 先程リストを見た時に 少し気付いたことがあります アプリに近付くと 鳥と植物は鮮明ですが 噴水が少しぼやけて見えます おそらく噴水は固定解像度で 描かれているようです このデバイスではアプリは 実際の環境に配置され ほかのプラットフォームと違い コンテンツを描く画質を定義する 物質的ピクセルを持つ画面がありません アプリはどこにでも配置されます 遠くに配置されたり 近くであったり 斜めに配置されることもあります システムはコンテンツを 動的にスケールしてどんな状況でも アプリをきれいに見せます ビットマップは 質を落とさずに スケールすることはできないため システムがこれを実現するには ベクターアセットを供給する必要があります テキストやSFシンボルは既にベクターですが カスタムアイコンやグラフィックなら ベクターで動的コンテンツ スケーリングを活用しましょう 噴水がビットマップか調べてみます オプションを見ると に特定されています 幸いにもこのアセットの ベクター版があるので に変更し 既存のアセットをベクター版と入れ替えます をチェックし コンテンツをどのサイズにも スケール可能にします この設定はすべての Appleプラットフォームでサポートされます よくなりました これで噴水が鮮明になり 近付いても 遠ざかっても高い質が保たれます ほかのタブも見てみましょう タブはすべての植物が 表示されますが 植物の後ろの円が 明るすぎて場違いに見えます コードを調べるとその理由がわかります バックグラウンドがソリッドカラーです ソリッドカラーはグラスに対し コントラストが固定され 周りの環境に調整できません iOSではよくありますが ダークモードで少し暗めの色を 使用する指示があります このプラットフォームはカラースキーマを ダークと報告しているためこうなるのです しかしこのプラットフォームは ライトとダークを両スキームを区別しません ですのでグラスを通して 見えるものに関わらず コンテンツを読みやすくするため バイブランシーを適用します Vibrant materialはさらなるコントラストと 明るさを加え グラスにどのような 視覚要素が通っても その上のコンテンツを読みやすくします 組み込み型コントロールとコンテナは Vibrant materialをデフォルトで使うため 基本コントロールを使うなら 何もすることはありません SwiftUIのセマンティックスタイルは 各プラットフォームで 適切な外観を自動的に適応します このデバイスでは グラスの上に配置すると鮮やかに見えます カスタムビューやコンテナを構築するなら グラスが環境にどう適応しようとも このセマンティックスタイルで コンテンツを読みやすくします ではこの植物アイコンをソリッドカラーから セマンティックフィルカラーに変えます セマンティックマテリアルですので カラースキーマチェックを削除できます プラットフォームを通し コードがシンプルで正しくなりました わあ アイコンがずっとよくなりましたね どんな照明状況でも グラスに対しきれいに 飛び出すようです アプリのビジュアルの向上に 時間を使った次は すべてのインタラクティブ要素が 明白で狙いやすいようにします 「Meet SwiftUI for spatial computing」 で学んだように アプリとは4つの方法で インタラクトできます 最も一般的なのがコントロールを見ながら 指をピンチしてタップを行う 間接的ピンチジェスチャです もしアプリが近くにあれば 手を伸ばしてタッチし 直接インタラクトできます トラックパッドなら正確に入力する ポインターとして使用できます またAppleプラットフォームでお馴染みの 世界的なアクセシビリティテクノロジーを このデバイスでも使用できます VoiceOverやスイッチコントロールで 誰もが素晴らしいアプリ体験を経験できます インタラクティブコンテンツは Hoverエフェクトでハイライトされます 例えばボタンやリストのような コントロールを見た時 微かなハイライトが ビューの周囲に現れ インタラクト可能だと示唆します これらのHoverエフェクトは アプリのレスポンシブ性に 非常に重要です 見ているものや手を伸ばしたものが インタラクトするものであるという 確信を与えます すべてのシステムコントロールに Hoverエフェクトが自動的に追加されます SwiftUIに供給された 組み込み型コントロールなら これらのeffectsは無料です Hover effectが鳥のタブに ないのに気付きました これらの鳥にタップできますが Hover effectがないため タップできるかがわかりません タップのようなジェスチャに反応する コントロールにはHover effect があるべきです 足すには hoverEffect()修飾子を使用します デフォルトではHover effectは コントロールを見ると ハイライトされるようになっています Hover effectで インタラクトできると わかるようになりましたが Hover effectには鋭い角があり 丸い形の方が見た目がよさそうです カスタムシェイプは contentShape()修飾子を使用し hoverEffectをkindに設定します HoverEffect()修飾子は 修飾するビュー外から このcontent shapeを読み出します

これでよくなりました Hover effectは明白で 少しパディングがあり 角が丸みを持っています しかし まだできることがあります SwiftUIではコントロールが タップに反応し 行動を実行する時 そのコントロールは おそらくボタンであるべきです 鳥のビューをボタンに変えましょう

ボタンに枠があるのがデフォルトですが ユーザーが見ていない時には これらのボタンから 背景を取り除きたいと思います これを簡単なボタンにし 背景もパディングもない 普通のHover effectを付けることにします 完璧です！ ボタンは普通のHover effectで タップするとスケールダウンします Hoverエフェクトは プライバシーを念頭に構築されました これらはアプリの過程外で 実行されます システムHoverエフェクトは 人が見ている場所に アプリを反応させる唯一の方法です 誰かが指をピンチしたりアプリを 直接触ったり 指やポインターをコントロール上で ホバリングした時だけ アプリに知らされます これらの変更で「Backyard Birds」は 非常によくなりました しかしレイアウトに少し変更を加え このプラットフォームに ユニークな機能を適応し アプリを一段と向上できます トップレベルのレイアウトについてです iPadではウインドウの horizontal size classが regularで サイドバーがタブより好まれるのは 増加した幅を有効活用できるからです しかしこのデバイスでは ウインドウは画面のサイズに関係なく コントロールはウインドウ内に限られません トップレベルビューの切り替えに タブビューの使用を考えてください タブビューではタブバーが この「写真」のように アプリの左側にあります アイコンの一つを見ると 自動的に拡張しタブのラベルが表示されます ナビゲーションスプリットビューから タブビューに切り替えます （タイプ音） アプリの各画面にビューを作ります （タイプ音）

tabItemを供給し タイトルとアイコンを与えます （タイプ音）

ナイス！ タブバーは インタラクトしないと元に戻り コンテンツのスペースが広がります タブバーがウインドウの枠外に ありますよね このようなアタッチメントを 「オーナメント」と呼びます オーナメントはウインドウの端の 枠外に配置され メインコンテンツの横に 更なるコントロールを 配置するのに最適です タブバーに加え 「写真」には下部に ライブラリの時間範囲を コントロールするツールバーがあります これらのオーナメントはよくあり bottomOrnament placementを使い .toolbar修飾子で簡単に追加できます ツールバーオーナメントは グラスカプセル背景を 自動的に供給します 「Backyard Birds」に足す オーナメントのアイデアがあります 水と餌の量には注意していますが 少なくなったら 餌入れに補充が必要だと 通知が欲しいものです ornament()修飾子で カスタムオーナメントを作成できます attachmentAnchorが アプリのどこにオーナメントを 付けるか決定します ウインドウのどの隅にも 通知を配置できますが 下部に並べようと思います contentAlignmentパラメータで どのオーナメントの部分が attachmentAnchorに並ぶか選びます オーナメントの中央を アプリの下部に取り付けることにします カスタムオーナメントのコンテンツを コントロールできるため SwiftUIは グラスの背景は供給しません 使用したいなら .glassBackgroundEffect()修飾子を オーナメントのコンテンツに使用できます これで水と餌が足りなくなれば アプリの下部にこのメッセージが現れ それをタップすれば その庭にナビゲートされます なかなかいいですね！ SwiftUIは自動的にプラットフォームに 順応するため 共有スペースで 「Backyard Birds」を 簡単に適応できました みなさんのアプリでもぜひ同じステップを 実行してみてください Hoverエフェクトを インタラクティブコントロールに追加し ベクターアセットと バイブランシーを読みやすさに活用し そして補助コントロールに オーナメントを使用します このプラットホームには まだまだ探求できることがあります 3Dコンテンツのボリュームや 空間体験のための イマーシブスペースなどです 「Take SwiftUI to the next dimension」と 「Go beyond the window with SwiftUI」で ウインドウを超えてアプリを 拡張する方法を学べます ご視聴ありがとうございました ♪