potatotips #63の登壇資料になります。 https://potatotips.connpass.com/event/134616/ 今回はサンプルを利用した開発に関するTipsとは趣向を変えて、Webサイト等で良く見かける表現を作る際のヒントになる部分やテキスト装飾関連のアプローチやライブラリ選定のポイントについてご紹介しております。 アプリ開発者にとっては、頻出でありながらも悩みのタネともなる部分についての問題解決の糸口となれば嬉しく思います。

1. アプリ開発における
テキスト装飾のアイデア集
Fumiya Sakai (Just1factory)
2019/07/24 potatotips #63 @ Smart News

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. 頻出の表現ではあるけれども地味につらみを感じることも多い
例. いわゆる「Webの様なテキスト表現」はなかなか面倒な部分
CoreTextと遊んでみましょう
CoreTextやTextKitを利用したTIPSの事例:
しかしながら、私たちが見慣れているWebサイト等におけるテキスト表現の中
では簡単にできそうに見えるものでもいざ実現しようとすると難しいものもあ
るのは事実。
(1) UILabel
iOSアプリ開発においてもしばしば利用するのはUILabelやUITextView。
(2) UITextView
(3) CoreText
https://techlife.cookpad.com/entry/2016/06/17/112051
今回はこの実装に対するアプローチとアイデアに関して簡単に考察します。(4) TextKit
iOSアプリ開発においてテキスト表現に関するもの:
TextKitをマスターし、思い通りに文字をレイアウトする
https://academy.realm.io/jp/posts/tryswift-katsumi-kishikawa-mastering-textkit-swift-ios/

5. AttributedTextの活用とCSS表現を簡単に見比べ
例. テキスト表示を取り扱う上で調整を伴う部分
(1) アライメント
(2) フォント
(3) 文字配色
(4) 行間
主に調整が必要になってしまう部分:
(5) 収まらない場合の表示
UILabel / UITextView & AttributedText 近いCSSプロパティ
(1) text-align
(2) font-size
(3) color
(4) line-height
(5) text-justify
UI実装時に感じる課題:
個別のUI要素に対して点在し
て散らかりやすい部分なので
上手な形でまとめたい！
Attributeの定義や設定につ
いても書き方を合わせたり調
整しやすくしておきたい！
いつも必ず利用するものだからこそ、事前の段階である程度定めておきたいし、整えておきたい気持ちがあった。

6. よく利用するAttributedTextの設定クラスでまとめる
例. UILabelにおけるAttribute定義を共通化する
final class UILabelDecorator {
// MARK: - Static Function
// 該当のUILabelに付与する属性を設定する
static func getLabelAttributesBy(keys: (lineSpacing: CGFloat, font: UIFont, foregroundColor: UIColor)) -> [NSAttributedString.Key :
Any] {
// 行間に関する設定をする
// MEMO: lineBreakModeの指定しないとはみ出た場合の「...」が出なくなる
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = keys.lineSpacing
paragraphStyle.lineBreakMode = .byTruncatingTail
// 上記で定義した行間・フォント・色を属性値として設定する
var attributes: [NSAttributedString.Key : Any] = [:]
attributes[NSAttributedString.Key.paragraphStyle] = paragraphStyle
attributes[NSAttributedString.Key.font] = keys.font
attributes[NSAttributedString.Key.foregroundColor] = keys.foregroundColor
return attributes
}
}
利用するものが多い場合にはtypealiasやstructを利用
良く利用するものをひとまとめにする！

7. Webでは良く見かけるが一筋縄ではいかない例
例. Wikipediaでのテキスト表示の事例
特にこの部分が厄介かも:
その1:
ハイパーリンクの様なリンク
ボタン表現の難しさ
その2:
太字のテキストと標準のテキ
ストが混在時の難しさ
静的なテキスト表示であればAttributedTextだけでも頑張れるが、サーバーサイドと連携する場合は注意が必要なところ

8. こちらもWebでは良く見かけるが一筋縄ではいかない例
例. ポータルサイトにおけるパンくずリスト
特にこの部分が厄介かも:
その1:
画面遷移と動的に連動する部
分の処理＆画面構造への配慮
その2:
全体の文字長さがスクリーン
の横幅を超過した場合の配慮
その3:
タップ可能領域やデザイン調
整部分（そもそも妥当？）

9. テキスト表示の調整や装飾の際に考えるポイントはどこか？
考察. デザインやバックエンドのデータに応じて表現の方針は変わりうる
テキスト表現
・UILabel / UITextView
・AttributedText
・CoreText / TextKit
実装方針
・Extension
・HtmlText / WebView
・UI Libraries
データの表現形式
・Raw Text
・Markdown
・HTML
必要に応じて上手に使い分ける必要が出てくる部分なので、自前で頑張る以外ではライブラリを活用するのも良さそう。

10. Staticなテキストの場合におけるデザインでの調整のヒント
UILabelやUITextViewのみを活用する場合は部品レイアウトにも気をつける
いわゆる「Wikipediaの様なテキスト表記」場合のアイデア
① UIStackViewとの組み合わせで表現する
（参考）UITextViewで表現するアプローチ例
② AttributedTextを有効活用する
サーバーから取得したテキスト情報に対して装飾を加える
場合においては、細部の表現まで考慮すると難易度が上が
る場合の方が多いために注意が必要です。
UITextViewを使ってテキストの一部をハイパーリンク化する
http://xyk.hatenablog.com/entry/2017/05/18/201006
UITextViewにタップ可能なリンクを挿入する
https://qiita.com/shtnkgm/items/3c8b6b794219fbf087ba
下記はWebサイトのリンク付きテキストを実装する場合の一例です。

11. そのままだと取り扱いづらい場合にはライブラリを活用する
AttributedTextに関連する部分の取り扱いを便利にするライブラリ
AttributedTextについては、デザイン場所や利用する局面によって実装がとっ散らかりやすい部分なので、下記のよ
うなライブラリを活用していくのも良いかと思います。
(用途例1) テキスト属性の書き方を整理する
・SwiftyAttributes
https://github.com/eddiekaiger/SwiftyAttributes
・AttributeTextView
https://github.com/evermeer/AttributedTextView
(用途例2) 既存AttributedTextの中にリンクなどを付与する
・ActiveLabel.swift
https://github.com/optonaut/ActiveLabel.swift
※ 容易にURL・ハッシュタグ・Twitterメンションをリンク
化できるので活用機会は多いかと思います。

12. Markdown形式での表示についても検討してみる
AttributedTextに関連する部分の取り扱いを便利にするライブラリ
テキストで表現する部分については、Markdownで表示するというアイデアもあります。記事コンテンツ等ユーザーの
入力を伴うがテキスト装飾自体が最低限で良い場合には活用ができるかと思います。
(用途例) テキスト属性の書き方を整理する
・SwiftyMarkdown
https://github.com/SimonFairbairn/SwiftyMarkdown
・MarkdownView
https://github.com/keitaoouchi/MarkdownView
(参考) Markdown + WebViewの複合技
・SwiftでMarkdownをレンダリングしたい時どうしたか
https://qiita.com/star__hoshi/items/8008cad53b490cc4ecb8
※ アプリ側で表示するMarkdownの装飾は別
途アプリ側に仕込んでおく必要があります。

13. 今回のまとめ
良く活用する部分ではあれども、つらみを感じる部分に踏み込むのは大切。
僕はこう思った:
細かくはありながらもデザイナーとの共同作業時はもちろん、サーバーサイドから取得したデータを取り扱う際
にも吟味が必要な部分なので、アプリ側でもしっかりと配慮しておくことを忘れないようにと自戒を込めて。
僕の最近の活動:
ありがたいことに現在もiOS開発＋サーバーサイドのハイブリッドな感じでお仕事をしています。しかし目下の
悩みは自分のサンプル制作や執筆活動が停滞気味でちょっと申し訳ない感じです。
振り返ってみて:
iOSアプリ開発におけるテキストデータの取り扱いに関しては、特にデザイン調整を行う際はなかなかつらみを
感じてしまう場面はあると思うが、便利なアイデアや方法を予め試しておくことで準備ができると感じました。

14. 7/27に開催される技術書同人誌博覧会に続編を頒布します！

15. Thank you for listening !