狠狠撸

ライブラリやView構造を有効活用して

iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai (Just1factory)
2019/05/28 nori-na Tech Night #3 @ PR Times

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

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

以前に自分のSwiftの楽しみ方のご紹介について発表しました
私はiOSアプリ開発におけるUI実装という切り口から攻めることが多い
颈翱厂アプリ鲍滨との触れ合いと歩む僕なりの厂飞颈蹿迟の楽しみ方
※上記のアプローチに関するイントロダクション:
UI表現に関する手段だけではなく、実装をした肌感
や機能にマッチする提案に備えておけるように。
(1) 気になる表現をUIKitだけで模写する
ライブラリやGithubで公開されているサンプルの動
きや内部実装を紐解いていくと、そこに実装やUI表
現の着想へのヒントが隠れていることが多い。(2) ライブラリの内部実装からヒントを得る
(3) 実際の機能や画面に近いサンプル実装
個人的にこれからも大事にしていきたいと感じている3つの着想からコード実装までのアプローチ
/fumiyasakai37/iosuiswift
今回はUI実装の紐解いていくプロセスを

ほんの少しだけでもご紹介できれば！

昨今リリースされているiOSアプリ内におけるUI表現
是非とも取り入れてみたいと感じる表現も実際に開発してみると結構大変
(1) UICollectionViewLayoutAttribute関連 Apple公式のDocumentはあるが読み解きにくい
(2) CustomTransitionを利用した画面遷移
(3) Parallelを意識した画面の構造への対応
押さえておくとUI表現を開発するのに有効なんだけども、実現までに骨が折れるものの事例紹介
? どんな価値を届けるのか？実装や設計の前段階で

「なぜそうするのか？」

の部分を明確化
(4) コンテンツ量が多い画面を綺麗に見せる
? ユーザー体験として適切か？
? デザインやコンテンツとの相性は？
? 納期やロードマップとの兼ね合いは？
細かなパラメータ調節がシビアになりやすい
実現できる→理解して汎用化までに手間がかかる
要件や表現方法の変更に対応できる設計が難しい

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

まずは自分なりに方針を作ってみる
デザインや構想をメンバーから聞いた時点での自分が考えたものをまとめる
今回の実装が「自分が以前に体験したもので応用できる実
装で実現できるか？」という問いかけをする。
なぜやるのか:
画面のイメージ図解や基づく処理で必要なものを書き出し
て採用するアーキテクチャ等を決める材料とする。
何を書くのか:
観点. 今後他のチームメンバーやビジネス側?デザイ
ナー?プロダクトオーナーとの認識合わせのための資料
重要:はじめは自分なりで構わないのでイメージを持つ

考えていたアイデアや参考デザインも一緒に組み合わせる
まとまったある程度のデザインを込みにしたサンプルを作成
さらにひと手間

加えてみたいと感じた表現
?Twitter/Pinterest/Yummly
動きやテイストに

合いそうなデザインを探す
?Nike ファッションアプリ
気になったUI表現に

より近しい動きを探す
?Wantedly Visit
? ? ?
?Twitter → TabBar画像のバウンドアニメーション

?Pinterest → コンテンツ画像の段差表示の表現

?Yummly → コンテンツ画像の視差効果の表現
アウトプット
インプットインプット
インプット
作りながら

ポイントを整理

最近少し気になっていた細かなUI実装の一例の紹介
例. TabBarを切り替えた時にアニメーションを伴って画面も切り替わる
ご紹介したTabBarでの画面切り替えを導入している例
?(参考アプリ) Facebook / Wantedly Visit
本格的に調べる前段階では、漠然と「こうするんだな」とアタ
リが正直ついていなかったことや、実践でも試したことがあり
ませんでした。
まずは同様のライブラリ?質問サイト?海外ブログ記事等の情
報を収集することからはじめました。
そういえば実務の中やサンプル開発でも

今回の様にちゃんと向き合ったことはなかったなぁ

UIライブラリを利用した動きを実現するサンプル(1)
画面でのDemoとご一緒にお楽しみください
https://github.com/fumiyasac/2nd_ios_ui_recipe_showcase ※Swift5 + Xcode10.2.1のサンプルとなります

自分で実装をした部分とライブラリを利用した部分の棲み分け
TabBarController関連部分の実装だけライブラリを利用する方針としました
利用しているライブラリは下記2個
?TransitionableTab
?FontAwesome.swift
今回のライブラリはTabBarに関連する部分の
実装のみでライブラリを利用しました。
Pinterest / Yummly を参考にした表現につ
いては以前にUI実装を試したこともあったの
でライブラリを用いずに実装しました。
今回はこの

部分の実装を紹介

TabBarControllerの動きをカスタマイズするために
まずは基本的な実装のために押さえておきたいのは下記の2つのメソッド
https://bit.ly/2TC28xN
※押さえておきたい部分の解説は下記のブログでもまとめています
2. 画面切り替え時のアニメーションを適用する
【実装MEMO】UITabBarControllerでAnimationを実装するためのヒント:
1. タブ要素のアイコン画像にアニメーションを適用する
func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController:
UIViewController) -> Bool
override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem)
?UITabBarControllerDelegateが提供しており、TransitionableTabが提供するプロトコルでも考慮されている
?引数から取得できるUITabBarの中からUIImageView要素を取得してアニメーションを加える実装をする

タブ要素のアイコン画像にアニメーションを適用する
例1. UITabBarの中からUIImageView要素を取得してアニメーションを加える
引数のUITabBar要素から子のView階層
の中からUIImageViewを要素だけを取得
して配列の状態にまとめ直している。
その後に押下されたUITabBarItem要素に
対応するタグ値(=インデックス番号)の
UIImageViewへアニメーションを適用す
る。
改めて見てみると結構階層が深い位置
にあるので面食らってしまった。

タブ要素のアイコン画像にアニメーションを適用する
例1. UITabBarの中からUIImageView要素を取得してアニメーションを加える
ここで実施しているのは引数に渡された
UIImageViewに対して拡大縮小のアファイ
ン変換を利用したアニメーション処理。

切り替え先のIndexを取得して切り替え時のアニメーションをする
例2. 切り替え先のIndexを取得して切り替え時のアニメーションを実行する
デフォルトで3種のアニメーションをライ
ブラリ: TransitionableTabが用意してく
れている（アニメーションの自作も可）

※ move / fade / scaleの3種類
enumでTransitionableTabのタイプに
応じた処理を管理すると良さそうで
す。
Index値減少時の動き
https://github.com/Interactive-Studio/TransitionableTab
Index値増加時の動き

切り替え先のIndexを取得して切り替え時のアニメーションをする
例2. 切り替え先のIndexを取得して切り替え時のアニメーションを実行する
https://github.com/Interactive-Studio/TransitionableTab
アニメーションの秒数や実行オプションも指定可能です。
enum側で定義したIndex値の増加?減少時
の実行するアニメーションを適用する。
TransitionableTabがよしなにしてくれる
お陰でUITabBarControllerDelegateと似た
形で実装ができる点がとてもGoodです。

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

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

画面遷移の際にサムネイル画像を拡大しながら遷移をする実装事例
CustomTransitionを実現するためのクラスのカスタマイズが求められる
?Protocol-Orientedな形
?該当タイミングの考慮がされている
参考) folio
?遷移先と遷移元のサムネイル画像に関する考慮を自作するのが結構大変
?遷移先と遷移元での表示はもとよりUINavigationController等の兼ね合いのツラみ
ライブラリ「ARNTransitionAnimator」を活用して実装しました！
https://github.com/xxxAIRINxxx/ARNTransitionAnimator

任意の処理をしながら別の処理を行うための半モーダル画面の実装事例
類似した動作はContainerView等でもできるが細かな状態管理が難しい
?すでに全部/一部/隠すの考慮がある
?状態に対応した位置関係の考慮
参考) Google Map
?全部表示?一部表示?隠す場合にすでに表示しているものに関する管理が必要
?UIViewPropertyAnimator等を上手に活用した処理を自前で用意するのは大変
ライブラリ「FloatingPanel」を活用して実装しました！
? 参考1

iOSにおける半モーダルビューの解釈

https://bit.ly/2TTiZfR
? 参考2

iOSアプリでそろそろセミモーダルビューを使っ
てみたい人に「FloatingPanel」をおすすめする

https://bit.ly/2UgxXk6
https://github.com/SCENEE/FloatingPanel

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

その他にこのサンプルで利用したライブラリをざくっとご紹介
細かな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 ）

このサンプルで利用したUIライブラリをざくっとご紹介
細かなUI表現部分の構築においてそのままだと難しい部分に活用しています
BTNavigationDropdownMenu:
https://github.com/PhamBaTho/BTNavigationDropdownMenu
Floaty:
https://github.com/kciter/Floaty
FSPagerView:
https://github.com/WenchaoD/FSPagerView
Toast-Swift:
https://github.com/scalessec/Toast-Swift
ActiveLabel.swift:
https://github.com/optonaut/ActiveLabel.swift
デザイン面での拡張に対応できるものを選択する:
機能面やアニメーション等も加味した上で試していく。

→ ライブラリに収録されているExample等を確認する
もし自前でつくるならば？という問いを持つ:
機能開発やデザイン変更の過程の中でライブラリでの仕
様担保が難しくなった場合の代替案を自分の中に持つ。

UI実装に必要な細かいテクニックの共有
UI実装に関するTipsを「知っているか?知らないか」が勝負のポイントになる
UIStackView
UIScrollView
高さ固定
ギャラリー
height ≧ 0
priority = 1000
height = ●●
priority = 250
タイトル表記
Container
View
高さ固定
例. 高さが可変する要素への制約
観点. 複雑なView構造をとりうる場合には
部品用クラスやContainerViewを利用して分
離する形をとる。
@IBOutletで扱うのはpriority=250の方の制約
重要:Storyboard全体の保守性向上への工夫
高さが可変
リロード時に
高さも更新
タイトル表記
Container
View
高さ固定

ContainerViewで1つの画面要素を小さな単位に切り出して管理
Storyboardを利用した開発においては1つのファイル内に詰め込み過ぎない
画面のデザイン要素が複雑でなおかつ、画面要
素のリサイクルする必要性があまりないとき
画面最下部までスクロールした場合に次の数十
件の要素を読み込む等において表示要素数が多
くなるとき
できれば単一のUITableViewまたは
UICollectionViewでの管理が良い場合
なるべくContainerViewに分割し管理し
ていくほうが良い場合
パフォーマンスやメモリにも注意が必要！

UIに関する要素をComponentのような形で切り出しておく
InterfaceBuilderの場合はXibファイルでViewの部品クラスを作るようにする
① React.jsやMaterial Designの考え方からヒントを得た構造
Atomic Designの考え方を元に要素設計をして部品の形へと分解?構築する。
② 細か過ぎず?大雑把過ぎずの分解粒度を見極める
UITableView / UICollectionViewのセル要素やセクション表示要素をはじめ、
ある程度の複雑なView要素については分割した形にして管理する。

MVVMパターンを利用したDataBinding機構を利用する
API通信や想定する挙動からどちらが良さそうかを判断する材料を見出す
アーキテクチャの観点からの考察:
状態更新のリクエスト
ViewController ViewModel Model (Entity)
API Server Request / Response
利用するデータの作成
UI側への変更を伝える利用するデータの受取
NotificationCenterを活用したDataBinding機構

※iOSアプリ設計パターン入門第7章MVVMを参考
API通信処理の基本構造で利用したライブラリ一覧:
Alamofire / SwiftyJSON / PromiseKit
UnitTestを配慮してMock化できるようにする
※Alamofire + SwiftyJSON → URLSession + Codableでも良い

API通信を想定したMockサーバーの構築
1. https://www.webprofessional.jp/mock-rest-apis-using-json-server/
2. https://blog.eleven-labs.com/en/json-server
API通信と連動するUI挙動は実際に通信をしてみないとわからない点もある
node.js製の便利ライブラリ「json-server」の参考資料:
観点1. API処理に関してはエラー発生時のデザインを先に確認した上での実装
をしておきたかった。

観点2. 今回のデザインではページング処理とデザインの変化が連動する挙動な
ので、レスポンス形式と画面における整合部分の処理が一番重要だった。
なぜやるのか:
今回採用したもの. node.js製の「json-server」での擬似レスポンスの作成

今後検討するもの. Golang & MySQLのDocker環境を準備しての環境
アプローチ:

UnitTestで最低限担保するべきものを決める
API通信部分の正常処理に関してはテストコードで想定する形を決める
例. ViewModel部分の初期化処理:
テストしやすい様に「Dependency Injection」を想定しておくとより良い。
重要:レスポンスをクライアント側で正しく捌けているかを確認するためのテスト
何を準備するのか:
Mock … Protocolを利用してAPI通信の代用として振る舞う
Stub … レスポンス相当のJSONファイル
MockやStubを利用して置き換えられるような形に予め実装すること。

今回のまとめ
良いなと思った表現を小さな部分から試して選択できるような実践が大事。
サンプル開発を振り返ってみて:
UI開発の場合には、ライブラリにするか自作するかの切り分けや判断を求められる場面は多いと思います。その
中で自分の実装体験や組み合わせ方の実践に関する経験値をアップしておくと良い選択ができそう。
ライブラリに向き合ってその深淵を覗いてみると様々なヒントが得られる。
上手なUIライブラリの活用のために:
実現のためのUIKitの知識 × スクラップ＆ビルドの数 × 組み合わせのためのアイデア
UI表現をするライブラリには特性がありそれを上手に活かす実装をして要件を満たすアプローチを念頭に置く。
表現に関するUI実装でのアタリをつけることで工数短縮やさらに進んだ工夫ができる余地を生み出す。

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

狠狠撸

ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介

Recommended

More Related Content

What's hot (20)

Similar to ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介 (20)

More from Fumiya Sakai (8)

ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介