TextKitから表現が広がる - iOSDC Japan 2018

TextKitはiOS7から導入されたテキスト用のレンダリングエンジンです。これのおかげによって、低レベルのAPIを格闘することなく、開発でも難しいテキストでも比較的容易にレイアウトを描画できるようになっています。本トークでは、実際にデザイナーとあった話をもとに、文字列デザインをフォーカスして行きます。

Transcript

1. TextKit͔Βදݱ͕޿͕Δ @ iOS DC2018 2018/09/02 10:50ʙ Track C ϨΪϡϥʔτʔΫ Kohei Nishioka / paper_and_paper
2. Introduction
3. Profile • Kohei Nishioka / Pref. Fukui • iOS Engineer @ iRidge Inc. • Swift, Objective-C, C++, Ocaml, 
 PHP, JavaScript … • Japanese / English • Github takumi314 • Twitter #paper_and_paper
5. Agenda ɾ8IZ
   5FYU,JU
   ɾ8IBUT
   5FYU,JU
   ɾ4USVDUVSFT
   ɾ/4"UUSJCVUFE4USJOH
   ɾ/4$POUBJOFS
   ɾ/45FYU-BZPVU.BOHFS
   ɾ4VNNBSZ
6. Why TextKit ?
7. ൃ୺ ɹɹɹʮ͜ͷߦؒΛ2p͚ͩখͯ͘͞͠΋Β͑·͢ʁʯ ɹɹɹʮ͜͜ͷจࣈ͚ͩϑΥϯτม͑ͯཉ͍͠ʯ ɹɹɹʮจࣈͷִؒΛͪΐͬͱ͚ͩ…. ʯ
8. ʮ͸ɺ͸͍….ʯ
9. WWDC 2018 Session 221
10. WWDC 2018
11. WWDC 2013
13. “This is what customers pay us for – to sweat all these details so it’s easy and pleasant for them to use our computers. We’re supposed to be really good at this. That doesn’t mean we don’t listen to customers, but it’s hard for them to tell you what they want when they’ve never seen anything remotely like it. Take desktop video editing. I never got one request from someone who wanted to edit movies on his computer. Yet now that people see it, they say, ‘Oh my God, that’s great!’ ”
14. “Sweating the Details ”
15. What’s TextKit ?
17. TextKit • Rendering Engine for Texting • iOS7 or Later • Based on Core Text
18. TextKit and CoreText
19. Before iOS7 … HTMLͰඳը
20. iOS7 or Later
21. API groups w ςΩετΛදࣔ͢Δ
    w 6*5FYU7JFX
    w 6*5FYU'JFME
    w 6*-BCFM
    w ςΩετඳըΛ੍ޚ͢Δ
    w /4-BZPVU.BOBHFS
    w /45FYU$POUBJOFS
    w σΩετσʔλΛอ؅͢Δ
    w /4"UUSJCVUF4USJOH TextKitͷຊؙ
22. API groups w ςΩετΛදࣔ͢Δ
    w 6*5FYU7JFX
    w 6*5FYU'JFME
    w 6*-BCFM
    w ςΩετඳըΛ੍ޚ͢Δ
    w /4-BZPVU.BOBHFS
    w /45FYU$POUBJOFS
    w σΩετσʔλΛอ؅͢Δ
    w /4"UUSJCVUF4USJOH View Controller Model
23. TextKit Like “MVC” w7JFX
    w6*5FYU7JFX
    w6*5FYU'JFME
    w6*-BCFM
    w$POUSPMMFS
    w-BZPVU.BOBHFS
    w/45FYU$POUBJOFS
    w.PEFM
    w/4"UUSJCVUFE4USJOH
24. Structure
25. The Reletions between Objects UITextView NSTextContainer NSLayoutManager NSTextStorage
26. Structures ɾNSAttributeString ɾNSContainer ɾNSTextLayoutManger
27. NSTextStorage
28. The Reletions between Objects UITextView NSTextContainer NSLayoutManager NSTextStorage
29. NSTextStorage • TextKitͷModelʹ૬౰͢Δ • NSMutableAttributedStringͷSubclass (ΫϥεΫϥελ) • NSLayoutManagerͷมߋΛcharacters ΍ attributes ʹ
 ௨஌ͯ͠ඞཁͳΒ͹࠶දࣔΛଅ͢ • 1ͭຢ͸ෳ਺ͷNSLayoutManagerΛ࣋ͭ • ͲͷεϨου͔ΒͰ΋ΞΫηεՄೳ • ಉ࣌ʹෳ਺εϨου͔ΒͷΞΫηε͸ආ͚ͨํ͕ແ೉ https://developer.apple.com/documentation/uikit/nstextstorage
30. Original Storage NSAttributedStringͷϓϦϛςΟϒϝιου NSMutableAttributedStringͷϓϦϛςΟϒϝιου ৄࡉ͸AppleͷʮObjective-C ϓϩάϥϛϯά֓೦ʯͳͲΛࢀর
31. Ex. CustomTextStorage
32. NSAttributedString
33. NSAttributedString /4"UUSJCVUFE4USJOHͱಉ͡ػೳ
34. UIFont
35. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
36. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
37. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
38. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
39. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
40. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
41. UIFont • pointSize • lineHeight • ascender • desceder • leading • capHeight
42. usesFontLeading LeadingΛແࢹ͢Δ৔߹
43. Adding a Custom Font • αϙʔτ͍ͯ͠Δܗࣜ • True Type Font (*.ttf) • Open TypeFont (*.otf)
 • ະ֬ೝ • True Type Collection (*.ttc) ʁʁ
44. NSAttributedString • σϑΥϧτ஋͕ଘࡏ͢Δ
45. I Love iOSDC Apply bold font with "Comic Sans MS"
46. I Love iOSDC textView.text = "I Love iOSDC" guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return } let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold) let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize)) let newText = NSMutableAttributedString(string: textView.text) newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5)) textView.attributedText = newText
47. I Love iOSDC textView.text = "I Love iOSDC" guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return } let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold) let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize)) let newText = NSMutableAttributedString(string: textView.text) newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5)) textView.attributedText = newText I Love iOSDC
48. textView.text = "I Love iOSDC" guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return } let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold) let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize)) let newText = NSMutableAttributedString(string: textView.text) newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5)) textView.attributedText = newText
49. I Love iOSDC Comic Sans MS 24-pt I Love iOSDC Arial Black 12-pt I Love iOSDC Helvetica 12-pt ద༻લ ॳظԽ ଐੑઃఆ
50. Attributes with default values Baseline offset 0.0 Font Helvetica 12-pt Background color None (no background) Kern None (use font's default kerning) Ligature None (use font's standard ligatures) Link None Foreground color None (no background) Paragraph style defaultParagapghStyle
51. I Love iOSDC textView.text = "I Love iOSDC" guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return } let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold) let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize)) let newText = NSMutableAttributedString(attributedString: textView.attributedText) newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5)) textView.attributedText = newText ΠχγϟϥΠβʹଐੑ৘ใΛ༩͑Δ
52. The Reletions between Objects UITextView NSTextContainer NSLayoutManager NSTextStorage
53. NSLayoutManager
54. NSLayoutManager • ϨΠΞ΢τͱϨϯμϦϯάʹؔ͢Δௐ੔Λߦ͏ • ςΩετΛදࣔ͢΂͖࠲ඪͱܗঢ় -> NSTextContainer • දࣔ͢Δίϯςϯπ -> NSTextStorage
 • ̍ͭ·ͨ͸ෳ਺ͷNSTextContainerΛ࣋ͭ • ̍ͭͷNSTextStorageΛ࣋ͭ
55. NSLayoutManager
56. NSTextContainer
57. NSTextContainer ʮUIKitపఈղઆ iOSϢʔβʔΠϯλʔϑΣΠεͷ։ൃʯΑΓൈਮ
    
58. ʮUIKitపఈղઆ iOSϢʔβʔΠϯλʔϑΣΠεͷ։ൃʯΑΓൈਮ
59. NSTextContainer ඇදࣔྖҬ
60. NSTextContainer • UITextView্ʹදࣔ͢ΔςΩετͷ࠲ඪͱܗঢ়Λఆٛ •
61. NSTextContainer → NSLaytouManager͕ςΩετҐஔΛڭ͑ͯ͘ΕΔ
62. NSTextContainer ιʔείʔυ͸ͪ͜Β ->ɹhttps://github.com/takumi314/Sensitive-TextView
63. Summary • TextKitΛ੍͢Ε͹ɺେ൒ͷςΩετඳըΛϚελͰ͖Δ • ࡉ෦ʹϑΥʔΧε͢Δ΄Ͳଟ༷ͳςΩετදݱʹ
64. • Text Programming Guide for iOS - https:// developer.apple.com/library/archive/documentation/ StringsTextFonts/Conceptual/TextAndWebiPhoneOS/ CustomTextProcessing/CustomTextProcessing.html • WWDC2018 “TextKit Best Practice” - session 221 • WWDC2013 “Introducing TextKit” - session 210 References
65. Thank you
66. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ m(__)m