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
200
Cloudflare Meetup Nagano Vol.3
torounit
1
92
僕が考える 「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.8k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
410
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
880
Other Decks in Technology
See All in Technology
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
860
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
310
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
180
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
260
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
210
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.2k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
140
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
TypeScript 上達の道
ysknsid25
11
1.8k
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.7k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
GitHub's CSS Performance
jonrohan
1031
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Language of Interfaces
destraynor
158
25k
Bash Introduction
62gerente
613
210k
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