3/12に開催されました「FiNC Tech Meetup #2 ~try! Swift前夜祭~」での登壇資料になります。 今回はいつも紹介しているUI実装に関するTIPSという観点から一旦離れて、僕なりの「どのような形でSwiftに触れて楽しんでいるか」という部分についてまとめたものになります。 デザイナー→Webエンジニア→iOSアプリエンジニアというキャリアの変遷を辿った際の原体験からのアプローチでどういう観点で日々実践と考察を行なっているかを僭越ながら発表させて頂きました。 勉強会やコミュニティへの参加を通して、多くエンジニアの方々のお力をお借りしながらも、ここまで来れた事を本当に嬉しく思うと共に、今後とも少しでも良い物を還元することができればと思う次第です。

1. iOSアプリUIとの触れ合いと歩む
僕なりのSwiftの楽しみ方
Fumiya Sakai (Just1factory)
2019/03/12 FiNC Tech Meetup #2 ~try! Swift前夜祭~

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アプリ開発を始めた当時からこれまでのあゆみ
Swift発表や当時Objective-Cの仕事がきっかけでこの道へ。
私自身のキャリアとこれまでの推移:
実際に学習を始めてから2年近く本業ではなかったが、2017年からiOSアプリ開発が本業に。
201920182017201620152014
Server Side
Mobile App
本業がアプリ開発へ以降
平素の開発と並行して日々
UI実装を試したり。
この頃はまだ個人的に勉
強会の参加・登壇や記事
へのアウトプットのみ。
2013
仕事ではまだそれほどア
プリ要素はなく、個人的
な学習や開発のみ。
この過程の中で仲間
やコミュニティの皆
様にはお世話になり
ました！多謝！！

5. 自分なりのSwiftの楽しみ方のご紹介
iOSアプリ開発におけるUI実装という切り口から攻めてみる。
(1) iOSアプリで良く見る表現をライブラリなしで試してみる:
気になるUI表現を実現するために必要な要素となるものを知って応用が利くようにする
こちらはあくまで私個人の見解にはなりますが、少しでもご参考になれば幸いに思います。
※ご注意:
(2) UI表現をするライブラリの世界を積極的に覗き込んでみる:
実際に利用するためにサンプルプロジェクトの動きを見たり内部実装にも関心を持つ
(3) 実践をある程度まで想定した上でのプロトタイピングをしてみる:
試したいアーキテクチャや想定されるAPI通信処理と組み合わせた肌感を理解する

6. iOSアプリで良く見る表現をライブラリなしで試してみる
例1. メディアアプリでよく見る無限スクロールするタブの動き
参考. UIPageViewControllerをつかって無限スクロールできるタブUIを実装してOSSとして公開しました
https://qiita.com/fumiyasac@github/items/c68b7ce812bf3ef48a67

7. iOSアプリで良く見る表現をライブラリなしで試してみる
例2. 最前面のカードを左右にスワイプして消す(選択する)動き
参考. Tinder風なUIを実装する際のアイデアと実装例紹介
https://qiita.com/fumiyasac@github/items/c68b7ce812bf3ef48a67
(1) UIView + UIPanGestureRecognizer
・出現時にアニメーションを伴ってカードが配置される演出
・UIPanGestureRecognizerで動かす仕様
・画面外にスワイプする際の予測値はVelocityを元に算出
(2) UICollectionView + UILongPressGestureRecognizer
・UICollectionViewLayoutを継承したクラスでカードの重なりを表現
・UILongPressGestureRecognizerを選択時のトリガーとして利用
・実際に選択時に動かしているのはUIImageView
2種類のアプローチを試してみる

8. ×
UIKit / 各種Protocol 情報収集 / 小さく試す
UIScrollView・UITableViewなどをはじめと
する頻出のものを深く知り、表現に必要な
要素を組み合わせて画面を設計する。
ライブラリや参考アプリ等で見つけた表現
の構造や仕組みを紐解いていき、技術記事
等を参考に組み合わせたり分解していく。
iOSアプリで良く見る表現をライブラリなしで試してみる
補足. 必要なUI表現をするために必要なものと活用方法をインプットする習慣
既存で知っているものの組み合わせのみでシンプルにメイン機能を実現できるか？を見出す楽しさがある。
インプット
アウトプット
動きを観察し
再現実装する
アプローチ

9. UI表現をするライブラリの世界を積極的に覗き込んでみる
例1. ライブラリの実装からポイントをブレイクダウンをしていく
ライブラリ内で実装している
コードを調べる
① まずはじめに ③ 再現と工夫
実現のポイントとなる部分を
洗い出して更に調べる
② ポイントを見出す
自分なりで最低限の実装を試
みて余力があれば工夫する
UITableViewのHeader部分を利用してヘッダーの画像部分が伸縮するような動きを作ってみる

10. UI表現をするライブラリの世界を積極的に覗き込んでみる
例2. ライブラリの実装の中からポイントを見つけ出して再実装を試みる
ライブラリ内で実装している
コードを調べる
① まずはじめに ③ 再現と工夫
実現のポイントとなる部分を
洗い出して更に調べる
② ポイントを見出す
細かな所までこだわって実装
しようとすると実は難しい
現在お試し中です…
😭 😭 😭
意外と難しかった。
一見すると「簡単かも！」と思えたが、いざ深掘りしていくと結構シビアな実装が必要

11. UI表現をするライブラリの世界を積極的に覗き込んでみる
補足. 取り組みをしていく中で得られた思わぬ良い副作用
その1) 最近OSSにContribute出来た😎 その2) コンバート作業恐れなくなった😳
コンバートは正直面倒な作業だけども俯瞰から変更点
や改善点を知れる良い機会（と考える事にしている）

12. 実践をある程度まで想定した上でのプロトタイピングをしてみる
例1. 新しいアーキテクチャを試す場合もUI実装込みで相性なども考察する
RxSwiftを利用したUI実装 (DataBinding) ReSwiftを利用したUI実装 (Redux)
平素も大変お世話に
なってます！多謝！！
よっしゃ
試すぞ！

13. 実践をある程度まで想定した上でのプロトタイピングをしてみる
例2. 参考アプリでのUIや提示されたデザインを元に7~8割のもの試し打ち
例. 参考アプリでの表現を元にプロトタイプ作成

14. 実践をある程度まで想定した上でのプロトタイピングをしてみる
補足. 最近は開発中にAPI側のことも少し意識をする
例. APIから取得したレスポンスに関するViewModel側のテストコード:
自分がサーバーサイド側でのAPI開発をして
いた経験もあるので少なくとも気持ちだけ
でも理解できるようにはしておきたい想い。

15. 今回のまとめ
Swiftへの取り組み方・見つけ方は様々ある。自分にあったものから少しずつ。
UI表現に関する手段だけではなく、実装をした肌感
や機能にマッチする提案に備えておけるように。
あとがきとこのアプローチをして嬉しかったこと:
私自身は遅い段階からiOSアプリ開発を始めた＆元は非エンジニアからのスタートではあったので最初は、「こ
んな自分が受け入れられるのだろうか？」という恐れや迷いはあった。iOSアプリのUI/UXや表現に関する実装か
らアプローチすることで、実務の中でもその知識や知見・アウトプットが生きてくる場合も多々ありました。
もしあの時iOSアプリ開発の世界に出会わなければ、今どうなっていたか正直想像できないですね…。
(1) 気になる表現をUIKitだけで模写する
ライブラリやGithubで公開されているサンプルの動
きや内部実装を紐解いていくと、そこに実装やUI表
現の着想へのヒントが隠れていることが多い。(2) ライブラリの内部実装からヒントを得る
(3) 実際の機能や画面に近いサンプル実装

16. Thank you for listening !
10日後の「try! Swift」でも是非お会いできることを楽しみにしています
お詫び. 今回Swift要素が少なめですみませんでした