「Akiba.swift #12 質疑トーク回!」の資料になります。 UIを作る際の設計段階で、ライブラリにする？ それともDIYする？という選択を迫られるタイミングが出てくることがあると思います。 その際にどのような基準で判断をするとより良いものができるかという部分の選択に関する実例をまとめたものになります。 UI構築の際の一助となれば幸いです。

1. UIを作る際にライブラリにする？
それともDIYする？の切り分け（僕の見解）
Akiba.swift #12 質疑トーク回!
2018 / 01 / 17
Fumiya Sakai

2. 自己紹介
・酒井 文也 （Fumiya Sakai）
・ever sense. inc エンジニア
・Designer → ServerSide Engineer → AppDeveloper
Accounts
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Twitter: https://twitter.com/fumiyasac
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
Who are you?
Library (Personal)
Products (ever sense. inc)
New！
New！
現在はVer0.1.6

3. このトピックスを選んだ理由
UI構築の際に迷うポイントの1つにDIYするかライブラリを活用するかの判断がある
迷うポイント1. ProjectごとでUI構築のスタイルが違う
迷うポイント2. 画面の変更に耐えうるかの判断
迷うポイント3. スケジュールや時間との兼ね合い
先に断っておかなければいけないこと：
・この登壇資料では、どちらがより良いかの「答えを決める」ものではありません。
UI構築において、DIY or ライブラリを使うの判断に関
しては、左記のポイント以外にも、もしかすると多々あ
るかと思います。
今回の登壇を通して、皆様がUI構築をしていく中で
心がけていることや考えていること、熱い思い等を共
有できるような場になれば嬉しく思います。
・この資料での見解はあくまで私（fumiyasac）の個人の見解のものになります。
などなど…様々な条件や事情の中で試行錯誤しないといけない
・今回紹介しているライブラリはUI実装にフォーカスを当てて選んだものになります。

4. DIY? or Library?の判断の基準はどこだろう…
メリット・デメリットの観点から色々考察をしてみよう
★ Let’s Talk
・皆さんがUIを作る際においての DIY? or Library? の判断の 「決め手」 としているポイントや 「メリット・デメリット」についての見解
・どちらを選択するとしても、それぞれ一長一短はあるので一概に偏った判断はできない
・構築するViewの特性や詳細設計において選択アーキテクチャによっても使い分けをする必要は出てくる
DIY Library
メリット
処理や実装が追いやすい、機能拡張・修正などが容
易な場合が多い など
構築(特に0→1)時間の短縮、既に使うルールが決まっ
ている、実装の整理がしやすい など
デメリット
設計の甘さの影響を受けやすい、保守を怠ると属人
化しやすい、処理量が多くなりがち など
機能拡張の余地が少ない場合がある、処理がライブラ
リに依存しやすい、ビルド時間の増加 など

5. 【Case1】 星型のRating表示用のUI作成
動きや仕様によっては、DIYするのがなかなか困難なケースの例
→ UIImageView
★
UIStackView
★ ★ ★ ★
→ UIButton
UIButton及びUIImageViewをOutlet Collection
で繋ぐ & tagプロパティを活用して表現する形。
星の表現が下記のように、整数値で1~5の範囲で
押されたボタンによって変わることを想定した場合。
小数点での表示を考慮して、2.5（星が右半分が欠
けた形）の見た目を実現したい場合は、上記のUIの
構造だと、実装がしにくくなる。
（要望）�今は整数だけだけど、x.5の時も星の表示で表現したい
・ライブラリ： Cosmos
https://github.com/evgenyneu/Cosmos
星型以外の表現も可能、導入や活用もしやすい、IBでも利用可能など
きめ細やかな設定とカスタマイズが可能。
入力用・表示用と共に汎用的に活用可能

6. 【Case2】 ハッシュタグ表記や簡単なリンク等を扱い易くする
できるだけシンプルな形でネイティブ側の処理だけで完結させたいケースの例
UITextViewに表示するテキストをHTML形式にする
など、そのままでは一筋縄でいかない部分。
Webでよく使うaタグでのリンクを文章内のテキスト
の中で仕込むような表現と似たことを行う場合。
UILabelのみで表現しようとするとつらい部分の一つ
※ ハッシュタグとURL・メンションが混在する場合
（要望）�テキスト(UILabel)にハッシュタグとURLリンクが欲しい
・ライブラリ： ActiveLabel
https://github.com/optonaut/ActiveLabel.swift
ハッシュタグだけでなく、URLやメンションも同様な処理で対応可能。
attributedTextとの併用も可能
例） ハッシュタグ表示時の実装
ActiveLabelクラスのインスタンス.enabledTypes = [.hashtag, .url]
適用するリンクの種類をenum値で設定

7. 【Case3】 UITableViewのHeaderを利用したパララックス表示
アイキャッチ画像がスクロールに伴って動くケースの例
DIYするとそれぞれの部品の配置や設計が大切になる。
ライブラリを活用する際は動き方や実装方法もポイント。
・ライブラリ： ParallaxHeader
https://github.com/romansorochak/ParallaxHeader
UITableViewのヘッダー部分をスクロール量と連動させて変化させる処
理部分を扱い易くするためのライブラリ
スクロールが起こった場合の処理
DIY時の実装解説はこちら：
https://www.slideshare.net/fumiyasakai37/ui-82822810
DIYすると、InterfaceBuilder上のView
の階層構造やUITableView関連のプロト
コル実装量が増えがちな部分。

8. 【Case4】 Animation & CustomTransitionの実装
扱いやすいコード設計を行う際に考えておきたい部分について
・ライブラリ： IBAnimatable
https://github.com/IBAnimatable/IBAnimatable
アニメーションの処理をIntefaceBuilder上で扱い易くするライブラリ
クロージャーを多用する形なので、コードが肥大化し
やすい部分。
Animationを実装する上で注意する部分
細部にこだわった実装をDIYで行う場合には、これら
の実装は複雑なコードになりがちな部分。
（表現に加えて、追いやすい処理という観点も必要）
StructやClassを用いて処理部分を共通化・Module
化をすることはできても、animate()メソッドは引数
が多いので、設計に気を使う部分。
画面遷移時のアニメーションのカスタマイズの詳細は
外部のクラスになるので把握が大変になりがち。
CustomTransitionを実装する上で注意する部分
・ライブラリ： ViewAnimator
https://github.com/marcosgriselli/ViewAnimator
Animationの処理をコード記載を扱い易くするライブラリ
・ライブラリ： Hero
https://github.com/lkzhao/Hero
画面遷移時のカスタムトランジションを扱い易くするライブラリ
＜Animation関連ライブラリ例＞
＜CustomTransition関連ライブラリ例＞

9. 【Case5】 カレンダーの表示UI作成に関する部分
カレンダーUIの実装においてDIYするか否かの判断になりそうな部分
シンプルなレイアウトであれば、さほど問題は
ないが機能を実装する上で結果的には複雑
になりがちな部分のひとつ
・ライブラリ： JTAppleCalendar
https://github.com/patchthecode/JTAppleCalendar
・ライブラリ： JBDatePicker
https://github.com/Tuslareb/JBDatePicker
＜カレンダー関連ライブラリ例＞
デザインとのさじ加減と合わせて、下記の項目に対する考慮も必要
・小さなセルの中にどこまでデータを表示するか？
・先月/次月の部分を埋めるか？
・祝祭日の考慮をどのような処理で行うか？
・カレンダーのセルタップ時の処理はどのようなものか？
・パフォーマンスの低下を招かないか？
DIYだと困難な表現またはその逆もありうるので注意

10. まとめ
UI実装にこだわる際にDIY? or Library?の観点を持つことで多くの引き出しを
参考資料：
※今回の資料では、具体的なサンプル実装例はありませんが皆様のUI構築時の一助となれば嬉しく思います。
・どちらを選択するかの決め手は設計はもちろんプロジェクトの事情等により変化する
・UIライブラリを使う時は使いやすさの観点を常に (例) コードの洗練度 / ドキュメント / カスタマイズの余地 / Demoの充実度
・Swift4にも対応したUI系のライブラリを活用して面白い動きを入れてみたサンプル実装まとめ
https://qiita.com/fumiyasac@github/items/48617348ef7f18494d38
・できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ
(前編) https://qiita.com/fumiyasac@github/items/d1b56ffc6d7d46c0a616
(後編) https://qiita.com/fumiyasac@github/items/b694f9859cbb61c95c1a
→ GithubのStar数だけでは判断できない要素もあるので、導入前に素振りをすると良いです。
・UI要素をDIYをすることでライブラリを見通せ、ライブラリに触れることでDIY時の工夫が生まれる

11. エバーセンスよりメッセージ
弊社ではiOS / Androidエンジニア募集しております！
https://www.wantedly.com/projects/158484