WWDC2021セッション等の要約(2)



(1)はこちら: https://qiita.com/satoru_pripara/items/92bb0a37bc42c0a8d610

### Ultimate application performance survival guide
https://developer.apple.com/videos/play/wwdc2021/10181/

アプリの起動時間・バッテリー消費・メモリー消費・ファイルアクセスの時間など、パフォーマンス系の問題を解決するための対策を総合的に解説しています。

道具としてはXcode Organizer, MetricKit, Instruments, XCTest, App Store Connect APIを利用しています。

#### バッテリー消費
バッテリーは位置情報取得、ネットワークとのデータの送受信、何らかの計算処理をした時のCPUの負荷、描画を行うときのGPUの負荷、音声の再生、ブルートゥースの使用などで消耗されます。 主に最初の3つで大量にデータが消費されます。

Xcodeからプログラムを実行時に、画面左側のスプレーボトルのようなアイコンをタップすると、バッテリー消費がどのくらいかリアルタイムで計測できます。`profile`ボタンをタップすることで、Instrumentsでの計測に移行することもできます。
![スクリーンショット 2021-08-25 16.47.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/bc3f7ab9-f0c2-044f-3938-c38774f5190f.png)

またMetricキットを利用することで、同意したエンドユーザーの実際のアプリ使用状況を解析し、一旦Appleのサーバーに送られた後、XcodeのOrganizerで表示することができます。これにより、よりリアリスティックな情報の収集ができます。Metricキットを利用するためには、下記のようにコードを書きます。

![スクリーンショット 2021-08-25 16.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/fc78d3da-74e4-bc5c-1e93-c66ba918af27.png)

Metricキットを有効化後、Xcodeの オーガナイザー経由で、直近最大16のリリースバージョンの、バッテリー消費効率が見られます。

![スクリーンショット 2021-08-25 16.53.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/3c4eca66-1bba-a8be-7054-2a17e3a284c9.png)

#### アプリの反応の一時停止・スクロールの一時停止

アプリの反応が250ミリを超えて停止するのは良くないと考えられています。 またスクロールが途中で停止したり遅くなったりするのも、ユーザ体験として良くないと考えられます。 Xcodeのオーガナイザーや、 Instrumentsでこちらの指標も見ることができます。
![スクリーンショット 2021-08-25 18.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/f179c124-502e-8915-da3f-b15b74887231.png)
![スクリーンショット 2021-08-25 18.12.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/5653b0d8-fc58-8221-ca0e-7254f244adf8.png)

また、メトリックキットからXcodeのオーガナイザーに送信されるデータは、iOS 15から、24時間周期ではなく即座に送られるようになります。
![スクリーンショット 2021-08-25 18.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/1d36489e-9b07-eb3f-d941-d3697332a40f.png)


もう少し詳細に確認するには、XCテストを利用すると良いでしょう。 スクロールのテストの一例が以下になります。
![スクリーンショット 2021-08-25 18.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/d09650ac-60d1-3fd4-baf8-8be9ed9a9286.png)

カスタムアニメーション に タグづけをしわかりやすくする一例が以下になります。
![スクリーンショット 2021-08-25 18.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/f1ec0793-f792-28d0-957f-09ffdc663c99.png)

#### ディスク書き込み

こちらもインストルメントのファイルアクティビティーテンプレートでディスク書き込み状況を、監視することができます。 パフォーマンスが悪い場合、CoreDataの機能などを用いて、頻繁な書き込みはやめ、ある程度ファイルをまとめてから改めて書き込むようにすると改善することがあります。
![スクリーンショット 2021-08-25 18.26.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/1def7b45-5ac6-c610-9d61-aba0b57b007c.png)

ディスク書き込みに関しても、やはりテストが有効です。書き込みのパフォーマンスのテストの一例が以下になります。
![スクリーンショット 2021-08-26 9.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/35777b1d-97f5-7560-cbf1-7dc600f87b7e.png)

やはり、インストルメントでも指標が表示されます。iOS 15からは改善提案が 自動で表示されることもあります。

![スクリーンショット 2021-08-25 18.31.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/5b229d39-507c-5da8-a241-d24bb6c1e8b1.png)

メトリックキットで計測をしていく場合は、ディスクの書き込みの前後に以下のようなコードを書きましょう。
![スクリーンショット 2021-08-25 18.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/2800948c-ea83-b13d-7251-27012acc5865.png)

#### アプリ起動時間・アプリ終了

アプリの起動時間が長くかかる事は、ユーザ体験を損ないます。また、アプリが突然終了してしまうことも同様です。両方の発生イベントがXcodeのオーガナイザーより閲覧できます。

![スクリーンショット 2021-08-25 18.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/527205b3-9b5a-4190-2270-eb6d14839c63.png)
![スクリーンショット 2021-08-25 18.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/57aee30a-2306-b39f-702a-e42e0fd5c51a.png)

やはりInstrumentsから、アプリを実行しリアルタイムでの状況を確認することも可能です。
![スクリーンショット 2021-08-25 18.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/476a4355-a38d-9af9-deaa-a1fc12906e05.png)

#### メモリー使用率

アプリのメモリ使用率についても、Xcodeのオーガナイザーや、Instrumentsより確認可能です。

![スクリーンショット 2021-08-25 18.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/4ca8ec8e-e744-f92c-a377-d4d84ff497bc.png)
![スクリーンショット 2021-08-25 18.37.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/f05f685b-f9f7-beac-b912-b7f711ce03ed.png)

Metricsを使って、メモリ使用率を上げてしまうような処理の前後に、計測の処理を入れることも可能です。
![スクリーンショット 2021-08-25 18.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/7409e489-5110-63b4-d34a-ddd719275968.png)

#### 総括
以上のような多量のツールを使うことで、アプリのパフォーマンスを継続し、改善点をあぶり出すことが可能です。アップル側でもあるアプリに対してクラッシュを99%なくすことに成功したとのことです。以上にあげたツールを試しに使ってみると良いでしょう。

1. Xcodeのオーガナイザを使って計測データを確認する。
2. Instrumentsを使って計測データを確認する。
3. パフォーマンスチェックのためのXCTestを書いてみる。 
4. MetricKit を組み込み、実際のユーザの使用データを確認する。

### Use the camera for keyboard input in your app
https://developer.apple.com/videos/play/wwdc2021/10276/

IOS 15よりカメラで文字を認識しテキストフィールドなどに入力することができるようになりました。 テキストフィールドなどを長押しすると、ポップアップメニューが出現し、カメラからテキストをインプットできます。
![スクリーンショット 2021-08-26 18.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/65ca8e45-db77-1e56-5e94-d2bae8279305.png)

認識されて文字がポップアップされて出てきますので、好きな部分をドラッグで選択し、入力している様子が以下になります。
![スクリーンショット 2021-08-26 18.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/4c9ad5e2-1c83-77d3-88f4-20ee8250afa7.png)

UITextField, UITextViewの変数である[UITextContentType](https://developer.apple.com/documentation/uikit/uitextcontenttype), [UIKeyboardType](https://developer.apple.com/documentation/uikit/uikeyboardtype) を指定すると、読み取るテキストのタイプをフィルタリングできます。例えば電話番号、住所、 Eメールアドレスなどです。 IOS 15からはフライトナンバー、荷物の追跡番号、 日付が追加されます。
![スクリーンショット 2021-08-26 18.43.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/231d62cd-0cdd-5054-50c2-8b364f804c4b.png)
![スクリーンショット 2021-08-26 18.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/04f72f0c-a8a2-ad15-c055-e1c74f3d3592.png)

これらプロパティーは、xipファイルからでも、コードからでも簡単に設定できます。
![スクリーンショット 2021-08-26 18.44.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/b2ee5faa-b284-2e8f-4729-4a073c677f5d.png)
![スクリーンショット 2021-08-26 18.45.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/da08283e-435d-a3b8-e85b-ea167ff08085.png)

長押ししないとこの機能が使えないのは、少し不便に思えるかもしれません。 少しコードを書くだけで、この機能を含む入力オプションが表示されているツールバーをテキストフィールドの近くに表示することができます。
![スクリーンショット 2021-08-26 18.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/ae9c847c-a190-c961-972a-472983310ff0.png)
![スクリーンショット 2021-08-26 19.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/108e57ca-b561-ca77-4eeb-f07263d1242a.png)

なお[captureTextFromCamera(_:)](https://developer.apple.com/documentation/uikit/uiresponder/3778577-capturetextfromcamera/)を 使う前に、canPerformActionのアクションメソッドを呼んでください。これによりメソッドが実行可能かどうかを判定します。
![スクリーンショット 2021-08-26 18.52.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/38aeccde-12f3-6fa6-cd19-0649152222f4.png)

これらの機能は、neural engineの搭載された2018年以降のiPhoneで利用できるとのことです。また、ユーザーが英語、フランス語、ポルトガル語、イタリア語、ドイツ語、スペイン語、中国語のどれかを[prefferredLanguage](https://developer.apple.com/documentation/foundation/nslocale/1415614-preferredlanguages)に登録している必要があるそうです。

背後では[UIKeyInput](https://developer.apple.com/documentation/uikit/uikeyinput)、[UITextInput](https://developer.apple.com/documentation/uikit/uitextinput), [UITextInputTraits](https://developer.apple.com/documentation/uikit/uitextinputtraits)プロトコルが関わっています。
![スクリーンショット 2021-08-26 18.55.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/c13b66c5-23d9-4458-0c5e-b9dac66eebae.png)


例えばもし、画像の中に含まれる文字をキャプションとして表示するようなイメージビューをカスタムクラスとして作るのであれば、UIKeyInput プロトコルを適合させれば作ることができます。
![スクリーンショット 2021-08-26 18.56.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/c9430e4e-9ab5-5769-8a5c-3a9dbad9e9b2.png)
![スクリーンショット 2021-08-26 18.57.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/eef477dc-2f01-bf2d-cc39-7b83313feb38.png)

### What's new in AVKit
https://developer.apple.com/videos/play/wwdc2021/10290/

AVKitの アップデートについて解説しています。

#### Picture in Picture

動画アプリを再生中に、他のアプリを開いたとき、動画を小さい画面で上に表示し続けると言うpicture in pictureと言う機能を紹介しています。 すなわち、再生ボタンやスキップボタンを押したとき、 また現在どのくらいの時間が経過したかの情報、 ユーザがピンチやスワイプなどをした時などの動画サイズの拡大縮小が起きた時、 動画が停止されたときになります。

![截屏2021-08-26 21.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/1d329a50-a38e-700c-4c36-29a554aa1c61.png)

小さく表示した動画で、何か起きた場合、デリゲートで元の画面に通知を送ることができます。
![截屏2021-08-26 21.15.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/80c6fb38-00e3-1b8c-5f86-51b1d34034d4.png)
![截屏2021-08-26 21.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/fd4b4edf-7a99-6c13-a4ab-31e10cccd267.png)
![截屏2021-08-26 21.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/d2322c6b-68dd-026f-7576-bb0f8298042d.png)
![截屏2021-08-26 21.16.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/e88fc196-2ddd-eac0-e955-e003c2513840.png)



#### Mac 完全フルスクリーン動画

Mac Catalystもしくは通常macOSで、動画を完全フルスクリーンで再生するやり方について解説しています。 ポイントとしては、動画が デスクトップのウインドウとは別のウインドウになるので、一旦デスクトップに戻った場合などは動画のウインドウが消えることになります。その時に備えて動画のインスタンスを変数に入れて強参照で参照しておきましょう。でないと デスクトップに戻った時、動画が消えてしまうことになります。

![截屏2021-08-26 21.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/471a0e7f-94a6-9cd7-e796-5d10f2bfe2fe.png)

### What's new in App Clips
https://developer.apple.com/videos/play/wwdc2021/10012/

アップクリップのアップデートについて解説しています。

なおApp Clipとは、アプリの1部の機能をアプリをダウンロードすることなく手軽に体験できる機能です。 導入されてから少し経ちましたが、様々なApp ClipがApp Storeに見られます。 例えばゲームの一面だけを手軽にプレイできるものや、 マップのアプリなどであるレストランをタップしてオーダーと言うボタンをタップするとオーダー用アプリのApp Clipが開かれそのレストランで注文ができるもの、 駐車場の支払い機能だけをアプリをダウンロードすることなく利用できるもの などです。 また、ティックトックのアプリでは、動画をいくつか手軽に体験できるApp Clipが導入され、再生完了後アプリのダウンロードページに誘導されるようになっています。

- Safariで app clipカードの表示

今まで、Safariや、Safariビューコントローラーにおいて、ウェブページのトップにバナーを表示しApp Clipへ誘導することができました。 ただいくつかボタンをタップする必要があるのでユーザにとっては少し面倒臭いものでした。新機能として、App Clipカードをウェブサイトの真ん中にモーダル表示し、すぐにApp Clipへ誘導できるような機能が追加されました。

ウェブサイトにおいて`app-clip-display=card`タグを追加するだけで追加できます。
![スクリーンショット 2021-08-27 18.24.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/c2ac6129-afe2-9099-1fad-ce99c4c29cf0.png)

アップクリップカードの見た目については、App Storeコネクトで設定することができます。
![スクリーンショット 2021-08-27 18.25.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/1b77d971-053f-1cb6-3aac-f0e8997a7622.png)

- デバッグ起動App Clip

アップクリップに関して、デバッグ起動を提供するものであるかどうかを決めることができます。
![スクリーンショット 2021-08-27 18.25.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/c3b5f5d7-8198-7c4f-2649-a6d86d940d6c.png)

これをデバッグするためには、iPhoneの設定アプリからデベロッパーメニューに進み、Local Experience にチェックを入れます。
![スクリーンショット 2021-08-27 18.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/61002349-cfca-606a-4335-18f61eb947fd.png)

- App Clip Code

IPhoneで読み取り可能な画像などを店頭などに掲示しておき、iPhoneで読み込むことで顧客をApp Clipに誘導することができる機能をApp Clip Codeと呼びます。 NFC対応のものと、そうでないものがあります。
![スクリーンショット 2021-08-27 18.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/38296c13-1960-cb15-90d6-1ede1ff2a4ca.png)

このApp Clipコード用の画像は、App Storeコネクトよりダウンロードすることができますが、自動生成commandlineツールであるApp Clip Code Generator Toolを利用することもできます。

アップクリップコードのベストプラクティスとして、平らな平面に掲示すること、 斜や横ではなくまっすぐに掲示すること、 充分大きな画像にすること、 画像が剥がれたり汚れたりしていないこと、 どのような機能を提供するか簡潔に説明文を入れる事が挙げられています。

### What's new in AppKit
https://developer.apple.com/videos/play/wwdc2021/10054/

他のセッションで述べられていることが 多いため、スルーします。


### What's new in CloudKit
https://developer.apple.com/videos/play/wwdc2021/10086/

クラウドキットのアップデートについて解説しています。

- サーバーとやりとりする際のメソッドが、async/awaitに対応しました。

![截屏2021-08-29 10.40.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/0ce663c5-a93a-3a41-4a85-694cd7ea0f73.png)

- サーバーとやり取りするデータの暗号化及び復号化が非常に簡単にできるようになりました。CKRecordの[encryptedValue](https://developer.apple.com/documentation/cloudkit/ckrecord/3746821-encryptedvalues)変数を使います。
![截屏2021-08-29 11.05.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/38cd3201-191e-897c-e54d-eb776a75e3a2.png)
![截屏2021-08-29 11.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/606f5923-d7d9-1557-0266-c31f7d49cb9d.png)
![截屏2021-08-29 11.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/20e005bb-4996-eb2a-c342-81b41b87ea16.png)

暗号化復号化の利用の前に、CKAccountStatus をチェックする必要があります。iOS 15から新しく追加された[temporaryUnavailable](https://developer.apple.com/documentation/cloudkit/ckaccountstatus/temporarilyunavailable) 言う状態は、ユーザのiCloudアカウントは存在しているが、まだ準備ができていない状態を表します。

- iCloud内のデータ構造について、フォルダの階層構造だけでなく、一箇所にデータを全部置いている構造（Data Zone）についても共有できます。CKShareにZoneのIDを渡し、インスタンス化して利用します。

![截屏2021-08-29 11.15.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/a68c734c-2935-f72f-fb07-16d2c44c9e0e.png)

![截屏2021-08-29 11.16.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/0d22d543-f1d6-8933-48aa-e1926b1fe051.png)

### What's new in Foundation
https://developer.apple.com/videos/play/wwdc2021/10109/

- AttributedString

文章の特定の範囲のみフォントなどを変えていくAttributedString構造体が新たに作られました。key-valueのペアーで、文章のどの範囲にどのフォントを適応していくか定義できます。

- Formatter

日付や数値の整形を行うフォーマッターについてアップデートがありました。日付、月、年、時間の指定などをenumで行う部分が多くなり、誤りがある場合コンパイラが警告してくれる箇所が多くなり安全に使えるようになったという印象です。

- Automatic Grammar Agreement

ローカライズする際に、文字の順番・語系変化をコンパイラ側で自動でやってくれる機能です。

### What's new in SwiftUI
https://developer.apple.com/videos/play/wwdc2021/10018/

SwiftUI のアップデートを紹介しています。

- Better List
![截屏2021-08-30 17.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/f097cb27-6a29-7fd3-5030-827a2951bf37.png)
画像のURLを渡してダウンロードが完了し次第表示すると言うような動作を、モディファイア1つだけで実現できるようになりました。

![截屏2021-08-30 17.52.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/2b0e6fd0-9862-a241-1019-f3b5e9aaabf3.png)
まだダウンロードが完了しない間は、プログレスビューや、何らかのダウンロード中であることを示す画像などをプレイスフォルダとして表示できます。
[asyncimage](https://developer.apple.com/documentation/swiftui/asyncimage)

![截屏2021-08-30 17.53.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/5458e963-8695-fcf1-2958-08bb186fc67f.png)
リストなどを指で下にドラッグし離すと更新が行われると言うリフレッシュの動作も、モディファイア1つで実装できるようになりました。
[refreshable(action:)](https://developer.apple.com/documentation/swiftui/label/refreshable(action:))

![截屏2021-08-30 17.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/4b2353ee-54b0-db04-6df5-4a715cf5fe83.png)
レビューが出現した後に何らかの非同期処理を行いたい場合のための、taskモディファイアが追加されています。 もし この中に書いた非同期処理が完了する前に、このビューが消えた場合は、非同期処理が自動的にキャンセルされます。非常に便利といえます。
[task(priority:_:)](https://developer.apple.com/documentation/swiftui/ellipse/task(priority:_:)/)


![截屏2021-08-30 17.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/2727093b-e47d-c7b5-1dd4-285e84ee18ef.png)
![截屏2021-08-30 17.57.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/28109e41-dd38-ec58-8785-f22ef0545a58.png)
リストのコーディングについて、 要素をレンジで指定する 形式ではなく、$をつけて様子を簡単に識別する書き方が追加されています。 

![截屏2021-08-30 17.59.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/ad4d092d-6658-f9d0-bfef-a86312503a2d.png)
リスト内の各行に対して、スワイプアクションモディファイアが追加されました。その行を左や右に指でスワイプしたときの動作を簡潔に記述できます。
[swipeactions(edge:allowsfullswipe:content:)](https://developer.apple.com/documentation/swiftui/view/swipeactions(edge:allowsfullswipe:content:))

![截屏2021-08-30 18.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/16c92a8b-c59b-ae5d-27b0-941fa1de5c1e.png)
MacOS 12からの話となりますが、リストの背景色を白黒交互に簡単にできるモディファイアが追加されました。[inset(alternatesrowbackgrounds:)](https://developer.apple.com/documentation/swiftui/insetliststyle/inset(alternatesrowbackgrounds:))

- Beyond Lists
![截屏2021-08-30 18.02.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/d978c788-bd11-6e59-b000-d2e6cb6123fa.png)
![截屏2021-09-01 17.26.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/07a7723d-3998-f873-08fd-1c20a2eb20f6.png)
MacOS 12の話になりますが、複数のカラムを持つテーブルが追加されました。各カラムのタイトル及び具体的な値を簡単に記述できます。
[table](https://developer.apple.com/documentation/swiftui/table)

![截屏2021-09-01 17.28.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/14a6b465-10d0-5889-72c5-c7bcc0d0162a.png)
[keypathcomparator](https://developer.apple.com/documentation/foundation/keypathcomparator?changes=_9) を指定することで、テーブルをどの値でソートするかを指定できます。

![截屏2021-09-01 17.31.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/8c2d56a2-f176-fcc3-30e3-92f9d3553317.png)
searchable モディファイアを追加するだけで、検索バーを追加できるようになりました。
[searchable(text:placement:)](https://developer.apple.com/documentation/swiftui/form/searchable(text:placement:))


![截屏2021-09-01 17.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/b0f2d4fc-50ce-316d-7865-addd7aa0abff.png)
![截屏2021-09-01 17.37.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/02b2d383-0eb9-e982-21b5-caa746d1ba10.png)

SFSymbolについて、何も指定しない場合、iOSのTabViewの文脈では自動的に`fill`が選択されるようになっています。これはInterface Guideline推奨の設定 とのことです。

![截屏2021-09-01 17.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/bbfd8716-70d8-b021-bdfa-d3a8ccdfd73b.png)
2Dグラフィックの描画ができる[Canvas](https://developer.apple.com/documentation/swiftui/canvas) がSwiftUIにおいて導入されました。

![截屏2021-09-01 17.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/bb39dde6-c5a0-9cde-c164-a009d6d31485.png)
以前からある[draggesture](https://developer.apple.com/documentation/swiftui/draggesture)と組み合わせれば、指で擦った部分にグラフィックがフォーカスしていくような表現も可能です。

![截屏2021-09-01 17.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/ad318ee9-e21d-bdba-d66e-e9214aa01854.png)

何らかの時間の経過により、描画や処理等を行える[timelineview](https://developer.apple.com/documentation/swiftui/timelineview) も、実装されました。

![截屏2021-09-01 17.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/8039ec72-0a86-92b1-c1cc-3b173631c49d.png)
何らかのビューの背景にぼかしがかかったようなエフェクトをかけられる[material](https://developer.apple.com/documentation/swiftui/material)が 追加されました。写真の上にラベルを表示したい場合などが主な用途かと思われます。

- Text and Keyboard

![截屏2021-09-01 17.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/df792e3d-b5fc-36fd-817b-088ff90b55df.png)
![截屏2021-09-01 17.52.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/c07a2fbb-c1ac-1c2a-d537-1879fc4fd6b6.png)
文字サイズを指定することで ダイナミックタイプサイズに対応できるモディファイア[dynamictypesize](https://developer.apple.com/documentation/swiftui/dynamictypesize)が登場しました。

![截屏2021-09-01 17.53.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/57d8a265-667d-e984-52e0-c08a08913eae.png)
ビュー上のテキストをユーザが選択しコピーペーストできるかの設定を1行でできる新しいモディファイアが追加されました。[textselection(_:)](https://developer.apple.com/documentation/swiftui/view/textselection(_:))

![截屏2021-09-01 19.57.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/2e72c3a0-2235-cdd1-0c48-03f8165e47b5.png)
テキストフィールドなので、値が送信などをされたときに呼ばれるモディファイアが追加されました。[onsubmit(of:_:)](https://developer.apple.com/documentation/swiftui/form/onsubmit(of:_:))

![截屏2021-09-01 19.59.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/a85f77ca-01e3-303e-7497-b89bdedb6bfb.png)
送信の決定をするボタンの上に表示される文字に関する新しいモディファイアもついでに追加されています。[submitlabel](https://developer.apple.com/documentation/swiftui/submitlabel)

![截屏2021-09-01 20.02.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/dd09a269-afed-42f5-d495-e67d9d232bed.png)

プロパティーラッパーとして、FocusStateが追加されました。Hashable プロトコルに適合した値の前につけることができるようです。[focused(_:equals:)](https://developer.apple.com/documentation/swiftui/view/focused(_:equals:))モディファイアと ともに用いて、どのUI部品にフォーカスを当てるかをプログラムから簡潔に記述できます。 例えば、ログインボタンを押して、まだユーザ名が入力されていない場合はユーザ名のテキストフィールドにフォーカスを当てるようにするなどのシチュエーションで利用できます。

- More buttons
ボタンスタイルの1つとして、[borderdStyle](https://developer.apple.com/documentation/swiftui/primitivebuttonstyle/bordered)が追加されました。角丸のような デザインのボタンとなります。

![截屏2021-09-01 20.04.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/375e088a-6f0e-6ba9-dcb7-c9a8eb35af76.png)

`controlSize`と`controlProminence`というモディファイアが追加されました・・・が、 アップルデベロッパー公式の解説ページが削除されているのですがこれは何なんでしょうか?
https://developer.apple.com/documentation/musickit/artworkimage/controlprominence(_:)
https://developer.apple.com/documentation/swiftui/view/controlsize(_:)

![截屏2021-09-01 20.07.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/da0fbac8-77b5-f39c-02b7-1a091103e6b2.png)

[confirmationdialog](https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:presenting:actions:)-9ibgk)が追加されました。ボタンなどを押した後の確認ダイアログがあるかと思いますが、 それを簡単に出せるようになります。
![截屏2021-09-01 20.10.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/5fb70a00-91fa-8a29-d387-2bd6a53a85e7.png)
![截屏2021-09-01 20.10.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/7cc09657-b513-7f0c-6c71-448d0090485b.png)

[menu](https://developer.apple.com/documentation/swiftui/menu)に[primaryaction](https://developer.apple.com/documentation/swiftui/menu/init(content:label:primaryaction:)) が、追加されました。 プライマリーアクションとは、メニューをタップやクリックなどメインとなる動作をした際にまず行われる動作となります。長押しなどサブの動作をした際には、メニューが開かれます。
![截屏2021-09-01 20.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/e8f1b65e-b0f8-3a03-c76a-f5e87bc7a0e9.png)


コントロールグループと言うものが追加されました。相互に関連する役割を持つようなボタンなどを複数並べるメニューとなります。[controlgroup](https://developer.apple.com/documentation/swiftui/controlgroup)

 例えば戻るボタンと、進むボタンを含むメニューなどです。
![截屏2021-09-01 20.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/aed03e17-7990-77d8-80b5-940d63f98006.png)
![截屏2021-09-01 20.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/d231f0b8-cd34-5583-4470-64c3588b71cc.png)

### What's new in UIKit
https://developer.apple.com/videos/play/wwdc2021/10059/

![截屏2021-09-04 16.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/007508a8-4328-e392-bdc5-ad7c4ac2ade9.png)
画面の半分だけを覆うハーフモーダル表示が追加されました。

![截屏2021-09-06 09.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/77cb6ad1-d7f7-9195-2558-7592523113f4.png)
iOS14から導入された[uicolorpickerviewcontroller](https://developer.apple.com/documentation/uikit/uicolorpickerviewcontroller)に継続的選択（色をドラッグし続けて連続的に色を取得できる）機能が追加されています。


### What’s new in Game Center: Widgets, friends, and multiplayer improvements
https://developer.apple.com/videos/play/wwdc2021/10066/

Game Center での、複数人 のプレイヤーのマッチング、対戦、ランキング、実績などのアップデートについて紹介しています。

### Your guide to keyboard layout
https://developer.apple.com/videos/play/wwdc2021/10259/

- Layoute Guide

[keyboardlayoutguide](https://developer.apple.com/documentation/uikit/uiview/3752221-keyboardlayoutguide/) と言うものが導入されました。キーボードの出し入れの際のレイアウトの調整が、 今まではノーティフィケーションの購読などいろいろやらなければなりませんでしたが、1行だけで簡単に書けるようになりました。

```
view.keyboardLayoutGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true
```

- Integrating to the keyboard, Types of keyboards

キーボードが下から入っている状態だけではなく、画面の自由な位置に置かれていたり、ドラックしている指の位置を 追いかけているような状態であってもkeyboardlayoutguideに したがってレイアウトをしたい場合は、
[followsundockedkeyboard](https://developer.apple.com/documentation/uikit/uikeyboardlayoutguide/3752189-followsundockedkeyboard?changes=l_8)をtrue に設定します。

この時、キーボードが画面の4角のうちのどれかに接近した時のみ有効化したい制約がある場合は、[setConstraints(_:activeWhenNearEdge:)](https://developer.apple.com/documentation/uikit/uitrackinglayoutguide/3752220-setconstraints)が 使用できます。逆にキーボードが画面の4角のどれかから離れた時のみ有効化したい制約がある場合は、[setConstraints(_:activeWhenAwayFrom:)](https://developer.apple.com/documentation/uikit/uitrackinglayoutguide/3752219-setconstraints) メソッドが利用できます。

これにより、キーボードの画面の自由な位置に動かしている場合、特定の画面の端に近づいたりまたは離れたりした場合にのみ有効となるような制約を設定することができます。 例えばキーボードが左端にある場合は、画面の主要コンテンツを右側に持ってくるとか、逆にキーボードが右端にある場合は画面の主要コンテンツを左側に持ってくる等の利用方法が考えられます。 なお、キーボードが充分大きく左右両端に接している場合は、左右両端に対して`Away`と 認識されるようです。 左右両端に対して`Near` となるわけではありません。 

その他特殊な状況に対応するため、実際に実装する場合は以下の公式記事を見ると良いでしょう。[Adjusting Your Layout with Keyboard Layout Guide](https://developer.apple.com/documentation/uikit/keyboards_and_input/adjusting_your_layout_with_keyboard_layout_guide)

### Accessibility by design: An Apple Watch for everyone
https://developer.apple.com/videos/play/wwdc2021/10308/

Apple Watchに関して、手を握る動作(クレンチ)や、指を閉じる動作(ピンチ)、及びそれらの二連続の動作(ダブルクレンチ、ダブルピンチ)という非常に繊細な動作や、その他 apple Watchに備わっているジャイロセンサーなどを用いて、ジェスチャーのみでApple Watchを操作すると言う展望が紹介されています。ただいつから使用できるようになるのかは特に言われていません。

### Adopt Quick Note
https://developer.apple.com/videos/play/wwdc2021/10264/

クイックノートとはiPadOSで、どのアプリを使用中でも表示できるメモ帳のような新機能です。ウェブサイトや地図上の位置などを添付でき、自由にメモ書き できます。

特定のウェブサイトや、特定のアプリをクイックノート上に紐付けした場合、後でそのウェブサイトやアプリに戻ってくると、クイックノートが画面右下の端にポップアップし、メモ書きがあることをリマインドしてくれます。 これは既存の[nsuseractivity](https://developer.apple.com/documentation/foundation/nsuseractivity) を使って実現されます。

### Analyze HTTP traffic in Instruments
https://developer.apple.com/videos/play/wwdc2021/10212/

Instrumentsを使って、アプリの行う通信トラフィックの中身をチェックする方法紹介しています。サードパーティーのツールなどで今までも通信トラフィックを見ることができたと思いますが、インストルメンツはアップルのAPIと深く連携しているので、コード上で URLセッションなどにすかした説明文等がインスツルメンツに表示され見やすくなるほか、通信が時間経過でどのように変化していくかと言う点もチェックできるため比較的見やすいかと思います。Xcode > Profile からインストルメンツを起動できますが、リリース設定で監視を行うよう設定すれば、本番環境でどのように通信が行われるかもチェックできます。

### Build dynamic iOS apps with the Create ML framework
https://developer.apple.com/videos/play/wwdc2021/10037/

Create ML の使い方を解説しています。
- Image Classifier, Text Classifier, Hand Pose Classifier, Hand Action Classifier, Sound Classifier

画像、テキスト、音声、手によるジェスチャーなどを判別するAI機能です。

- Style Transfer
ある画像の「質感」を解析し、別の画像をその画像の質感に合わせた形に変換すると言う機能です。

- Tabular Classifiers

行と列で表されたテーブル上のデータを元にして、何らかの判別・区分わけを行うAI機能を指します。

- Tabular Regressors

行と列で表されたテーブル上のデータを元にして、 何らかの変数を結果として出力するAI機能を指します。 例えばレストランで注文するアプリにおいてどのような注文し、いつ注文し、過去にはどのような注文したかなどのデータをもとに、そのユーザの好みなどをはじき出すと言う例が紹介されています。

### Build interfaces with style
https://developer.apple.com/videos/play/wwdc2021/10196/

インターフェースビルダーのアップデートについて解説しています。

新規に追加されたポップアップメニューが出るボタンですが、こちらはインターフェースビルダーからドラッグアンドドロップで簡単に追加できるようになっています。 MacOSでは、 カーソルをボタンの上に合わせた場合、説明文が表示されますがそちらも設定できます。
![截屏2021-09-09 09.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/6718ec1b-f563-11af-1677-bdc44eb50134.png)


アクセシビリティーのチェック用のボタンが用意されており、ダイナミックタイプ と言う、文字のフォントの大きさを調整できる機能を使った際に、きちんとレイアウトが維持されるかの確認機能も追加されています。
![截屏2021-09-09 20.20.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/3699dcb2-42aa-fca0-1153-c4e00317328c.png)

### Capture and process ProRAW images
https://developer.apple.com/wwdc21/sessions/

[ProRAW](https://support.apple.com/en-us/HT211965) を利用した写真をアプリ内で扱う際のやり方について解説しています。まずRAWとは、 デジタルカメラなどで撮った写真を画像化する前の生のデータのことをいいます。ProRAW とは、アップルが名付けたものであって、iPhone 12およびiPhone 12Proで利用できる、1枚の写真を撮っただけであっても内部的には複数の写真を撮り、それらのローデータを組み合わせておくことで、 後からより柔軟な写真の調整をできるようにしたものをいいます。

### Customize and resize sheets in UIKit
https://developer.apple.com/videos/play/wwdc2021/10063/

モーダル表示したビューは画面いっぱいに表示されるのが今までの挙動でしたが、画面の半分の高さだけ表示されるオプションが追加されました。

[sheetpresentationcontroller](https://developer.apple.com/documentation/uikit/uiviewcontroller/3850571-sheetpresentationcontroller)の[detents](https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/3801903-detents)に`medium`を含めるだけです。`large`も一緒に含めれば、 ユーザがドラッグすることで、画面いっぱいにも、画面半分にもできるモーダル表示となります。detent とは、機械の戻り止めという意味です。

![截屏2021-09-09 21.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/5f84bf97-c389-92a0-7716-b2dd4294e5ed.png)

デフォルトでは、モーダル表示されたスクロールをスクロールすると、`medium` `large`の高さが切り替わってしまいます。これを防ぎ単純にスクロールビュー内のコンテンツをスクロールするだけの場合は以下の[prefersscrollingexpandswhenscrol](https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/3801907-prefersscrollingexpandswhenscrol?changes=__4&language=objc)をfalseにします。

`medium` `large` は、プログラムから変えることができます。
[selecteddetentidentifier](https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/3801908-selecteddetentidentifier)を変えるだけです。変化をアニメーション表示するには、以下を用います。
[animatechanges](https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/3801901-animatechanges?changes=__4)
![截屏2021-09-09 21.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/94dcf3d9-f1af-4b56-7429-a850b2adfbac.png)

ハーフモーダル表示をした際、下の画面が薄暗くならないようにするためには「smallestUndimmedDetentidentIdentifier」プロパティーを用います。
![截屏2021-09-09 21.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/ec7f1b46-54f4-075f-e72e-93e0841463a9.png)
![截屏2021-09-09 21.44.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/fb9be620-1ca0-e99d-955a-13537734f3c2.png)

またiPhone本体を横にしたときのモーダル表示は、全画面のみでしたが、少し小さいサイズのモーダル表示も実装されました。

![截屏2021-09-09 21.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/e6640f8f-8b6e-00fe-debf-ae15006d99d8.png)

![截屏2021-09-09 21.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/0a44ab36-3f29-4850-6a0d-311e6dd0ed7d.png)

### Detect people, faces, and poses using Vision
https://developer.apple.com/wwdc21/sessions/

Vision フレームワークを用いて、画像の中の人物、 顔やポーズを識別する方法を解説しています。

### Diagnose Power and Performance regressions in your app
https://developer.apple.com/videos/play/wwdc2021/10087/

Xcode Organizer を開くと、リグレッション(重大なパフォーマンス上の問題)が表示されていますので、そちらを定期的に開くようにしましょう。 またXcode 13からは、どのように問題を解決したらいいかの提案の文章等が表示されるようになっていますので、より問題を特定しやすいといえます。

問題を修正したら、本当に パフォーマンスが改善されているかどうかをインスツルメンツを使って計測すると良いでしょう。

パフォーマンス分析用のパイプラインを組んでいる場合は、そこにApp StoreコネクトAPIを記載して、情報を集めると良いでしょう。

### Discover account-driven User Enrollment
https://developer.apple.com/videos/play/wwdc2021/10136/

BYOD(Bring Your Own Device) と言われる、学校や企業で自分のデバイスを持ってきて組織のMDM でコントロールする方法を解説しています。

### Discoverable design
https://developer.apple.com/videos/play/wwdc2021/10126/

ユーザがアプリの中で何がどこにあるかを容易に発見できるようなデザインをするにはどうすればいいかを解説しています。

#### 機能の重要度に応じて優先順位をつける
重要な機能ほど、タブバーなど1番目立つところにつけ、 即座にその機能にアクセスできると良いでしょう。あまり重要でない機能はサイドメニューないなど1カ所にまとめてしまって、 ボタンを押して画面遷移しないとその機能にたどり着けないようになっていても良いでしょう。

例として挙げられているトーストアプリでは、レシピの検索及び自分のレシピと言う最重要機能をタブバーに配置しています。
![截屏2021-09-15 21.07.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/914994f3-9cad-0279-7a0d-085490ab1e1a.png)

次に重要な検索機能や、写真読み取り機能は各ページの一番上に配置されています。
![截屏2021-09-15 21.07.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/8ea8e6eb-14e7-b4a7-eb7e-30c64656ca5f.png)
![截屏2021-09-15 21.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/92d4c1a8-178d-910d-ebc3-3e61bdd2dbc6.png)

その他の機能は重要度が低いため、ボタンを押してメニューを開いて初めて見れるようになっています。
![截屏2021-09-15 21.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/869f3f13-2f99-f1b0-24cc-1b7f8033c1da.png)

#### どのような操作をすれば良いのかについて視覚的なヒントを表示する

ユーザがアプリのある操作方法をどのようにして知りうるかというと、以下の3つしかありません。

- その操作が他のiOSアプリやソフトウェアにも広く共通するような操作であり、すでに知っているから
- その操作が現実世界の操作に似ているようなジェスチャーであり、直感的にわかるから
- アプリ上で画像や文字などで明示的に説明しているから

逆に言えば、上2つの要因によりわからないようなものであれば、アプリ内で画像や文字を使って明示的に説明しない限り、ユーザはどうやって操作したらいいかわからないと言うことになります。

例えば以下のような、新聞紙と、本のアイコンを表示しただけでは一体どのような機能なのかはわからないと思います。 したがって文字で説明を追加しないとユーザはわからないでしょう。
![截屏2021-09-15 21.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/04aa40db-dbdf-c539-d909-5047813703e7.png)

以下のように、カメラマークのアイコンを表示しただけでは必ずしもどのような機能かわからないです。カメラを使った機能には写真撮影など他の機能もあるからです。そのため、新しいレシピを追加する機能であることを明示するため、NEWと言う文字をここでは追加しています。
![截屏2021-09-15 21.15.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/37ec81bd-145a-955e-f6d1-670b36f5735e.png)

また、ユーザが自由に何かを入力しないといけないような場面においては、何もヒントがない場合、ユーザは何を入力したらいいのかわからなくなってしまうと言う問題があります。この問題を解消するため、ここでは検索バーにどのような ワードを入力したらいいのかを例として検索バーのプレースホルダーで表示しています。これによりユーザは材料名などを検索バーに入力すれば良いのだということが、ここではわかります。
![截屏2021-09-15 21.16.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/4dba699f-4fd2-2f6d-e2d6-24a06a61b23c.png)

アニメーション等の画面効果を用いるのも有効です。以下の例では、カメラにより、何も識別できていないときは点線で端の輪郭を表示しています。 パンを認識した時は 輪郭の線を実線にする・色を変えるなどして、どのタイミングで写真を撮ったらいいのかをユーザにわかるようにしています。
![截屏2021-09-15 21.17.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/3b5c1239-121a-6214-a510-32e9f58dc8d3.png)
![截屏2021-09-15 21.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/d3cd0c3b-1902-5553-4a16-dcb8ef2da4ab.png)

#### ジェスチャー動作についてのヒントを提供する
基本、タップ、スワイプ、ロングプレス、ピンチ、指の回転といったよく知られているジェスチャーを使うようにしましょう。それ以外のオリジナルのジェスチャーを作り出すと、詳細な説明なしにはどうしたら良いのかユーザには分かりません。

それらの基本的のジェスチャーですが、文脈によっては別の意味を持つこともあるため、注意が必要です。 例えば、ダブルタップをしたときは、「いいね！」 表すジェスチャーである場合もありますし、画像のズームをするためのジェスチャーである場合もあります。 そのため特定のジェスチャーをしないといけないと言うような設計はやめた方が良いでしょう。ジェスチャーはあくまでショートカットとして設定するのが良いです。

また、どのようなジェスチャーが可能なのかについてもやはり視覚的なヒントを提示するようにしましょう。

例えば前の画面にジェスチャーで戻ることが可能なのであれば、戻るボタンも明示的につけておく ことが考えられます。 

また、左右へのスワイプで別のアイテムを表示することができるのであれば、別のアイテムの端っこを画面左右端にわずかに表示されるようにしておき、左右にスワイプして移動することができると言うヒントを与えておくと良いです。

#### 表示情報の整理

何十といった要素がある場合にそれを何の整理もなく一気に画面に表示するのではなく、いくつかのテーマごとにセクションに分けて表示するなどして、ユーザが発見しやすいようにしましょう。 ユーザのタップの履歴などから好みを分析し、最適と思われるものをユーザに合わせて表示するなどの処理も有効です。


#### ユーザのコントロールを促進する


あるアイテムに見たアイテムをそのユーザ向けには多く表示すると言うようにする場合、どのようなボタンを長が問題になります。ハートマークのボタンであると単にお気に入りに登録するであるとかその程度のことしかユーザは想定しないため 適切とは言えません。

アップルのヒューマンインターフェイスガイドラインによると、このような場合は親指を上げたサムズアップのボタンと親指を下げたサムズダウンのボタンを2つ表示するのが良いとされています。 またここでは、ボタンを押した場合、その商品と似た商品をもっと表示するようになると言う旨を明確に文章で表示しています。
![截屏2021-09-15 22.07.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/386bab0a-74c1-a020-83c1-e19c1810b819.png)

何らかのフィードバックを返す際も、 なぜそのフィードバックを返したかの理由を付け足すようにしています。
![截屏2021-09-15 22.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/df22fde7-5fc4-30a0-f95c-844d15ad7deb.png)

また、あるアイテムをサジェスト表示するようになったといっても、そのようなアイテムばかりずっと表示されるとしたらあまりよろしくないユーザ体験となるでしょう。そういうわけでサジェスト表示に対して、ユーザが明示的に指示を与えたり、編集できたりするようにボタンを設け、ユーザがコントロールできる機会を増やしています。
![截屏2021-09-15 22.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/d6215eb5-715f-94a9-dc36-2e43a75300e4.png)
![截屏2021-09-15 22.26.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392332/94f8394f-aeb8-4dba-9285-febf5ab716e8.png)

何が適切なコントロールなのかはアプリの種類や、ユーザ層などによっても異なってくるので、いちどリリースした後もどのようなユーザコントロールが適切なのか絶えず改善を繰り返していくと良いでしょう。