iOS で CSS スキニング

NUI を使って CSS スキニングしてみたお話

Transcript

1. iOS Ͱ CSS εΩχϯά @dealforest Toshihro Morimoto 2013/06/22 yidev@ौ୩ษڧձ ୈҰճ
2. ΞδΣϯμ • ࣗݾ঺հ • Ϟνϕʔγϣϯ • ϥΠϒϥϦൺֱ • NUI ʹ͍ͭͯ • ·ͱΊ
3. ࣗݾ঺հ http://about.me/dealforest iOS ͷΞϓϦͭͬͨ͘Γ Ruby ॻ͍ͨΓ Perl ॻ͍ͨΓ Flash ΍ͬͨΓͯ͠·ͨ͠ @dealforest Toshihro Morimoto
4. ϩδοΫͱελΠϧΛ ෼཭͍ͨ͠ Ϟνϕʔγϣϯ
5. ͦ΋ͦ΋ σβΠϯΛमਖ਼͢ΔͨΊʹ ίʔυΛมߋ͢Δͷ͸ ΊΜͲ͍͘͞
6. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹશମతʹϑΥϯταΠζมߋͯ͠ɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
7. ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹϑΥϯτ͜Εʹͯ͠ɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
8. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹӨͷΦϑηοτͣΒͯ͠ɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
9. ͳΜͯ͜ͱ͸ ೔ৗ஡൧ࣄʹ͋Γ·͢Ͷ
10. Storyboard มߋͯ͠... nib ϑΝΠϧΛมߋͯ͠... ίʔυͰ΋มߋͯ͠....
11. ͳΜͯຖճ΍Γͨ͘ͳ͍!!
12. ͦΜͳ࣌ʹҰΧॴमਖ਼͢Ε͹ શͯ൓ө͞ΕΕ͹͍͍ͷʹͳ...
13. ͦΕ͕Ͱ͖ΔͷͰ͢
14. UILabel ͷ৔߹ CGRect frame = CGRectMake(0, 0, 100, 100); UILabel *label = [[UILabel alloc] initWithFrame:frame]; label.text = @"NUI demo"; label.font = [UIFont fontWithName:@"Helvetica" size:16]; label.textColor = [UIColor blueColor]; label.shadowColor = [UIColor grayColor]; label.shadowOffset = CGSizeMake(1, 1); label.textAlignment = NSTextAlignmentCenter; label.backgroundColor = [UIColor whiteColor];
15. UILabel ͷ৔߹ CGRect frame = CGRectMake(0, 0, 100, 100); UILabel *label = [[UILabel alloc] initWithFrame:frame]; label.text = @"NUI demo"; // ↓ ͜Ε͔ΒԼ͸ελΠϧ label.font = [UIFont fontWithName:@"Helvetica" size:16]; label.textColor = [UIColor blueColor]; label.shadowColor = [UIColor grayColor]; label.shadowOffset = CGSizeMake(1, 1); label.textAlignment = NSTextAlignmentCenter; label.backgroundColor = [UIColor whiteColor];
16. NUI ࢖༻ͨ͠ UILabel CGRect frame = CGRectMake(0, 0, 100, 100); UILabel *label = [[UILabel alloc] initWithFrame:frame]; label.text = @"NUI demo"; label.nuiClass = @"SampleLabel"; SampleLabel { font-name: Helvetica; font-size: 16 font-color: blue; shadow-color: gray; shadow-offset: 1, 1; text-align: center; background-color: white; } NSSϑΝΠϧ
17. NUI Λ࢖͏ͱ͜ͷΑ͏ʹ NSS ϑΝΠϧʹఆٛͯ͠ ؅ཧ͢Δ͜ͱ͕Ͱ͖·͢
18. NUI Ҏ֎ʹ΋ϥΠϒϥϦ͕͋ΔͷͰ ·ͣ͸ͦΕΒΛܰ͘;Ε͍͖ͯ·͢
19. ϥΠϒϥϦൺֱ
20. ϥΠϒϥϦൺֱ •NimbusKit
21. ϥΠϒϥϦൺֱ •NimbusKit •NUI
22. ϥΠϒϥϦൺֱ •NimbusKit •NUI •Pixate
23. NimbusKit
24. NimbusKit • ৭ʑͱศརͳπʔϧ͕ೖͬͨϑϨʔϜ ϫʔΫ
25. NimbusKit • ৭ʑͱศརͳπʔϧ͕ೖͬͨϑϨʔϜ ϫʔΫ • CSS εΩχϯάʹ͍ͭͯ͸Ͱ͖Δ͜ͱ ͕গͳ͗͢Δ UIAppearance Ͱ΍ͬͨํ͕Ϛγ
26. ࢦఆͰ͖ΔελΠϧ͸͜͜ʹҰཡ͕͋Γ·͢ http://docs.nimbuskit.info/group___c_s_s-_stylesheets.html
27. NUI
28. NUI • OSS (MIT License)
29. NUI • OSS (MIT License) • pading, margin ͸ͳ͍ɻ͋͘·Ͱ૷০ͷΈ
30. NUI • OSS (MIT License) • pading, margin ͸ͳ͍ɻ͋͘·Ͱ૷০ͷΈ • version 0.2.5 Ҏ߱͸ iOS6 Ҏ্͕ඞਢ
31. NUI • OSS (MIT License) • pading, margin ͸ͳ͍ɻ͋͘·Ͱ૷০ͷΈ • version 0.2.5 Ҏ߱͸ iOS6 Ҏ্͕ඞਢ • iOS7 ͸ରԠதͱͷ͜ͱ
32. Pixate
33. Pixate • NUI ΑΓ΋ɺΑΓ CSS ϥΠΫͳࢦఆ
34. Pixate • NUI ΑΓ΋ɺΑΓ CSS ϥΠΫͳࢦఆ • ແྉͰ͔ͭ͑ΔΑ͏ʹͳΓ·ͨ͠ɻ ͨͩ͠ඇӦར໨త͔ͭձࣾͩͱ10໊·Ͱ
35. Pixate • NUI ΑΓ΋ɺΑΓ CSS ϥΠΫͳࢦఆ • ແྉͰ͔ͭ͑ΔΑ͏ʹͳΓ·ͨ͠ɻ ͨͩ͠ඇӦར໨త͔ͭձࣾͩͱ10໊·Ͱ • RubyMotion, Titanium, MonoTouch Ͱ΋ར༻Մೳ
36. Pixate • NUI ΑΓ΋ɺΑΓ CSS ϥΠΫͳࢦఆ • ແྉͰ͔ͭ͑ΔΑ͏ʹͳΓ·ͨ͠ɻ ͨͩ͠ඇӦར໨త͔ͭձࣾͩͱ10໊·Ͱ • RubyMotion, Titanium, MonoTouch Ͱ΋ར༻Մೳ • Framework Ͱ഑෍͞ΕΔͷͰϒϥοΫϘοΫε
37. ελΠϧࢦఆͰ͖Δछྨͷ਺ɹ Pixate > NUI >>>> NimbusKit
38. ϥΠϒϥϦൺֱ
39. ϥΠϒϥϦൺֱ • Pixate ͩͱ pading, margin ΛࢦఆͰ͖Δά ϥσʔγϣϯ΋ࡉ͔͘ઃఆͰ͖Δ
40. ϥΠϒϥϦൺֱ • Pixate ͩͱ pading, margin ΛࢦఆͰ͖Δά ϥσʔγϣϯ΋ࡉ͔͘ઃఆͰ͖Δ • NUI ͸͋͘·ͰελΠϧͷΈɹɹɹɹɹ Ґஔௐ੔ ͸ࣗྗͰ͕Μ͹Δ
41. ϥΠϒϥϦൺֱ • Pixate ͩͱ pading, margin ΛࢦఆͰ͖Δά ϥσʔγϣϯ΋ࡉ͔͘ઃఆͰ͖Δ • NUI ͸͋͘·ͰελΠϧͷΈɹɹɹɹɹ Ґஔௐ੔ ͸ࣗྗͰ͕Μ͹Δ ͨͩ͠ Storyboard Λ࢖͏͜ͱͰ ɹ ͦͷลΓͷࠩ͸ຒΊΕΔ
42. ݸਓతʹ͸ storybord, nib Λ࢖͏ͳΒ NUI Ͱ͍͍͔ͳͱࢥͬͯ·͢
43. ͱ͍͏Θ͚Ͱ͜Ε͔Β͸ NUI ʹ͍ͭͯͰ͢
44. version ͸ 0.2.9
45. NUI Λ࢖͏ͱ ͜͏͍͏͜ͱ͕ ؆୯ʹͰ͖·͢
46. before after
47. ηοτΞοϓ
48. CocoaPods࢖༻࣌ Podfile platform :ios, '6.0' pod ‘NUI’ $ pod install
49. main.m int main(int argc, char *argv[]) { @autoreleasepool { [NUISettings initWithStylesheet:@"NSSϑΝΠϧΛࢦఆ͢Δ"]; return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); } }
50. AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [NUIAppearance init]; ... return YES; }
51. ͜Ε͚ͩͰಈ͖·͢
52. ελΠϧͷॻ͖ํ @primaryFontNameBold: HelveticaNeue-Bold; @primaryFontSize: 17; Button { background-color: red; font-color: #FFFFFF; font-color-highlighted: rgb(204, 204, 204) font-name: @primaryFontNameBold; font-size: @primaryFontSize; corner-radius: 6; }
53. ελΠϧͷॻ͖ํ @primaryFontNameBold: HelveticaNeue-Bold; @primaryFontSize: 17; BlueButton { background-color: blue; font-color: #FFFFFF; font-color-highlighted: rgb(204, 204, 204) font-name: @primaryFontNameBold; font-size: @primaryFontSize; corner-radius: 6; }
54. https://github.com/tombenner/nui Կ͕ࢦఆͰ͖Δ͔͸ README Λࢀর͍ͯͩ͘͠͞
55. ελΠϧࢦఆํ๏
56. ελΠϧࢦఆํ๏ 1. ཁૉ(UIButton, UILabel ...)Λࢦఆͯ͠ελ ΠϧΛ൓ө͢Δ
57. ελΠϧࢦఆํ๏ 1. ཁૉ(UIButton, UILabel ...)Λࢦఆͯ͠ελ ΠϧΛ൓ө͢Δ 2. ಠࣗΫϥεΛఆٛͯ͠ελΠϧΛࢦఆ ͢Δ
58. 1.ཁૉΛࢦఆͯ͠ελΠϧΛ൓ө͢Δ
59. 1.ཁૉΛࢦఆͯ͠ελΠϧΛ൓ө͢Δ • NSS ϑΝΠϧͰఆٛ͢Δ
60. 1.ཁૉΛࢦఆͯ͠ελΠϧΛ൓ө͢Δ • NSS ϑΝΠϧͰఆٛ͢Δ • શͯͷΠϯελϯεʹ൓ө͞ΕΔ
61. 1.ཁૉΛࢦఆͯ͠ελΠϧΛ൓ө͢Δ • NSS ϑΝΠϧͰఆٛ͢Δ • શͯͷΠϯελϯεʹ൓ө͞ΕΔ • ఆٛ͸͕ͨ͠ಛఆͷΠϯελϯεʹελΠ ϧΛద༻͠ͳ͍ํ๏΋༻ҙ͞Ε͍ͯΔ (ྫ) nuiClass = @”none”
62. 2. ಠࣗΫϥεΛఆٛͯ͠ελΠϧΛࢦఆ͢Δ
63. 2. ಠࣗΫϥεΛఆٛͯ͠ελΠϧΛࢦఆ͢Δ • NSS ϑΝΠϧͰఆٛͯ͠ Storyboard ΋͘͠͸ίʔυͰ nuiClass Λࢦఆ͢Δ
64. 2. ಠࣗΫϥεΛఆٛͯ͠ελΠϧΛࢦఆ͢Δ • NSS ϑΝΠϧͰఆٛͯ͠ Storyboard ΋͘͠͸ίʔυͰ nuiClass Λࢦఆ͢Δ • ΠϯελϯεຖʹελΠϧΛࢦఆ͢Δ
65. 2. ಠࣗΫϥεΛఆٛͯ͠ελΠϧΛࢦఆ͢Δ • NSS ϑΝΠϧͰఆٛͯ͠ Storyboard ΋͘͠͸ίʔυͰ nuiClass Λࢦఆ͢Δ • ΠϯελϯεຖʹελΠϧΛࢦఆ͢Δ • ελΠϧͷܧঝͰ͖Δ (ྫ) nuiClass=@”Label:TitleLabel”
66. StoryboardͰελΠϧΛࢦఆ
67. ίʔυͰελΠϧΛࢦఆ
68. ίʔυͰελΠϧΛࢦఆ CGRect frame = CGRectMake(0, 0, 100, 100); UILabel *label = [[UILabel alloc] initWithFrame:frame]; label.nuiClass = @"titleLabel"; [self.view addSubview:label];
69. ίʔυͰελΠϧΛࢦఆ CGRect frame = CGRectMake(0, 0, 100, 100); UILabel *label = [[UILabel alloc] initWithFrame:frame]; label.nuiClass = @"titleLabel"; [self.view addSubview:label]; CGRect frame = CGRectMake(0, 0, 100, 100); UILabel *label = [[UILabel alloc] initWithFrame:frame]; [NUIRenderer renderLabel:label withClass:@"titleLabel"]; [self.view addSubview:label];
70. ͱ͍͏͜ͱ͸্खʹཁૉΛࢦఆͯ͠ ελΠϧΛ൓ө͢Ε͹ ݟͨ໨ΛҰؾʹ͔͑ΕΔͷͰ͸ʁʂ
71. αϯϓϧݟΔݶΓ ͜ΕͰ͍͚Δʂʂʂʂ
72. ͍͚Δ...
73. ...
74. ੈͷதͦΜͳ؁͋͘Γ·ͤΜͰͨ͠
75. ͦΜͳੈք͸ݬ૝Ͱͨ͠
76. ͱɺ͍͏Θ͚Ͱ ্ख͍͔͘ͳ͔ͬͨσϞͰ͢
77. before after Googolplex.NUI.nssΛ࢖༻
78. σϞ
79. શମͷελΠϧΛมߋͨ͠ ࡍͷӨڹൣғ
80. before after UIActionSheet
81. before after UIActionSheet UIView ͷഎܠ৭ΛനͰ ࢦఆͨ͠Өڹ
82. before after UIActionSheet
83. before after UIActionSheet UILabel ͷจࣈ৭ΛനͰ ࢦఆͨ͠Өڹ
84. before after UIDatePicker
85. before after UIDatePicker UIView ͷഎܠ৭ΛനͰ ࢦఆͨ͠Өڹ
86. before after UIActivityViewController
87. before after UIActivityViewController UIButton ͷഎܠ৭Λ੺Ͱ ࢦఆͨ͠Өڹ
88. before after UIImagePickerController
89. before after UIImagePickerController CancelϘλϯΛมߋͰ͖ͳ͍
90. UISegmentedControl
91. UISegmentedControl webview ͷதͷ textfield ͷબ୒࣌Ͱ΋ Өڹ͕ͰΔ
92. UIBarButtonItem
93. UIBarButtonItem UIBarButtonItemSystemItemΛ Λ࢖͏ͱ UIButton ѻ͍ʹͳΔ
94. UIWebView
95. UIWebView UIWebView Ͱ textfield Λબ୒ ͨ࣌͠ͷ Done Ϙλϯ͸ UIBarButtonItem
96. ·ͱΊ • શମͷελΠϧΛมߋͤ͞Δͷ͸ة ݥ͕͍ͬͺ͍ɻ ໰୊ͳ͍ཁૉ͚ͩΛมߋ͢Δ (NavigationBar, BarButton, BarButtonBack ౳) • େਓ͘͠ nuiClass Λࢦఆͯ͠ελΠ ϧΛ൓ө͠ͱ͍ͨํ͕޾ͤʹͳΓ·͢
97. ͋͘·Ͱݱঢ়Ͱ͋Γόʔδϣϯ͕ ͕͋ΔͱཁૉΛࢦఆͯ͠มߋͯ͠΋ ໰୊͕ͳ͍Α͏ʹͳΔ͔΋...
98. ࠓޙʹظ଴
99. ঺հͨ͠αϯϓϧ͸ github ʹ͋Γ·͢ https://github.com/dealforest/workshops/tree/master/ 20130622_yidev
100. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ