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

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

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

D1fdd7f6ded2add08ded83281061e407?s=128

Takenori Okashita (GOUTEN)

February 04, 2017
Tweet

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ʹҠߦ
  13. None
  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. ΠϯηϓγϣϯσοΩ

  34. None
  35. ͓ΘΓ

  36. Α͚Ε͹FoodionΞϓϦΛ ࢖ͬͯΈ͍ͯͩ͘͞ ײ૝ɾϑΟʔυόοΫɺ͓଴͓ͪͯ͠Γ·͢