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
190
ブロックテーマでサイトリニューアルした話 / 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
2k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
430
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
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
340
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
490
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
170
AI時代、“平均値”ではいられない
uhyo
8
2.7k
RemoteFunctionを使ったコロケーション
mkazutaka
1
140
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
340
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
320
SREのキャリアから経営に近づく - Enterprise Risk Managementを基に -
shonansurvivors
0
240
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
Observability — Extending Into Incident Response
nari_ex
1
570
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
iwashi86
6
3k
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
340
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Designing for humans not robots
tammielis
254
26k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
130
YesSQL, Process and Tooling at Scale
rocio
173
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Agile that works and the tools we love
rasmusluckow
331
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
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