WordPressが制作の現場を変えていく / WordBench Kurashiki vol1

第1回 WordBench倉敷で登壇した時の資料です。

Transcript

1. WordPress੍͕࡞ͷݱ৔Λม͍͑ͯ͘ 2017.02.04 / WordBench૔ෑ ୈ1ճษڧձ
2. GOUTEN @gouten5010 a.k.a.Takenori Okashita 8FCσβΠφʔʗϑϩϯτΤϯυΤϯδχΞ JOB ΫοΫϏζגࣜձࣾ
   ϝσΟΞࣄۀ෦
   ։ൃ෦ JOIN 8PSE#FODIେࡕϞσϨʔλʔʗεϕΓ-5ܳਓ TYPE
3. Foodion Interview | ҰྲྀγΣϑɾྉཧਓͷϓϩϑΣογϣφϧ࿦ -> https://foodion.net/
4. https://foodion.net/app/ iOS App 2016.12.01 Release!! ->
5. αʔϏεߏ੒ Mobile Application ৯ʹؔ͢Δ͞·͟·ͳ৘ใΛ ࣸਅ͖ͭͰه࿥ɾڞ༗ Website ΞϓϦͷλΠϜϥΠϯΛWebͰදࣔ WordPres Content ΠϯλϏϡʔΛܝࡌͨ͠ίϯςϯπ Web Admin site ӡӦऀ༻؅ཧը໘ WebView API API MySQL / Dynamo db Web൛ ΞϓϦ ಛू
6. ݱࡏͷ foodion.netʢ೔ຊޠ൛ʣͷߏ੒ foodion.net (WordPress) interview post page category ΠϯλϏϡʔαΠτͱͯ͠τοϓΛߏங ίΞϑΝΠϧࣗମ͸/interivew/ʹ֨ೲ App WebView Theme index term of use post privacy policy chef list / about / app landing page / privacy policy / term of use / inquiry ΞϓϦͷWebView༻ʹ ςʔϚΛ࡞੒
7. ࢖༻ϓϥάΠϯ Akismet Jetpack WP Multibyte Patch جຊͱͯ͠ೖΕ͍ͯΔ΋ͷ Advanced Custom Fields PRO Bogo MW WP Form → Contact Form 7 OneSignal Push Notifications Public Post Preview ΠϯλϏϡʔαΠτͷ࢓༷ͱͯ͠ඞཁ Multi Device Switcher WebViewͷͨΊʹඞཁ Add Advance Custom Fields to JSON API → ACF to REST API WP REST API v2 αʔϏεͷWeb൛ɾΞϓϦλΠϜϥΠϯʹඞཁ Foodion Interview Site Settings ಠࣗػೳ࣮૷ Force Email Login Really Simple SSL ηΩϡϦςΟରࡦͱͯ͠ඞཁ Nephila clavata (བྷ৽්) 4.7 marged !
8. ACFͰΧελϜϑΟʔϧυ௥Ճ ιʔτͷͨΊͷϑΟʔϧυ ݴޠεΠονϟʔͷͨΊͷΦϓγϣϯϑΟʔϧυ ޙज़͢ΔαʔόʔͷϦʔδϣϯରԠͰ௥ՃͰඞཁͳػೳ →࣮૷༧ఆ 50ԻॱͰฒͼସ͑ΔͨΊͷ;Γ͕ͳϑΟʔϧυ ΠϯλϏϡʔͷϙΠϯτΛ܁Γฦ͠ϑΟʔϧυͰ ΠϯλϏϡʔͷཁ໿Λ3߲໨ఔ౓ɺจষͷ๯಄ʹೖΕΔͨΊʹ ͘Γฦ͠ϑΟʔϧυͰ௥ՃͰ͖ΔΑ͏ʹ࣮૷ ళฮ৘ใɾ஍ਤ౳Λදࣔͤ͞ΔϑΟʔϧυ SEO༻ͷϝλλάϑΟʔϧυ
9. ଟݴޠԽʹBogoΛ࢖༻ qTranslateX / WPML / Bogoͷ͍ͣΕ͔Ͱݕ౼ qTranslateX 1ͭͷ౤ߘը໘Ͱ຋༁Ͱ͖Δ͕ɺσʔλ͕ಉ͡ϑΟʔϧυʹ֨ೲ͞ΕΔͷͰݕࡧ͠ʹ͍͘ ΧελϜϑΟʔϧυ౳Ͱͷೖྗͷ࢓ํ͕εϚʔτ͡Όͳ͍ WPML ࢖͍উख͕͍͍ͱ͸ฉ͍͍ͯΔ͕ɺ౰ॳ͸࣮ݧతʹࢼ͢ஈ֊ͩͬͨͷͰίετΛֻ͚ͣʹ࣮૷͔ͨͬͨ͠ Bogo ݴޠ͝ͱʹ౤ߘ͕෼͔ΕΔͷͰ؅ཧ͠΍͍͢ʢPOST΋ผʑͷλΠϛϯάͰͰ͖ΔͷͰӡ༻ָ͕ʣ
10. ֤छૹ৴ϑΥʔϜͰContact From 7Λ࢖༻ ͓໰͍߹Θͤϖʔδ ࣮૷ͨ͠Օॴ WordPressͰͳ͍ϖʔδͰγϣʔτίʔυΛ࢖༻ ֬ೝը໘͸͍Βͳ͍ ཧ༝ ߋ৽௨஌ʹOneSignal Push NotificationsΛ࢖༻ SSLରԠ͍ͯͯ͠ɺOneSignalʹొ࿥͑͢͞Ε͹ઃఆָ͕ ଞͷPush௨஌ϓϥάΠϯͰ΋OKɻݕ౼த ΠϯλϏϡʔ͍͍ͤͯͨͩͨ͞ํ΁ͷ֬ೝʹPublic Post PreviewΛ࢖༻ Լॻ͖ঢ়ଶͰݟͯ΋Β͑Δ͕ɺ͍ͭݟͯ΋Β͑Δ͔Θ͔Βͳ͍ͷͰظؒઃఆ͕͠ʹ͍͘ฐ֐΋ ଞͷϓϥάΠϯʢಛʹ౤ߘͷத਎Λ͍͡Δܥʣͷ͸ϓϨϏϡʔʹ൓ө͞Εͳ͍͜ͱ΋ αʔόʔͷෛՙ෼ࢄͷͨΊʹNephila clavataΛ࢖༻ʢ༧ఆʣ ίϯςϯπͷը࣭ʹͩ͜ΘͬͨΊɺϝσΟΞΞοϓϩʔυ͢Δը૾αΠζ͕େ͖͍ ը૾ΛS3ʹ͋͛ͯෛՙ෼ࢄ
11. ࠷௿ݶͷηΩϡϦςΟͷͨΊʹೖΕͨϓϥάΠϯ ΞΧ΢ϯτ໊ͰͷϩάΠϯΛͤ͞ͳ͍ Brute force attackରࡦͷͻͱͭ Force Email Login http://ΞΫηεΛڧ੍తʹhttps://ʹసૹ ΫϦοΫ͢Δ͚ͩ ϓϥΠόγʔϚʔΫΛऔಘ͍ͯ͠ΔͨΊɺϑΥʔϜͷ͋ΔαΠτͷSSLԽ͸ඞਢ Α͘঺հ͞Ε͍ͯΔʮWordPress HTTPSʯ͸ػೳ͸ॆ࣮͍ͯ͠Δ͕΋͏4೥΋ߋ৽͞Ε͍ͯͳ͍ Really Simple SSL
12. ΞϓϦͷWebView༻ʹMulti Device SwitcherΛ࢖༻ ͱʹ͔͘؆୯ʹϚϧνσόΠεରԠ ΞϓϦͷWebViewͷ৔߹ɺςʔϚΛ੾Γସ͑ WebViewͱͯ͠ͷରԠखॱ 1. ΞϓϦଆͰUserAgentΛઃఆ 2. Multi Device SwitcherͷCustomSwitcher ʹΞϓϦͷUserAgentΛ௥Ճ 3. CustomSwitcher τοϓϖʔδʢΠϯσοΫεϖʔδʣ ݸผهࣄϖʔδ ΞϓϦ༻ϓϥΠόγʔϙϦγʔϖʔδ ΞϓϦ༻ར༻ن໿ϖʔδ ͓໰͍߹Θͤϖʔδ ରԠՕॴ ੩తϖʔδ͸JS FrameworkʹҠߦ
14. αʔϏεͷϑϩϯτɾΞϓϦͷλΠϜϥΠϯͷͨΊʹAPIΛग़ྗ JSONܗࣜͰग़ྗ ඪ४తͳAPI͕WordPress 4.7 ͰϚʔδ͞Εͨ Adovanced Custom FieldsͰ࡞ΒΕͨ ΧελϜϑΟʔϧυͷσʔλΛJSONܗࣜͰग़ྗ ACF to REST API ʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹϞμϯͳϑϩϯτΤϯυ΁ɹʻ
    ʉ:?:?:?:?:?:?:?:?:?:?:ʉ
15. ͜Ε·ͰͷWordPress੍࡞ͱϑϩϯτΤϯυ WordPress σβΠϯͷ࡞੒
    )5.-ɾ$44ɾ+BWB4DSJQU౳Ͱ
    ϕʔεͷϑϩϯτΛ࡞੒
    1)1ɾ8PSE1SFTTͷؔ਺Λ
    ϕʔεͷϑϩϯτʹ૊ΈࠐΈ
    8PSE1SFTTͷϓϥάΠϯͱςʔϚͷ࿈ܞॲཧ
    ಈ࡞֬ೝ
    ೲ඼ 8PSE1SFTTͰ੍࡞͢Δਓ͸σβΠφʔͰ΋1)1ͷεΩϧ͕ඞཁ ͜Ε·Ͱͷ੍࡞ϑϩʔ
16. ͜Ε·ͰͷWordPress੍࡞ͱϑϩϯτΤϯυ App WordPress WebView or Feed 8PSE1SFTTͷίϯςϯπΛϞόΠϧΞϓϦͰදࣔ͢Δʹ͸
    8FC7JFX͔ϑΟʔυΛಡΉ͔͠ͳ͔ͬͨ ΞϓϦͰίϯςϯπදࣔ
17. App Web Frontend WordPress ͜Ε͔ΒͷWordPress੍࡞ͱϑϩϯτΤϯυ (&51045165%&-&5 ૒ํؒͷσʔλͷ΍ΓऔΓ
18. ͜Ε͔ΒͷWordPress੍࡞ͱϑϩϯτΤϯυ WordPress.com σεΫτοϓΞϓϦ WP REST API + Electron
19. ͜Ε͔ΒͷWordPress੍࡞ͱϑϩϯτΤϯυ ඞཁσʔλग़ྗͷͨΊͷ
    ΧελϚΠζ
    ίϯςϯπཁ݅ʹجͮ͘
    ΤϯυϙΠϯτͷ࡞੒ ͜ΕΕ͔Βͷ੍࡞ϑϩʔ App Web Frontend WordPress σβΠϯͷ࡞੒
    )5.-ɾ$44ɾ+4౳Ͱ
    ϑϩϯτΛ࡞੒
    "1*ͷݺͼग़͠ σβΠϯͷ࡞੒
    ର৅ݴޠͰϑϩϯτΛ࡞੒
    "1*ͷݺͼग़͠
20. ϑϩϯτΤϯυʹVue.jsΛ࠾༻
21. )5.-
22. +BWB4DSJQU
23. -VODI
24. Web൛ͷϦϦʔεܭըʢॳظʣ 2016.04 ू٬ͱͯ͠ͷΠϯλϏϡʔαΠτΛ ϦϦʔεɾӡ༻ 2016.12 ΞϓϦϦϦʔεʗαʔϏεӡ༻։࢝ ΠϯλϏϡʔαΠτͷWebView൛ϦϦʔε 2017.XX αʔϏεͷWeb൛ΛϦϦʔε
25. αʔϏεߏ੒ʢ֬ೝʣ Mobile Application ৯ʹؔ͢Δ͞·͟·ͳ৘ใΛ ࣸਅ͖ͭͰه࿥ɾڞ༗ Website ΞϓϦͷλΠϜϥΠϯΛWebͰදࣔ WordPres Content ΠϯλϏϡʔΛܝࡌͨ͠ίϯςϯπ Web Admin site ӡӦऀ༻؅ཧը໘ WebView API API MySQL / Dynamo db Web൛ ΞϓϦ ಛू
26. ຊདྷ foodion.netʢ೔ຊޠ൛ʣͷߏ੒ʢ࠶ʣ foodion.net (WordPress) interview post page category ΠϯλϏϡʔαΠτ͸ಛूίϯςϯπͷͻͱͭ ࠓޙಛू͕૿͑ΔՄೳੑ͕͋Δ App WebView Theme index term of use post privacy policy chef list / about / app landing page / privacy policy / term of use / inquiry ಛूίϯςϯπ͸αʔϏεαΠτͱผαʔόʔʢෛՙ෼ࢄͷͨΊʣ
27. ๻͕ߟ͑ͨWebαΠτߏ੒_ॳظ foodion.net (timeline) interview (Custom Posts) App WebView Theme feature [contents] (Custom Posts) page about / app landing page / privacy policy / term of use / inquiry search signin settings signup Contents management Admin Dashboard Settings / etc… password reset category / tag post ΧελϜ౤ߘͰߏ੒͢ΔҊ URLసૹ͕ඞཁ ݸผهࣄϖʔδͷγΣΞ਺ͷϦηοτ ଟݴޠԽ࣌ͷURLΛͲ͏͢Δ͔໰୊ API
28. ๻͕ߟ͑ͨWebαΠτߏ੒_Web൛ߏஙલ interview (multi site) Contents management Admin Dashboard Settings / etc… [contents] (multi site) API foodion.net (timeline) page about / app landing page / privacy policy / term of use / inquiry search signin settings signup password reset category / tag post ϚϧναΠτͱAPIͰߏ੒͢ΔҊ [contents] (view) interview (view) API WordPressαΠτͷߏஙͷ΍Γ௚͕͠ඞཁ ଟݴޠԽ࣌ͷURLసૹ͸ඞཁ WordPressΛόοΫΤϯυͱͯ͠੾Γ෼͚ΒΕΔ ϚϧναΠτͳͷͰ1ΞΧ΢ϯτͰෳ਺αΠτ؅ཧ ಛूͷWebViewΛผ్࡞੒
29. Web൛ͷϦϦʔεܭըʢݱࡏʣ 2016.04 ू٬ͱͯ͠ͷΠϯλϏϡʔαΠτΛϦϦʔεɾӡ༻ 2016.12 ΞϓϦϦϦʔεʗαʔϏεӡ༻։࢝ ΠϯλϏϡʔαΠτͷWebView൛ϦϦʔε 2017.XX ੩తϖʔδͷϦϦʔε WordPressͷΈͰߏங αʔό͸ͻͱͭ WordPressͷΈͰߏங αʔό͸ͻͱͭ Vue.jsΛ࢖ͬͯWordPressͱϛοΫεͤͨ͞ϑϩϯτଟݴޠԽ ϦʔδϣϯผͷαʔόʔΛཱͯͯෳ਺WordPressߏங 2017.03 αʔϏεͷWeb൛ΛϦϦʔε JS FrameworkͱAPIͰαʔϏε࣮૷ αʔό͸ͨ͘͞Μ
30. ݱࡏͷWebαΠτߏ੒ foodion.net (timeline) App WebView page about / app landing page / privacy policy / term of use / inquiry search signin settings signup Admin Dashboard password reset category / tag post Interview Site (ja/en) Webview Theme WordPressؔ਺ͷಡΈࠐΈ WordPressؔ਺ͷಡΈࠐΈ
31. ͜Ε͔ΒͷWebαΠτߏ੒ foodion.net (timeline) App WebView page about / app landing page / privacy policy / term of use / inquiry search signin settings signup Admin Dashboard password reset category / tag post Interview Site (ja) Interview Site (en) API Interview (view) API ݴޠผαΠτͷ࡞੒ͱ຋༁ௐ੔͕ඞཁ ݴޠผαΠτʹΑΔෳ਺ΞΧ΢ϯτͰ؅ཧ͕໘౗ URLసૹ΍γΣΞΧ΢ϯτ໰୊͸ղܾ ՝୊͸·ͩͨ͘͞Μ࢒Δ
32. ߏ૝ஈ֊͔Β
    ద੾ͳઃܭΛ
33. ΠϯηϓγϣϯσοΩ
35. ͓ΘΓ
36. Α͚Ε͹FoodionΞϓϦΛ ࢖ͬͯΈ͍ͯͩ͘͞ ײ૝ɾϑΟʔυόοΫɺ͓଴͓ͪͯ͠Γ·͢