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
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
550
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
390
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.3k
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
310
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.8k
本当のAWS基礎
toru_kubota
0
540
私が trocco を推す理由
__allllllllez__
1
260
Building Dashboards as a Hobby
egmc
0
240
開発パフォーマンスを最大化するための開発体制
ham0215
2
450
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
190
Featured
See All Featured
Atom: Resistance is Futile
akmur
259
25k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Teambox: Starting and Learning
jrom
128
8.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Fireside Chat
paigeccino
21
2.6k
Product Roadmaps are Hard
iamctodd
44
9.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
How to Ace a Technical Interview
jacobian
272
22k
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 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ