Save 37% off PRO during our Black Friday Sale! »

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

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

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

F839b759a75d2df47bf0b489f8d4a1e9?s=128

Masahiko Kawai

October 21, 2017
Tweet

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 一周回って知らない話・ ・ ・その1 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 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ