UI実装に関するセッションを簡単ながら振り返ってみる（仮）

UI実装に関するセッションを

簡単ながら振り返ってみる（仮）
Mobile Act ONLINE #5 ~WWDC21を振り返る~
2021/06/30
Fumiya Sakai

自己紹介
・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

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

過去に技術書典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を利用

新たに技術書典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の機能や端末認証を利用した画
面ロック機能を盛り込んだ実装を紹介。

今回の発表でお話すること
WWDC21のセッション内で個人的に気になったトピックスを簡単にまとめてみた
今回はほんのさわりだけのご紹介となってしまいますが、個人的に気になったセッションをご紹介できればと思います。
1. UIKit / SwiftUIに関する変更点に関するセッション：
UIKitやSwiftUI関連で新規に追加された部分を簡単ではありますが、いくつかご紹介ができればと思います。

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

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

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

UIKitに関する変更点に関するセッション
UIButtonやUIMenuに関する変更をはじめその他細かな部分でも改善が多かった
UIButton / UIMenu に関する大幅なアップデート

- UIButtonConfiguration

- Submenu

- Location Button
こちらもSwiftUI同様に変更が沢山あった
こちらも思った以上にアップデートは多かった印象
POINT
UIColor enhancement

SFSymbols enhancement

UIBarAppearance

Improvement DiffableDatasource

Image Display Preperation …

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

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

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

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

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

async/awaitとAPI非同期通信処理
Use async/await with URLSession
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が前提としているものが加わった

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

AttributedStringのMarkdownサポート
iOS15ではMarkdownが標準でサポートがされる様になった（SwiftUIでも同様）
これまでの開発を通してMarkdownが使えたらな〜と感じる局面も何度か出くわしてきた。
SwiftyMarkdown:

https://github.com/SimonFairbairn/SwiftyMarkdown
PICKUP
これまではMarkdownの取り扱いについてもライブ
ラリを利用する選択肢が多かった様に思います。
どこまで調節できるかは要調査！

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

iOSのアプリUI実装を改めて復習できる良い機会
Discoverable design
使いやすいアプリを考えていくためのポイントや事例がとても盛り込まれているセッション：
新機能紹介という観点からは少し外れてしまいますが、改めてUI実装に関する考え方を学べる様なセッションでした。

Human Interface Guidelineとも合わせながら見ていくと更に効果がありそう。
見つけやすいという観点からの望ましい例・望ましくない例の解説
PICKUP

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（コントロール感を伝える）：
Toastyというサンプルアプリの
事例を元に解説していました。
Gesture Recogniizer / Transition / Interaction の上手な活用
このアプリは何をするためのものなのか？をしっかり考える
ビジュアルだけでは伝わりにくい部分に情報を補う
見つけやすい画面設計を形にする
明示的または暗黙的なフィードバックを与える
UI実装を考えていく上での基本的な部分の復習に近い

まとめ（感想）
今年は特に手を動かして試してみたくなるトピックが多かった！
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」で紹介されている
内容や注意点に配慮しながら進めていくと、とても良さそうに思いました。

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

UI実装に関するセッションを簡単ながら振り返ってみる（仮）

More Related Content

Similar to UI実装に関するセッションを簡単ながら振り返ってみる（仮） (20)

More from Fumiya Sakai (20)

Recently uploaded (20)