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

by Masahiko Kawai

Embed

Start on current slide

Slide 1

Slide 1 text

1 黒い画面の苦手なデザイナーに捧げる Dreamweaverだけで行う WordPressテーマ制作ほぼ 2017/10/21ɹWordBenchژ౎ in ෣௽ Cherry Pie Web ઒Ҫণ඙

Slide 2

Slide 2 text

2 Dreamweaver υ ϦʔϜ΢ΟʔόʔʢເΛ๰͙ऀʣ Α͋͘Δؒҧ͍ɾɾɾ υ ϦʔϜ΢ΣʔόʔʢwaverʣͰ͸͋Γ·ͤΜɻ

Slide 3

Slide 3 text

3 1997೥ɹ̴̬ ̱౷߹։ൃ؀ڥͱͯ͠ొ৔ 1998೥ɹ೔ຊޠ൛ൃച 1999೥ɹFireworksͱͷηο τൢചͰେώο τ ɹɹɹ̴̬ ੍̱࡞ͷσϑΝΫ τελϯμʔυʹ

Slide 4

Slide 4 text

4 ۀք͕ٸ଎ʹෳࡶɾߴ౓Խ ɹΤϯδχΞɾίʔμʔɾσβΠφʔɾɾɾ෼ۀԽ͕ਐΉ ࣌ྲྀͷྲྀΕʹػೳ͕௥͍෇͔ͣɺ ɹɹ2008೥ࠒ͔ΒɺCodaɺSublime Text ͳͲ ɹɹɹɹۀ຿ʹಛԽͨ͠πʔϧʹྲྀΕΔϢʔβʔ͕૿͑Δɾɾɾ ɾɾɾͦͯ͠ɺෳࡶԽɾߴ౓Խʹ͍͍͚ͭͯͳ͍WebσβΠφʔ΋૿͑ͨ

Slide 5

Slide 5 text

5 Dreamweaver ͸ɺ͜ͷ··Φϫίϯʹͳͬͯ͠·͏ͷ͔ɾɾɾ ͦͯ͠ɺWebσβΠφʔ͸ɺͲ͏΍ͬͯੜ͖࢒Ε͹͍͍ͷ͔ɾɾɾ

Slide 6

Slide 6 text

6 2017೥ Reboot Dreamweaver ։࠵ ɹɹɹɹɹɹɹɹ ʢ౦ژɾେࡕʣ ैདྷͷػೳΛ࣋ͪͭͭɺ BracketsɾBootstrapɾSass/LESS GitɾϦΞϧλΠϜϓϨϏϡʔ etc. ͳͲɺࠓͲ͖ͷػೳΛऔΓࠐΉ

Slide 7

Slide 7 text

7 ɹɹɹɹɹDreamweaver ͱͱ΋ʹɺ ɹɹɹɹɹɹɹɹɹɹɹɹWebσβΠφʔ΋ Reboot ͠Α͏ ʂ ɾɾɾͱ͍͏͓࿩Λ͠·͢ɻ

Slide 8

Slide 8 text

8 ࣗݾ঺հ ɹ઒Ҫণ඙ʢ͔Θ͍·͞ͻ͜ʣ ɹɹɹژ౎෎෣௽ࢢग़਎ ɹɹɹࠃཱ෣௽޻ۀߴઐଔۀޙɺ౦ژͷ੍࡞ձࣾͰ24೥ؒۈΊɺ ɹɹɹݱࡏ͸෣௽ࢢʹؼڷ͠ɺϑϦʔϥϯεͰDTPɾWeb੍࡞Λ͍ͯ͠·͢ɻ ɹఏҊɾݟੵɾσΟ ϨΫγϣϯɾσβΠϯɾϓϩάϥϛϯάɾαϙʔ τ ɹɹ੍࡞ձࣾͷϫʔΫϑϩʔߏங΍ίϯαϧςΟϯά·Ͱߦ͏ ɹɹɹϑϧελοΫɾϑϦʔϥϯεͰ͢ ʂ

Slide 9

Slide 9 text

9 Cherry Pie Web https://www.cherrypieweb.com/ 1997೥։ઃ ࠓ೥Ͱ20೥໨ ʂ ɹɹɹDreamweaverͱಉ͍೥ ʂ ࠇࣲ͔ͷ͜ͷϑΥ τϒϩά΋ΑΖ͓͘͠ئ͍͠·͢ɻ

Slide 10

Slide 10 text

10 ࢲͱDreamweaverͱͷ͔͔ΘΓ ग़ձ͍͸2000೥ɺDreamweaver Fireworks STUDIO3 ɹɹɹɹɹɹɹɹɹɹɹҎ߱ɺ࠷৽ͷCC2017·Ͱɺͣʔͬͱ࢖༻த 2010೥ɹAdobe Creative Suite 5 ൃച࣌ɺ ɹɹ౦ژɾදࢀಓͰ։͔Εͨ ɹɹɹ ʮੈքͰ࠷΋ૣ͘ ɹɹɹɹɹAdobe Creative Suite 5 ʹ ɹɹɹɹɹɹɹ৮ΕΒΕΔϦΞϧεϙο τɹStation5 ʯ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͰ͸આ໌һΛ୲౰

Slide 11

Slide 11 text

11 ຊ೔ͷ༧ఆ 1. Ұपճͬͯ஌Βͳ͍Dreamweaverͷ࿩ 2. 20೥Λܦͯੜ·ΕมΘͬͨDreamweaver 3. DreamweaverΛத৺ʹͨ͠WordPressͷϩʔΧϧ੍࡞؀ڥ

Slide 12

Slide 12 text

12 ɹɹੲͷਓʹ͸ৗ͚ࣝͩͲɺ ɹɹɹࠓͷਓ͸஌Βͳ͍͔΋͠Εͳ͍࿩ かのこも、　もう1周　してくるのだ！一周回って知らない　Dreamweaverの話

Slide 13

Slide 13 text

13 一周回って知らない話・・・その１ DreamweaverΛ࡞ͬͨͷ͸ AdobeͰ͸ͳ͍

Slide 14

Slide 14 text

14 ˔DreamweaverΛ࡞ͬͨͷ͸AdobeͰ͸ͳ͘ɺMacromedia 2005೥4݄ʹɺ ɹAdobe͕MacromediaΛ໿34ԯυϧͰങऩ ౰࣌Adobeʹ͸ɺGoLiveͱ͍͏Web੍࡞πʔϧ͕͕͋ͬͨɺ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹDreamweaver ʹҰຊԽ ɹMacromedia੡ͷ ɹɹιϑ τ΢ΣΞͱ͍͑͹ɺ ɹɹɹɹɹɹ͜Μͳͷ΋༗໊

Slide 15

Slide 15 text

15 一周回って知らない話・・・その2 Dreamweaver͸ ίʔυΤσΟ λͰ͸ͳ͍

Slide 16

Slide 16 text

16 ˔Dreamweaver͸ɺίʔυΤσΟλʔͰ͸ͳ͘ ɹɹɹɹɹɹɹɹɹz૯߹πʔϧηο τz ͱ͍͏Ґஔ͚ͮ ɹίʔυΤσΟλʢHTMLɾCSSɾJavaScriptɾPHPʣ ɾWYSIWYGฤू ɹࣗಈϦϯΫमਖ਼ɾόʔδϣϯ؅ཧɾαΠ τ؅ཧ ɹσβΠϯπʔϧͱͷ࿈ܞɾMicrosoft Officeͱͷ࿈ܞ ɾɾɾΤσΟλઐ༻πʔϧͱ͸ɺͦ΋ͦ΋ઃܭࢥ૝͕ҧ͏

Slide 17

Slide 17 text

17 ˔αΠ τ಺ϦϯΫͷࣗಈमਖ਼ ϑΝΠϧͷϦωʔϜʗσΟ ϨΫ τϦมߋͳͲΛߦ͏ͱ ͦͷϑΝΠϧ΁ͷϦϯΫ͕ࣗಈͰमਖ਼͞ΕΔ Dreamweaver ͷॳظ͔Β͋ͬͨ ɹ ʮαΠ τ؅ཧπʔϧʯ ͳΒͰ͸ͷػೳ

Slide 18

Slide 18 text

18 ˔ڧྗͩͬͨFireworksɾFlashͱͷ࿈ܞ FireworksͰ࡞੒ͨ͠ ը૾ɾςʔϒϧϨΠΞ΢ τ΍ FlashͰ࡞੒ͨ͠ϜʔϏʔΛ Dreamweaver্͔Βฤू͢Δͱ πʔϧ͕ࣗಈىಈͯ͠ ݩϑΝΠϧ͕मਖ਼Ͱ͖Δ ɾɾɾAdobeʹͳ͔ͬͯΒ ɹɹɹ͜͏͍ͬͨ࿈ܞͷ࢓૊Έ͕ੜ͔͞Εͣ࢒೦

Slide 19

Slide 19 text

19 一周回って知らない話・・・その3 Dreamweaver͸ɺ CMSͩͬͨ ʁ

Slide 20

Slide 20 text

20 ˔ςϯϓϨʔτػೳ ςϯϓϨʔ τΛෳ੡ͯ͠ࢠϖʔδΛ࡞੒Ͱ͖Δػೳ ී௨ʹHTMLΛ࡞੒͠ɺ ࢠϖʔδͰมߋ͍ͨ͠ͱ͜Ζ͚ͩ ɹɹɹɹɹɹɹฤूՄೳྖҬͱ͢Δ

Slide 21

Slide 21 text

21 ˔ContributeͰCMSతͳӡ༻ ੍࡞ऀ͕DreamweaverͰςϯϓϨʔ τΛ࡞੒ ɹɹɹɹɹˣ ฤू୲౰ऀʢސ٬ʣ͕ɺ ContributeͰϖʔδΛ࡞੒ɾฤू ݖݶઃఆ΍όʔδϣϯ؅ཧʢSubversionʣʹରԠ αʔόʔ͸੩తHTML͕ಈ͚͹OK Contribute͕ൃද͞Εͨ2003೥ࠒɺ Α͏΍͘WordPress͕஀ੜʢVer. 0.7ʣ ˱

Slide 22

Slide 22 text

22 ɹɹ੒௕ͨ͠Dreamweaverͷ͓εεϝػೳ かのこは、 7年を経てもあんまり成長していないのだ・・・ 20年を経て生まれ変わった　　　　Dreamweaver

Slide 23

Slide 23 text

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͸·࣮ͩ૷͞Ε͍ͯ·ͤΜͰͨ͠ʣ

Slide 24

Slide 24 text

24 ͓εεϝػೳ ɾϥΠϒϏϡʔ ɹ ʢWebkitΛ౥ࡌʣ ɾϏδϡΞϧϝσΟΞΫΤϦʔ ɹ ʢϥΠϒϏϡʔͰϝσΟΞΫΤϦʔΛ؆୯ʹϓϨϏϡʔʣ ɾBracketsʢίʔυΤσΟλʣ ɹ ʢEmmetɺϚϧνΧʔιϧͳͲʣ ɾϑΝΠϧԣஅݕࡧʗஔ׵ ɹ ʢਖ਼نදݱରԠʣ

Slide 25

Slide 25 text

25 ͓εεϝػೳ ɾϦΞϧλΠϜϒϥ΢βϓϨϏϡʔ ɹ ʢಉҰLAN಺ͷεϚϗͷ࣮ػͰϓϨϏϡʔՄೳɾɾɾϥΠϒϏϡʔͱ͸ผͷػೳʣ ɾCSSϓϦϓϩηοα ɹ ʢSass/LESSɺιʔεϑΥϧμΛ؂ࢹͯࣗ͠ಈίϯύΠϧʣ ɾExtract ɹ ʢPhotoshopΛىಈͤͣʹɺPSDϑΝΠϧ͔Β৘ใΛऔΓग़ͨ͠ΓΞηο τͷநग़͕Ͱ͖Δʣ ɾGitʹΑΔόʔδϣϯ؅ཧ ɹ ʢ৽ن࡞੒ʗطଘϦϙδ τϦͷೝࣝɺଞͷGitΫϥΠΞϯ τͱڞଘͰ͖Δʣ

Slide 26

Slide 26 text

26 DEMO

Slide 27

Slide 27 text

27 ˔DreamweaverͰGitΛ࢖͏࣌ɺҙ֎ʹϋϚΔϙΠϯ τ ɾ GitΫϥΠΞϯ τ͸ɺผʹΠϯε τʔϧ͢Δඞཁ͕͋Δ ɾ Windowsͷਓ͸ಛʹϋϚΔ͜ͱ͕͋ΔͷͰɺϋϚͬͨ࣌͸ࢲͷϒϩάهࣄΛಡΜͰ͍ͩ͘͞ɻ ɹɹDreamweaverͰGitΛ࢖͓͏ͱͨ͠ͱ͖ʹͭ·͍ͮͨGitΫϥΠΞϯ τͷઃఆʹ͍ͭͯ ɹɹhttps://www.cherrypieweb.com/weblog/technical/20170731133624.php

Slide 28

Slide 28 text

28 ɹɹશ෦GUIͰOKʂ 世界は、かのこを中心に回っているのだ！ Dreamweaverを中心にした　　WordPressの　　　　ローカル制作環境

Slide 29

Slide 29 text

29 ͦ΋ͦ΋ɺ ͳΜͰDreamweaverΛ࢖͏ͷ͔ʁ ίʔμʔ΍ϓϩάϥϚͰ͸ͳ͘ɺzWebσβΠφʔ zʹͱͬͯ͸ɺ ɹɹɹɹɹɹɹɹɹɹɹɹPhotoshopɺIllustrator͸ඞਢͷπʔϧ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹˠ Adobe Creative Cluod ͷܖ໿͕ඞਢ Adobe Creative Cloudͷܖ໿Λ͍ͯ͠ΔͳΒɺ ɹɹɹ௥Ճඅ༻ແ͠ͰDreamweaverͷ࠷৽όʔδϣϯ͕࢖͑Δ ϞϦαϫϑΥϯ τʢҰ෦ʣ΍ɺΦϯϥΠϯε τ Ϩʔδ΋͍ͭͯ͘Δ ʂ

Slide 30

Slide 30 text

30 WordPressͷςʔϚ։ൃʹඞཁͳػೳ ɾ Webαʔόʔ ɾ σʔλϕʔεαʔόʔ ɾ λεΫϥϯφʔ CSSϓϦϓϩηοαʕࣗಈίϯύΠϧ ϒϥ΢βΦʔ τϦϩʔυ ɾ όʔδϣϯ؅ཧ

Slide 31

Slide 31 text

31 ɾ XAMPP/MAMP ɾ VagruntɺDocker ɾ VCCWɺWocker ɾ GulpɺGrunt ɹɹɹɹɹɹXAMPP͸஗͍͠ɺଞ͸ࠇ͍ը໘ඞਢͩ͠ɺWindowsͩͱ࢖͑ͳ͍͠ɾɾɾ

Slide 32

Slide 32 text

32 ɾ XAMPP/MAMP ɾ VagruntɺDocker ɾ VCCWɺWocker ɾ GulpɺGrunt ɹɹɹɹɹɹɹɹɹɹɹLocal by Flywheelɹɹ

Slide 33

Slide 33 text

33 ˔Local by Flywheel ͷ͓͢͢ΊϙΠϯ τ ɾ Mac͸΋ͪΖΜɺWindows10 HomeͰ΋ɺؔ࿈ΞϓϦෆཁͰಈ࡞ ʢRubyͱ͔ɺnode.jsͱ͔ɺVirtualbox ͱ͔ΛࣄલʹೖΕͱ͔ͳͯ͘΋͍͍ʣ ɾ WebαʔόʔʹApache/nginx͕બ୒Ͱ͖ɺ్தมߋ΋Մೳ ɾ PHPͷόʔδϣϯ͕બ୒Ͱ͖ɺ్தมߋ΋Մೳ ɾ MySQL؅ཧπʔϧ Adminer ಉࠝ (ඞཁे෼ͳػೳͰ phpMyAdmin ΑΓ͍ܰʣ

Slide 34

Slide 34 text

34 ɾ ࣗಈͰHOSTSϑΝΠϧΛॻ͖׵͑ͯ͘ΕΔ͠ɺ໭ͯ͘͠ΕΔ ɾ SSLূ໌ॻ͕ൃߦͰ͖Δ ɾ ϩʔΧϧͰϝʔϧૹ৴͕Ͱ͖Δ ɾ Live LinkͰɺωο τϫʔΫ֎ͷଞͷσόΠε͔Β΋ΞΫηεͰ͖Δ ɾ SSH͕࢖͑Δ ΋ͪΖΜɺWP-CLI΋࢖͑Δ

Slide 35

Slide 35 text

35 ɾ ͢΂ͯɺGUIͷΈͰ׬݁ ɹɹجຊతʹϚ΢εૢ࡞ͰOK ɹɹࡉ͔͍ઃఆ΋ɺӈΫϦοΫͰͰ͖Δ ɹɹϩʔΧϧϑΥϧμ΋͙͢։͚Δ ɹɹCUIʹ׳Ε͍ͯΔਓͰ΋ɺ ɹɹɹɹɹ͖ͬͱ࢖͍΍͍͢͸ͣ ʂ

Slide 36

Slide 36 text

36 Dreamweaver + Local by Flywheel Ͱ ɹɹɹɹɹɹɹɹɹɹɹɹςʔϚ։ൃΛͯ͠ΈΑ͏

Slide 37

Slide 37 text

37 1. Local by Flywheel ͰϩʔΧϧαΠ τ࡞੒ ʢ࡞੒ޙʹطଘαΠ τΛҠߦʣ ˔஫ҙ ɾ Πϯε τʔϧ͞ΕΔͷ͸ӳޠ൛ͳͷͰɺઃఆมߋ͕ඞཁ ݴޠɿ೔ຊޠɺ࣌ؒɿ౦ژɺ೔෇දࣔ͸͓޷ΈͰ ɾ ϓϥάΠϯ ʮWP Multibyte Patchʯ ΛඞͣΠϯε τʔϧ͢Δ͜ͱ ʢ೔ຊޠϝʔϧΛ࢖͏ࡍ͸ɺϝʔϧͷΤϯίʔυઃఆ͕ඞཁʣ

Slide 38

Slide 38 text

38 2. DreamweaverͰαΠ τઃఆ ϩʔΧϧσΟ ϨΫ τϦɿLocal by Flywheel ͷϧʔ τϑΥϧμ ςε ταʔόʔɿϩʔΧϧͱಉ͡σΟ ϨΫ τϦ ɾ CSSϓϦϓϩηοαʕͷઃఆ ιʔεϑΥϧμɺग़ྗϑΥϧμͷઃఆ͸αΠ τ୯ҐʹͳΔ ʢιʔεϑΥϧμ͸ɺαϒσΟ ϨΫ τϦ΋؂ࢹର৅ʣ ɾ Gitͷઃఆ ৽ن࡞੒ʗϦϞʔ τͷPull ʗطଘͷϦϙδ τϦࣗಈೝࣝ ଞͷGitΫϥΠΞϯ τͱڞଘՄೳ

Slide 39

Slide 39 text

39 3. ςϯϓϨʔτɾελΠϧγʔτͷฤू Sass/LESSͷࣗಈίϯύΠϧ ϦΞϧλΠϜϓϨϏϡʔͰɺϒϥ΢βΦʔ τϦϩʔυ σόΠεϓϨϏϡʔͰಉҰLAN಺ͷεϚʔ τϑΥϯͰϓϨϏϡʔՄೳ ʢLocal by Flywheel ͸ɺLive LinkػೳͰωο τϫʔΫ֎͔ΒϓϨϏϡʔͰ͖Δʣ 4. Git Ͱόʔδϣϯ؅ཧ GitϏϡʔͰमਖ਼͞ΕͨϑΝΠϧΛ֬ೝ εςʔδϯάͯ͠ɺίϛο τ ϦϞʔ τʹPush

Slide 40

Slide 40 text

40 DEMO

Slide 41

Slide 41 text

41 ɹɹ৽͍͠Dreamweaver͸ɺ ɹɹɹɹ·͞ʹɺ࣌ྲྀʹऔΓ࢒͞Εͭͭ͋ͬͨWebσβΠφʔͷɺ ɹɹɹɹɹɹzເΛ๰͍Ͱ͘ΕΔz ιϑ τ΢ΣΞʹͳΔ͸ͣ ʂ

Slide 42

Slide 42 text

42 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ