「SaCSS Special26 : WordPress＆コンテンツ制作特集」の登壇資料です。
ϒϩοΫΤσΟλʔͰมΘΔɺWordPress ͰͷΣϒαΠτ։ൃToro_Unit@SaCSS Special 261
View Slide
$ whoami2
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• Frontend Developer• WordPress Plugin and ThemeDeveloperGithub: @torounitTwitter: @Toro_Unit3
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• Frontend Developer• WordPress Plugin and ThemeDeveloperGithub: @torounitTwitter: @Toro_Unit4
5
Plugins and Themes• Custom Post Type Permalinks• Advanced Posts Blocks• Simple Post Type Permalinks• Powerful Posts Per Page (PPPP)• Vanilla• and more...6
7
WordPress Meetup Map• React Ͱग़དྷͯ·͢ɻ• https://github.com/torounit/wp-meetup-map• ϓϧϦΫ͍ͩ͘͞ɻ8
9
ݝদຊࢢ͔Β͖·ͨ͠• Shinshu WordPress Meetup• ຖճϐβ৯ͬͯ·͢ɻ• ߚ༿͕ݟ͝Ζɻ৽ͦɻ• ΞϧΫϚ͕ΏΔΩϟϥάϥϯϓϦʹͳΓ·ͨ͠ɻ10
ຊηογϣϯʹ͍ͭͯ࠷ॳΧελϜϒϩοΫͷ։ൃͷೖͷΛ͢ΔͭΓͰ͕ͨ͠ɺεϥΠυ120ຕɺ2࣌ؒ10+్தٳܜ10×2ͷ༰ʹͳͬͯ͠·ͬͨͷͰɺఘΊ·ͨ͠ɻίʔυΛॻ͖͍ͨਓͪ͜ΒͷεϥΠυΛ͝ࢀর͍ͩ͘͞ɻBlock Editor ΧελϚΠζೖ#WPmeetupOsaka / https://speakerdeck.com/torounit/get-started-customize-for-block-editor11
Block Editor Handbook• νϡʔτϦΞϧͳͲͦͦ͋͜͜ΔͷͰɺͱΓ͋͑ͣಡΉɻࣸܦ͢Δ• ࠔͬͨΒಡΉɻ• ͱΓ͋͑ͣɺຖ͔Έ͠ΊͯಡΉɻ12
Gutenberg Ҏ߱ͷςʔϚ࡞ʹ͚ͯɺࠓֶͿ͖͜ͱhttps://speakerdeck.com/waviaei/gutenberg-yi-jiang-falsetemazuo-cheng-nixiang-kete-jin-xue-bubekikoto·ͨɺͪ͜ΒͷεϥΠυซͤͯ͝ཡ͍ͨͩ͘ͱΑ͍͔ͱࢥ͍·͢ɻWordCamp Osaka 2019 ͰͷηογϣϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓதʹؤுΔʣ13
ӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫհhttps://speakerdeck.com/h2ham/wordcamp-osaka-2019-h2ham-omuoࣄྫͷͪ͜ΒΛͲ͏ͧɻWordCamp Osaka 2019 ͰͷηογϣϯͳͷͰۙʑಈը্͕Γ·͢ʢࠓதʹؤுΔʣ14
΄Μ͍ͩ15
ͦͦ WordPress ʹ͓͚ΔΤσΟλͷׂͱ16
WordPress ͱ͍͏ CMS ͷ HTMLཧ• post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δஔɻ• HTML Λԣஅతʹཧ͢ΔΈͰ͋Γɺ୯ҰͷϖʔδͦͷͷΛཧ͢ΔΈͰͳ͍ɻਤॻؗɻ• σʔλΛݩʹ HTML Λੜ͢ΔΘ͚Ͱͳ͍ɻ΄΅ͷHTML ʹςʔϚͱ͍͏Λணͤͯ৴͢Δஔɻ• ͍ͬͯ͏͔࠷ॳ (0.71)ɺςʔϚ͢Βແ͔ͬͨɻ• https://github.com/mt8/wbkobe77/blob/master/index.php17
18
19
20
• ͨͱ͑ɺconcrete5 ͱ͍͏ CMS ɺϒϩοΫ͝ͱʹσʔλϕʔεͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔ΒσʔλΛҾͬு͖ͬͯͯ̍ͭͷ HTML Λੜ͢Δɻ21
• ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔ͱ͔Λ͚ͭͯཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯςϯπཧɻͭ·Γϒϩάɻ• ͍͍ͤͥ ϔομͱϑολ͘Β͍ڞ௨Խͯ͠Ζ͏ɻఔɻ22
ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷׂͱ23
HTMLΘ͔Βͳ͍ͻͱͰɺHTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ24
ͭ·Γ͜Ε25
ੈքҰࡶͳ WordPress ͷಈ࡞ͷղઆ1. ϒϥβͰಈ͘ϗʔϜϖʔδϏϧμʔతͳԿ͔ͰHTMLΛ࡞2. ͦΕΛɺΤΫηϧͷ͍ͬͭ͢͝ʢMySQLʣʹอଘ3. ΧςΰϦʔ/ͳͲͰɺநग़ͯ͠දࣔɻ26
͍ͬͯ͏͔ͱͱϒϩάιϑτʂsince 2003.05.2727
ࠓޙͷಈFull Site Editting ͷ࣮ɻϖʔδશମɺΣϒαΠτΛͯ͋͢ͷΤσΟλʔͰ։ൃͰ͖ΔΑ͏ʹ͢Δ༧ఆɻ• αΠτλΠτϧ / φϏήʔγϣϯ ͳͲͷϒϩοΫ͢Ͱʹ։ൃ͞Ε͍ͯΔɻ28
ϒϩοΫΤσΟλʔͰมΘΒͳ͍͜ͱ• ΧελϜϑΟʔϧυͷऔΓѻ͍ɻ• ͦͦίϯςϯπΛΰϦΰϦೖΕΔശͰͳ͍ɻॴḨ͓·͚ʢߘαϜωΠϧͱ͔෦తʹΧελϜϑΟʔϧυͰͰ͖ͯΔʣ• ςʔϚΛม͑ͯɺσϑΥϧτςʔϚʹมߋͯ͠ɺݟͨҎ֎ʹӨڹ͠ͳ͍ͷ͕ WordPress ͷςʔϚͷ͋Δ͖࢟ɻ• ͦ͏͍͏CMS͕΄͍͠ͳΒɺྫ͑ Drupal ͱ͔͍͍͑Μ͡Όͳ͍͔ͳͱࢥ͏ɻ29
ϒϩοΫΤσΟλʔͰΧελϚΠζͰ͖Δ͜ͱ• Ϣʔβʔ͕؆୯ʹσβΠϯΛ͍͡ΕΔΑ͏ʹ( registerBlockStyle )• ΦϦδφϧͳΧελϜϒϩοΫ ( registerBlockType )• ϒϩοΫҎ֎ͰͷΧελϚΠζ ( registerPlugin )• طଘͷڍಈͷมߋ ( addFilter, addAction )30
ϒϩοΫελΠϧGUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ͍ͭͯ͘Δɻඇৗʹศརɻઃఆ͞ΕΔɺis-style-hoge ͷΑ͏ͳܗࣜɻ"ߴͳઃఆ" ύωϧͷ "ՃCSS Ϋϥε" Λૢ࡞͍ͯ͠Δ͚ͩɻDocumentation : https://developer.wordpress.org/block-editor/developers/filters/block-filters/#block-style-variations31
࣮ํ๏ɻΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔʹࢦఆfunction my_block_editor_assets() {wp_enqueue_script('my-block-editor-style','path/to/my-block-editor-style.js',array( 'wp-blocks' ));}add_action( 'enqueue_block_editor_assets', 'my_block_editor_assets' );32
wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻconst { registerBlockStyle } = wp.blocks;registerBlockStyle( 'core/quote', {name: 'hoge',label: '΄͛'} );33
ελΠϧ͕Ճ͞ΕΔɻeditor-style ΛͪΌΜͱઃఆ͍ͯ͠ΕϓϨϏϡʔʹద༻͞ΕΔɻ• Ϙλϯͷؙ֯ελΠϧ• ςʔϒϧͷελΠϧͳͲಉ͡ΈɻԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜ΕΛ֮͑Δํ͕༗༻ੑߴ͍ɻϒϩοΫΛࣗ࡞͢ΔࡍɺσβΠϯͷόϦΤʔγϣϯΛ૿͢ͳΒ͜ΕΛ͏ɻ34
ΧελϜϒϩοΫReact ඞਢɻ• ΦϦδφϧͷϒϩοΫΛՃͰ͖Δɻ• PHP Λซ༻͢Δ͜ͱՄೳɻ( Dynamic Block )35
import { registerBlockType } from '@wordpress/blocks';import { InnerBlocks } from '@wordpress/block-editor';const edit = ( { className } ) => ();const save = ( { className } ) => ();36
registerBlockType( 'my-block/section', {title: 'section',description: 'section',icon: 'text-page',category: 'layout',supports: {align: [ 'wide', 'full' ],anchor: true,},edit,save,} );37
ϒϩοΫͷ࡞ΓํɺBlock Editor ΧελϚΠζೖ #WPmeetupOsaka ɺBlock Editor Handbook ΛಡΜͰ͍ͩ͘͞ɻ38
Dynamic BlockPHP Λ༻͍ͨಈతͳॲཧΛߦ͑ΔϒϩοΫ• WP_Query ͳͲΛѻͬͯ࠷৽ͷߘΛදࣔ• ϩάΠϯ͍ͯ͠ΔϢʔβʔʹ͚ͨίϯςϯπɻ• ϒϩοΫͰͷ A/Bςετ• ظؒݶఆͷίϯςϯπ• etc ...39
example: Advanced Posts Blockshttps://www.wordpress.org/plugins/advanced-posts-blocks/• ΧςΰϦʔ/λά/λΫιϊϛʔͱߘλΠϓͰɺߜΓࠐ·ΕͨߘΛදࣔ͢ΔɻϒϩοΫͳͲΛఏڙɻ• TOPϖʔδͷ৽ணใҰཡͱ͔Ͱ͏ɻ40
41
• Dynamic Block ྩͷγϣʔτίʔυɻͦͷػೳΛఏڙ͍ͯ͠Δ PHP ͕յΕΔɾফ͑ΔͳͲͰίϯςϯπʹӨڹ͕ग़Δɻ• Static ͳϒϩοΫͰ࡞ͨ͠ͷɺHTMLͱͯ͠ΤσΟλʹอଘ͞ΕΔͷͰɺͦͷϒϩοΫΛఏڙ͍ͯ͠Δͷ͕ফ͑ͯӨڹগͳ͍ɻ• React ͕ΜΖ͏ɻ42
ʮཧը໘͔Β؆୯ʹϒϩοΫΛ࡞Ε·͢ʂʯͱ͍ͬͨϓϥάΠϯ͕͋Δ͕ɺDynamic Block Λ༻͍࣮ͨʹͳ͍ͬͯΔͷ͕ଟ͍ɻͦͷϓϥάΠϯ͕ফ͑Δɾ։ൃऴྃɾPro ൛ʹҎ߱͢ΔͳͲ͕͋ͬͨ߹Ͳ͏͢ΔʁΑ͘ߟ͑ͯɺݕূ͔ͯ͠Β͏͜ͱɻهࣄ͕100݅ɺ1000݅ʹͳ͔ͬͯΒߟ͍͑ͯɻ43
ϒϩοΫΤσΟλʔͰมΘΔ͜ͱ44
Ϣʔβʔͷ࡞͢Δ HTML ͷ࣭45
• ෳࡶͳ HTML Λඞཁͱ͢ΔϨΠΞτɺσβΠϯϒϩοΫΤσΟλʔͰ؆୯ʹೖྗՄೳʹɻ• ԣ෯͕ 100% ʹͳΔը૾ͳͲϘλϯΛԡ͚ͩ͢Ͱ؆୯ʹɻ• ϨεϙϯγϒͳΧϥϜϨΠΞτͳͲ࡞Մೳɻ46
։ൃऀʹͱͬͯͷ HTML ͷࣗ༝ͷԼ47
• ϒϩοΫΤσΟλʔ͕༻ҙͨ͠HTMLߏΛΧελϚΠζ͢Δͷେมɻ• ͔ͳΓෳࡶͳϒϩοΫΛࣗ࡞͢ΔΑ͏ͳʹͳΔɻ• class ໊ࣗಈͰ༩͞ΕΔͨΊɺςʔϚΛ։ൃ͢ΔଆͰͦͷ໋໊ʹ߹Θͤͨ CSS Λ։ൃ͢Δඞཁ48
49
50
• ੜͷεύΠεΛ͍͜ͳ͢ͱ͛͢ʔΧϨʔ͕࡞ΕΔ͚ͲૉਓʹΉ͍ͣɻ• ΧϨʔคɺΧϨʔϧΛ͏ͱͱΓ͋͑ͣૉਓͰ͍ͩͿ؆୯ʹ࡞ΕΔ͚ͲɺࣅͨΑ͏ͳຯʹɻ• ຯʹมԽΛग़ͨ͢ΊʹҰඞཁɻͱΓ͋͑ͣɺΧϨʔ୭Ͱ࡞ΕΔΑ͏ʹͳͬͨ51
ࠓ·Ͱ࡞͖ͬͯͨͷεύΠεʹͩ͜Θͬͨ ΧϨʔ͜Ε͔Β࡞Δ͖ͷεύΠεʹͩ͜Θͬͨ ΧϨʔคɺΧϨʔϧ52
هࣄೖྗը໘ͷ ΧελϚΠζํ๏ / DX53
͍··Ͱ54
PHPͱjQuery55
• ϑΥʔϜ PHP Ͱؤுͬͯ։ൃɻSetting API ͬͯ͋Δ͚Ͳ͔ͳΓେมɻ• όϦσʔγϣϯɺϦϑΝϥʔͷ֬ೝͳͲ PHP Ͱͬ͝Γ͝Γʹ࣮ɻ• ͪΐͬͱϦονʹ͢ΔͨΊʹ jQuery56
͜Ε͔Β57
PHPͱReact58
• REST API ͔Βɺߋ৽Ͱ͖ΔΑ͏ʹɺ2~5ߦఔͷPHPΛهड़• React Λ༻͍ͯUIΛ։ൃɻϒϩοΫΤσΟλʔͰ༻ҙ͞Ε͍ͯΔίϯϙʔωϯτͰαΫοͱ࣮• ྫ͑ɺ ΧϨϯμʔͷUI·Ͱ͍ͭͯ͘Δ• ͕มߋ͞ΕͨΒɺJS Ͱ Ληοτ͢Δ͚ͩͰޙউखʹσʔλͷૹ৴ɻ• React / JavaScript ͕Ͱ͖ΕΉͪΌͪ͘Όָʹͳͬͨͱ͍͑Δɻ59
ͨͪʹٻΊΒΕΔมԽ60
ٻΊΒΕΔεΩϧ͕େ෯ʹมԽ• CSSͷਂ͍ཧղ• WordPress ଆ͕ఏٞͯ͘͠ΔϒϩοΫͷHTMLޙଓɺclass ໊ɻͦΕʹ͑͏ΔɺCSSྗɻ• React / JavaScript ྗɻ• Gutenberg ͷιʔείʔυΛಡ·ͳ͍ͱΘ͔Βͳ͍͜ͱଟ͍ɻ• ίϯϙʔωϯτࢦɺՄมʹڧ͍σβΠϯͱϚʔΫΞοϓ• UI / UX ͷཧղɻ61
ϫʔΫϑϩʔ62
σΟϨΫγϣϯ• ҰͭҰͭͷϒϩοΫΛ͔ͬͪΓ࡞ͬͯͦΕΛࣗ༝ʹΈ߹ΘͤͯαΠτΛ࡞Δͱ͍͏ํੑʹ͔͍ͬͯ͘ɻ• ϒϩοΫ͝ͱʹ༷Λ໌֬ʹɺৄࡉʹ͠ͳ͍ͱੵΉɻ• ઃఆ߲͕ଟ͍ͱ͕͔͔Δͷʹ୭͑ͳ͍ͷ͕ੜ·ΕΔɻ63
σβΠϯ• ࣗ༝্͕͕Δ -> ίϯςϯπͷॱংΛϢʔβʔ͕ೖΕସ͑ͨΓͰ͖ΔɻϚʔδϯͷ੍ޚͲ͏͢Δʁ• ࣗ༝ʹஔͯ͠յΕͳ͍σβΠϯ͕ཁٻ͞ΕΔɻ• ͦΕ͕ΧϥϜϨΠΞτͷதʹೖͬͯյΕͳ͍Α͏ͳɻ• WEBαΠτͱ͍͏ΑΓɺΞϓϦέʔγϣϯͷΑ͏ͳൃ͕ཁٻ͞ΕΔɻ• ߋ৽͢ΔϢʔβʔʹ༧ଌՄೳͳσβΠϯɻ64
HTML/CSS• XD ΛͱΓ͋͑ͣɺϒϥβͰݟΕΔΑ͏ʹ͢Ε͍͍ͱ͍͏ൃͰ͍͍ͩͨੵΉɻ• ཁૉͷॱ൪͕มΘΔͳͲ͕ฏؾͰى͜Δ͠ɺࢠؔɺܑఋؔมΘͬͨΓ͢Δɻ• WordPress ͷు͖ग़͢ཁૉʹ CSS Λॻ͘ɻΦϦδφϧͳHTML / CSS ʹ WordPress Λ߹ΘͤΔͷϚδͰແཧɻ65
JS• React ྗʂ• υΩϡϝϯτʹ༻ҙ͞Ε͍ͯΔίϯϙʔωϯτͷղઆ͕͋ΔͷͰख़ಡ• ใϊϋ͕ઈରతʹগͳ͍ͷͰαΫοͱ࣮ݧͰ͖ΔΑ͏ʹɻ• ͦͷͨΊͷɾεέδϡʔϧ֬อ؊ɻ66
શһ͕ϑΟʔυόοΫΛ͠߹͏ϫʔΫϑϩʔ͕ඞཁ67
• ํͳϑΟʔυόοΫ͕େࣄɻͳ͔Α͘͠Α͏ɻ• ͤ͞Δલʹ૬ஊɻʮ͜͏͍͏ͷΓ͍ͨΜ͚ͩͲŋŋŋʯ• ͨ͠ͷΛ͞Ε͔ͯΒ૬ஊ͢Δͷؾ͕ॏ͍͠ɺ͞ΕΔଆखΓͰΠϥοͱͯ͠Ζ͘ͳ͜ͱʹͳΒͳ͍Α΄Μͱɻ• ΤϯδχΞʹͬͱૣ͘ݴͬͯΑʔͬͯݴ͍͍ͨؾ࣋ͪΘ͔Δ͚ͲɺΤϯδχΞޒཬໄதͳͷͰɺૣΊʹ૬ஊͯ͠ɺ࣮ݧͯ͠Β͏ͷ͕٢ɻ68
• ΞδϟΠϧతʹΒͳ͍ͱଟΈΜͳർฐ͢Δɻ• Կߟ͑ͣʹΥʔλʔϑΥʔϧͰਐΊΔͱଟɺΦϦδφϧͷϒϩοΫ͕100ݸ͘Β͍ੜ·ΕͯΤϯυϢʔβʔർฐ͢Δ69
ϒϩοΫ͝ͱͷ༷Λఆ͕ٛඞཁɻ• ϒϩοΫ͝ͱͷೖྗ߲ͷఆٛɻ• ͦΕɺߋ৽͢ΔϢʔβʔʹͱ͍͍ͬͯ͢ͷ͔ʁ• Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ• ΤσΟλͷࣗ༝͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠβʔͱΈ͚ɻ70
ฐࣾͷ߹• ՄೳͳݶΓΧελϚΠβʔΘͣɺશͯϒϩοΫΤσΟλʔ্Ͱ݁ɻ• σβΠϯ͔ΒϒϩοΫͷ༷Λى͜͢߹͋Δ͠ɺϫΠϠʔϑϨʔϜ͔ΒϒϩοΫͷ༷Λى͜͢߹͋ΔɻαΠτཁ݅࣍ୈɻ71
ϒϩοΫ࡞Ε͍͍ͬͯΜ͡Όͳ͍ɻ• ΧελϜϒϩοΫ͕େྔʹ͍͋ͬͯ͜ͳͤͳ͍ɻແཧɻ• registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦΤʔγϣϯΛ͍࣋ͨͤ͢ํʹ༷Λ͢ɻCSSઃܭྗ͕ཁٻ͞ΕΔɻ• ίΞͷϒϩοΫͷ HTMLߏͰɺෆՄೳͳσβΠϯΛͲ͏͢Δ͔͍ͭͰݕ౼ࣄ߲ɻ72
σβΠφʔɾσΟϨΫλʔͱڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍ΑࣗͰ࡞Εͳͯ͘ɺ͓ͬͯ͘͜ͱେࣄ73
ઃܭΛ͔ͬ͠Γཧղͯ͠ɺ։ൃ͢Δ͜ͱ͕ॏཁɻ• ϓϥάΠϯ࡞ऀతʹɺσϑΥϧτςʔϚ͘Β͍Ͱ͔͠νΣοΫ͠ͳ͍͠ɻ• ͱΓ͋͑ͣɺυΩϡϝϯτͷݴ͏ͱ͓ΓʹͪΌΜͱ࡞ΔɻσϑΥϧτςʔϚͱಉ͡Α͏ͳߏͰ࡞ͬͯΈΔɻ• ΤσΟλมΘ͚ͬͨͲɺWordPress ͷຊ࣭มΘͬͯͳ͍74
͍͞͝ʹ• ϒϩοΫΤσΟλʔόάͬͯΔ-> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues• ͍ͮΒ͍-> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues• ӳޠΘ͔ΒΜ -> Google ༁• ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ75
ϑΟʔυόοΫͨ͠ͷʢҰ෦ʣ• https://github.com/WordPress/gutenberg/issues/11813• ʮkaʯ͕ʮ͔ʯͰͳ͘ɺʮk͋ʯʹͳΔෆ۩߹ɻWP 5.0ϦϦʔεલɻ• https://github.com/WordPress/gutenberg/issues/18362• ֬ఆ࣌ʹΧʔιϧ͕มͳͱ͜ΖʹඈΜͰ͠·͏ෆ۩߹ɻ͓ͱͱ͍ͬͯͨɻ76
77
͍͘͢ͳΔͷ͔ͦ͏Ͱͳ͍͔ɺΒ࣍ୈɻͱΓ͋͑ͣΛ্͛Α͏ɻࠔͬͯΔ͜ͱΛ͑Α͏ɻ78
Thanks!• @Toro_Unit on Twitter andWordPress.org• @torounit on Github and MakingWordPress79
torounit
chloe463
kenchan
poteboy
murachiakira
bengo4com
joker1007
naohachi89
tkikuchi1002
kojira
nwiizo
yuya4
hygradme
tammielis
dougneiner
samanthasiow
eileencodes
thekraken
tenderlove
notwaldorf
eitanlees
tanoku
colly
jmmastey
productmarketing