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)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
170
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
230
Cloudflare Meetup Nagano Vol.3
torounit
1
110
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
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
470
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
580
Other Decks in Technology
See All in Technology
GopherCon Tour 概略
logica0419
2
190
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
390
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1k
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
110
データエンジニアがこの先生きのこるには...?
10xinc
0
450
Findy Team+のSOC2取得までの道のり
rvirus0817
0
360
実装で解き明かす並行処理の歴史
zozotech
PRO
1
460
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
330
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
430
「Verify with Wallet API」を アプリに導入するために
hinakko
1
240
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Automating Front-end Workflow
addyosmani
1371
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Fireside Chat
paigeccino
40
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Speed Design
sergeychernyshev
32
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
A designer walks into a library…
pauljervisheath
209
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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