fumiya sakai presents insights from WWDC21, focusing on updates to UIKit and SwiftUI, including new features and improvements for app UI implementation. He discusses his work on UI recipe books and shares practical tips, emphasizing the importance of design and interaction in app usability. The presentation highlights a variety of topics, including discoverable design principles and features like async/await for improved asynchronous programming.

1. UI実装に関するセッションを
簡単ながら振り返ってみる（仮）
Mobile Act ONLINE #5 ~WWDC21を振り返る~
2021/06/30
Fumiya Sakai

2. 自己紹介
・Fumiya Sakai
・Freelance App Engineer
アカウント:
・Twitter: https://twitter.com/fumiyasac
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
発表者:
・Born on September 21, 1984
これまでの歩み:
Web Designer
2008 ~ 2010
Web Engineer
2012 ~ 2016
App Engineer
2017 ~ Now
iOS / Android / sometimes Flutter

3. iOSのUI実装本を執筆しています！
少しの工夫で実現できるTIPS集 ライブラリ表現の活用集
書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。

4. 過去に技術書典8で電子版だけ頒布した書籍紹介
Vol.1及びVol.2に頒布したものの中で書籍に載せきれなかったものを紹介
第1章: メディアアプリ型のUI
第2章: 構造が複雑な写真表示UI
記事一覧を無限スクロールする様な形のアプリ
UIを一覧/詳細表示を簡素化した実装を紹介。
現在はBoothにて販売中です！ https://booth.pm/ja/items/1835468
¥1,000 -
iOSアプリ開発「UI実装であると嬉しいレシピブック まかない編」
サンプルコード: https://github.com/fumiyasac/meals_ios_ui_recipe_showcase
第3章: Combine + UICollectionViewCompositionalLayout
タイル状のフォトギャラリーや一覧表示型のア
プリUIでライブラリを活用した実装を紹介。
実務でも利用＆考察したもの
特に第1章と第2章の内容に関し
ては、実際に相談されたり、実
装アイデアとして活用する機会
があったものになります。
全てUIKitを利用

5. 新たに技術書典9で電子版だけ頒布した書籍紹介
表現や動きが特徴的でユーザーにもほんの少し遊び心を与える様なUI実装を紹介
現在はBoothにて販売中です！ https://booth.pm/ja/items/2360379
¥1,000 -
iOSアプリ開発「UI実装であると嬉しいレシピブック おもしろ編」
サンプルコード: https://github.com/fumiyasac/meals_2nd_ios_ui_recipe_showcase
実務導入前の検証段階
若干一癖がありそう、ぱっと見
だと実装の方針が立ちにくい感
じに見受けられそうなUI実装や
構造に関して考察しました。
UIKit & SwiftUIを利用
第1章: 面白い表現のフォトギャラリーUI
第2章: 画面ロック機能を利用したUI
UICollectionViewを活用したユニークなレイア
ウト表現と画面遷移カスタマイズ実装を紹介。
第3章: SwiftUI + OSS Libraryの活用
SceneDelegateの機能や端末認証を利用した画
面ロック機能を盛り込んだ実装を紹介。

6. 今回の発表でお話すること
WWDC21のセッション内で個人的に気になったトピックスを簡単にまとめてみた
今回はほんのさわりだけのご紹介となってしまいますが、個人的に気になったセッションをご紹介できればと思います。
1. UIKit / SwiftUIに関する変更点に関するセッション：
UIKitやSwiftUI関連で新規に追加された部分を簡単ではありますが、いくつかご紹介ができればと思います。
（今回はおおまかではありますが大きな変更点について気になった部分をみていく感じを予定しています）
2. UIKit / SwiftUIに付随する個人的に気になったセッション：
UI実装にも関わってきうる部分や大きな変更点ではないけれども、既存実装から大幅に少し変わって来そうな気がする部分や機
能改善を感じた部分についてご紹介できればと思います。
3. UIデザインやインタラクションに対する考え方に関するセッション：
アプリのUI実装やデザインに関する考え方やインタラクション等に関する部分をご紹介している「Discoverable design」という
セッションに関するご紹介を簡単にできればと思います。
個人的に試してみたいという観点で独断と偏見で選びました😓

7. (1) UIKit / SwiftUIに関する変更点に関するセッション

8. SwiftUIに関する変更点に関するセッション
便利なModifierの追加やこれまでに欲しかった機能が追加されている
refs: https://developer.apple.com/videos/play/wwdc2021/10126/
参考: https://koogawa.hateblo.jp/entry/2021/06/10/131424
URLから画像を読み込むAsyncImage(url: photo.url)
refreshable (Pull To Refresh)等のListに関する便
利なModifierの追加
-.refreshable (Pull To Refresh)
-.task
- Separatorの変更
- swipeAction
- listStyleの設定
Table / Symbols / Canvas / TimelineView …
デベロッパーに嬉しいUpdateが沢山ある
新しくできる事や従来欲しかった機能が追加された印象
POINT

9. UIKitに関する変更点に関するセッション
UIButtonやUIMenuに関する変更をはじめその他細かな部分でも改善が多かった
refs: https://developer.apple.com/videos/play/wwdc2021/10059/
UIButton / UIMenu に関する大幅なアップデート
- UIButtonConfiguration
- Submenu
- Location Button
こちらもSwiftUI同様に変更が沢山あった
こちらも思った以上にアップデートは多かった印象
POINT
UIColor enhancement
SFSymbols enhancement
UIBarAppearance
Improvement DiffableDatasource
Image Display Preperation …

10. (2) UIKit / SwiftUIに付随する個人的に気になったセッション

11. InterfaceBuilderの改善 (UIButton / Accessibility)
Build interfaces with style
refs: https://developer.apple.com/videos/play/wwdc2021/10196/
Xcodeに関するUpdate解説
iOS15からのButtonStyleは、IB上で設定可能。
PICKUP Accessibilityに関する設定
PICKUP
DynamicTypeに関する設定の例をデモしていました。
InterfaceBuilderやXcodeも機能改善がなされている

12. Keyboard関連処理に関するトピック
Your guide to keyboard layout
refs: https://developer.apple.com/videos/play/wwdc2021/10259/
これまでのキーボード処理が下記の1行になったのは地味に嬉しい部分
PICKUP
iPadに関連するキーボード処理が充実している印象
従来はNotificationの内容からframe値や
animation秒数等を取得した上でAnimation
処理やOffset値の調整が必要だった部分
view.keyboardLayoutGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true

13. Apple純正のハーフモーダルが実装できる
Customize and resize sheets in UIKit
refs: https://developer.apple.com/videos/play/wwdc2021/10063/
これまではライブラリを利用する等少し骨が折れる所
UISheetPresentationController
PICKUP
スクロール変化量に合わせた処理やLandscape時の見た目、角丸やグラバー部分等のカスタマイズ等も可能。

14. ライブラリを利用した実装をする場合の選択肢
(補足)iOS14以前で類似したハーフモーダルを実現する場合の参考ライブラリ
UIKitで実装する場合に利用するライブラリの例
PanModal: https://github.com/slackhq/PanModal FloatingPanel: https://github.com/scenee/FloatingPanel
PICKUP より詳細な調節が必要な場合はこちらかな…

15. async/awaitとAPI非同期通信処理
Use async/await with URLSession
refs: https://developer.apple.com/videos/play/wwdc2021/10095/
async/await & Combineを使った形になっていく？
func data(from url: URL) async throws -> (Data, URLResponse)
func data(for request: URLRequest) async throws -> (Data, URLResponse)
Data
func download(from url: URL) async throws -> (URL, URLResponse)
func download(for request: URLRequest) async throws -> (URL, URLResponse)
func download(resumeFrom resumeData: Data) async throws -> (URL, URLResponse)
Download
func upload(for request: URLRequest, from data: Data) async throws -> (Data, URLResponse)
func upload(for request: URLRequest, fromFile url: URL) async throws -> (Data, URLResponse)
Upload
URLSessionに関する部分もasync/awaitで大きく変わりそうな予感
PICKUP
データの取得・アップロード・ダウンロードに関する処理でasync/awaitが前提としているものが加わった

16. ライブラリを利用した実装をする場合の選択肢
(補足)iOS14以前でasync/await風味の処理をする場合の参考ライブラリ
JavaScriptやNode.jsでよく見かけるPromiseに近い書き方
PromiseKit: https://github.com/mxcl/PromiseKit Hydra: https://github.com/malcommac/Hydra
PICKUP

17. AttributedStringのMarkdownサポート
iOS15ではMarkdownが標準でサポートがされる様になった（SwiftUIでも同様）
これまでの開発を通してMarkdownが使えたらな〜と感じる局面も何度か出くわしてきた。
SwiftyMarkdown:
https://github.com/SimonFairbairn/SwiftyMarkdown
PICKUP
これまではMarkdownの取り扱いについてもライブ
ラリを利用する選択肢が多かった様に思います。
どこまで調節できるかは要調査！

18. (3) UIデザインやインタラクションに対する考え方に関するセッション

19. iOSのアプリUI実装を改めて復習できる良い機会
Discoverable design
使いやすいアプリを考えていくためのポイントや事例がとても盛り込まれているセッション：
新機能紹介という観点からは少し外れてしまいますが、改めてUI実装に関する考え方を学べる様なセッションでした。
Human Interface Guidelineとも合わせながら見ていくと更に効果がありそう。
refs: https://developer.apple.com/videos/play/wwdc2021/10126/
見つけやすいという観点からの望ましい例・望ましくない例の解説
PICKUP

20. Discoverable designに関する5つのポイント
特別ではないけれども大切にしたい視点
1. Prioritize important features (大事な部分に優先順位をつける)：
2. Provide visual cues （ビジュアル面での手がかりを与えてあげる）：
3. Hint as gestures （ジェスチャーでヒントを与える）：
4. Organize by behavior （行動に合わせた整理）：
5. Convay a sense of control（コントロール感を伝える）：
refs: https://developer.apple.com/videos/play/wwdc2021/10126/
Toastyというサンプルアプリの
事例を元に解説していました。
Gesture Recogniizer / Transition / Interaction の上手な活用
このアプリは何をするためのものなのか？をしっかり考える
ビジュアルだけでは伝わりにくい部分に情報を補う
見つけやすい画面設計を形にする
明示的または暗黙的なフィードバックを与える
UI実装を考えていく上での基本的な部分の復習に近い

21. まとめ（感想）
今年は特に手を動かして試してみたくなるトピックが多かった！
1. UIKit/SwiftUIに関するアップデートは想像以上に充実している印象：
複雑なものだと自前での実装難易度が上がるハーフモーダルの標準実装やUIButton/UIMenuといった頻繁にUI実装で利用する部分
に嬉しい改善が加えられている。SwiftUIについてもPullToRefreshやSwipeMenuの様な部分が追加されていました。
2. 新しく登場したasync/awaitに関する部分や既存のAtrributedTextやSFSymbols等も個人的に注目している部分：
async/awaitをはじめとする便利になる＆結構大きな変更の他にも嬉しくなる改善が多く、特にAttributedTextのMarkdownのサ
ポートやSFSymbolsに関するアップデート、細かい所ではKeyboardに関する改善等も個人的には気になる部分でした。
他にもデベロッパーが望んでいた？機能が結構反映されている印象 ＆ 現時点で触り切れていないのが個人的に悔しい。
3. UI実装をしていく中でのAnimationやInteraction部分には引き続き拘っていきたいという思い：
デザイナーと一緒にUI実装を考えたりコラボレーションをしながら考えていく際には「Discoverable design」で紹介されている
内容や注意点に配慮しながら進めていくと、とても良さそうに思いました。

22. Thank you for listening !
本来であればiOS15からの新機能を用いたサンプル実装とご一緒に紹介できれ
ば尚良かったのですが、今回は間に合わず申し訳ありません😢
後からの追っかけにはなってしまいますが、近いうちに色々UI実装にまつわる
部分もさらに試してご提供できればと考えております💦