SwiftUIの紹介：初めてのAppをビルドする

(音楽)

(拍手) こんにちは ジェイコブ･シャオです のちほどマッコマーも登場します アプリケーションを迅速に作れる 画期的なSwiftUIの紹介です

実際にアプリケーションを 作りながら説明します

魔法のように見えますが 種も仕掛けもありません アプリケーションを作りながら プロセスをお見せします

どんなアプリケーションを 作りましょうか？ 会議が嫌いな人は？ やっぱり？　分かります 嫌いな会議に耐えるには？ すばらしい会議室があればいい そこで会議室をリストから 選べるアプリケーションにしました デモを始めましょう

まずは新規のプロジェクトを作ります

プロジェクト名はRooms

Use SwiftUIにチェックを忘れずに

XcodeのContentViewを選んで UIを構築するビューを作ります

コードは左側に表示

右側はキャンバスです

Interface BuilderやStoryboardと 変わらないと思うかもしれません コードとキャンバスが並んでいます 重要な違いがあります Storyboardでは ビジュアルエディタと コードの切り替えが必要でした 何かを変更する場合は 最初からやり直しです SwiftUIでは その必要がありません ビュー定義は常にSwiftコードでなされ いつでもコードを直接編集できます ビジュアルエディタとの間を 自由に切り替え可能です キャンバスで何かを選択すると コードにもそれが反映されます 反対にコードを変更すると キャンバスにも 同期して反映されるのです

仕組みを見てみましょう キャンバスにはビューコードの プレビューが表示されます 編集やコードの確認もできます Xcodeはコードをコンパイルして実行し プレビューを表示します プレビューはSwiftUIコードで書けます このコードです

のちほどプレビューの作成に いかに有効かを説明します

では 会議室リストのセルを 作りましょう

部屋の情報を載せる テキスト部分を追加します Textをキャンバスにドラッグ

Xcodeは違う場所に置くと どうなるかも表示してくれます

プレビュー更新と共に 新たなテキストが表示され テキスト追加用のコードも書かれました VStackの中に レイアウトのコードが入ります VStackは垂直レイアウトで SwiftUIでは一般的です ビューが垂直に並びます HStackを使うと平行に並びます スタックはコンテナなので 好きなものを選べます

このプレースホルダに 会議室の情報を入れます 会議室の収容人数は 数字を直接埋め込みます

次はテキストの横に画像を入れます

エディタと同じくらい簡単に コードを編集できます HStackにビューを埋め込みましょう コマンドクリックで Embed in HStackを選びます

Xcodeがコードを更新しています VStackの横に画像を追加しましょう 実際の画像ではなく SF Symbolsの図を入れてみます

SF SymbolsはiOS 13で 新たに用意されました Appleが提供する アプリケーション用のシンボルです

これで基本の型ができました 今度はキャンバスでセルのスタイルを 決めていきます

VStackをコマンドクリックし Inspectを選び セルのプロパティを変えます アラインメントは左詰めにします

この変更もコードに反映されます

テキストをクリックして 確認することもできます

フォントを小さくしましょう Subheadlineを選びます

Xcodeがコードを書き換えるので SwiftUIの理解が深まります

例えばフォント変更のコードは ここです このメソッドを モディファイアと呼びます SwiftUIでビューの見え方や動作を 作成するのに使われます

もう１つのモディファイアを コードに加えます foregroundColorを secondaryに設定します

セルができたのでリストに入れましょう セルの上でコマンドクリックし Convert to Listを選びます リストにセルが５つ入るように ラップします (拍手) とても簡単ですね ここのコードがリスト部分です デリゲートもデータソースもなく リストのビューだけです

ここにデータを持ってきます

ドラッグして テスト用の モデルファイルを入れます

このファイルには いくつかの情報が入っています これをSwiftUIで使うため Identifiableを宣言します

これでリストのアイテムを識別できます 必要なのはすでに持っている IDプロパティだけです

モデルファイルには デバッグ用のテストデータもあります

それではビューに戻り

データを渡しましょう プロパティにroomsを加えます

プレビューの大きな利点は テストデータを使えることです テストデータを ここで渡します

プレビューの上の部分に 文字が出ましたね roomsプロパティの追加など 大きな変更を加える時に Xcodeは更新再開の準備ができるまで プレビューを停止します ボタンをクリックすると再開します

次にリストを動かしてみましょう Listにroomsを入れ

部屋名を表示させるため テキストを更新 収容人数も表示できるようにします

画像が出るので サムネイルも付けましょう

いいですね (拍手) リストの変化に気づいたと思います 始めはセルの高さは 基本の44ポイントでしたが 画像が大きくなったので サイズが調整されました 自動的にです

すばらしい (拍手) コンテキストの画像は 少し角が目立ちます モディファイアを使って 角を丸くしましょう 利用可能なモディファイアは ライブラリで探すこともできます Corner Radiusを検索し 画像にドラッグします

(拍手) 適切な値に調整しましょう

いいですね セルとリストはうまくできました 次はセルのタップで詳細を見せます ナビゲーションビューで リストをラップしましょう

ナビゲーションビューには ナビゲーションバーを表示し ビューをプッシュします ナビゲーションバーに タイトルを付けます “Rooms”としましょう ナビゲーションバーに表示されました

スタックにプッシュする セルを設定します NavigationButtonに セルのコンテンツを入れます

NavigationButtonにdestinationを設定 部屋名を出力するには こうします NavigationButtonの中に セルのコンテンツを入れ

準備完了です UIインジケータが 自動的に更新されています SwiftUIは詳細まで自動で更新するので UIはデフォルトで正しく表示されます

セルの動きを確認しましょう プレイボタンをクリックすると ライブモードになります Xcodeがコードをコンパイルし シミュレータを実行し 結果をキャンバスに表示するのです ビューとやり取りができます セルをタップして予想通りに動くことを 確認できます

スワイプするとSwiftUIが 自動で革新的な動きにしてくれます ハイライトはデフォルトで インタラクティブに実行可能です (拍手) セルを含んだリストができました しかしビューコードが少し長いです セルも分割したいですね Xcodeでは１回の操作でこれができます 該当箇所をコマンドクリックし Extract Subviewを選びます (拍手) すごいですね (拍手) ビューコードがここに抽出され 新たにビューの名前も設定できます RoomCellとしましょう

ありがとう (拍手) 部屋のプロパティを追加しましょう

それをここに渡します

ワークフローが改善されました SwiftUIビューは非常に軽いので ビューを追加するためにカプセル化や ロジック分けをする必要はありません

次は詳細ビューを作りましょう SwiftUIのテンプレートで 新たなビューを作ります RoomDetailとしましょう

新たなビューのstructが 自動的に生成され プレビューも作られました 会議室についての 詳細情報を得るため roomプロパティを追加します

再びプレビューコードを 更新しましょう テストデータをroomに渡すためです

それからUIを作ります Imageに“room.imageName”と入力

画像が表示されましたが ビューに対して大きいですね デフォルトでは コンテンツのサイズで表示します 画質が落ちることを防ぐためです 今回はサイズを小さくします Image Resizableという モディファイアを使います ビューにドラッグで持ってくると

画面に合ったサイズに変わりました アスペクト比を元のままにするには Aspect Ratioを使います

このモディファイアが.fillだと フレームからはみ出してしまいます そこで.fitにすると フレーム内に収まります

プレビューではモードの違いを 簡単に見ることができます 今は.fitで画像全体を出しましょう

リストに戻り セルに新たな詳細ビューを入れましょう

RoomDetailビューを作り roomに渡します

プレビューを ライブモードに切り替えます タップすると画像が出ます しかしナビゲーションバーに タイトルがありません 詳細ビューで直しましょう

ここでもnavigationBarTitleを 使います

room.nameを渡しましょう

しかしプレビューに表示されません すぐに変更を確認したいです プレビューはSwiftUIのビューに 注力しているため こうします プレビューをNavigationViewの中に 設定します いつものコードです ナビゲーションバーに プレビューが入りました

(拍手)

このタイトルは少し大きすぎるので displayModeをinlineに変更しましょう

よくなりました 私が会議室を選ぶ際に 重要だと考えるのは テーブルの材質です 質が悪いと会議に集中できません (笑い声) ここにもテーブルがありますが 詳細が分かりません Imageをfillにすれば テーブルが近くなります 木目を見てください

詳細を見たい場合はfillを設定し 全体を見る場合はfitにします

ビューからaspectRatioの contentModeを変えるには？ それを知るにはSwiftUIを もっと理解する必要があります その話はカイルにしてもらいましょう カイル ようこそ　WWDCへ (拍手) SwiftUIは気に入りましたか？ (拍手) 私も感動しています 魔法のようです 先に進む前に少し話をさせてください ビューの働きと SwiftUIを使う意義です

ここにRoomsの詳細ビューを 実装しました SwiftUIのビューは Viewプロトコルに適合しています UIビューのようにベースクラスを 継承していません ストアドプロパティを 継承していないということです スタックに割り当てられ 値で渡されます RoomDetailはroomの サイズとウエイトを格納しています 他のメモリ確保や参照数などの 処理はありません

裏でSwiftUIは 積極的にビュー階層を折り畳み レンダリングのため 効率的なデータを作っています この構造を持っているので 小さな単一目的のビューを 自由に使えます

これからお見せする スライドで理解してほしいのは SwiftUIのビューは 非常に軽いということです コードも積極的に リファクタリングしてください サブビューの抽出には ほとんどランタイムがかかりません

すばらしいことです (拍手) SwiftUIの主な役割は 従来のUIと変わりません UIを定義するものです

Viewに必要なのは body要素のみです body自体がViewです

SwiftUIは小さいViewを合わせて 大きなViewを作ります RoomDetailで画像を使いました 元の画像の解像度を

縦横に変えることができましたね アスペクト比は子クラスの比例尺度に 適合しています

Viewのレンダリングは bodyのレンダリングなのです

デバッグでプログラムが 一時中断した時でも

新たなレンダリングを提供してくれます

ほらね

新たなレンダリングを呼び出すべきかを フレームワークが知っています なぜならUIの定義に加え SwiftUIでは ビューが依存を定義しているからです

RoomDetailで画像の 大小を調節できるようにしましょう

ジェイコブが木目を チェックできるようにね

まず特別なプロパティが必要です Stateプロパティです これでズームを調整します

SwiftUIが状態変数で ビューを見る時 変数にストレージが割り当てられます 図の緑色の部分が アプリケーションのメモリです 紫の部分はSwiftUIが管理するメモリ これでズーム変数の値が分かります

変数を基に拡大か縮小かが決まります

拡大時は このようなビューになり

縮小はこうです

必要なのはtapActionです

拡大と縮小を切り替えるものです タップで画像は拡大されます

そして縮小

(拍手)

タップした時に何が起きているのか？

状態変数のプロパティは SwiftUIの読み書きを監視します SwiftUIはズームが bodyで呼ばれると知っています ビューがbodyに依存しているためです

つまり変数が変わると 新たな値で問い合わせをします

違うコンテンツモードで 新たにレンダリング可能です

従来のUIフレームは状態変数を 区別できませんでした しかしこの区別は重要です

SwiftUIでUIに入っている状態は スクロールビューのオフセット ハイライトボタン

ナビゲーションスタックのコンテンツ 信頼できるデータから派生しています “Source of Truth”とも呼ばれます 状態変数とモデルは アプリケーションための “Source of Truth”を構成します

アスペクト比の呼び出しが ビューを作ると言いましたが このような定義です ContentModeは 単なる古いSwiftプロパティです

プロパティは Source of Truthと派生値に 分けられます

Zoomの状態変数は Source of Truthです

ContentModeプロパティは そこから導かれます

SwiftUIは状態変数が 変化した時に呼ばれ レンダリングを更新します

フレームワークは新しいbodyを要求し 新たなアスペクト比のビューを作ります ContentModeや他の ストアドプロパティは上書きされます

これによりSwiftUIで生成された値が 最新となります

状態変数を使って Source of Truthを宣言しました 前からあるプロパティは派生値です SwiftUIには バインディングがあります 生成した値を渡すのに適した仕組みです どんな定数も読み取り専用の Source of Truthとします テストデータでの プレビューで見ましたね 同じことを繰り返し言います 状態変数とモデルがアプリ全体の Source of Truthを構成します BindableObjectプロトコルは ジェイコブが説明したように モデルの変化を監視するものです

ここでは簡単な説明ですが 今週末に詳しくお話しします 様々なフローについて 直感的に理解できるでしょう

ではSwiftUIに戻りましょう

これは従来のフレームワークと まったく違うものです 今までは最新化のために 膨大な作業を行いました

従来のUIで不便を感じたことは ないかもしれません しかしビューがデータを読むたび 暗黙の依存関係が作られます そのためデータが変わると ビューは新たな値に更新されます 失敗するとバグになります SwiftUIは適切に再計算を行い 自動で依存関係を管理します だからバグは起こりません (拍手)

アプリケーションでは一度に いくつもの依存が発生します 大きくて 複雑だからです 自分だけで解決しようとすると 失敗するでしょう 依存関係の管理は 本当に難しいからです 最善を尽くしても 必ず更新時にバグが潜んでいます すべてに依存関係があるからです

まだあります

複雑なビューの管理で一番大変なのは 異なるコールバックに 適切な指令を送ることです UIKitで実装した Roomsの詳細ビューを見てください

SwiftUIと同じアプリケーションですが １点違います

会議室の映像をズームするたびに テーブルの木目がぼやけました

そこでニューラルネットワークと 機械学習を追加しました するとバックグラウンドスレッドにて タップで拡大ができ きちんと会議室が 選べるようになりました

しかし 複雑すぎます

この機能の唯一の問題はバグです 進行状況インジケータが 止まらないという報告を受けました

原因は？ イベントが特定の順序で 発生した場合に―

進行状況インジケータを 消し忘れたのです ズームしながら拡大ボタンを押すと アニメーションが動かなくなり インジケータが 出続けてしまうかもしれません この種の問題はサブビューを直接 イベントハンドラのコールバックから 変えてしまう時に起こります Source of Truthを更新し そこからUIを派生させるべきです

うまくいくに違いないと安易な考えで コーディングするとミスが起きます 簡単に思いつくコードの中には

見落としがちな問題が潜んでいます さらに問題なのは ビューが返すイベントの数が増えるほど このパスが暴発してしまうことです

４つのイベントにある 指令の数を考えてみてください

それぞれのイベントで 24もの指令があります 実際イベントは複数回実行されるため 数が膨らみます 拡大ボタンの連打を考えてください

割り込み可能なアニメーションの 実装経験があればご存じでしょう コンプリーションハンドラが 予期しない時に入ってきます

５年前に私がしていた仕事ですが UIプログラミングは 本当に大変でした ログのない並行処理のようでした

マルチスレッドコードの 経験がある人は？ 全員でしょうか 簡単だと言う人はいません バグを取るのに 数ヵ月かかることもありました それでも正確さの確信は 持てませんでした 多くのUIコードがそのようなものです クラッシュしなくても ビューが消えてしまったりします 競合状態とUIの不整合に 根本的な共通の原因があるためです

順序を見落としやすいのです

ビューの多くには イベントが４つ以上あります

例えばモデルの通知 デリゲート ターゲット コンプリーション すべてイベントです 12のビューには だいたい12の階乗の指令があります 約５億ですね

12のイベントハンドラのある ビューを作っていることになります

それを一度に考えなければなりません

この点線は アプリケーションのビューの１つです

点と点の隙間は何だと思いますか？

分かる人？ そうですバグです 機能を追加するたび 考えるべき順序が増えます 指数関数的に増えて 見落とす確率も― 当然増えます

多くの人はこの煩雑さに 感覚的に適応していると思います UIKitやAppKitで プログラミングをすると ビューの更新コードは １つのメソッドで収集されます イベントハンドラでコールバックすると １つのメソッドを呼び出します 複雑さで混乱することはありません SwiftUIは この方法から着想を得ました

従来のUIで ビューを実装する場合は 多くを考える必要があります ビューの階層に サブビューを追加したり削除したり ナビゲーションスタックを 出したり消したり テーブルビューを更新させたり これらを独りで考えることは不可能です 今回 時間をかけて作業を行い このベストプラクティスを SwiftUIに組み込みました Viewプロトコルの要件はbodyのみです フレームワークが呼ぶのは エントリポイントだけ つまり呼び出せる順序は １つだけということです

(拍手)

この新たなUIでは ビューの読み込みは単純です SwiftUIが頭脳となり UIの不整合を解消してくれます

Roomsの詳細ビューを完成させましょう ジェイコブ

では完成させましょう ズームインの設定はしました Stateプロパティを追加

zoomedはfalseに設定します アスペクト比には zoomedプロパティを設定 fillは拡大 fitは縮小です zoomedを切り替える tapActionを追加します

ライブモードで見てみましょう

モードが切り替わります

何か足りませんね 分かりますか？

アニメーションがありません

SwiftUIですぐに加えられます withAnimationでラップします

アニメーションになりました (拍手) またアニメーションには双方向性があり 割り込み可能なため 異なる状態間で変更しても 常に正しく動きます

すごいですね (拍手) 次に拡大ボタンを追加します カイルが作ったモデルでは この画像しか見られません

機能を加えましょう

ロンドンの同僚との ビデオ会議を想定します そこで詳細ビューに アイコンを出します

ZStackを用いて ビューの上に付けます

この画像をZStackに組み入れ ビデオがあるかを アイコンで見せる画像を追加します

Imageの中に―

“video.fill”と書きます

アイコンが出ました でも小さいですね シンボル画像は自動的に 現在のフォントに合わせて出ますが モディファイアで さらに大きなフォントに変えられます

ドラッグしてImageに適用します

タイトルはこのまま アイコンが大きくなります これを左上に持っていきます ZStackのアライメントを―

topLeadingに設定

Paddingを加え 端が切れないようにします ここでもモディファイアを使い ドラッグして画像に取り込みます

端ギリギリにします アイコンをビューエリアの 一番上に持ってきましょう 画像をフレキシブルなフレームに入れ アイコンを出します フレームを画面全体に広げても コンテンツはフレーム全体の 中央に位置します 会議室の画像の場所は変わりません Imageにフレキシブルフレームを 追加します

最小幅はゼロ　最大幅は無限に設定

高さについても同じです

できました SwiftUIでのレイアウトを 詳しく知りたい方は Building Custom Views in SwiftUIの セッションをお聞きください

アイコンができました ビデオ会議ができる部屋に表示します その方法は？

宣言シンタックスを使えば簡単です ifを使い― 部屋にビデオがあるかを確認します trueの時のみアイコンを表示

プレビューデータで ビデオのない部屋を確認します いいですね 次はプレビューで 複数のビューを一度に表示しましょう ビューをグループの中に組み込みます

複数のビューが見られます

異なるテストデータで 違うバージョンを作りましょう ビデオ会議ができるバージョンと できないもの (拍手)

ライブモードに戻ります

ズームの時は ビデオのアイコンが少し邪魔です ズームにした時には 消えるようにします 条件を更新するだけです

ズームの時はアイコンは消え 戻ると現れます フェイドアウトさせましょう

アニメーションは transitionで設定できます

“.move(edge: .leading)”とします

アイコンが動くようになりました (拍手) アニメーションの表示時間を ２秒にカスタマイズします

アニメーションがゆっくり動き タップしても同じ動きをします 出たり入ったりします アニメーションは双方向性を持ち タップすると元の状態に戻ります

これが詳細ビューです 復習してみましょう 詳細ビューは部屋を見せるために 構成されています 親ビューから渡された派生値です

状態プロパティで ズームを制御しています フレームワークにより持続され アスペクト比を制御しています

ビデオアイコンもあります ビデオ会議室にだけ表示され ズームで消えます アイコンをスライドさせ 必要に応じて表示します transitionとは？ アイコンが削除されると ビューは新しい位置に移ります SwiftUIはビューを階層から削除し 戻る時にはオフスクリーンに ビューを挿入して表示します

アニメーション付きで サブビューを追加削除することは 長年の願いでした

(拍手) このアニメーションは 常に双方向性を持っています イベントではなく データドリブンだからです アニメーションが動作中でも カイルが話したイベントは発生します アニメーションの始点と終点には 多数のイベントがあります イベントドリブンの中で作るのは 非常に難しいのですが SwiftUIではコード１行で済みます

では戻ってアプリケーションを 完成させましょう

リストを変更できるように 編集をサポートしておきます 同時にデータモデルを 実用的にしましょう 今はアプリケーションのデータは 完全に静止しています

いつ見ても 同じ会議室が並んだ状態です そこでルートストアオブジェクトで 変更できるようにします

事前に作成したファイルを RoomStoreに入れます

ストアは我々が必要な部屋の 可変オブジェクトです 変更する時はSwiftUIに 伝達するだけです そのためには BindableObjectへ準拠させ didChangeプロパティを持ちます

データ接続のコンポーネントを持つ Combineフレームワークができました ここでPassthroughPublisherと PassthroughSubjectを使います 更新のための ローカルオブジェクトを得るためです 通知センターと似ています

そしてroomsを更新します

didSetを設定 会議室が変更された時に通知されます

Combineについての詳細は 他のセッションで説明します

ビューに戻りましょう

更新してストアを使います

プロパティをroomsから storeに変更します

ObjectBindingを用いてプロパティの 変更を検知するようSwiftUIに通知 Data Flow Through SwiftUI セッションにて オブジェクトバインディングの 詳細が聞けます

プレビューに 新たなstoreタイプを作りましょう

テストデータを使います

Listもstoreからroomsを 取り出せるように更新します

いいですね これで更新するたびに ビューは新しくなります

編集できるようにしましょう 新たな会議室を追加する ボタンを作ります 今はリストを動かすのに コレクションを使っています 完全にデータドリブンなリストには 最適です コンテナの静的コンテンツと 動的コンテンツを混ぜることもできます

ForEachでコレクションを使い リストを置き換えます

ForEachは各アイテムに対し ビューを作れます

ForEachと並行して 静的要素を加えましょう

ライブラリでボタンを探します

ドラッグしてコードに入れ リストに追加します

テキストを“Add Room”に変更

新たな会議室を追加する メソッドです

“store.rooms.append”で 新たな会議室の追加を伝えます

私たちが今いる会議室にしましょう

名前はHall2とし収容人数は2000人

addRoomメソッドを生成するための ボタンを更新します

ライブモードで試しましょう

データの横のこの部分です タップすると出てきました いいですね (拍手)

データドリブンコレクションの中に 静的要素が１つ加わりました SwiftUIはコンビネーションを 簡単に書くことができ 複雑なリストが必要なUIより 簡単です インデックスパスの エラーの心配も不要

さらに形を整えましょう Addボタンを追加し コンテンツを分けます listStyleに―

.groupedを設定

グループ化されました ボタン部分にSectionコンテナを追加

ForEachも同様です

セパレートセクションができました

次はリストの削除です 会議室を削除するメソッドを加えます 削除する場所にオフセットを渡します

そして“store.rooms.remove”とし 会議室を移動します

OnDeleteというモディファイアを ForEachに追加し

このモディファイアに deleteメソッドを渡します

ライブモードに戻ると

列をスワイプして削除できました (拍手)

ForEachは削除のたびに コールバックします コールバックがストアに問い合わせし アイテムを削除すると ビューは更新されます

削除の他にも 編集にリストを加えます navigationBarItemを navigationBarTitleのように モディファイアとして設定します

EditButtonを作ります

UIにEditがでます

並び替えもできます

moveにメソッドを加えます

“from source”

そして“to destination”

“store.rooms.move”と書きます

いいですね 再びモディファイアのonMoveを追加し

追加したメソッドを呼び出します

動かしてみましょう

Editモードに切り替えます 行ごとに編集できますが ボタンは違います SwiftUIが自動的に 適切な場所に配置します 何もしなくてよいのです

(拍手) すばらしいですよね

ドラッグで順番の入れ替え タップでアイテムを削除できます

(拍手) ありがとう (拍手) 追加したものを復習しましょう 複数のアイテムを リストで見られるようにするため listStyleを.groupedとしました 静的なボタンを Roomsのデータと合わせました モディファイアと関数を使い リストに編集を素早く追加しました

部屋の識別方法は？ ForEachが自動的に コレクションの変更を監視し 正しく挿入 削除 変更を してくれます リストに追加や削除を 伝えなくてもいいのです データソースとの不整合を 心配する必要はありません (拍手) そうなんです (拍手) リストの完成です 最小限のビューコードで すばらしいUIのリストができました

簡単に作成できました 顧客に提供するには まだ足りないでしょうか ダイナミックタイプ ダークモード アクセシビリティ ローカリゼーション

SwiftUIは自動で これらをサポートします プレビューですべてを テストできるのです プレビューにビューを追加します

グループを追加し複数の子を持たせ

違うバージョンのビューを加えます

ここで環境を変えます

.sizeCategoryでサイズを大きくします

このようになります 自動的にうまく動きます

そうなんです　しかも無料です

この環境には ビューのコンテキスト情報があり ビューに含まれているものを 一度に変えられます 大々的なビューの変更や プレビューのカスタマイズにも便利です

別のビューを追加しましょう

環境を更新して暗い色にしてみます

一瞬でできました (拍手) 他の言語にした時の 動作も確認しましょう

英語の文字列ファイルを入れます

Xcodeでローカライズします

プロジェクトファイルで―

Import Localizationで アラビア語を選びます

ビューに戻りプレビューを追加します

レイアウトを右から左に設定

自動的にこのようになります “.locale”を設定します

アラビア語にします

ローカライズされました

(拍手) 他のコードを変える必要はありません ローカリゼーションのための 文字列の変更は不要です SwiftUIが推測します 文字列は デフォルトでローカライズされます

文字列から生成したテキストは そのまま使われます “Rooms”や“Add Room”は 言語が変更され 部屋の名前などのコンテンツは 変わりません 文字列補間をすれば 完全にローカライズできます

(拍手) すばらしいですよね

ぜひSwiftUIを使ってください 無料で使えるので 独自の部分に注力できますし よりよいアプリケーションを 迅速に提供できます Appleのプラットフォームすべてで このAPIを使えます どれも自動で動作します

最後にもう一度 動作確認をしましょう

私の好きな ダークモードを使います

リストのアイテムをタップすると 詳細が出ます ここでタップするとズームされ アイコンが消えていきます アニメーションも動いています

リストの編集も可能です

例えばこれを下へ 地下室の会議室は削除します

なぜか象の部屋があります これも削除 最後にこの会議室の追加です アプリケーションが完成しました (拍手) 最後に大切なことをお話しします 私たちはビルドや実行をせずに ここでアプリケーションを作り 動作の確認もしました Xcodeのプレビューでは 素早く編集やデバッグができます SwiftUIはどうでしたか？ 非常に楽しいものです (拍手) SwiftUIの目的は 短時間で顧客向けの アプリケーションを作ることです SwiftUIのデザインには ４つの鍵があります 宣言シンタックス これはUIに働きかけて サブビューの追加や 削除などを行うものです 組成については説明しました コンテンツ モディファイア コンテナを組み合わせます 理想のUIのために組み合わせます フレームワークに処理を任せることで 作業時間を短縮しました SwiftUIは 整合性の取れたビューを作るので ビューは消えませんし ミスもありません もちろんアニメーションも使えます 大きな利点です 派手なアニメーションを入れようとして クラッシュしたことがあります その心配はありません

SwiftUIでは… 待って もう一度見てみましょう SwiftUIはアプリケーションを 作る時に必要な 基本的な作業を あなたの代わりにしてくれます アプリケーションの構築には 基本的なことだけでなく アプリケーションの特徴を 考え抜く作業が必要です そこにもっと注力してほしいのです アプリケーションの開発では あなたにしか作れないものを 作ってほしいですね SwiftUIを紹介しました 今週は午後にはラボにいるので 遊びに来てください 他のセッションもあります 次はSwift Essentialsを 聞きにきてください そこでさらに詳しくシンタックスなど ビューの作成についてお話します そこでお会いしましょう WWDCを楽しんで SwiftUIを活用しましょう (拍手)