メディアを伸ばすWordPess開発事例 / WordBench Kurashiki vol4 session

あまりシェアしてはいけない

Transcript

1. ϝσΟΞӡӦΛ৳͹͢
   8PSE1SFTT։ൃࣄྫ
   2018.08.04 - WordBench૔ෑ ୈ4ճษڧձ
   Takenori Okashita (GOUTEN)
   

   View Slide

2. Takenori Okashita
   a.k.a. GOUTEN
   @gouten5010
   ϑϩϯτΤϯυΤϯδχΞʗ8FCσβΠφʔ
   ΫοΫϏζגࣜձࣾ
   8PSE$BNQ0TBLB࣮ߦҕһ௕
   $44ϑϨϯζӡӦ
   

   View Slide

3. ݄ΠνͰཱྀߦ͕࢖໋
   ஍ํొஃ΋͍͚·͢ʂ
   ˒
   ొஃͨ͜͠ͱ͕͋Δ
   ߦ͘΂͖੟஍
   ˒ ࣮Ո
   

   View Slide

4. IUUQTGPPEJPOOFU
   ྉཧਓɾγΣϑͱͭͳ͕Δ৯ͷ4/4 'PPEJPO
   

   View Slide

5. IUUQTGPPEJPOOFU
   ྉཧਓɾγΣϑͱͭͳ͕Δ৯ͷ4/4 'PPEJPO
   ʴ ʴ
   

   View Slide

6. IUUQTGPPEJPOOFU
   ྉཧਓɾγΣϑͱͭͳ͕Δ৯ͷ4/4 'PPEJPO
   ʴ ʴ
   1IPUPCZ!LVSPLPSPMM
   8PSE#FODI૔ෑୈճษڧձ
   

   View Slide

7. IUUQTDPPLCJ[KQTPLFO
   ҿ৯ਓࡐͷϓϩʹΑΔz৯zͷ૯߹ϝσΟΞ ΫοΫϏζ૯ݚ
   

   View Slide

8. IUUQTDPPLCJ[KQTPLFO
   ҿ৯ਓࡐͷϓϩʹΑΔz৯zͷ૯߹ϝσΟΞ ΫοΫϏζ૯ݚ
   ࠓ೔͸ͬͪ͜ͷ͓࿩ʂ
   

   View Slide

9. ϝσΟΞαΠτͷΞΫηεΛ৳͹͢
   

   View Slide

10. IUUQTDPPLCJ[KQTPLFO
    ҿ৯ਓࡐͷϓϩʹΑΔz৯zͷ૯߹ϝσΟΞ ΫοΫϏζ૯ݚ
    

    View Slide

11. View Slide

12. ؤுͬͯهࣄ͍ͬͺ͍ॻ͍ͨ
    

    View Slide

13. ΞΫηεΞοϓʹ͸։ൃ΋ඞཁͩ
    ͦΕ͚ͩ͡Όͳ͍ɻ
    

    View Slide

14. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    هࣄͷϦϥΠτ
    ߋ৽ස౓ͷΞοϓ
    ΦʔΨχοΫ֫ಘͷͨΊͷࢪࡦ
    ಛผͳϖʔδͷ࡞੒
    

    View Slide

15. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    ߋ৽ස౓ͷΞοϓ िະຬߋ৽͔Βͷ୤٫
    ϥΠλʔͷ௥Ճ
    ࣌ࣄωλͷΩϟονΞοϓ
    

    View Slide

16. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ߋ৽ස౓ͷΞοϓ िະຬߋ৽͔Βͷ୤٫
    ϥΠλʔͷ௥Ճ
    ࣌ࣄωλͷΩϟονΞοϓ
    

    View Slide

17. ηογϣϯΛ৳͹ͨ͢Ίͷࢦඪ
    (PPHMF%BUB4UVEJP
    ղੳͨ͠Օॴ
    ΧςΰϦ͝ͱͷΠϯϓϨογϣϯ਺
    → ૯ͯ͡৳ͼͯͳ͍δϟϯϧ͕ಘҙɹ
    ɹͳਓͷิర
    → લ݄ΑΓ৳ͼ͍ͯΔδϟϯϧ͕
    ɹಘҙͳਓͷิరΛͯ͠ɺΩʔϫʔυ
    ɹͰݕࡧΤϯδϯͷॱҐΛ֫ಘ͢Δ
    ॾࣄ৘ʹΑΓ
    ݟͤΒΕ·ͤΜ
    

    View Slide

18. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ϥΠλʔͷ௥Ճ
    ΍ͬͨ͜ͱ ϥΠλʔΛ૿΍ͯ͠ճస཰Λ্͛Δ
    ։ɹൃ
    ϙΠϯτ هࣄΛॻ͘ϥΠλʔͷ৭Λग़͢
    ϥΠλʔܦ༝ͰͷΞΫηεݟࠐΈ
    ճ༡཰ͷ૿Ճͷૂ͍
    σϝϦοτ ֤छڐ୚౳Λͱ͍ͬͯΔ͔ͷ֬ೝ౳ɺ
    هࣄͷެ։ϑϩʔ͕ෳࡶʹ
    ϥΠλʔͷϓϩϑΟʔϧͷద੾ͳදࣔ
    ϥΠλʔҰཡͱϥΠλʔͷهࣄҰཡΛ࡞੒
    

    View Slide

19. ಛผͳϖʔδͷ࡞੒ Πϕϯτɾηϛφʔϖʔδͷઃஔ
    ϓϨεϦϦʔεɾدߘͷड͚ೖΕ
    ์ஔͯ͠େৎ෉ͳίϯςϯπ
    ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    

    View Slide

20. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ಛผͳϖʔδͷ࡞੒ Πϕϯτɾηϛφʔϖʔδͷઃஔ
    ϓϨεϦϦʔεɾدߘͷड͚ೖΕ
    ์ஔͯ͠େৎ෉ͳίϯςϯπ
    

    View Slide

21. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    Πϕϯτɾηϛφʔϖʔδͷઃஔ
    ΍ͬͨ͜ͱ Πϕϯτઐ༻ͷϑΥʔϚοτͷ༻ҙ
    ։ɹൃ ΧελϜϑΟʔϧυͰΠϕϯτଐੑͷ
    ೖྗ߲໨௥Ճ
    ϙΠϯτ େ఍ͷαΠτ͸εϚϗ͔Βͷ
    ΞΫηεͷ΄͏͕ଟ͍
    → ϞόΠϧͰͷಈઢΛεϜʔζԽ͢Δ
    εϚʔτϑΥϯͰͷਃࠐΈͷಋઢڧԽ
    

    View Slide

22. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    Πϕϯτɾηϛφʔϖʔδͷઃஔ
    ΍ͬͨ͜ͱ Πϕϯτઐ༻ͷϑΥʔϚοτͷ༻ҙ
    ։ɹൃ ΧελϜϑΟʔϧυͰΠϕϯτଐੑͷ
    ೖྗ߲໨௥Ճ
    εϚʔτϑΥϯͰͷਃࠐΈͷಋઢڧԽ
    ϙΠϯτ େ఍ͷαΠτ͸εϚϗ͔Βͷ
    ΞΫηεͷ΄͏͕ଟ͍
    → ϞόΠϧͰͷಈઢΛεϜʔζԽ͢Δ
    

    View Slide

23. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    ΦʔΨχοΫ֫ಘͷ
    ͨΊͷࢪࡦ
    ϥϯΩϯάͷઃஔ
    ".1ରԠ
    λάҰཡϖʔδͷઃஔ
    

    View Slide

24. ΦʔΨχοΫ֫ಘͷ
    ͨΊͷࢪࡦ
    ϥϯΩϯάͷઃஔ
    ".1ରԠ
    λάҰཡϖʔδͷઃஔ
    ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    

    View Slide

25. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ϥϯΩϯάͷઃஔ
    ΍ͬͨ͜ͱ αΠυόʔʢεϚϗͳΒϑολʔʣ
    ʹਓؾهࣄϥϯΩϯά
    ϥϯΩϯάͷઃஔ
    ΍ͬͨ͜ͱ αΠυόʔʢεϚϗͳΒϑολʔʣ
    ʹਓؾهࣄϥϯΩϯά
    ։ɹൃ Jetpack API ·ͨ͸ Google Analytics API
    Λར༻ͯ͠هࣄͷPV਺Λऔಘɾιʔτ
    ϙΠϯτ Α͘ݟΒΕΔهࣄΛ࿐ग़ͯ͠ධՁͷ࣭ΛߴΊΔ
    ճ༡ੑͷ޲্
    ϥϯΩϯάಛઃϖʔδΛઃஔ
    σΠϦʔʗ݄ؒʗ૯߹ϥϯΩϯάΛදࣔ
    

    View Slide

26. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ϥϯΩϯάͷઃஔ
    ΍ͬͨ͜ͱ αΠυόʔʢεϚϗͳΒϑολʔʣ
    ʹਓؾهࣄϥϯΩϯά
    ։ɹൃ Jetpack API ·ͨ͸ Google Analytics API
    Λར༻ͯ͠هࣄͷPV਺Λऔಘɾιʔτ
    ϙΠϯτ Α͘ݟΒΕΔهࣄΛ࿐ग़ͯ͠ධՁͷ࣭ΛߴΊΔ
    ճ༡ੑͷ޲্
    // Google Analytics API ͷऔಘίʔυ
    ϥϯΩϯάಛઃϖʔδΛઃஔ
    σΠϦʔʗ݄ؒʗ૯߹ϥϯΩϯάΛදࣔ
    

    View Slide

27. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    λάҰཡϖʔδͷઃஔ
    ͢΂ͯͷઃఆ͞ΕͨλάΛ໢ཏͨ͠
    ಛઃϖʔδΛઃஔ
    ։ɹൃ
    ϙΠϯτ ճ༡ੑͷ޲্
    ݕࡧΤϯδϯʹಛఆΩʔϫʔυͰͷ
    ΠϯσοΫε਺Λ૿΍͢
    λά͝ͱͷهࣄҰཡϖʔδͷઃஔ
    

    View Slide

28. "DDFMFSBUFE.PCJMF1BHFT
    ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ".1ରԠ
    WordPressͷAMPϓϥάΠϯΛಋೖ
    ͞ΒʹAMPςϯϓϨʔτվम
    ։ɹൃ
    ϙΠϯτ ϑϧεΫϥονςʔϚͰͷ
    ಠ࣮ࣗ૷෦෼͸ϓϥάΠϯͰ࿫͑ͳ͍ͨΊ
    AMPϓϥάΠϯͷςϯϓϨʔτΛ΋ͱʹ
    ࣮૷Λ௥Ճͨ͠
    MFIʢMobile First Indexʣ΁ͷରԠ
    ಡΈࠐΈ଎౓վળ
    

    View Slide

29. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    هࣄͷϦϥΠτ
    ద੾ͳλΠτϧ
    ެ։લɾެ։ޙͷهࣄͷ࣭ͷҧ͍
    ಺༰ͷਫ਼ࠪ
    

    View Slide

30. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    ద੾ͳλΠτϧΛ͚ͭΔ
    ݩλΠτϧ έʔλϦϯάͰϚάϩͷղମγϣʔʁʂ
    ࢥ͍ग़ʹ࢒ΔέʔλϦϯάαʔϏεΛ͝঺հ
    ϦϥΠτޙ େࡕͰέʔλϦϯάΛબͿͳΒ͜͜ʂ
    ࢥ͍ग़ʹ࢒ΔਓؾͷαʔϏεΛ͝঺հ
    ʲؔ੢ฤʳ
    ϙΠϯτ Ϛάϩղମγϣʔ͚ͩͰ͸ͳ͍هࣄ
    ঺հ͍ͯ͠ΔαʔϏεʹ஍ҬͷภΓ͕͋Δ
    

    View Slide

31. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    ಺༰ͷਫ਼ࠪͯ͠هࣄΛ෼ׂ͢Δ
    ݩλΠτϧ
    ࣅ͍ͯΔΑ͏Ͱҧ͏ʁࣗຫͰ͖Δ౾஌ࣝʂͨΒ͜ͱ໌ଠࢠɺ
    ϚʔΨϦϯͱόλʔͷҧ͍આ໌Ͱ͖·͔͢ʁ
    ෼ׂޙ
    ιʔηʔδͱ΢Πϯφʔͷҧ͍ͱ͸ʁ௕೥ͷٙ໰Λ͍·ղܾ͠Α͏ʂ
    ϙΠϯτ ୯ମهࣄͰ΋ΞΫηεΛՔ͛Δ
    ಛఆͷΩʔϫʔυΛૂͬͨSEOޮՌ
    ҙ֎ͱ஌ΒΕͯͳ͍ʂͨΒ͜ͱ໌ଠࢠͷҧ͍ʹ͍ͭͯ
    ϚʔΨϦϯͱόλʔͷҧ͍આ໌Ͱ͖·͔͢ʁ
    ࣅ͍ͯΔΑ͏Ͱҧ͏ʁࣗຫͰ͖Δ౾஌ࣝʂιʔηʔδͱ΢Οϯφʔɺ
    Ϗʔϧͱൃ๐ञͷҧ͍આ໌Ͱ͖·͔͢ʁ
    ϚʔΨϦϯͱόλʔͷҧ͍આ໌Ͱ͖·͔͢ʁ
    

    View Slide

32. ηογϣϯΛ৳͹ͨ͢Ίʹ΍ͬͨ͜ͱ
    ެ։ޙͷهࣄͷ࣭ͷҧ͍͔ΒλΠτϧมߋ
    ݩλΠτϧ ೔ຊͷιτͰ͸ΈΜͳ͸ΞϨΛҿΜͰ͍Δʁʂ
    ੈքͷ୸ࢎҿྉಛू
    ϦϥΠτޙ ॵ͍قઅʹΦεεϝʂւ֎Ͱେਓؾͷ
    ୸ࢎҿྉ4બʂ
    ϙΠϯτ ՆΛର৅ͱͨ͠๯಄จ
    ঺հ͍ͯ͠Δͷ͕4ͭͰಛूͱݴ͍ͮΒ͍
    

    View Slide

33. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ϑϩϯτϖʔδͷϝΠϯϏδϡΞϧʹදࣔ͢Δهࣄͷखಈදࣔ
    ৄࡉهࣄͷϨίϝϯυͷखಈදࣔ
    Θ͟Θ͟ਓͷखΛೖΕΔࢪࡦ
    

    View Slide

34. ηογϣϯΛ৳͹ͨ͢Ίͷࢦඪ
    (PPHMF%BUB4UVEJP
    ղੳͨ͠Օॴ
    ࠷ۙΫϦοΫ਺΍ΠϯϓϨογϣϯ਺͕ଟ͍ɺ
    ·ͨ͸ݕࡧΤϯδϯͷܝࡌॱҐ͕ߴ͍
    Ωʔϫʔυ
    → ֘౰͢ΔهࣄΛ૿΍ͯ͠ܝࡌॱҐΛकΔ
    → αΠτͷՁ஋ΛߴΊΔ
    ॾࣄ৘ʹΑΓ
    ݟͤΒΕ·ͤΜ
    

    View Slide

35. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ϑϩϯτϖʔδͷϝΠϯϏδϡΞϧʹදࣔ͢Δهࣄͷखಈදࣔ
    ϙΠϯτ قઅʹΑͬͯදࣔ͢Δ΋ͷΛม͑Δ
    աڈͷྑهࣄͷ࿐ग़
    

    View Slide

36. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ৄࡉهࣄͷϨίϝϯυͷखಈදࣔ
    ϙΠϯτ ࣗಈͰؔ࿈෇͚͢Δͷ͸ݶք͕͋Δ
    

    View Slide

37. ηογϣϯΛ৳͹ͨ͢Ίʹ։ൃͨ͜͠ͱ
    ৄࡉهࣄͷϨίϝϯυͷखಈදࣔ
    ϙΠϯτ ࣗಈͰؔ࿈෇͚͢Δͷ͸ݶք͕͋Δ
    खಈهࣄϨίϝϯυ
    

    View Slide

38. ೥݄ ໿
    17਺ͷਪҠ ೥݄ ໿
    

    View Slide

39. ద੾ͳࢪࡦͷཪʹద੾ͳ։ൃ͋Γ
    

    View Slide

40. ͰΑΓΑ͍ϝσΟΞͷӡ༻Λ
    ਓྗº։ൃ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide