Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BackstopJS + CircleCI + Docker で、HTML/CSSの自動テスト...
Search
Toro_Unit (Hiroshi Urabe)
January 27, 2018
Technology
4
1.1k
BackstopJS + CircleCI + Docker で、HTML/CSSの自動テストをした話。(WordPressのテーマ編)
Frontend Nagoya #3 での登壇資料です。
Toro_Unit (Hiroshi Urabe)
January 27, 2018
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
210
Cloudflare Meetup Nagano Vol.3
torounit
1
100
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
420
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Other Decks in Technology
See All in Technology
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
220
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
170
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
20
5.4k
JavaScript 研修
recruitengineers
PRO
2
160
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
開発と脆弱性と脆弱性診断についての話
su3158
1
1.1k
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
2
670
JOAI発表資料 @ 関東kaggler会
joai_committee
1
270
広島発!スタートアップ開発の裏側
tsankyo
0
240
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
RailsConf 2023
tenderlove
30
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
It's Worth the Effort
3n
187
28k
The Language of Interfaces
destraynor
160
25k
YesSQL, Process and Tooling at Scale
rocio
173
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
Faster Mobile Websites
deanohume
309
31k
Transcript
BackstopJS + CircleCI + Docker ͰɺHTML/CSSͷࣗಈςετΛͨ͠ ɻ(WordPressͷςʔϚฤ) Toro_Unit @2018.01.27 /
Frontend Nagoya #3 1
$ whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) HAMWORKS • Frontend Engineer •
WordPress Plugin and Theme Developer • Custom Post Type Permalinks • Vanilla • more... Github: @torounit Twitter: @Toro_Unit 3
ݝদຊࢢ͔Β͖·ͨ͠ɻ • ݱଘ12ఱकͷদຊ͋Γ·͢ɻ1 • ηΠδɾΦβϫ দຊϑΣεςΟόϧ ͱ͔ͬͯΔ֗Ͱ͢ɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg
Author: 663highland. License: CC BY 2.5 4
5
͍ɻ 6
CSS͞ΘΔͷ͓͔ͬͯͬͳ͍Ͱ͢ΑͶ 7
Why? • ཧ͠ʹ͍͘ɻ • ؆୯ʹ্ॻ͖Ͱ͖ͯ͠·͏ɻ • ͜ΘΕ͍͢ɻ • Өڹൣғ͕σΧΠ •
1ຕͷCSS͕ࢁͷHTMLʹద༻͞Ε͍ͯΔɻ • CMSͰɺHTML͕มߋ͞ΕΔ͜ͱଟ͍ɻ 8
ҙਤ͠ͳ͍มߋʹؾ͘ͷ͕͍͠ 9
ͦͷ݁Ռ • มߋΛશͯϦηοτɻ • !important ɺηϨΫλΛͱΓ͋͑ ͣڧ͘͢Δ͜ͱͰղܾɻ ͦͯ͠ߋʹ༧ظ͠ͳ͍ෆ۩߹ͷൃੜɻ 10
ߋʹCSSΛ৮Δͷ͕ڪ͘ͳΔѱ॥ 11
ͱ͜ΖͰ 12
DO YOU KNOW WordPress? 13
WordPress Theme: Vanilla • ࡦͷςʔϚɻWordPress.org ʹܝ ࡌதɻ • wordpress.org/themes/vanilla/ •
·͊ͦͦ͜͜ΘΕ͍ͯΔΒ͍͠ɻ 14
WordPress.org ʹࡌ͍ͬͯ ΔςʔϚɻ • ެࣜͷςʔϚϨϙδτϦɻཧը໘ ͔ΒΠϯετʔϧՄೳɻ • ܝࡌ͢ΔͨΊʹ༷ʑͳج४Λक ΓɺςʔϚϨϏϡʔΛ௨ա͠ͳ͚Ε ͳΒͳ͍ɻ
• Ξοϓσʔτ࣌ࠓͷͱ͜Ζ৹ࠪ ແ͍ɻ • ཧը໘͔Β1clickͰߋ৽Ͱ͖Δɻ 15
ߋ৽ϘλϯΛԡͨ͠ΒɺσβΠϯมΘͬͨʂ 16
͜ΕΞΧϯͰ͢ΑͶɻ 17
ࢠςʔϚ • ಛఆͷςʔϚΛϕʔεʹɺҰ෦Λ্ॻ͖ͨ͠ςʔϚɻ 18
ߋ৽ϘλϯΛԡͨ͠ΒɺσβΠϯͣ͘Εͨʂ 19
͜ΕΞΧϯͰ͢ΑͶɻ 20
ޙํޓੑΛ୲อ͢Δඞཁ͕͋Δɻ • PHP ͪΖΜͷ͜ͱɺϚʔΫΞοϓCSSɻ • ՄೳͳݶΓഁյతมߋ͍͑ͨɻ 21
ͰɺϦϦʔεޙʹͦΜͳʹมߋ͢Δʁ 22
• όάमਖ਼ɻ • ςʔϚΧελϚΠβʔ͕͏·͘ಈ͍͍ͯͳ͍ͱ͔ɺ৭ΜͳϨΠϠʔʹ·͕ͨ Δमਖ਼͕ඞཁͳ߹͋Δɻ • ཧը໘͔Β͍Ζ͍Ζมߋग़དྷΔΑ͏ʹ͍ͯ͠ΔͱͲ͏ͯ͠ൃੜ͕ͪ͠ɻ • ػೳͷՃ •
ࣗͰ͍ͬͯΔதͰΓ͍ͨ͜ͱग़ͯ͘Δɻ • ͦͷͨͼʹผͷςʔϚΛ࡞Δͷɻɻɻɻ • ͳΜͱͳ͘StylsΊ͍ͨɻ • WordPress ͷ৽ػೳͷରԠɻ 23
Gutenberg • WordPress 5.0 Ͱࡌ༧ఆͷ৽͍͠Τ σΟλɻ • ϒϩοΫϕʔεɻ • ΤσΟλͷදݱྗ͕େ෯ʹڧԽɻ
• ςʔϚͰίϨΛͪΌΜͱαϙʔτ͢ Δʹɺ͍Ζ͍Ζมߋ͕ඞཁɻ • ओʹCSSपΓΛվम͢Δඞཁ͕͋ Δɻ 24
ʮCSS͓͔ͬͳ͍ʯΛͲ͏ʹ͔ղফ͢ Δඞཁ͕͋Δɻ 25
طଘͷίʔυΛ࿔Δͷͦͦڪ͍ CSS ʹݶͬͨͰແ͍ 26
ڪාΛͲ͏ݮΒ͍͔ͯ͘͠ • ςετɺLint ͷࣗಈԽɻ • ྫ͑ɺPHPͷ߹ɺPHPUnit PHPCSΛ༻͍Δɻ • JSͳΒɺMocha
ͱ͔ɺJest ͱ͔ɻ • ࣗಈతɾఆظతʹ࣮ߦɻ • Travis CI / Circle CI / Jenkins Ͱ ίϛοτ͝ͱʹࣗಈ࣮ߦɻ • ϏϧυͷࣗಈԽɻ 27
ఆܕతͳ֬ೝ࡞ۀͷࣗಈԽɻ յΕͨ͜ͱɾͬͨ͜ͱͷݕग़ͷࣗಈԽɻ 28
ܧଓతΠϯςάϨʔγϣϯ Continuous Integration 29
ܧଓతΠϯςάϨʔγϣϯͱ • Continuous Integration. ུͯ͠ CI. • ओʹϓϩάϥϚʔͷΞϓϦέʔγϣϯ࡞࣌ͷ࣭վળೲ ظͷॖͷͨΊͷश׳ͷ͜ͱ(by Wikipedia)
• ۩ମతͳऔΓΈͱͯ͠ςετϏϧυͳͲͷఆظతͳ࣮ ߦͳͲɻ • ࣗಈԽ͢ΔͨΊʹɺCI༻ͷαʔόʔΛ༻ҙͨ͠Γɻ 30
ओཁͳCIαʔϏεɺιϑτΣΞ SaaS • Travis CI • Circle CI • codeship
ΞϓϦέʔγϣϯ • Jenkins 31
WordPress ͷϓϥάΠϯͰςετΛॻ͍ͨΓͯ͠·͢ɻ • WordPressͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷεεϝ • WordPressͰߦ͏ܧଓతΠϯςάϨʔγϣϯೖฤ 32
HTML/CSS ։ൃͰCI͍ͨ͠ɻ 33
BackstopJS • WEBαΠτɺΞϓϦͷݟͨͷճؼ ςετΛߦ͏πʔϧɻ • ϔουϨεϒϥβ( Headless Chrome ɺPhamtomJS )
ͰεΫ ϦʔϯγϣοτΛऔಘɾൺֱ͠ɺม ߋΛݕͰ͖Δɻ • ෳͷը໘αΠζɾϢʔβʔΤʔδΣ ϯτͳͲͰςετՄೳɻ 34
Πϯετʔϧ $ npm install -g backstopjs • άϩʔόϧ͡Όͳͯ͘OK. • Headless
Chrome Λ͏߹ɺGoogle Chrome ͳ͍͠ɺ Chromium Πϯετʔϧɻ 35
ίϚϯυ $ backstop init ઃఆϑΝΠϧͷͻͳܗੜ $ backstop reference ϦϑΝϨϯε(ਖ਼ղͷεΫϦʔϯγϣο τ)Λऔಘɻ
$ backstop test ςετ࣮ߦ $ backstop approve ςετ݁ՌΛϦϑΝϨϯεʹऔΓࠐΈɻ 36
{ "id": "vanilla_wp", "viewports": [ { "label": "phone", "width": 320,
"height": 480 }, ], "onBeforeScript": "chromy/onBefore.js", "onReadyScript": "chromy/onReady.js", "scenarios": [ { "label": "Markup HTML Tags and Formatting", "url": "http://localhost/markup-html-tags-and-formatting/", "selectors": [] }, { "label": "Page Markup And Formatting", "url": "http://localhost/about/page-markup-and-formatting/", "selectors": [] }, ], "report": ["CI"], "engine": "chrome" } 37
38
39
• ෳͷ Viewport ͷΤϛϡϨʔτՄೳɻ • Cookie Λྲྀ͠ࠐΊɺϩάΠϯ͕ඞཁͳϖʔδɻ • Ϛεͷૢ࡞ͳͲJSͰઃఆՄೳͳͷͰɺhoverɺclick࣌ͳ Ͳςετग़དྷΔɻ
ϨϙδτϦͷReadme ͱɺexample ΛݟΔͱ͔ͳΓ৭Μͳίτ ͕ग़དྷΔɻ https://github.com/garris/BackstopJS/tree/master/examples 40
Note. • ฒྻ࣮ߦͳͲՄೳɻ • ϦϑΝϨϯεσʔλ(ਖ਼ղͷσʔλ)ΛϨϙδτϦʹಥͬࠐΉ ͱͦͦ͜͜ॏ͍ɻ • ͜ͷςʔϚͷςετͷ߹ɺςετέʔε30݅Ͱ2ఔ ɻ •
࣮ߦڥͳͲͰେ͖͘มΘΔɻ 41
উखʹ࣮ߦ͍ͤͨ͞ʂ • खݩͰຖճճ͢ͷ໘ɻ • ໘ͳίτΕ͕ͪɻɻɻɻ 42
CI αʔϏεͰճͦ͏ʂ 43
͔͠͠ɾɾɾ 44
ࣗಈԽʹ·ͭΘΔน • ։ൃڥͱςετڥͷϑΥϯτ͕ҧ͏ɻ • શͯͷϚγϯʹώϥΪϊϑΥϯτೖ͍ͬͯͳ͍͠ŋŋŋ • ͦͦOS͕ҧ͏ɻCIαʔϏεͷOSLinux͕΄ͱΜͲɻ • ϑΥϯτΛҰகͤͯ͞ɺϨϯμϦϯά͕ҧͬͨΓŋŋŋɻ 45
Ͳ͜Ͱಉ͡ڥ͕༻ҙͰ͖Εŋŋŋ 46
ԾԽٕज़ʂ • Vagrant (Virtualbox) • Docker • LXC ͜ΕΒͷٕज़Λ͑ɺOSڥͷҧ͍ΛٵऩͰ͖Δʂ 47
ͱ͍͏Θ͚Ͱ Docker • ࠷ۙΑ͘ฉ͘ίϯςφܕͷԾԽٕ ज़ɻ • ىಈ͕͍ɻ • ϏϧυࡁΈͷΠϝʔδΛڞ༗͢Ε ڥͷ౷Ұ؆୯ɻ
• vagrant ΑΓखܰʹѻ͍͍͢ɻ • Windows Ͱಈ͘ʂ (Windows 10 Pro) 48
ࡶͳ Docker Πϝʔδͷ࡞Γํղઆɻ Dockerfile ʹɺͣΒͣΒίϚϯυΛهड़ɻ FROM ubuntu:16.04 RUN apt-get install
-y chromium-browser ENV CHROME_PATH /usr/bin/chromium-browser RUN apt-get install -y nodejs Ubuntu ʹ Chromium ͱ Node.js ͕ೖͬͨڥΛखܰʹ࡞Ͱ ͖Δɻ 49
Docker ΠϝʔδͷϏϧυ $ docker build -t yourname/myimage ݱࡏͷσΟϨΫτϦΛ/workdirʹϚϯτͯ͠ɺDocker Ϛγϯͷɹbash Λىಈ
$ docker run --rm -v \ `pwd`:/workdir -w /workdir -it yourname/myimage bash 50
docker hub ʹΠϝʔδΛެ։ɻ $ docker push yourname/myimage 51
More • Docker Documentation | Docker Documentation • Docker υΩϡϝϯτຊޠԽϓϩδΣΫτ
— Docker-docs- ja 17.06.Beta υΩϡϝϯτ 52
BackstopJS ͱ WordPress ͷ࣮ߦڥΛ Docker Ͱ࡞ͬͨɻ • torounit/wp-theme-test-env - Docker
Hub • Github: torounit/wp-theme-test-env Chromium / Node.js / Noto Sans ͱ WordPress ͷಈ࡞ڥɻ WordPress ͷ ςʔϚϢχοτςετσʔλઃఆࡁΈɻ 53
Note. backstopJS ͷ docker Πϝʔδ͋Δɻ • backstopjs/backstopjs - Docker Hub
54
Let's ࣗಈԽ ! 55
ࠓճ Circle CI • OSSͩͱແྉͰ͑Δɻ • Docker αϙʔτɻ • store_artifacts
ͰੜΛอଘ& ϒϥβͰ؆୯ʹ֬ೝͰ͖ΔͷͰɺ BackstopJSΛ͏ͱ͖ศརɻ 56
57
Circle CI ͷઃఆɻ /.circleci/config.yml ʹઃఆΛهड़ɻDocker ରԠͳͷ version 2ܥͳͷͰҙɻ 58
version: 2.0 jobs: test: docker: - image: torounit/wp-theme-test-env:latest working_directory: /var/www/wordpress/wp-content/themes/vanilla
steps: - checkout - setup_remote_docker: docker_layer_caching: true - run: command: npm install - run: command: sudo service php7.0-fpm start & sudo service nginx start & sudo service mysql start - run: command: wp theme activate vanilla --path=/var/www/wordpress - run: command: curl http://localhost > /dev/null - run: command: npm test - store_artifacts: path: backstop_data destination: artifacts - store_test_results: path: backstop_data/ci_report 59
1. Circle CI ʹϩάΠϯ 2. Projects -> AddProjectͰɺϨϙδτϦΛબ͢Δɻ 3. git
commit & push Ͱςετ͕࣮ߦ͞ΕΔɻ 60
• store_test_results ͰɺxUnitܗࣜ ͷςετ݁Ռ͕อଘ͞ΕΔॴΛࢦ ఆ͢Δͱςετ݁Ռ͕ҰཡͰΈΕ Δɻ • Artifacts ͷλϒ͔Βɺอଘͨ͠ςε τੜΛ֬ೝͰ͖Δɻ
• node_modules ΩϟογϡՄ ೳɻ 61
ޮೳɾޮՌ • ҙਤ͠ͳ͍มߋΛݕग़Λָʹݕग़Ͱ͖Δɻ • CSSͷབྷΜͩόάϑΟοΫε࣌ʹ݁ߏҖྗɻ • CSSͷϦϑΝΫλϦϯάҊ݅ͰͭΑ͍ɻ • ϥϯμϜཁૉɺςετͮ͠Β͍ཁૉ͋Δɻ 62
Note. • ࢹͰͷςετΛޮతʹػձʹߦΘͤΔπʔϧɻ • ϖʔδ͕ଟ͍ͱͬͺΓ͔͔࣌ؒΔͷͰɺͳΜͰ͔Μ ͰΕྑ͍ͬͯϞϊͰͳ͍ؾ͢Δɻ • έʔεόΠέʔεɻ • ελΠϧΨΠυΛΈ߹ΘͤͯΔͷ͕Αͦ͞͏ɻ
• ෳͷϒϥβͰͷݟͨͷҧ͍Λݕग़͢ΔϞϊͰແ͍ɻ 63
https://github.com/torounit/vanilla/ 64
͔͍ͭͲ͜Ζ • ӡ༻தͷαʔϏεͷCSSϦϑΝΫλϦϯά • େنͳECͱ͔ͰɺLPΛࢁ࡞ͬͨΓ͍ͯ͠Δέʔεɻ • σβΠϯϦχϡʔΞϧΛ؆୯ʹͰ͖ͳ͍͕ɺ֦ுΛͯ͠ ͍͘Α͏ͳϞϊɻ 65
طͷͳͲ • ݁ߏCPUʹෛՙ͕͔͔ΔͷͰɺࣗલͰCIαʔόʔΛ༻ҙ͢ΔͳΒ ͦΕͳΓʹεϖοΫ͕ඞཁɻ • େྔͷεΫϦʔϯγϣοτΛऔΔͷͰϨϙδτϦ͕ංେԽ͢Δɻ • 16384pxҎ্ͷεΫϦʔϯγϣοτChromeͩͱࡱΕͳ͍ɻ • ͦΕҎԼͰ͍ϖʔδͩͱਖ਼͘͠औಘग़དྷͳ͍͜ͱɻʢڥ
ґଘ͢ΔͬΆ͍ɻʣ • ςετΛηϨΫλͳͲͰׂͯ͠ରԠՄೳɻ 66
let's Contribute! • garris/BackstopJS: Catch CSS curve balls. 67
Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 68