iOSアプリで気になった動きや表現を
上手にアレンジして活用してみる
Fumiya Sakai (Just1factory)
2019/03/27 potatotips #60 @ ZOZO Technologies

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

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

考えていたアイデアや参考デザインも一緒に組み合わせる
まとまったある程度のデザインを込みにしたサンプルを作成
さらにひと手間
加えてみたいと感じた表現
・Twitter/Pinterest/Yummly
動きやテイストに
合いそうなデザインを探す
・Nike ファッションアプリ
気になったUI表現に
より近しい動きを探す
・Wantedly Visit
💻 ⇨ 📱
・Twitter → TabBar画像のバウンドアニメーション
・Pinterest → コンテンツ画像の段差表示の表現
・Yummly → コンテンツ画像の視差効果の表現
アウトプット
インプット インプット
インプット
作りながら
ポイントを整理

組み合わせるとこんな感じのサンプルが出来上がりました
画面でのDemoとご一緒にお楽しみください
サンプルコードはこちら（まだWIPです） https://bit.ly/2HKcSbL ※ 今後とも拡張や修正は実施予定です

自分で実装をした部分とライブラリを利用した部分の棲み分け
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表現系ライブラリを上手に組み合わせたサンプル開発をやっています。うまい具合にまとまったタイミ
ングで何かしらの形でアウトプットできればと思います（4月中に間に合うかな…）。
サンプル開発を振り返ってみて:
UI開発の場合には、ライブラリにするか自作するかの切り分けや判断を求められる場面は多いと思います。その
中で自分の実装体験や組み合わせ方の実践に関する経験値をアップしておくと良い選択ができそう。

Thank you for listening !
紹介しきれなかった実装の詳細については、是非ともコード等をご覧頂けましたら幸いです😆