すべてのデバイスでのSwiftUI

(音楽)

(拍手) ありがとうございます　ようこそ SwiftUIに期待してくださり うれしいです macOSのフレームワーク担当の ジェフ･ナドーです 本日はエイダ･ターナーと メグナ･サプレも登壇します SwiftUIの概要を知りたい方にとって 最適なセッションです SwiftUIはあらゆるデバイスの アプリケーションを開発する近道です

本日はその“あらゆる”という言葉に 焦点を当てます Appleデバイスの アプリケーション開発には これらの技術を使います MacにはAppKit iPhoneとiPadにはUIKit Apple TVにはTVUIKit Apple WatchにはWatchKitです これらのUIフレームワークはデバイスの 強みに合わせ構築されており それぞれに違いがあります 従来はデバイス間で同じコードを 使うことはできませんでした

今回初めて 全デバイスで使える UIフレームワークを紹介します これは デベロッパにとって 大きなチャンスです

異なるデバイスに使える UIフレームワークとは 一体どんなものか

SwiftUIは多くの異なるUIパラダイムに 対応しています キーボードやマウスに Siri Remote マルチタッチディスプレイ そしてDigital Crownや アクセシビリティ機能にも使えます SwiftUIはすべてに対応しています これ１つで プラットフォーム設計もサポートします それぞれのプラットフォームの専門家が SwiftUIの要素が 各デバイスで 適切に機能するか確認しました 結果として デバイス間で知識を流用し 適用できるようになりました 特定のハードウェア用の機能を 開発しているとします 例えば MacBook ProのTouch Barや Apple WatchのDigital Crown Siri Remoteなどです SwiftUIのツールには一貫性や 親和性があり簡単に使用できます 全体的な設計思想だけでなく SwiftUIの要素には デバイス間で共通するものがあります 例えば すべてのプラットフォームには トグルコントロールがあります

ブーリアン型の切り替え項目があり その項目をラベルで表示します

デバイスによって表示方法は異なります スイッチやチェックボックスや トグルボタンがあります しかし必要なAPIは１つです

SwiftUIには共通の レイアウトシステムもあります スタックやスペーサーやパディングを あらゆるデバイスで同様に使えます １つのデバイスでアプリケーションの レイアウト方法を覚えれば 他のデバイスでもレイアウトできます

ピッカーのように 高等なコントロール機能もあります 表示は様々で macOSではポップアップメニュー iOSやWatchOSではホイール状です これだけ異なると 完璧に互換できそうにはありません しかし共通しているのは データとの関係性です １つのコントロールで型が決まれば 簡単にデバイス間で移行できます すべての要素を 紹介することはできないため SwiftUI Essentialsのセッションも チェックしてください

さて SwiftUIを使えば すべてのデバイスで完璧に機能する― １つのアプリケーションを 作れるのでしょうか １つのコードがシームレスに 4Kテレビから― 44ミリメートルの時計にまで 対応するのでしょうか

もちろん違います

そのような万能なアプリケーションは 存在しません すべてのデバイスの 共通項に固執してしまうと それぞれのデバイスの長所を 生かせません 魔法のような概念は存在しないのです デバイスごとに最適なデザインを 検討すべきです しかしSwiftUIなら 習得したスキルやツールを 他のデバイスのアプリケーション開発に 生かせます そして場合によっては コードを共有できる部分もあるでしょう

ですから 一度書いたら すべてに当てはまるのではなく 一度習得したら すべてに応用できる という考えが重要です

この考えを実践するために あるアプリケーションを開発しました

４つのプラットフォームで 別々に開発するより効果的でした

アプリケーションの名前は Landmarksです 国内のランドマークを調べたり 訪ねたりする際に使います

写真や観光情報を提供します

地図や道案内も利用できたら最高です

お気に入り登録もできると すばらしいですね すべてのデバイスに向けて 開発しようとした時 各デバイスでの使われ方が 物語のように見えてきました

Apple TVなら ソファでくつろぎながら 行き先を探すのに使うでしょう

大画面なので家族や友達と 使用するかもしれません

あとで詳しく調べるために お気に入り登録もしたいですね

調べものにはMacが最適でしょう

情報を比較したり 並べ替えたり 絞り込んだりもできます 詳細情報を読むのにも向いています

iPhoneではランドマークの 概要を知りたいですね 自動車のナビゲーション機能も 必要でしょう

iPhoneは電話ですから 行き先に電話するのにも使います

Apple Watchでは重要な情報を 一目で得られるようにしたいです

何か変更があった時に 通知を受け取るのにも最適です

iOS版のLandmarksの情報は 皆さんも入手可能です SwiftUIに関するドキュメントが 公開されているので 基礎から段階を追って アプリケーションを開発できます

今すぐダウンロードできるので ぜひ学んでください ですから今日は このアプリケーションを Apple TVとMacとApple Watch版に 作り変えましょう

まずはエイダが SwiftUIを Apple TVで活用する方法をご紹介します (拍手) ありがとう ジェフ こんにちは　エイダ･ターナーです Apple TVでのSwiftUI活用法を 紹介できて光栄です

テレビ向けアプリケーションは 家庭で最も大きなディスプレイ向けに デザインする必要があります ですからApple TV特有の 課題や検討事項があります SwiftUIなら 他のデバイスで習得した スキルやツールを リビングの環境に合わせて 最適化することができます

今日は大画面で使う アプリケーションを開発するために ３つのポイントに焦点を当てます tvOSが想定するのは大画面体験であり モバイル体験ではありません 操作にはSiri Remoteを使います タッチスクリーンやマウスや キーボードではありません そして特に重要なのは 流れるようなナビゲーションを作り コンテンツにすぐアクセスできるように することです では大画面体験とは何でしょう これです こうではありません 豊かで没入感のある体験を 強調すべきです 美しい画像や映像などです ノートを取るといった タスクをこなすのではありません 他のデバイスのアプリケーションと SwiftUIのコードを共有する際は どんな体験が大画面に適しているのかを 注意深く考えましょう 部屋の反対側から見るかもしれません 長時間の使用もあり得ます 複数人で見ることもあるでしょう

私たちがApple TVのLandmarksで サポートした機能と 除外した機能を見てみましょう

ランドマークの美しい写真は 迷うことなく含めました 大画面で映えるからです リビングに集まり お気に入りを選ぶ機能は tvOSのアプリケーションにとって 重要です

そして営業時間や入場料などの 基本的情報も含めました ですから情報に基づいて 行き先を検討できます

一方で データはそろっていますが 各ランドマークに関する 詳細な歴史情報は省きました そういった情報は テレビに適していないからです 複雑な並べ替えや フィルタ機能も除外しました MacやiPadの方が向いています 最後に 位置情報も利用できますが ジオフェンス通知は実装しませんでした テレビは普通 持ち運ばないですからね (笑い声) 次に フォーカスです

tvOSのアプリケーションは Siri Remoteによる操作で インターフェイス上で 滑らかにスワイプできます フォーカスを利用することで 直感的な操作を実現することが重要です SwiftUIには 多くのインターフェイス要素があります リストやボタン テキストボックス トグルなどです それらはすべて tvOSでは異なる見た目や動作に互換され フォーカスを利用することで 大画面でも快適に操作できます カスタムコントロールを実装する場合 SwiftUIでfocusableと設定できます ビューをフォーカスするかを制御し フォーカスされた場合は ブロックを実行します onPlayPauseCommandや onExitCommandを使えば フォーカス時の再生ボタンや メニューボタンの押下に反応できます

ありがとうございます (拍手) 最後に 効果的なtvOSの ナビゲーションをご紹介します

垂直にスクロールする 深くネストされた目次は MacやiPhoneには最適です しかしtvOSでは コンテンツ重視のエフォートレスな 閲覧体験が求められます SwiftUIの便利なスタックビューや リストビュー スクロールビューを使って このように要素が縦横に並んだ― テレビ向けインターフェイスを作れます ワイドな大画面の利点を生かせます そしてユーザはページを移動せずに 異なるカテゴリを閲覧できます まずはSwiftUIで トップレベルのナビゲーションを― 構築する方法を見てみましょう タブビューはtvOSにおける 主要なナビゲーション手法です コンテンツをカテゴリ分けし 簡単に切り替えられるようにします 常に見える画面上部の表示により アプリケーション内で どこにいるかが分かります ナビゲーションビューは コンテンツをネストし タイトルやボタンのある ナビゲーションバーを表示できます アプリケーションの トップレベルのナビゲーションを iOSとtvOSで比較しましょう iOSではタブビューを トップのナビゲーションに使います そしてナビゲーションビューが 子要素になります その下にコンテンツが置かれます この構造では コンテンツの深い階層に進んでも タブバーが常に表示され 簡単に切り替えることができます

写真アプリケーションでは 詳細ページに進んでも タブバーが画面下部に 常に表示されます

前の画面に戻らなくても タブを切り替えることができます

しかし tvOSでタブビューを使う場合は ナビゲーションビューを トップレベルのナビゲーションにし その下にタブビューを使いましょう そしてコンテンツを タブビューの直下に配置しましょう この構造では コンテンツの奥深くまで進むと タブバーが消えます なぜこうするかというと tvOSではコンテンツを強調する― フルスクリーン体験が大切だからです

Apple TVの写真アプリケーションでは アルバムの奥深くまで進むと タブバーが消えます ユーザはコンテンツに集中できます

SwiftUIのビューは構成しやすいので ナビゲーションの構造を 簡単にtvOS用に作り変えられます 入れ子構造になっている タブビューやナビゲーションビュー そしてコンテンツは コードの階層構造に現れています

では実際に この原理で Landmarksを作り変えましょう

まず ナビゲーションバーの ボタンのタイトルは不要です

次に ナビゲーションボタンと ヘッダ部分を削除します

見てみましょう

改善しましたが まだまだです 縦にスクロールする長いリストは tvOSには向いていません スクロールビューや ネストされたHStackを使いましょう

各カテゴリのランドマークを 水平な行に表示しましょう

行に注目してください

ランドマークをカテゴリ分けし VStackでヘッダラベルを 付けるのと似ています HStackは ForEach landmarksをラップします そして今回はテキストだけでなく ランドマークカードという カスタムビューをボタンにします このビューは iOSのアプリケーションから流用します 試してみましょう

とてもよくなってきました コードを少し変えただけで 画像付きの 大きくて魅力的なボタンができました 水平スクロールは ワイドスクリーンを生かせています ここでポイントがあります 先ほどと同じ ナビゲーションボタン ビューを使っていますが 見た目が変わりました 右側にあった矢印は消え 背景も違います ナビゲーションボタンが リストビューで表示されなくなり 自動的に見た目を変えたからです さて 水平スクロールは 大画面にピッタリですが 少し横に長すぎるようです メインビューのHStackをVStackに変え カテゴリを縦に並べましょう

HStackの上に ScrollViewも書き加えます

試してみます

非常によくなりましたね カテゴリ間を簡単に移動でき カテゴリ内のランドマークも 簡単に見られます

最後に 詳細ページも見てみましょう

端から端まで表示される美しい写真は 細かい文字がなければ より見栄えがよくなります Apple TV向けに 改善する方法を考えましょう

詳細ビューを見ていきます とてもシンプルです ランドマークの写真を背景として表示し お気に入りボタンと 歴史情報もあります 観光情報を表示させ もう一度試してみましょう

ずっとよくなりましたね 適切な詳細情報のみが 読みやすい大きなフォントで 表示されました Macで調べものをする時のために お気に入りに登録することもできます

ではジェフに戻します (拍手) ありがとう エイダ スタンダードなリスト型UIを作り変え 家で使いやすくなりましたね すでにあったコードを 少し書き変えただけです SwiftUIのパワフルさが 伝わったはずです 次はmacOSです Macのアプリケーション開発は 時間内で語り尽くせませんが SwiftUIが活躍する キーポイントに絞って紹介します 高密度の情報や マルチウインドウサポート キーボードショートカット そしてTouch Barのサポートです

高密度の情報から始めましょう

Macの画面はスペースが豊富なため 多くの情報を一度に提供できます もし情報が一ヵ所にまとまっていたら 容易に判断や比較ができます

Macには正確な ポインティングデバイスがあるので 小さなクリックターゲットや 密集したコントロールも使えます コックピット並みではないですが 一ヵ所で多くの機能性を提供し コンテンツにスペースを割けます

Macはテキストコンテンツを読むのにも 適しています セッションは長くなる傾向があり 通常は座って使うので 快適にテキストを読めます

SwiftUIはMacに合わせて 自動的に スペースやパディングを調整します

controlSize修飾子を使えば macOSで使える 小さなコントロールを利用できます 小さなコントロールで インスペクタを作りたい方には朗報です

次はマルチウインドウです マルチウインドウは長年 Macの標準機能となっています ウインドウを並べて 情報を比べる際に重宝されています

ウインドウ内の情報を １つにすることで詳細に集中できます

そして操作スペースで ウインドウを整理することもできます マルチウインドウをサポートすることで これらの機能を使用可能にできます SwiftUIなら簡単です 後ほど例を紹介します

続いてキーボードショートカットです Macには不可欠な機能です 操作に詳しいユーザは特に よく行う動作に キーボードショートカットを用います キーボードショートカットのサポートも SwiftUIなら簡単です タブビューがあるとしましょう Explore Hikes Toursの ３つのタブです それぞれのタブに コマンドを設定することで 簡単に切り替えられるようにします Macでキーボードショートカットを 設定する際は メニューバーに追加することで 見つけやすくします また そうすることで マウスによる操作も可能になります 設定はコードでできます 私のストーリーボードで試しました そしてキーボードショートカットに コマンドを割り当てます それぞれのコマンドに名前があり SwiftUIの階層構造内に送られます そして各コマンド名で セレクターをラップできます

まとめると コマンドの対象となるビューに紐付いた onCommand修飾子を使うだけです

先ほど定義したコマンドを使い コードのブロックを実行させます

ここではselectedTabという 変数を使います コマンドを使うと変数が更新され タブビューも更新されます

キーボードショートカットや システムレベル統合に興味のある方は integrating SwiftUI のセッションをチェックしてください

最後にTouch Barです Touch Barも Macを素早く操作する方法です よく実行する作業を 指先で行えます

Touch Barのサポートも SwiftUIなら簡単です

例をお見せします Touch Barをコードで定義し リストやスタックと同様に Touch Barに要素を １つずつ当てはめるだけです

これをビューに紐付けるには .touchBar修飾子を使い 定義したTouch Barに対応させます 簡単ですね あるビューがフォーカスされたり 子ビューがフォーカスされたりすると Touch Barにコントロールが現れます

デモに戻り macOS版Landmarksで実践しましょう

Xcodeを使います

macOS版Landmarksを実行して 出発点を確認しましょう

標準的なMaster-Detail インターフェイスです 左にランドマークのリストがあり 右に詳細が表示されます

フィルタコントロールもあるので カテゴリを絞ったり お気に入りだけを表示させたりできます

すばらしいのは 左側のリストを 完全にiOSから流用していることです 開発を始めた時点で 大きく前進できました そして適応させるために 何かをする必要はまったくなく― 自動的にできました

しかしこのリストには改善点があります より多くの要素を一目で見られるように 各行に詳細を表示させたいです

リストの定義を見てみましょう

このリストはMaclandmarklistとして 定義されています 共通の要素である Landmarklistをラップしています このようなプロジェクトは とても便利です リストの仕様をほぼ流用しつつ Macに合わせて カスタマイズできるからです

更に見てみましょう

先ほど見たフィルタコントロールの 基準が記載されおり 選択したランドマークを リスト表示するようバインドしています お気に入りを判別するため ユーザデータも使います

リストは非常にシンプルです ForEachでリスト全体を反復し 各ランドマークに行が作成されます

これはハードコードされていて この行が今使用されている行です 各OSで使用するランドマークを #if文で切り替えることもできますが その手法は使いたくありません 再利用できるツールを作りたいのです その方法をお見せします

このリストを再定義していきます

行をジェネリックにするためです

そしてプロパティを追加します

ジェネリックコードとして定義した 行タイプのクロージャです

そしてハードコードする代わりに デリゲートを使います

行を作成するためです

Macのリストに適応させるために 必要なのは 型定義を更新することだけです

行を作成するクロージャを加えます

そして行の型を返します

料理番組のように 用意された完成品を使いましょう

どうなるか見てみます

かなり改善しました 行がコンパクトになり 詳細が表示され お気に入りも見分けられます とてもよいですね そしてリストの実行は 完全に共通化されています 高度なフィルタ 並べ替え グループ化論理がある場合や データベースやインターネットと 非同期の場合でも大丈夫です コードは１回しか書きたくありませんが デザインで妥協する必要はありません

次に ダブルクリックした時に ウインドウをポップアップさせます これも簡単にできます まずはウインドウを作成します SwiftUIでビューを定義する場合も MacではAppKitを使います

ストーリーボードでも作れますが 短いコードなのでお見せします windowControllerがあり SwiftUIのビューを呼び出す 簡易イニシャライザを定義します そしてホスティングコントローラの 周囲にウインドウを作成します

すでにウインドウが存在していないか 確認する便利なコードも書きました すでにウインドウがあるランドマークを ダブルクリックすると そのウインドウが 一番手前に表示されます

リストに戻り 統合しましょう

詳細を…

先ほどの便利な機能を加えます

こうして…

ウインドウを表示させます 行に紐付けるために tapActionを加えます カウントを２にすることで ダブルクリックのみが認識されます

このtapActionにより 詳細が表示されます

さて 行をダブルクリックすると

個々のウインドウが表示され 好きなように並べられます AppKitのウインドウなので 元から備わっている機能も使えます 例えばタブウインドウに結合するのも 自由自在です すばらしいですね (拍手) Mac版アプリケーションも かなり改善されました ではプレゼンテーションに戻りましょう

Apple TVとMacでの SwiftUIの活用法を見ました 次はApple Watchです SwiftUIはApple Watch初の ネイティブフレームワークなので 可能性を大きく広げてくれるでしょう いくつかの可能性を メグナから紹介します (拍手) ありがとう (拍手)

ありがとう ジェフ これまでお伝えした SwiftUIの利点を生かせば すばらしいアプリケーションを どのデバイスにも開発できます 私 メグナが Apple Watchですばらしい体験を 提供する方法をお伝えします

アプリケーションには あなたの経験が根付くものですが WatchOS用のアプリケーションには 重要な側面があります

コンプリケーション Siriショートカット そして通知は いずれもタイムリーな情報を 表示するための機能です Apple Watchでは 最適な情報を 適時に見せることが重要です そのためにアプリケーションと 通知に焦点を当てます

まずはSwiftUIが どのように要素を表示し インターフェイスを 配置するか説明します その前に重要なお知らせです Apple Watchの体験を よいものにするには ３回以内のタップで重要な情報や アクションへの到達を可能にしましょう 目的はiPhoneのアプリケーションを 縮小することではなく タイムリーで最適な情報を 手元に提供することです

それを念頭に SwiftUIのシンプルな コンセプトを見ていきましょう コンテンツが画面に収まらない場合は SwiftUIのスクロールビューで ラップしましょう

SwiftUIにはDigital Crownの 新しいAPIもあり 回したり押したりする操作を 完璧にコントロールできます このAPIによりDigital Crownを使って インターフェイス要素を 新たな方法で操作できます 今までは不可能だったことです

WatchKitのGroupsは すでにご存じかと思います SwiftUIならコンテンツをより簡単に HStackやVStackで配置できます リストを使えば 情報を一覧にするのも簡単です

最後に ユーザがアプリケーションに 求めているものを見極めることは どんなデータを表示するか決める上で 役に立ちます SwiftUIのビューやコントロールで 最も重要な情報を伝える インターフェイスを簡単に設計できます

通知はタイムリーな更新には 最適な方法ですが 情報が多すぎたり 無用な内容だったりすれば ユーザは通知をオフにするでしょう

SwiftUIは直感的かつ効果的な コントロールを提供します ユーザはアプリケーション内で 反応できるので 通知を見逃す心配がありません 通知をできる限り実用的にするには 素早く反応できるようにしましょう

通知を送るタイミングは 内容と同じくらい重要です ユーザの使い方を想定することで 最もタイムリーな情報を 最も適したタイミングで通知できます

ここまで SwiftUIのパワフルなコンセプトと Apple Watchで優れた体験を 提供する方法を紹介しました Landmarksでそれらを 生かす方法を見ていきましょう

他のデバイスのために SwiftUIで開発したアプリケーションは Apple Watchでも機能します しかし Apple Watchにとって 最適とは言えません 何ヵ所か手直しや更新をすることで Apple Watchに合った アプリケーションにすることができます

まず私たちは ランドマークのリストを作りました Apple Watch用に 詳細セルをカスタマイズしました

イメージ画像を含め 便利な情報や 連絡手段の有無も表示しました 連絡手段の情報は Apple TVには不要かもしれませんが Apple Watchではとても有用な情報です

しかしスクロールするコンテンツが 多すぎるため お気に入りのみに絞ることにしました そのために シンプルなフィルタを作りました

データを絞り込んだら すべてを表示するオプションも 作りたいですね ボタンでそれを可能にしました ビューの状態に合わせ すべて表示か お気に入りのみ表示のボタンになります SwiftUIなら 関心を引く部品を選び インターフェイスに合った ビューを作ることができます

スクロールした時に セルに集中できるよう SwiftUIで カルーセル状のリストを採用しました このスタイルは セルの数が少ない時や セルにコントロールがある時に有効です このセルには連絡を取るために 電話の発信ボタンや お気に入り登録ボタンがあります ナビゲーションも利用できます

最後に通知です 私たちは 新しいツアーが組まれた際に 通知したいと考えました 画像を加えることで ツアーに興味があるか判断できます 通知から ツアーを予約することもできます Swiftのパワーを使えば テキスト情報だけでなく 美しいアニメーション画像も使えます 話をするだけでなく 実際にお見せしましょう

ご覧のとおり 新しいツアーの通知の 構造体を作りました すでに通知コントローラに この通知をフックしています つまり このbodyの内容はすべて このスキームを実行したあとに 通知として表示されます この構造体では ランドマークがパラメータとなり 通知に受け渡されます

では更にテキストを追加してみましょう

ここで私たちはスタックを作成し テキスト情報を追加しました スタックにしたのは 更にデータを加えるためです

これは文字列配列が入った スライドショーという構造体です 文字列は画像の名前です

currentIndexという名の変数もあり 現在見ている画像がどれか 確認するために使います

TourImageはカスタム構造体で 私が作成したビューです アプリケーション内の画像と対応した 画像の名前を取り込みます ここまでをプレビューで見てみましょう

さて 次に加えたいものがあります

画像のIDです アニメーション化した時に 挿入すべきビューと 除外すべきビューを管理できます

テキストが表示されました いいですね ここで スライドショーの構造体を 通知の本体に加えます

更新するとここにビューが現れます いいですね この構造体で複数の画像を サポートできるようにしましょう そのために 次のインデックスを計算します やってみましょう

次のインデックスを計算し 現在のインデックスを更新します この更新にアニメーションを加えます

インデックスが更新されるたびに 美しい流体アニメーションが 表示されます

しかし 作成しただけで まだフックしていません

ZStackへの記述により 特定の間隔で 次の画像に入れ替わるようにします

修飾子を含む ビューのエクステンションを作成します 次の画像を表示するシンプルな エクステンションです ２秒ごとにタイマーを発動させ インデックス画像を切り替えます

最後に加えるのは 美しいスライド転換です

簡単なコマンドで可能になります

どうなるか見てみましょう

スクロールできる画像があり 通知コントローラにフックした アクションもあります ご覧のとおりです (拍手) ありがとう (拍手) ほんの少しの手直しで 美しく豊かな通知を作れました 今までWatchOSでは 不可能だったことです ではジェフに戻しましょう (拍手) ありがとう メグナ 通知だけでも こんなに豊かで インタラクティブにできるんですね SwiftUIはWatchOSの可能性を 広げてくれるでしょう

駆け足での紹介だったので 本日の内容をおさらいしましょう

まず最初にあるデバイスの アプリケーションを設計するには デザインからアプローチしましょう 同じコードを あちこちで使おうとするのではなく デバイスの特性から アプリケーションの表現を考えましょう

しかし 時にはコードを共有できます 本日のデモではモデルコードを 難なく使うことができました モデルコードをターゲットに合わせて 編集したのです

場面ごとに適不適を判断すれば ビューコードも共有できます SwiftUIなら再利用可能な 小さなコンポーネントを 簡単に抽出し デバイス間で再利用できます

最後に 一度書いたら終わりではありません 本当のパワーはあなたの知識です 一度覚えれば あらゆるデバイスで応用できます 実にパワフルです

このセッションは オンラインで再視聴でき 関連資料も入手できます ありがとうございました ぜひSwiftUIを使ってください (拍手)