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)
Cloudflare Meetup Nagano Vol.3
torounit
1
59
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
550
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.2k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
260
Охота на косуль у древних
ashapiro
0
110
Share my, our lessons from the road to re:Invent
naospon
0
150
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
300
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
Active Directory攻防
cryptopeg
PRO
8
5.5k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
470
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
140
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Adopting Sorbet at Scale
ufuk
74
9.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
GitHub's CSS Performance
jonrohan
1030
460k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Visualization
eitanlees
146
15k
The Language of Interfaces
destraynor
156
24k
How GitHub (no longer) Works
holman
314
140k
Being A Developer After 40
akosma
89
590k
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