Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ゼロコーディングで WordPress サイト制作ハンズオン

ゼロコーディングで WordPress サイト制作ハンズオン

WordCamp Kansai 2016 ( https://2016.kansai.wordcamp.org/ )で行われたハンズオンのスライドです。

その他、資料はこちら
https://github.com/wckansai2016/zerocoding-hands-on/blob/master/README.md

shimakyohsuke

July 09, 2016
Tweet

More Decks by shimakyohsuke

Other Decks in Programming

Transcript

  1. θϩίʔσΟϯάͰ
    8PSE1SFTTαΠτ੍࡞
    ϋϯζΦϯ

    8PSE$BNQ,BOTBJ
    ຊ೔ͷઆ໌ࢿྉ͸ͪ͜Β͔Β
    IUUQTHJUIVCDPNXDLBOTBJ[FSPDPEJOHIBOETPO

    View full-size slide

  2. ੈ࿩໾ͷ঺հ
    γϚΩϣ΢εέ
    IUUQTTIJNBLZPITVLFDPN
    5XJUUFS!TIJNB@Y@P
    σβΠϯ੡࡞ձࣾͰϚʔΫΞοϓΤϯδχΞΛ͍ͯ͠·͢ɻ

    View full-size slide

  3. ੈ࿩໾ͷ঺հ
    ઒Ҫণ඙
    IUUQXXXDIFSSZQJFXFCDPN
    5XJUUFS!TBLVSBHJ@LFJ
    'BDFCPPLNBTBLBXBJ
    ژ౎෎෣௽ࢢͰϑϦʔϥϯεͱͯ͠8FCɾ%51੍࡞Λߦ͍ͬͯ·͢ɻ
    ೥ؒͷ౦ژͷ੍࡞ձࣾͰͷ༷ʑͳܦݧ͔ΒɺఏҊɾݟੵɾσΟϨΫγϣϯɾ
    ϫʔΫϑϩʔߏஙɾσβΠϯɾϓϩάϥϛϯάɾސ٬αϙʔτ·Ͱ͜ͳ͢ʮϑϧ
    ελοΫʢʁʣɾϑϦʔϥϯεʯͰ͢ɻγϩϋϥΠϯίͱࠇࣲ͍ݘͷύύͰ͢ɻ

    View full-size slide

  4. ੈ࿩໾ͷ঺հ
    ;͍ͨͨͧ͡͏
    IUUQKVOPOFUCJ[
    'BDFCPPLUBJ[PGVKJUB
    +VOPOFUͱ͍͏԰߸ͰϑϦʔϥϯεͷ8԰Λ΍͍ͬͯ·͢ɻ
    ຊۀΛҿ৯ళܦӦ͔Β8੍࡞΁ม͑ͨͨΊɺ೥ΑΓ8PSE#FODIਆށʹ
    ࢀՃ͠ɺܹࢗͱ஌ࣝΛ΋Β͍࢓ࣄʹͭͳ͍͛ͯ·͢ɻ

    View full-size slide

  5. ੈ࿩໾ͷ঺հ
    ·ΏͶ͐
    େࡕͷ੍࡞ձࣾͰओʹ8FC੍࡞Λ͍ͯ͠·͢ɻσΟϨΫγϣϯ͔ΒσβΠϯɺίʔ
    σΟϯά
    ɺ8PSE1SFTTςʔϚ࡞੒·Ͱ΍Γ·͢ɻ΋ͱ΋ͱ͸%51σβΠϯΛ͍ͯ͠
    ͨͨΊɺύϯϑϨοτɾϑϥΠϠʔ౳ͷࢴഔମσβΠϯ΋ՄೳͰ͢ɻ޷͖ͳ΋ͷ͸ɺ
    8PSE1SFTTͱϩοΫͱंͰ͢ɻ
    IUUQNBIJSPDLDPN
    5XJUUFS!NBZV@XFC
    'BDFCPPLNBZV

    View full-size slide

  6. ੈ࿩໾ͷ঺հ
    ZPSJ
    IUUQZPSJDPN
    5XJUUFS!ZPSJ@PUJN
    'BDFCPPLZPSJZBTVOJTIJNVSB
    େࡕͷ੍࡞ձࣾͰϚʔΫΞοϓΤϯδχΞΛ͍ͯ͠·͢ɻ

    View full-size slide

  7. ׂ࣌ؒ
    w ࠓ೔΍Δ͜ͱൃදʢ෼ʣˡࠓίί
    w 8PSE1SFTTͷ࠷ॳͷઃఆʢ෼ʣ
    w νʔϜ෼͚ʢ෼ʣ
    w ΋͘΋͘ʢ෼ʣ˞ద౰ʹٳܜ͍ͯͩ͘͠͞Ͷʂ
    w Ϋϩʔδϯάʢ෼ʣ

    View full-size slide

  8. ࠓ೔΍Δ͜ͱ

    View full-size slide

  9. ࠓ೔΍Δ͜ͱ
    w )5.-ɾ$44ɾ+BWB4DSJQUɾ1)1ͱ͍ͬͨྨͷίʔυΛॻ
    ͔ͣʹ8PSE1SFTTαΠτΛ࡞Δɻ

    ʢγϣʔτίʔυͷίϐϖ͸ηʔϑͱ͢Δɻʣ

    View full-size slide

  10. ࠓ೔΍Βͳ͍͜ͱ

    View full-size slide

  11. ࠓ೔΍Βͳ͍͜ͱ
    w )5.-ɾ$44ɾ+BWB4DSJQUɾ1)1ͱ͍ͬͨྨͷίʔυΛॻ
    ͔ͳ͍
    w ςʔϚͷ࡞Γํ
    w ςʔϚͷࢠςʔϚԽ
    w ϓϥάΠϯͷ࡞Γํ
    w αϯϓϧαΠτʹ࢖༻͍ͯ͠ͳ͍ϓϥάΠϯͷ࢖͍ํ

    View full-size slide

  12. ίʔυΛॻ͔ͳ͍ͱ
    ࣮ݱͰ͖ͳ͍͜ͱΛཧղͯ͠
    ΋Β͏ͨΊͷϋϯζΦϯͰ͢ʂ

    View full-size slide

  13. ࠓ೔΍Δ͜ͱͷྲྀΕ

    View full-size slide

  14. ࠓ೔΍Δ͜ͱͷྲྀΕ
    w ͪ͜ΒͰ༻ҙͨ͠ҎԼͭͷαϯϓϧαΠτͷ಺ͷͭΛ
    νʔϜʹ෼͔Εͯ࡞੒͠·͢ɻ
    w ϒϩάαΠτʢςΩετ͕த৺ʣ
    w ΪϟϥϦʔαΠτʢࣸਅɾΠϥετ͕த৺ʣ
    w ίʔϙϨʔταΠτʢஂମɾاۀͳͲ͓ݎ͍ܥʣ
    w γϣοϓαΠτʢࡶ՟ɾεΠʔπͳͲ؇͍ܥʣ

    View full-size slide

  15. ࡞੒͢ΔαΠτͷ঺հ

    View full-size slide

  16. ࡞੒͢ΔαΠτͷ঺հ
    ࢖༻ͨ͠ςʔϚ
    ɾ5XFOUZ4JYUFFO

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ8PSE1SFTT1PQVMBS1PTUT
    ɾ5BCMFPG$POUFOUT1MVT
    ಛ௃
    ɾਓؾهࣄͷදࣔ

    ɾهࣄ಺ʹ໨࣍ΛࣗಈͰੜ੒
    ϒϩάαΠτ

    View full-size slide

  17. ࢖༻ͨ͠ςʔϚ
    ɾ0SWJT

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ+FUQBDL
    ɾ&BTZ'BODZ#PY
    ಛ௃
    ɾࣸਅ΍ΠϥετΛத৺ʹදࣔ
    ࡞੒͢ΔαΠτͷ঺հ
    ΪϟϥϦʔαΠτ

    View full-size slide

  18. ࡞੒͢ΔαΠτͷ঺հ
    ίʔϙϨʔταΠτ
    ࢖༻ͨ͠ςʔϚ
    ɾ-JHIUOJOH

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ*NBHF8JEHFU
    ɾ4JNQMF.BQ
    ಛ௃
    ɾΧϥϜͷσβΠϯͷςʔϚΛ
    ࢖༻

    View full-size slide

  19. ࡞੒͢ΔαΠτͷ঺հ
    γϣοϓαΠτ
    ࢖༻ͨ͠ςʔϚ
    ɾ(SBQIZ

    ࢖༻ͨ͠ओͳϓϥάΠϯ
    ɾ.FOV*NBHF
    ɾ5JOZ.$&"EWBODFE
    ಛ௃
    ɾΧϥϜͷσβΠϯͷςʔϚΛ
    ࢖༻

    View full-size slide

  20. ͜ͷαΠτ͸Ͳ͏΍ͬͯ࡞ͬͯΔͷʁ
    ˠखΛಈֶ͔ͯ͠ͼ·͠ΐ͏ʂ

    View full-size slide

  21. 8PSE1SFTTͷ࠷ॳͷઃఆ

    View full-size slide

  22. 8PSE1SFTTͷ࠷ॳͷઃఆ
    ҎԼͷϖʔδͰઆ໌͍ͨ͠·͢ɻ
    63-
    IUUQTHJUIVCDPNXDLBOTBJ[FSPDPEJOHIBOETPOCMPC
    NBTUFSqPXBMMNE
    ͢ͰʹઃఆࡁΈͷํ΋͓ΒΕΔ͔ͱࢥ͍·͢ͷͰۦ͚଍Ͱઆ໌͠·
    ͢ɻ
    Θ͔Βͳ͍͜ͱ͕͋Ε͹ੈ࿩໾ʹฉ͍͍ͯͩ͘͞Ͷɻ

    View full-size slide

  23. ॾ஫ҙ
    w ੈ࿩໾͸8PSE1SFTTͷ͜ͱΛશͯཧղ͍ͯ͠Δ௒ਓͰ͸͝
    ͍͟·ͤΜɻ
    w ࠓճͷϋϯζΦϯͰ͸ɺͪ͜Β͕ࢦఆͨ͠ςʔϚɺϓϥά
    ΠϯͷΈΛ࢖༻͍ͯͩ͘͠͞ɻ

    ʢ਺ઍ͋ΔςʔϚɺϓϥάΠϯ͢΂ͯͷ࢖͍ํΛख़஌ͯ͠
    ͍ΔΘ͚Ͱ͸͍͟͝·ͤΜɻ·ͨςʔϚʹΑͬͯ͸૝ఆ͠
    ͨػೳ͕࢖͑ͳ͍ࣄ͕͋ΔͨΊͰ͢ɻʣ

    View full-size slide

  24. ͱ͍͏͜ͱͰɺ
    νʔϜ෼͚ʂ

    View full-size slide

  25. ΋͘΋͘࡞ۀ։࢝ͷલʹ
    w νʔϜ಺Ͱࣗݾ঺հ͠Α͏ʂ
    w ໊͓લʢϋϯυϧωʔϜͰ΋΋ͪΖΜ0,ʂʣ
    w ݱࡏͷ৬छʢ΋ͪΖΜൿີͰ΋0,ʂʣ
    w 8PSE1SFTTͰ΍Γ͍ͨ͜ͱΞϨ͹ੋඇ͓࿩Λʂ
    w ٳܜ͸ద౰ʹͱ͍ͬͯͩ͘͞Ͷʔ

    View full-size slide

  26. ϨοπνϟϨϯδʂ

    View full-size slide

  27. ·ͱΊ
    w ίʔυΛॻ͔ͳͯ͘΋͋Δఔ౓ͷ8FCαΠτ͕࡞ΕΔʂ
    w ݟͨ໨Λ੔͍͑ͨͳΒɺ)5.-ɾ$44Λཧղ͠Α͏ʂ
    w αΠτ಺ͰෳࡶͳॲཧΛ͍ͨ͠ͳΒ1)1·ͨ͸
    8PSE1SFTTؔ਺Λཧղ͠Α͏ʂ
    w ςʔϚͱϓϥάΠϯΛ୳͢ͷ͸͚ͬ͜͏೉͍͠ɻɻ


    ͦΜͳ࣌ʹ͸ʜʜ

    View full-size slide

  28. ίϛϡχςΟʹࢀՃ͠Α͏ʂ
    ʮ8PSE#FODIʯͱݕࡧʂʂ

    View full-size slide

  29. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    ͝ײ૝͓଴͓ͪͯ͠Γ·͢ʂ

    ϋογϡλά͸ͪ͜Β
    XDL

    View full-size slide