Download to read offline
![【Case2】 ハッシュタグ表記や簡単なリンク等を扱い易くする
できるだけシンプルな形でネイティブ側の処理だけで完結させたいケースの例
UITextViewに表示するテキストをHTML形式にする
など、そのままでは一筋縄でいかない部分。
Webでよく使うaタグでのリンクを文章内のテキスト
の中で仕込むような表現と似たことを行う場合。
UILabelのみで表現しようとするとつらい部分の一つ
※ ハッシュタグとURL・メンションが混在する場合
（要望）�テキスト(UILabel)にハッシュタグとURLリンクが欲しい
・ライブラリ： ActiveLabel
https://github.com/optonaut/ActiveLabel.swift
ハッシュタグだけでなく、URLやメンションも同様な処理で対応可能。
attributedTextとの併用も可能
例） ハッシュタグ表示時の実装
ActiveLabelクラスのインスタンス.enabledTypes = [.hashtag, .url]
適用するリンクの種類をenum値で設定](https://image.slidesharecdn.com/otemachi-180129123730/85/UI-DIY-6-320.jpg)
Uploaded byFumiya Sakai
UIを作る際にライブラリにする？それともDIYする？の切り分け&実装のアイデア例と事例紹介
Otemachi.swift x Kyobashi.swift #02での登壇資料になります。 (Akiba.swift #12での資料にケースを加筆したものになります) UIを作る際の設計段階で、ライブラリにする？それともDIYする？という選択を迫られるタイミングが出てくることがあると思います。 その際の判断の際のアイデアやポイント、及びライブラリの紹介とそのケーススタディとなりそうな事例をまとめてみました。 ご参考になれば幸いに思います。
UIを作る際にライブラリにする？それともDIYする？の切り分け&実装のアイデア例と事例紹介
- 1. UIを作る際にライブラリにする？ それともDIYする？の切り分け & 実装のアイデア例と事例紹介 Otemachi.swift x Kyobashi.swift#02 2018 / 01 / 29 Fumiya Sakai
- 2. 自己紹介 ・酒井 文也 （FumiyaSakai） ・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?の判断の基準はどこだろう… メリット・デメリットの観点から色々考察をしてみよう ★Akiba.swift #12の質疑トーク会での意見や見解の一部 ・ライブラリは運用保守が継続しているものを使いたい、要望や使用によっては自作せざるを得ない場合もある、などの意見が出た ・どちらを選択するとしても、それぞれ一長一短はあるので一概に偏った判断はできない ・構築する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.
- 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. 【Case6】 n/m(n<=m)のステップ表示に関する部分 ステップインジケーターの表現も自作とライブラリの導入の選択は迷うかもしれない部分 ・ライブラリ： FlexibleSteppedProgressBar https://github.com/amratab/FlexibleSteppedProgressBar ・ライブラリ：KYNavigationProgress https://github.com/ykyouhei/KYNavigationProgress ＜ステップインジケーター関連ライブラリ例＞ 主な特徴を下記にざっくり： ・InterfaceBuilderでも色の変更やインジケーター個数が簡単にできる ・FlexibleSteppedProgressBarDelegateプロトコルになっている （イメージとしてはUIPageViewControllerの様な感じに近いです） DIYでできなくもないけれども、細かな部分の 動き等も考慮したり変更を加えやすくしたいと いうニーズによって考えたい点の部分。 右方向へスワイプ ・こちらはNavigationBar直下にインジケーターを表示するシンプルなもの ・InterfaceBuilderベースではないが自作のUIとも合わせやすい印象 主な特徴を下記にざっくり：
- 11. 【Case7】 UILabelをベースにした数値表示に関する部分 UILabelを拡張したクラスとTimerやCoreAnimationを活用した表現の実装を紹介 ・実装例： AnimationCounterSample https://github.com/fumiyasac/AnimationCounterSample ＜この実装のサンプルリポジトリはこちら＞ 一見実装は難しそうではあるが、DIYですぐ解決できる例 ・実装例1：該当の設定値に近づくと変化スピードが緩やかになる ・実装例2： 値の変化があった場合にドラムロールの様に変化する マスクで動きを含む見える範囲を制限 拡張したUILabelのクラス内には、 CoreAnimationを利用して、 値が上またが下から出るようにする。 拡張したUILabel マスク用UIView 拡張したUILabelのクラス内には、Timerが仕込んであり、 選択された値との差分を計算し、EaseIn / EaseOut表現をする。
- 12. 【Case8】 UICollectionViewを活用・拡張して実装をした事例 何かと複雑なUI構築で便利＆お世話になる機会が多そうなUICollectionView。 ・ライブラリ例1： iCarousel（Objective-C） https://github.com/nicklockwood/iCarousel UICollectionViewで実装できそうだけど……となりそう。 ・実装例1： MacのFinderの様な写真ギャラリー風のUIを作成する ・実装例2： セルを上へスクロールすると前のセルに重なる動き 自前で作成するとなると、かなり面倒くさい実装の例 ・ライブラリ例2： FSPagerView (Swift4対応) https://github.com/WenchaoD/FSPagerView ・ライブラリ例2： VegaScrollFlowLayout (Swift4対応) https://github.com/AppliKeySolutions/VegaScroll DIYで行う場合には、下記のクラスを継承した実装をする。 UICollectionViewFlowLayout, UICollectionLayout, UICollectionViewLayoutAttributesの3つ。
- 13. 【おまけ】 そのほか気になったUIライブラリに関するトピック 個人的に使用したり試してみたい事例を少し雑ではありますがまとめてみました。 ライブラリ： DOFavoriteButton（最新版には未対応） https://github.com/okmr-d/DOFavoriteButton 例1は実際に弊社での新規アプリ開発の際に出た話です ・例1： Animation用の画像素材を用いた表現 上記をSwift4で動く様にForkしたのはこちら https://github.com/fumiyasac/DOFavoriteButton こちらは自分でもカスタマイズができないかを模索中です。 AnimationGIFを使う際に出てきたつらみ： ・画像の容量やサイズの問題 ・複雑な動きを用いたアニメーションが表現しずらい 解決のための候補 ・▲ライブラリ例1： Lottie （Airbnb製） https://airbnb.design/lottie/ ・●ライブラリ例2： APNGKit (Lineスタンプでも活用) https://github.com/onevcat/APNGKit ・例2： 複数のAnimationを組み合わせて複雑なものをつくる この部分のアニメーションの動きは、 CAShapeLayer & CoreAnimation をベースにした実装になっている。(InterfaceBuilderでも動作可)
- 14. 今回紹介したライブラリを組み合わせて作成したUI実装例 UI実装やライブラリを知り、うまく活用することで動きや見た目を美しく ＆ 一味加えてみる ・実装例：Swift4でUIライブラリを組み合わせて作成したUIサンプル https://github.com/fumiyasac/MixedUILibrariesSample ＜この実装のサンプルリポジトリはこちら＞ 1. 組み合わせ方次第では、 美しいUI表現ができる！ 2. 中の実装をDIYする際に、 実装の方法を生かすことも！ 「取り組んで見てよかった！」 と思うことができたポイント2つ。
- 15. まとめ 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時の工夫が生まれる
- 16.