黒い画面の苦手なデザイナーに捧げるDreamweaverだけで行うWordPressテーマ制作

2017年10月21日　WordBench京都 in 舞鶴

Transcript

1. 1 黒い画面の苦手なデザイナーに捧げる Dreamweaverだけで行う WordPressテーマ制作 ほぼ 2017/10/21ɹWordBenchژ౎ in ෣௽ Cherry Pie Web ઒Ҫণ඙
2. 2 Dreamweaver υ ϦʔϜ΢ΟʔόʔʢເΛ๰͙ऀʣ Α͋͘Δؒҧ͍ɾɾɾ υ ϦʔϜ΢ΣʔόʔʢwaverʣͰ͸͋Γ·ͤΜɻ
3. 3 1997೥ɹ̴̬ ̱౷߹։ൃ؀ڥͱͯ͠ొ৔ 1998೥ɹ೔ຊޠ൛ൃച 1999೥ɹFireworksͱͷηο τൢചͰେώο τ ɹɹɹ̴̬ ੍̱࡞ͷσϑΝΫ τελϯμʔυʹ
4. 4 ۀք͕ٸ଎ʹෳࡶɾߴ౓Խ ɹΤϯδχΞɾίʔμʔɾσβΠφʔɾɾɾ෼ۀԽ͕ਐΉ ࣌ྲྀͷྲྀΕʹػೳ͕௥͍෇͔ͣɺ ɹɹ2008೥ࠒ͔ΒɺCodaɺSublime Text ͳͲ ɹɹɹɹۀ຿ʹಛԽͨ͠πʔϧʹྲྀΕΔϢʔβʔ͕૿͑Δɾɾɾ ɾɾɾͦͯ͠ɺෳࡶԽɾߴ౓Խʹ͍͍͚ͭͯͳ͍WebσβΠφʔ΋૿͑ͨ
5. 5 Dreamweaver ͸ɺ͜ͷ··Φϫίϯʹͳͬͯ͠·͏ͷ͔ɾɾɾ ͦͯ͠ɺWebσβΠφʔ͸ɺͲ͏΍ͬͯੜ͖࢒Ε͹͍͍ͷ͔ɾɾɾ
6. 6 2017೥ Reboot Dreamweaver ։࠵ ɹɹɹɹɹɹɹɹ ʢ౦ژɾେࡕʣ ैདྷͷػೳΛ࣋ͪͭͭɺ BracketsɾBootstrapɾSass/LESS GitɾϦΞϧλΠϜϓϨϏϡʔ etc. ͳͲɺࠓͲ͖ͷػೳΛऔΓࠐΉ
7. 7 ɹɹɹɹɹDreamweaver ͱͱ΋ʹɺ ɹɹɹɹɹɹɹɹɹɹɹɹWebσβΠφʔ΋ Reboot ͠Α͏ ʂ ɾɾɾͱ͍͏͓࿩Λ͠·͢ɻ
8. 8 ࣗݾ঺հ ɹ઒Ҫণ඙ʢ͔Θ͍·͞ͻ͜ʣ ɹɹɹژ౎෎෣௽ࢢग़਎ ɹɹɹࠃཱ෣௽޻ۀߴઐଔۀޙɺ౦ژͷ੍࡞ձࣾͰ24೥ؒۈΊɺ ɹɹɹݱࡏ͸෣௽ࢢʹؼڷ͠ɺϑϦʔϥϯεͰDTPɾWeb੍࡞Λ͍ͯ͠·͢ɻ ɹఏҊɾݟੵɾσΟ ϨΫγϣϯɾσβΠϯɾϓϩάϥϛϯάɾαϙʔ τ ɹɹ੍࡞ձࣾͷϫʔΫϑϩʔߏங΍ίϯαϧςΟϯά·Ͱߦ͏ ɹɹɹϑϧελοΫɾϑϦʔϥϯεͰ͢ ʂ
9. 9 Cherry Pie Web https://www.cherrypieweb.com/ 1997೥։ઃ ࠓ೥Ͱ20೥໨ ʂ ɹɹɹDreamweaverͱಉ͍೥ ʂ ࠇࣲ͔ͷ͜ͷϑΥ τϒϩά΋ΑΖ͓͘͠ئ͍͠·͢ɻ
10. 10 ࢲͱDreamweaverͱͷ͔͔ΘΓ ग़ձ͍͸2000೥ɺDreamweaver Fireworks STUDIO3 ɹɹɹɹɹɹɹɹɹɹɹҎ߱ɺ࠷৽ͷCC2017·Ͱɺͣʔͬͱ࢖༻த 2010೥ɹAdobe Creative Suite 5 ൃച࣌ɺ ɹɹ౦ژɾදࢀಓͰ։͔Εͨ ɹɹɹ ʮੈքͰ࠷΋ૣ͘ ɹɹɹɹɹAdobe Creative Suite 5 ʹ ɹɹɹɹɹɹɹ৮ΕΒΕΔϦΞϧεϙο τɹStation5 ʯ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ͸આ໌һΛ୲౰
11. 11 ຊ೔ͷ༧ఆ 1. Ұपճͬͯ஌Βͳ͍Dreamweaverͷ࿩ 2. 20೥Λܦͯੜ·ΕมΘͬͨDreamweaver 3. DreamweaverΛத৺ʹͨ͠WordPressͷϩʔΧϧ੍࡞؀ڥ
12. 12 ɹɹੲͷਓʹ͸ৗ͚ࣝͩͲɺ ɹɹɹࠓͷਓ͸஌Βͳ͍͔΋͠Εͳ͍࿩ かのこ も、 　もう1周 　し て く るのだ！ 一周回って知らない 　Dreamweaverの話
13. 13 一周回って知らない話・ ・ ・その１ DreamweaverΛ࡞ͬͨͷ͸ AdobeͰ͸ͳ͍
14. 14 ˔DreamweaverΛ࡞ͬͨͷ͸AdobeͰ͸ͳ͘ɺMacromedia 2005೥4݄ʹɺ ɹAdobe͕MacromediaΛ໿34ԯυϧͰങऩ ౰࣌Adobeʹ͸ɺGoLiveͱ͍͏Web੍࡞πʔϧ͕͕͋ͬͨɺ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹDreamweaver ʹҰຊԽ ɹMacromedia੡ͷ ɹɹιϑ τ΢ΣΞͱ͍͑͹ɺ ɹɹɹɹɹɹ͜Μͳͷ΋༗໊
15. 15 一周回って知らない話・ ・ ・その2 Dreamweaver͸ ίʔυΤσΟ λͰ͸ͳ͍
16. 16 ˔Dreamweaver͸ɺίʔυΤσΟλʔͰ͸ͳ͘ ɹɹɹɹɹɹɹɹɹz૯߹πʔϧηο τz ͱ͍͏Ґஔ͚ͮ ɹίʔυΤσΟλʢHTMLɾCSSɾJavaScriptɾPHPʣ ɾWYSIWYGฤू ɹࣗಈϦϯΫमਖ਼ɾόʔδϣϯ؅ཧɾαΠ τ؅ཧ ɹσβΠϯπʔϧͱͷ࿈ܞɾMicrosoft Officeͱͷ࿈ܞ ɾɾɾΤσΟλઐ༻πʔϧͱ͸ɺͦ΋ͦ΋ઃܭࢥ૝͕ҧ͏
17. 17 ˔αΠ τ಺ϦϯΫͷࣗಈमਖ਼ ϑΝΠϧͷϦωʔϜʗσΟ ϨΫ τϦมߋͳͲΛߦ͏ͱ ͦͷϑΝΠϧ΁ͷϦϯΫ͕ࣗಈͰमਖ਼͞ΕΔ Dreamweaver ͷॳظ͔Β͋ͬͨ ɹ ʮαΠ τ؅ཧπʔϧʯ ͳΒͰ͸ͷػೳ
18. 18 ˔ڧྗͩͬͨFireworksɾFlashͱͷ࿈ܞ FireworksͰ࡞੒ͨ͠ ը૾ɾςʔϒϧϨΠΞ΢ τ΍ FlashͰ࡞੒ͨ͠ϜʔϏʔΛ Dreamweaver্͔Βฤू͢Δͱ πʔϧ͕ࣗಈىಈͯ͠ ݩϑΝΠϧ͕मਖ਼Ͱ͖Δ ɾɾɾAdobeʹͳ͔ͬͯΒ ɹɹɹ͜͏͍ͬͨ࿈ܞͷ࢓૊Έ͕ੜ͔͞Εͣ࢒೦
19. 19 一周回って知らない話・ ・ ・その3 Dreamweaver͸ɺ CMSͩͬͨ ʁ
20. 20 ˔ςϯϓϨʔτػೳ ςϯϓϨʔ τΛෳ੡ͯ͠ࢠϖʔδΛ࡞੒Ͱ͖Δػೳ ී௨ʹHTMLΛ࡞੒͠ɺ ࢠϖʔδͰมߋ͍ͨ͠ͱ͜Ζ͚ͩ ɹɹɹɹɹɹɹฤूՄೳྖҬͱ͢Δ
21. 21 ˔ContributeͰCMSతͳӡ༻ ੍࡞ऀ͕DreamweaverͰςϯϓϨʔ τΛ࡞੒ ɹɹɹɹɹˣ ฤू୲౰ऀʢސ٬ʣ͕ɺ ContributeͰϖʔδΛ࡞੒ɾฤू ݖݶઃఆ΍όʔδϣϯ؅ཧʢSubversionʣʹରԠ αʔόʔ͸੩తHTML͕ಈ͚͹OK Contribute͕ൃද͞Εͨ2003೥ࠒɺ Α͏΍͘WordPress͕஀ੜʢVer. 0.7ʣ ˱
22. 22 ɹɹ੒௕ͨ͠Dreamweaverͷ͓εεϝػೳ かのこは、 7年を経ても あんま り成長し て いないのだ ・・・ 20年を経て生まれ変わった 　　　　Dreamweaver
23. 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. 24 ͓εεϝػೳ ɾϥΠϒϏϡʔ ɹ ʢWebkitΛ౥ࡌʣ ɾϏδϡΞϧϝσΟΞΫΤϦʔ ɹ ʢϥΠϒϏϡʔͰϝσΟΞΫΤϦʔΛ؆୯ʹϓϨϏϡʔʣ ɾBracketsʢίʔυΤσΟλʣ ɹ ʢEmmetɺϚϧνΧʔιϧͳͲʣ ɾϑΝΠϧԣஅݕࡧʗஔ׵ ɹ ʢਖ਼نදݱରԠʣ
25. 25 ͓εεϝػೳ ɾϦΞϧλΠϜϒϥ΢βϓϨϏϡʔ ɹ ʢಉҰLAN಺ͷεϚϗͷ࣮ػͰϓϨϏϡʔՄೳɾɾɾϥΠϒϏϡʔͱ͸ผͷػೳʣ ɾCSSϓϦϓϩηοα ɹ ʢSass/LESSɺιʔεϑΥϧμΛ؂ࢹͯࣗ͠ಈίϯύΠϧʣ ɾExtract ɹ ʢPhotoshopΛىಈͤͣʹɺPSDϑΝΠϧ͔Β৘ใΛऔΓग़ͨ͠ΓΞηο τͷநग़͕Ͱ͖Δʣ ɾGitʹΑΔόʔδϣϯ؅ཧ ɹ ʢ৽ن࡞੒ʗطଘϦϙδ τϦͷೝࣝɺଞͷGitΫϥΠΞϯ τͱڞଘͰ͖Δʣ
26. 26 DEMO
27. 27 ˔DreamweaverͰGitΛ࢖͏࣌ɺҙ֎ʹϋϚΔϙΠϯ τ ɾ GitΫϥΠΞϯ τ͸ɺผʹΠϯε τʔϧ͢Δඞཁ͕͋Δ ɾ Windowsͷਓ͸ಛʹϋϚΔ͜ͱ͕͋ΔͷͰɺϋϚͬͨ࣌͸ࢲͷϒϩάهࣄΛಡΜͰ͍ͩ͘͞ɻ ɹɹDreamweaverͰGitΛ࢖͓͏ͱͨ͠ͱ͖ʹͭ·͍ͮͨGitΫϥΠΞϯ τͷઃఆʹ͍ͭͯ ɹɹhttps://www.cherrypieweb.com/weblog/technical/20170731133624.php
28. 28 ɹɹશ෦GUIͰOKʂ 世界は、 かのこを中心に 回っ ているのだ！ Dreamweaverを中心にした 　　WordPressの 　　　　ローカル制作環境
29. 29 ͦ΋ͦ΋ɺ ͳΜͰDreamweaverΛ࢖͏ͷ͔ʁ ίʔμʔ΍ϓϩάϥϚͰ͸ͳ͘ɺzWebσβΠφʔ zʹͱͬͯ͸ɺ ɹɹɹɹɹɹɹɹɹɹɹɹPhotoshopɺIllustrator͸ඞਢͷπʔϧ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹˠ Adobe Creative Cluod ͷܖ໿͕ඞਢ Adobe Creative Cloudͷܖ໿Λ͍ͯ͠ΔͳΒɺ ɹɹɹ௥Ճඅ༻ແ͠ͰDreamweaverͷ࠷৽όʔδϣϯ͕࢖͑Δ ϞϦαϫϑΥϯ τʢҰ෦ʣ΍ɺΦϯϥΠϯε τ Ϩʔδ΋͍ͭͯ͘Δ ʂ
30. 30 WordPressͷςʔϚ։ൃʹඞཁͳػೳ ɾ Webαʔόʔ ɾ σʔλϕʔεαʔόʔ ɾ λεΫϥϯφʔ CSSϓϦϓϩηοαʕࣗಈίϯύΠϧ ϒϥ΢βΦʔ τϦϩʔυ ɾ όʔδϣϯ؅ཧ
31. 31 ɾ XAMPP/MAMP ɾ VagruntɺDocker ɾ VCCWɺWocker ɾ GulpɺGrunt ɹɹɹɹɹɹXAMPP͸஗͍͠ɺଞ͸ࠇ͍ը໘ඞਢͩ͠ɺWindowsͩͱ࢖͑ͳ͍͠ɾɾɾ
32. 32 ɾ XAMPP/MAMP ɾ VagruntɺDocker ɾ VCCWɺWocker ɾ GulpɺGrunt ɹɹɹɹɹɹɹɹɹɹɹLocal by Flywheelɹɹ
33. 33 ˔Local by Flywheel ͷ͓͢͢ΊϙΠϯ τ ɾ Mac͸΋ͪΖΜɺWindows10 HomeͰ΋ɺؔ࿈ΞϓϦෆཁͰಈ࡞ ʢRubyͱ͔ɺnode.jsͱ͔ɺVirtualbox ͱ͔ΛࣄલʹೖΕͱ͔ͳͯ͘΋͍͍ʣ ɾ WebαʔόʔʹApache/nginx͕બ୒Ͱ͖ɺ్தมߋ΋Մೳ ɾ PHPͷόʔδϣϯ͕બ୒Ͱ͖ɺ్தมߋ΋Մೳ ɾ MySQL؅ཧπʔϧ Adminer ಉࠝ (ඞཁे෼ͳػೳͰ phpMyAdmin ΑΓ͍ܰʣ
34. 34 ɾ ࣗಈͰHOSTSϑΝΠϧΛॻ͖׵͑ͯ͘ΕΔ͠ɺ໭ͯ͘͠ΕΔ ɾ SSLূ໌ॻ͕ൃߦͰ͖Δ ɾ ϩʔΧϧͰϝʔϧૹ৴͕Ͱ͖Δ ɾ Live LinkͰɺωο τϫʔΫ֎ͷଞͷσόΠε͔Β΋ΞΫηεͰ͖Δ ɾ SSH͕࢖͑Δ ΋ͪΖΜɺWP-CLI΋࢖͑Δ
35. 35 ɾ ͢΂ͯɺGUIͷΈͰ׬݁ ɹɹجຊతʹϚ΢εૢ࡞ͰOK ɹɹࡉ͔͍ઃఆ΋ɺӈΫϦοΫͰͰ͖Δ ɹɹϩʔΧϧϑΥϧμ΋͙͢։͚Δ ɹɹCUIʹ׳Ε͍ͯΔਓͰ΋ɺ ɹɹɹɹɹ͖ͬͱ࢖͍΍͍͢͸ͣ ʂ
36. 36 Dreamweaver + Local by Flywheel Ͱ ɹɹɹɹɹɹɹɹɹɹɹɹςʔϚ։ൃΛͯ͠ΈΑ͏
37. 37 1. Local by Flywheel ͰϩʔΧϧαΠ τ࡞੒ ʢ࡞੒ޙʹطଘαΠ τΛҠߦʣ ˔஫ҙ ɾ Πϯε τʔϧ͞ΕΔͷ͸ӳޠ൛ͳͷͰɺઃఆมߋ͕ඞཁ ݴޠɿ೔ຊޠɺ࣌ؒɿ౦ژɺ೔෇දࣔ͸͓޷ΈͰ ɾ ϓϥάΠϯ ʮWP Multibyte Patchʯ ΛඞͣΠϯε τʔϧ͢Δ͜ͱ ʢ೔ຊޠϝʔϧΛ࢖͏ࡍ͸ɺϝʔϧͷΤϯίʔυઃఆ͕ඞཁʣ
38. 38 2. DreamweaverͰαΠ τઃఆ ϩʔΧϧσΟ ϨΫ τϦɿLocal by Flywheel ͷϧʔ τϑΥϧμ ςε ταʔόʔɿϩʔΧϧͱಉ͡σΟ ϨΫ τϦ ɾ CSSϓϦϓϩηοαʕͷઃఆ ιʔεϑΥϧμɺग़ྗϑΥϧμͷઃఆ͸αΠ τ୯ҐʹͳΔ ʢιʔεϑΥϧμ͸ɺαϒσΟ ϨΫ τϦ΋؂ࢹର৅ʣ ɾ Gitͷઃఆ ৽ن࡞੒ʗϦϞʔ τͷPull ʗطଘͷϦϙδ τϦࣗಈೝࣝ ଞͷGitΫϥΠΞϯ τͱڞଘՄೳ
39. 39 3. ςϯϓϨʔτɾελΠϧγʔτͷฤू Sass/LESSͷࣗಈίϯύΠϧ ϦΞϧλΠϜϓϨϏϡʔͰɺϒϥ΢βΦʔ τϦϩʔυ σόΠεϓϨϏϡʔͰಉҰLAN಺ͷεϚʔ τϑΥϯͰϓϨϏϡʔՄೳ ʢLocal by Flywheel ͸ɺLive LinkػೳͰωο τϫʔΫ֎͔ΒϓϨϏϡʔͰ͖Δʣ 4. Git Ͱόʔδϣϯ؅ཧ GitϏϡʔͰमਖ਼͞ΕͨϑΝΠϧΛ֬ೝ εςʔδϯάͯ͠ɺίϛο τ ϦϞʔ τʹPush
40. 40 DEMO
41. 41 ɹɹ৽͍͠Dreamweaver͸ɺ ɹɹɹɹ·͞ʹɺ࣌ྲྀʹऔΓ࢒͞Εͭͭ͋ͬͨWebσβΠφʔͷɺ ɹɹɹɹɹɹzເΛ๰͍Ͱ͘ΕΔz ιϑ τ΢ΣΞʹͳΔ͸ͣ ʂ
42. 42 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ