UI Component Catalog for Android ϐοΫΞοϓגࣜձࣾ @kazutoyo 

ࣗݾ঺հ ϐοΫΞοϓגࣜձࣾ ౦ւ ࿨๛ ʢ@kazutoyoʣ νϟοτܕখઆͷDMM TELLERͷ iOS/Androidͷ։ൃΛ୲౰ 

No content

UI Component 

No content

UI Component • ΞϓϦέʔγϣϯ্Ͱ࠶ར༻Ͱ͖ΔΑ͏ͳViewΛ·ͱΊΔ • ϘλϯɺϦετɺΧʔυ…etc 

UI Component Catalog 

No content

Storybook • React/Vue/AngularͰͷUI Component Catalog • StorybookΛ࢖͏͜ͱͰɺ։ൃऀ΍σβΠφʔ͸ίϯϙʔωϯ τ୯ҐͰͦΕͧΕͷ࣮૷΍ৼΔ෣͍Λ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ • ͲΜͳίϯϙʔωϯτ͕͋Δ͔΋ಈ͔ͯ֬͠ೝ͢Δ͜ͱ͕Ͱ͖ Δ 

ΊͬͪΌ͍͍ʂʂ 

AndroidͰ΋࢖͍ͨͯ͘ ʢࡶʹʣͭͬͯ͘Έ·ͨ͠ 

https://github.com/kazutoyo/ UIComponentCatalog 

طଘͷϓϩδΣΫτʹ௥Ճͯ͠ΈΔ 

طଘͷطଘͷϓϩδΣΫτʹ௥Ճͯ͠ΈΔ • TELLERͷΞϓϦͰ͸ݱࡏϚϧνϞδϡʔϧʹͳ͍ͬͯͳ͍ • ৽نͰ࡞ΔίϯϙʔωϯτΛ:uicomponentͱͯ͠Ϟδϡʔϧʹ੾ Γग़͢ • UIComponentCatalog༻ͷPhone&TabletϞδϡʔϧΛ௥Ճͯ͠ɺ ͦ͜Ͱ:uicomponentϞδϡʔϧΛಡΈࠐΈUIComponentCatalog Λ࣮૷͢Δ 

NewModule → Android Library 

͜Μͳײ͡ͰUIComponent༻ͷϞδϡʔϧΛ௥Ճ 

:uicomponentʹͭͬͨ͘ComponentΛ௥Ճ 

NewModule → Phone & Tablet Module 

UIComponentCatalogϞδϡʔϧΛ௥Ճ 

ActivityΛ௥ՃʢLayout File͸ੜ੒͠ͳ͍ʣ 

JitPackϦϙδτϦΛ௥Ճ > build.gradle (project) repositories { google() jcenter() maven { url "https://jitpack.io" } } 

UIComponentCatalogͱ :uicomponentϞδϡʔϧΛ௥Ճ > uicomponentcatalog/build.gradle dependencies { implementation ‘com.github.kazutoyo:UIComponentCatalog:0.0.+’ implementation project(':uicomponent') } 

ComponentCatalogActivityΫϥεΛܧঝͯ͠ createCollections()Λ࣮૷͢Δ class TellerUIComponentCatalogActivity : ComponentCatalogActivity() { override fun createCollections(): List = listOf( ComponentCatalogCategory("Common", listOf( ComponentCatalogSubCategory("ϑΥϩʔϘλϯ", listOf( object : ComponentItem("ϑΥϩʔϘλϯʢະϑΥϩʔʣ") { override fun buildItem(): View { return FollowButton(this@TellerUIComponentCatalogActivity).apply { setIsFollowed(false) } } } )) )) ) } 

͔ͭͬͯΈͯ • ߴ଎ʹUIίϯϙʔωϯτͷ։ൃͰ͖ΔΑ͏ʹͳͬͨ • ͱ͘ʹຊମΞϓϦ͕Ϟδϡʔϧ෼ׂ͞Ε͍ͯͳ͔͔ͬͨΒ͍··ͰΊͪΌͪ͘Ό Ϗϧυ͕͔͔͍͚࣌ؒͬͯͨͲɺUIComponentCategoryͷΞϓϦέʔγϣϯ Ͱ֬ೝͰ͖ΔͷͰϏϧυ଴͕ͪͳ͘ͳͬͨ • ViewΛίϯϙʔωϯτԽ͢Δบ͕ͭ͘Α͏ͳؾ͕͢Δ • σβΠφʔ͞Μͱίϯϙʔωϯτ୯ҐͰσβΠϯνΣοΫ͕Ͱ͖ΔͷͰɺ΍Γ ΍͘͢ͳΓͦ͏ 

·ͩ·ͩUIComponentCatalog͸࡞Γ్தͳͷͰ ఏҊ΍PullRequestͳͲ׻ܴ͠·͢ʂ 

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ϐοΫΞοϓגࣜձࣾͰ͸ΤϯδχΞΛ ืू͍ͯ͠·͢ͷͰԿଔ