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
黒い画面の苦手なデザイナーに捧げるDreamweaverだけで行うWordPressテーマ制作
Search
Masahiko Kawai
October 21, 2017
Technology
0
16k
黒い画面の苦手なデザイナーに捧げるDreamweaverだけで行うWordPressテーマ制作
2017年10月21日 WordBench京都 in 舞鶴
Masahiko Kawai
October 21, 2017
Tweet
Share
More Decks by Masahiko Kawai
See All by Masahiko Kawai
リンクをお金で買ってみた ~ブラックハットSEO ダメ! ゼッタイ!~
masakawai
0
2.5k
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
910
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
410
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
420
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
20240416_devopsdaystokyo
kzkmaeda
1
220
Featured
See All Featured
Code Review Best Practice
trishagee
55
15k
What's new in Ruby 2.0
geeforr
337
31k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Adopting Sorbet at Scale
ufuk
68
8.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Building Adaptive Systems
keathley
31
1.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Transcript
1 黒い画面の苦手なデザイナーに捧げる Dreamweaverだけで行う WordPressテーマ制作 ほぼ 2017/10/21ɹWordBenchژ in Cherry Pie
Web Ҫণ
2 Dreamweaver υ ϦʔϜΟʔόʔʢເΛ͙ऀʣ Α͋͘Δؒҧ͍ɾɾɾ υ ϦʔϜΣʔόʔʢwaverʣͰ͋Γ·ͤΜɻ
3 1997ɹ̴̬ ̱౷߹։ൃڥͱͯ͠ొ 1998ɹຊޠ൛ൃച 1999ɹFireworksͱͷηο τൢചͰେώο τ ɹɹɹ̴̬ ੍̱࡞ͷσϑΝΫ τελϯμʔυʹ
4 ۀք͕ٸʹෳࡶɾߴԽ ɹΤϯδχΞɾίʔμʔɾσβΠφʔɾɾɾۀԽ͕ਐΉ ࣌ྲྀͷྲྀΕʹػೳ͕͍͔ͣɺ ɹɹ2008ࠒ͔ΒɺCodaɺSublime Text ͳͲ ɹɹɹɹۀʹಛԽͨ͠πʔϧʹྲྀΕΔϢʔβʔ͕૿͑Δɾɾɾ ɾɾɾͦͯ͠ɺෳࡶԽɾߴԽʹ͍͍͚ͭͯͳ͍WebσβΠφʔ૿͑ͨ
5 Dreamweaver ɺ͜ͷ··Φϫίϯʹͳͬͯ͠·͏ͷ͔ɾɾɾ ͦͯ͠ɺWebσβΠφʔɺͲ͏ͬͯੜ͖Ε͍͍ͷ͔ɾɾɾ
6 2017 Reboot Dreamweaver ։࠵ ɹɹɹɹɹɹɹɹ ʢ౦ژɾେࡕʣ ैདྷͷػೳΛ࣋ͪͭͭɺ BracketsɾBootstrapɾSass/LESS GitɾϦΞϧλΠϜϓϨϏϡʔ
etc. ͳͲɺࠓͲ͖ͷػೳΛऔΓࠐΉ
7 ɹɹɹɹɹDreamweaver ͱͱʹɺ ɹɹɹɹɹɹɹɹɹɹɹɹWebσβΠφʔ Reboot ͠Α͏ ʂ ɾɾɾͱ͍͏͓Λ͠·͢ɻ
8 ࣗݾհ ɹҪণʢ͔Θ͍·͞ͻ͜ʣ ɹɹɹژࢢग़ ɹɹɹࠃཱۀߴઐଔۀޙɺ౦ژͷ੍࡞ձࣾͰ24ؒۈΊɺ ɹɹɹݱࡏࢢʹؼڷ͠ɺϑϦʔϥϯεͰDTPɾWeb੍࡞Λ͍ͯ͠·͢ɻ ɹఏҊɾݟੵɾσΟ ϨΫγϣϯɾσβΠϯɾϓϩάϥϛϯάɾαϙʔ τ ɹɹ੍࡞ձࣾͷϫʔΫϑϩʔߏஙίϯαϧςΟϯά·Ͱߦ͏
ɹɹɹϑϧελοΫɾϑϦʔϥϯεͰ͢ ʂ
9 Cherry Pie Web https://www.cherrypieweb.com/ 1997։ઃ ࠓͰ20 ʂ ɹɹɹDreamweaverͱಉ͍ ʂ
ࠇࣲ͔ͷ͜ͷϑΥ τϒϩάΑΖ͓͘͠ئ͍͠·͢ɻ
10 ࢲͱDreamweaverͱͷ͔͔ΘΓ ग़ձ͍2000ɺDreamweaver Fireworks STUDIO3 ɹɹɹɹɹɹɹɹɹɹɹҎ߱ɺ࠷৽ͷCC2017·Ͱɺͣʔͬͱ༻த 2010ɹAdobe Creative Suite 5
ൃച࣌ɺ ɹɹ౦ژɾදࢀಓͰ։͔Εͨ ɹɹɹ ʮੈքͰ࠷ૣ͘ ɹɹɹɹɹAdobe Creative Suite 5 ʹ ɹɹɹɹɹɹɹ৮ΕΒΕΔϦΞϧεϙο τɹStation5 ʯ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰઆ໌һΛ୲
11 ຊͷ༧ఆ 1. ҰपճͬͯΒͳ͍Dreamweaverͷ 2. 20Λܦͯੜ·ΕมΘͬͨDreamweaver 3. DreamweaverΛத৺ʹͨ͠WordPressͷϩʔΧϧ੍࡞ڥ
12 ɹɹੲͷਓʹৗ͚ࣝͩͲɺ ɹɹɹࠓͷਓΒͳ͍͔͠Εͳ͍ かのこ も、 もう1周 し て く るのだ!
一周回って知らない Dreamweaverの話
13 一周回って知らない話・ ・ ・その1 DreamweaverΛ࡞ͬͨͷ AdobeͰͳ͍
14 ˔DreamweaverΛ࡞ͬͨͷAdobeͰͳ͘ɺMacromedia 20054݄ʹɺ ɹAdobe͕MacromediaΛ34ԯυϧͰങऩ ࣌AdobeʹɺGoLiveͱ͍͏Web੍࡞πʔϧ͕͕͋ͬͨɺ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹDreamweaver ʹҰຊԽ ɹMacromediaͷ ɹɹιϑ τΣΞͱ͍͑ɺ
ɹɹɹɹɹɹ͜Μͳͷ༗໊
15 一周回って知らない話・ ・ ・その2 Dreamweaver ίʔυΤσΟ λͰͳ͍
16 ˔DreamweaverɺίʔυΤσΟλʔͰͳ͘ ɹɹɹɹɹɹɹɹɹz૯߹πʔϧηο τz ͱ͍͏Ґஔ͚ͮ ɹίʔυΤσΟλʢHTMLɾCSSɾJavaScriptɾPHPʣ ɾWYSIWYGฤू ɹࣗಈϦϯΫमਖ਼ɾόʔδϣϯཧɾαΠ τཧ ɹσβΠϯπʔϧͱͷ࿈ܞɾMicrosoft
Officeͱͷ࿈ܞ ɾɾɾΤσΟλઐ༻πʔϧͱɺͦͦઃܭࢥ͕ҧ͏
17 ˔αΠ τϦϯΫͷࣗಈमਖ਼ ϑΝΠϧͷϦωʔϜʗσΟ ϨΫ τϦมߋͳͲΛߦ͏ͱ ͦͷϑΝΠϧͷϦϯΫ͕ࣗಈͰमਖ਼͞ΕΔ Dreamweaver ͷॳظ͔Β͋ͬͨ ɹ
ʮαΠ τཧπʔϧʯ ͳΒͰͷػೳ
18 ˔ڧྗͩͬͨFireworksɾFlashͱͷ࿈ܞ FireworksͰ࡞ͨ͠ ը૾ɾςʔϒϧϨΠΞ τ FlashͰ࡞ͨ͠ϜʔϏʔΛ Dreamweaver্͔Βฤू͢Δͱ πʔϧ͕ࣗಈىಈͯ͠ ݩϑΝΠϧ͕मਖ਼Ͱ͖Δ ɾɾɾAdobeʹͳ͔ͬͯΒ
ɹɹɹ͜͏͍ͬͨ࿈ܞͷΈ͕ੜ͔͞Εͣ೦
19 一周回って知らない話・ ・ ・その3 Dreamweaverɺ CMSͩͬͨ ʁ
20 ˔ςϯϓϨʔτػೳ ςϯϓϨʔ τΛෳͯ͠ࢠϖʔδΛ࡞Ͱ͖Δػೳ ී௨ʹHTMLΛ࡞͠ɺ ࢠϖʔδͰมߋ͍ͨ͠ͱ͜Ζ͚ͩ ɹɹɹɹɹɹɹฤूՄೳྖҬͱ͢Δ
21 ˔ContributeͰCMSతͳӡ༻ ੍࡞ऀ͕DreamweaverͰςϯϓϨʔ τΛ࡞ ɹɹɹɹɹˣ ฤू୲ऀʢސ٬ʣ͕ɺ ContributeͰϖʔδΛ࡞ɾฤू ݖݶઃఆόʔδϣϯཧʢSubversionʣʹରԠ αʔόʔ੩తHTML͕ಈ͚OK Contribute͕ൃද͞Εͨ2003ࠒɺ
Α͏͘WordPress͕ੜʢVer. 0.7ʣ ˱
22 ɹɹͨ͠Dreamweaverͷ͓εεϝػೳ かのこは、 7年を経ても あんま り成長し て いないのだ ・・・ 20年を経て生まれ変わった
Dreamweaver
23 Dreamweaver 20पͰߦΘΕͨ ʮ͓ؾʹೖΓػೳʯΞϯέʔτͷ݁Ռ 1Ґ ɿBootstrapରԠ 2Ґ ɿϦΞϧλΠϜϒϥβϓϨϏϡʔ 3Ґ ɿϚϧνΧʔιϧ
4Ґ ɿΫΠοΫฤू 5Ґ ɿݕࡧˍஔϥΠϒϋΠϥΠ τ 6Ґ ɿϏδϡΞϧϝσΟΞΫΤϦʔ 7Ґ ɿϑΝΠϧࣗಈ෮ݩ 8Ґ ɿEmmetαϙʔ τ 9Ґ ɿDOMύωϧ 10Ґ ɿΠϝʔδϚοϓ 11Ґ ɿϓϦϓϩηοαʔͷαϙʔ τ 12Ґ ɿCSSσβΠφʔ 13Ґ ɿPhotoshop࿈ܞ 14Ґ ɿϑΝΠϧͷFTP/sFTP 15Ґ ɿΫΠοΫ υΩϡϝϯ τ ʢΞϯέʔ τ͕࣮ࢪ͞Εͨ࣌ɺGit·࣮ͩ͞Ε͍ͯ·ͤΜͰͨ͠ʣ
24 ͓εεϝػೳ ɾϥΠϒϏϡʔ ɹ ʢWebkitΛࡌʣ ɾϏδϡΞϧϝσΟΞΫΤϦʔ ɹ ʢϥΠϒϏϡʔͰϝσΟΞΫΤϦʔΛ؆୯ʹϓϨϏϡʔʣ ɾBracketsʢίʔυΤσΟλʣ ɹ
ʢEmmetɺϚϧνΧʔιϧͳͲʣ ɾϑΝΠϧԣஅݕࡧʗஔ ɹ ʢਖ਼نදݱରԠʣ
25 ͓εεϝػೳ ɾϦΞϧλΠϜϒϥβϓϨϏϡʔ ɹ ʢಉҰLANͷεϚϗͷ࣮ػͰϓϨϏϡʔՄೳɾɾɾϥΠϒϏϡʔͱผͷػೳʣ ɾCSSϓϦϓϩηοα ɹ ʢSass/LESSɺιʔεϑΥϧμΛࢹͯࣗ͠ಈίϯύΠϧʣ ɾExtract ɹ
ʢPhotoshopΛىಈͤͣʹɺPSDϑΝΠϧ͔ΒใΛऔΓग़ͨ͠ΓΞηο τͷநग़͕Ͱ͖Δʣ ɾGitʹΑΔόʔδϣϯཧ ɹ ʢ৽ن࡞ʗطଘϦϙδ τϦͷೝࣝɺଞͷGitΫϥΠΞϯ τͱڞଘͰ͖Δʣ
26 DEMO
27 ˔DreamweaverͰGitΛ͏࣌ɺҙ֎ʹϋϚΔϙΠϯ τ ɾ GitΫϥΠΞϯ τɺผʹΠϯε τʔϧ͢Δඞཁ͕͋Δ ɾ WindowsͷਓಛʹϋϚΔ͜ͱ͕͋ΔͷͰɺϋϚͬͨ࣌ࢲͷϒϩάهࣄΛಡΜͰ͍ͩ͘͞ɻ ɹɹDreamweaverͰGitΛ͓͏ͱͨ͠ͱ͖ʹͭ·͍ͮͨGitΫϥΠΞϯ
τͷઃఆʹ͍ͭͯ ɹɹhttps://www.cherrypieweb.com/weblog/technical/20170731133624.php
28 ɹɹશ෦GUIͰOKʂ 世界は、 かのこを中心に 回っ ているのだ! Dreamweaverを中心にした WordPressの ローカル制作環境
29 ͦͦɺ ͳΜͰDreamweaverΛ͏ͷ͔ʁ ίʔμʔϓϩάϥϚͰͳ͘ɺzWebσβΠφʔ zʹͱͬͯɺ ɹɹɹɹɹɹɹɹɹɹɹɹPhotoshopɺIllustratorඞਢͷπʔϧ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹˠ Adobe Creative Cluod
ͷܖ͕ඞਢ Adobe Creative CloudͷܖΛ͍ͯ͠ΔͳΒɺ ɹɹɹՃඅ༻ແ͠ͰDreamweaverͷ࠷৽όʔδϣϯ͕͑Δ ϞϦαϫϑΥϯ τʢҰ෦ʣɺΦϯϥΠϯε τ Ϩʔδ͍ͭͯ͘Δ ʂ
30 WordPressͷςʔϚ։ൃʹඞཁͳػೳ ɾ Webαʔόʔ ɾ σʔλϕʔεαʔόʔ ɾ λεΫϥϯφʔ CSSϓϦϓϩηοαʕࣗಈίϯύΠϧ ϒϥβΦʔ
τϦϩʔυ ɾ όʔδϣϯཧ
31 ɾ XAMPP/MAMP ɾ VagruntɺDocker ɾ VCCWɺWocker ɾ GulpɺGrunt ɹɹɹɹɹɹXAMPP͍͠ɺଞࠇ͍ը໘ඞਢͩ͠ɺWindowsͩͱ͑ͳ͍͠ɾɾɾ
32 ɾ XAMPP/MAMP ɾ VagruntɺDocker ɾ VCCWɺWocker ɾ GulpɺGrunt ɹɹɹɹɹɹɹɹɹɹɹLocal
by Flywheelɹɹ
33 ˔Local by Flywheel ͷ͓͢͢ΊϙΠϯ τ ɾ MacͪΖΜɺWindows10 HomeͰɺؔ࿈ΞϓϦෆཁͰಈ࡞ ʢRubyͱ͔ɺnode.jsͱ͔ɺVirtualbox
ͱ͔ΛࣄલʹೖΕͱ͔ͳ͍͍ͯ͘ʣ ɾ WebαʔόʔʹApache/nginx͕બͰ͖ɺ్தมߋՄೳ ɾ PHPͷόʔδϣϯ͕બͰ͖ɺ్தมߋՄೳ ɾ MySQLཧπʔϧ Adminer ಉࠝ (ඞཁेͳػೳͰ phpMyAdmin ΑΓ͍ܰʣ
34 ɾ ࣗಈͰHOSTSϑΝΠϧΛॻ͖͑ͯ͘ΕΔ͠ɺͯ͘͠ΕΔ ɾ SSLূ໌ॻ͕ൃߦͰ͖Δ ɾ ϩʔΧϧͰϝʔϧૹ৴͕Ͱ͖Δ ɾ Live LinkͰɺωο
τϫʔΫ֎ͷଞͷσόΠε͔ΒΞΫηεͰ͖Δ ɾ SSH͕͑Δ ͪΖΜɺWP-CLI͑Δ
35 ɾ ͯ͢ɺGUIͷΈͰ݁ ɹɹجຊతʹϚεૢ࡞ͰOK ɹɹࡉ͔͍ઃఆɺӈΫϦοΫͰͰ͖Δ ɹɹϩʔΧϧϑΥϧμ͙͢։͚Δ ɹɹCUIʹ׳Ε͍ͯΔਓͰɺ ɹɹɹɹɹ͖ͬͱ͍͍ͣ͢ ʂ
36 Dreamweaver + Local by Flywheel Ͱ ɹɹɹɹɹɹɹɹɹɹɹɹςʔϚ։ൃΛͯ͠ΈΑ͏
37 1. Local by Flywheel ͰϩʔΧϧαΠ τ࡞ ʢ࡞ޙʹطଘαΠ τΛҠߦʣ ˔ҙ
ɾ Πϯε τʔϧ͞ΕΔͷӳޠ൛ͳͷͰɺઃఆมߋ͕ඞཁ ݴޠɿຊޠɺ࣌ؒɿ౦ژɺද͓ࣔΈͰ ɾ ϓϥάΠϯ ʮWP Multibyte Patchʯ ΛඞͣΠϯε τʔϧ͢Δ͜ͱ ʢຊޠϝʔϧΛ͏ࡍɺϝʔϧͷΤϯίʔυઃఆ͕ඞཁʣ
38 2. DreamweaverͰαΠ τઃఆ ϩʔΧϧσΟ ϨΫ τϦɿLocal by Flywheel ͷϧʔ
τϑΥϧμ ςε ταʔόʔɿϩʔΧϧͱಉ͡σΟ ϨΫ τϦ ɾ CSSϓϦϓϩηοαʕͷઃఆ ιʔεϑΥϧμɺग़ྗϑΥϧμͷઃఆαΠ τ୯ҐʹͳΔ ʢιʔεϑΥϧμɺαϒσΟ ϨΫ τϦࢹରʣ ɾ Gitͷઃఆ ৽ن࡞ʗϦϞʔ τͷPull ʗطଘͷϦϙδ τϦࣗಈೝࣝ ଞͷGitΫϥΠΞϯ τͱڞଘՄೳ
39 3. ςϯϓϨʔτɾελΠϧγʔτͷฤू Sass/LESSͷࣗಈίϯύΠϧ ϦΞϧλΠϜϓϨϏϡʔͰɺϒϥβΦʔ τϦϩʔυ σόΠεϓϨϏϡʔͰಉҰLANͷεϚʔ τϑΥϯͰϓϨϏϡʔՄೳ ʢLocal by
Flywheel ɺLive LinkػೳͰωο τϫʔΫ֎͔ΒϓϨϏϡʔͰ͖Δʣ 4. Git Ͱόʔδϣϯཧ GitϏϡʔͰमਖ਼͞ΕͨϑΝΠϧΛ֬ೝ εςʔδϯάͯ͠ɺίϛο τ ϦϞʔ τʹPush
40 DEMO
41 ɹɹ৽͍͠Dreamweaverɺ ɹɹɹɹ·͞ʹɺ࣌ྲྀʹऔΓ͞Εͭͭ͋ͬͨWebσβΠφʔͷɺ ɹɹɹɹɹɹzເΛ͍Ͱ͘ΕΔz ιϑ τΣΞʹͳΔͣ ʂ
42 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ