Swift愛好会 #39の登壇資料になります。 アプリ開発時におけるUI実装を検討していく中で、自前でDIYするか？ライブラリを利用するか？の判断を求められる場合があるかと思います。 このような問いに対しての絶対的な「万能薬」はないですが、今回は自作だと難しそうな部分をUIライブラリを活用して、効率化を模索するアプローチをしてみる事例と活用したライブラリをご紹介しています。

1. UI表現ライブラリを有効活用して
iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai (Just1factory)
2019/03/29 Swift愛好会 #39 @ Mercari

2. 自己紹介
・Fumiya Sakai
・Freelance iOS 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 ~ Present

3. ほんの少しだけ告知と宣伝
「少しの工夫とアイデアでできる表現集」として、
これまでサンプル開発や実務の中で培ったノウハウ
等から、UI実装いくつかのまとまったサンプル実装
を例にUI構築をする上で重要な実装ポイントやアイ
デアを紹介していく形式にしてみました。
本書の収録サンプルはこちらから:
https://github.com/fumiyasac/ios_ui_recipe_showcase
念願の「iOSアプリ開発 UI実装であると嬉しいレシピブック」が商業誌に㊗
概要:
Amazonにて電子版の予約受付中です:
https://www.amazon.co.jp/dp/B07NQDXY1F

4. 昨今リリースされているiOSアプリ内におけるUI表現
是非とも取り入れてみたいと感じる表現も実際に開発してみると結構大変
(1) UICollectionViewLayoutAttribute関連 Apple公式のDocumentはあるが読み解きにくい
(2) CustomTransitionを利用した画面遷移
(3) Parallelを意識した画面の構造への対応
押さえておくとUI表現を開発するのに有効なんだけども、実現までに骨が折れるものの事例紹介
⭐ どんな価値を届けるのか？実装や設計の前段階で
「なぜそうするのか？」
の部分を明確化は大事
(4) コンテンツ量が多い画面を綺麗に見せる
⭐ ユーザー体験として適切か？
⭐ デザインやコンテンツとの相性は？
⭐ 納期やロードマップとの兼ね合いは？
細かなパラメータ調節がシビアになりやすい
実現できる→理解して汎用化までに手間がかかる
要件や表現方法の変更に対応できる設計が難しい

5. 自前でDIYするか？ライブラリを利用するか？の判断
例. メリットとデメリットという観点から大まかに切り分けた例
絶対的な「万能薬」はないが、どちらの手法でもアプローチできた方が良さそう
DIY Library
メリット
処理や実装が追いやすい、機能拡張・修正などが容
易な場合が多い など
構築(特に0→1)時間の短縮、既に使うルールが決まっ
ている、実装の整理がしやすい など
デメリット
設計の甘さの影響を受けやすい、保守を怠ると属人
化しやすい、処理量が多くなりがち など
機能拡張の余地が少ない場合がある、処理がライブラ
リに依存しやすい、ビルド時間の増加 など
・どちらを選択するとしても、それぞれ一長一短はあるので一概に偏った判断はできない
・構築するViewの特性や詳細設計において選択アーキテクチャによっても使い分けをする必要は出てくる
細かな表現を自前で実現しようとするとコードは煩雑になるし、ライブラリを利用すると機能拡張の余地が心配

6. 以前に参加した勉強会でもこの部分のトピックについて話した
様々なご意見があったと同時に、プロジェクトの方針によっても異なっていた
選定基準・感想等をヒアリングした際に出てきたご意見など
なるべく保守されたライブラリを使いたい🐱
UIを作る際にライブラリにする？それともDIYする？の切り分け&実装のアイデア例と事例紹介
https://www.slideshare.net/fumiyasakai37/uidiy
UIライブラリで提供されている動きを上手に組み合わせてみる
自作だと難しそうな部分をUIライブラリを活用して効率化を模索するアプローチをしてみた！
少人数だからライブラリをうまく利用する🐶
変更や修正が多いのでなるべく自前にしたいな🐼
独自で機能が必要な時は元をForkして利用する🐷
普段はなるべく自作してしまいたがるけど…

7. 試行錯誤の結果こんな感じのサンプルが出来上がりました
画面でのDemoとご一緒にお楽しみください
サンプルコードはこちら https://bit.ly/2HXSpQ5 ※今はSwift4.2だけどアップデートもしていく予定です💦

8. ライブラリを利用したUI実装のポイントとライブラリ紹介(1)
UIPageViewControllerの切り替えに伴うデザイン表現に活用する実装事例
タブ型の美しいUI表現とUISegmentedControlの様な実装のしやすさの両立
・タブ型のUI表現はUIPageViewControllerの表示との整合性をとる実装が大変な部分
・UISegmentedControlは扱いやすいがデザイン的カスタマイズが大変な部分
・表示する文字列の長さの考慮がある
ライブラリを活用するメリット
・デフォルトでもデザインが綺麗
・表示内容の切り替え処理がシンプル
参考) Pinterest
ライブラリ「PinterestSegment」を活用して実装しました！

9. ライブラリを利用したUI実装のポイントとライブラリ紹介(1)
PinterestライクでSegmentedControlに利用できる「PinterestSegment」
https://github.com/TBXark/PinterestSegment

10. ライブラリを利用したUI実装のポイントとライブラリ紹介(2)
画面遷移の際に指の動きに連動した動きを実現する実装事例
UIPercentDrivenInteractiveTransitionとCustomTransitionの組み合わせ
・導入から実現までが簡単
ライブラリを活用するメリット
・引っ張る指の動きで消す実装がある
・収録サンプルコードが丁寧
参考) メッセージ (iPhoneデフォルト)
中にUIScrollViewがある場合はスクロール
位置での調節に関する処理が必要です。
実現に最低限必要なのはたったこれだけ！
・UIPercentDrivenInteractiveTransition＆CustomTransitionの実装は初見はキツイ
・上記の初見では難しい部分に加えてGestureRecognizerや画面遷移が絡む部分
ライブラリ「DeckTransition」を活用して実装しました！

11. ライブラリを利用したUI実装のポイントとライブラリ紹介(2)
iPhoneのメッセージアプリライクな画面遷移を実現する「DeckTransition」
https://github.com/HarshilShah/DeckTransition

12. ライブラリを利用したUI実装のポイントとライブラリ紹介(3)
画面遷移の際にサムネイル画像を拡大しながら遷移をする実装事例
CustomTransitionを実現するためのクラスのカスタマイズが求められる
・Protocol-Orientedな形
ライブラリを活用するメリット
・該当タイミングの考慮がされている
・収録サンプルコードが丁寧
参考) folio
・遷移先と遷移元のサムネイル画像に関する考慮を自作するのが結構大変
・遷移先と遷移元での表示はもとよりUINavigationController等の兼ね合いのツラみ
ライブラリ「ARNTransitionAnimator」を活用して実装しました！

13. ライブラリを利用したUI実装のポイントとライブラリ紹介(3)
サムネイル画像の拡大を伴った画面遷移を実現する「ARNTransitionAnimator」
https://github.com/xxxAIRINxxx/ARNTransitionAnimator

14. ライブラリを利用したUI実装のポイントとライブラリ紹介(4)
任意の処理をしながら別の処理を行うための半モーダル画面の実装事例
類似した動作はContainerView等でもできるが細かな状態管理が難しい
・すでに全部/一部/隠すの考慮がある
ライブラリを活用するメリット
・状態に対応した位置関係の考慮
・収録サンプルコードが丁寧
参考) Google Map
・全部表示・一部表示・隠す場合にすでに表示しているものに関する管理が必要
・UIViewPropertyAnimator等を上手に活用した処理を自前で用意するのは大変
ライブラリ「FloatingPanel」を活用して実装しました！
⭐ 参考1
iOSにおける半モーダルビューの解釈
https://bit.ly/2TTiZfR
⭐ 参考2
iOSアプリでそろそろセミモーダルビューを使っ
てみたい人に「FloatingPanel」をおすすめする
https://bit.ly/2UgxXk6

15. ライブラリを利用したUI実装のポイントとライブラリ紹介(4)
半モーダルな画面遷移や表示を実現する「FloatingPanel」
https://github.com/SCENEE/FloatingPanel

16. ライブラリを利用したUI実装のポイントとライブラリ紹介(5)
画面全体に表示している写真を3D回転のように切り替える表現の実装事例
UICollectionViewLayoutを利用したダイナミックな表現の難しさ
・実装と実現方法が本当に簡単
ライブラリを活用するメリット
・初めから6種類の表現が収録
・フォトギャラリーにも応用可能
参考) Instagram
・そもそもの話でこの部分に関するサンプル実装の説明が難しい＆読み解きにくい
・トリッキーなUI表現をしようとすると実装自体もかなり煩雑なコードになりがち
ライブラリ「AnimatedCollectionViewLayout」を活用して実装しました！
実現に最低限必要なのはたったこれだけ！
元のUICollectionViewで必要な処理を生か
した状態で活用できる点が非常に良い。

17. ライブラリを利用したUI実装のポイントとライブラリ紹介(5)
UICollectionViewLayoutの表現を実現する「AnimatedCollectionViewLayout」
https://github.com/KelvinJin/AnimatedCollectionViewLayout

18. その他にこのサンプルで利用したライブラリをざくっとご紹介
細かなUI実装や機能についてもライブラリを活用した実装をしています
Cosmos:
https://github.com/evgenyneu/Cosmos
・星形のレーティング表示を実現する（表示用だけでなく入力用でも利用可能）
SkeletonView:
https://github.com/Juanpe/SkeletonView
・任意のView要素に対してデータを読み込み中であることを表現する
PINRemoteImage:
https://github.com/pinterest/PINRemoteImage
・画像キャッシュ用のライブラリ（ cf. KingFisher / SDWebImage / AlamofireImage / Nuke ）

19. 今回のまとめ
ライブラリを利用する際にはデザイン性とその特性をうまく活かしていこう。
僕の最近の活動:
最近はUI表現系ライブラリを上手に組み合わせたサンプル開発をやっています。うまい具合にまとまったタイミ
ングで何かしらの形でアウトプットできればと思います（4月中に間に合うかな…）。
サンプル開発を振り返ってみて:
UI表現をするライブラリには特性がありそれを上手に活かす実装をして要件を満たすアプローチを念頭に置く。
ライブラリに向き合ってその深淵を覗いてみると様々なヒントが得られる。
上手なUIライブラリの活用のために:
実現のためのUIKitの知識 × スクラップ＆ビルドの数 × 組み合わせのためのアイデア

20. Thank you for listening !
紹介しきれなかった実装の詳細については、是非ともコード等をご覧頂けましたら幸いです😆
皆様もおすすめのライブラリあったら教えてください🎤