Plone を Headless CMS化 ―「デカップルド・アーキテクチャ」についての考察 ―

Seminar talk in Open Source Conference 2017 Tokyo / Spring on Sat. 11 Mar 2017 at Mesei University

Transcript

1. Built with Passion
   Modern, Powerful, and User-driven
   PloneΛ“Headless CMS”Խ
   ʕʮσΧοϓϧυɾΞʔΩςΫνϟʯʹ͍ͭͯͷߟ࡯ʕ
   

   View Slide

2. PLONE USERS GROUP JAPAN
   http://plone.jp
   ҆ాળҰ࿠
   ![FOJDI
   [FO![FOJDIDPN
   ࣉాɹֶ
   !UFSBQZPO
   UFSBEB!DNTDPNKQ
   

   View Slide

3. ҆ాળҰ࿠ Zenichiro Yasuda (@zenich)
   Ciel Serein LLC /
   Surface & Architecture (http://surface-arch.com)
   - 7 years in a main framer as a systems engineer
   - Found a small company in 1994
   Website creation PM and direction
   - Since 2004 independent professional
   Website creation, UI / UX direction
   WHO AM I
   

   View Slide

4. TODAY'S TOPIC
   ʮϔουϨεCMSʯ͋Δ͍͸

   ʮσΧοϓϧυɾΞʔΩςΫνϟʯશൠΛ֓؍͠ɺ
   Plone Conference ͷ಺༰΋౿·͑ͯ

   ϔουϨεCMSͱͯ͠ͷPloneͷՄೳੑΛ঺հ
   

   View Slide

5. ͳͥ͜ͷτϐοΫʁ
   WHY THIS TOPIC?
   

   View Slide

6. Sep. 2016
   

   View Slide

7. PyCon JP 2016 TalkʮPyCon (US) 2016 Keynote ࠶ԋ
   "Plone5ͷOSSʹ͓͚ΔਐԽͱదԠ" ʯ
   from https://twitter.com/terapyon/status/778824784620556288/photo/1
   

   View Slide

8. Jun. 2016
   

   View Slide

9. “ʮϔουϨεCMSʯ͸໷໌͚ؒۙͷΑ͏ͩɻ

   ͜ͷΞΠσΞͷ࣌୅͕དྷ͍ͯΔɻ”
   from http://pyvideo.org/pycon-us-2016/cris-ewing-keynote-pycon-2016.html
   

   View Slide

10. Oct. 2016
    

    View Slide

11. Plone Conference 2016
    

    View Slide

12. Keynote: Plone Futures Ͱͷݴٴ
    from https://2016.ploneconf.org/talks/plone-futures
    

    View Slide

13. Talk: Plone Server
    from https://2016.ploneconf.org/talks/plone-server
    

    View Slide

14. Talk: Plone REST API
    from https://2016.ploneconf.org/talks/rest-api
    

    View Slide

15. Talk: A JavaScript Plone Client
    from https://2016.ploneconf.org/talks/javascript-plone-client
    

    View Slide

16. Wordpress 4.7 ͸REST APIඪ४૷උ

    (ผͷCMSͰ͕͢)
    from http://ja.wp-api.org/
    

    View Slide

17. ϔουϨεCMS (͋Δ͍͸

    σΧοϓϧυΞʔΩςΫνϟ)ͱ͸ʁ
    WHAT’S A 

    "HEADLESS CMS"
    (or the Decoupled architecture) ?
    

    View Slide

18. ARCHITECTURE
    ΞʔΩςΫνϟ
    

    View Slide

19. “monolithic”

    [presentation + content ]
    

    View Slide

20. “monolithic”

    [presentation + content ]
    “decoupled”

    [presentation] / [content ]
    

    View Slide

21. FRONT END
    REST API
    CMS BACKEND 

    + DATABASE
    

    View Slide

22. ࢀߟ : Plone Diazoͱͷҧ͍
    from https://docs.plone.org/adapt-and-extend/theming/quick_test.html
    

    View Slide

23. BACKGROUND
    ग़ݱͷഎܠ
    

    View Slide

24. View Slide

25. BENEFITS
    ར఺
    

    View Slide

26. Ϣʔβʔମݧͷ޲্
    

    View Slide

27. ͞·͟·ͳνϟωϧ΁ͷ഑৴
    

    View Slide

28. USECASE
    ࢖͍Ͳ͜Ζ
    

    View Slide

29. CMS
    1. STATIC
    WEBSITE
    USER REQUEST
    

    View Slide

30. CMS
    USER REQUEST
    2. SINGLE
    PAGE APP
    

    View Slide

31. CMS
    3. ADMIN
    PANEL
    

    View Slide

32. RESOURCES
    ҎԼͷαΠτɺυΩϡϝϯτΛࢀߟʹ͠·ͨ͠
    Decoupled CMS: Why “Going Headless” Is Becoming So Popular
    https://pantheon.io/decoupled-cms
    A WordPress REST API White Paper by Human Made
    https://hmn.md/wordpress-rest-api-white-paper/
    

    View Slide

33. PloneͱϔουϨεCMS
    PLONE AND
    HEADLESS CMS
    

    View Slide

34. PLONE ROADMAP
    from https://plone.org/roadmap/2017-plone-roadmap/#autotoc-item-autotoc-8
    

    View Slide

35. PLONE ROADMAP
    from https://plone.org/roadmap/2017-plone-roadmap/#autotoc-item-autotoc-8
    • ϞμϯͳαΠτ։ൃʹ͸CMS͸࠾༻͞Εͣɺϑϩϯτ
    Τϯυ͔ΒREST API ܦ༝ͰಠࣗͷόοΫΤϯυͱͭͳ
    ͙ܗΛऔΔ͜ͱ͕ଟ͘ͳ͍ͬͯΔ
    • CMSͷػೳʹର͢Δχʔζ͸มΘΒͣଘࡏ͍ͯ͠Δɻ
    • CMSͷ͢΂ͯͷػೳ͕REST APIܦ༝Ͱఏڙ͞ΕΕ͹ɺ
    όοΫΤϯυͱͯ͠࠾༻͞ΕΔՄೳੑ͕͋Δɻ

    ͜Ε͕UIͷͳ͍CMS : ϔουϨεCMSͰ͋Δɻ
    

    View Slide

36. PLONE SERVER
    from https://2016.ploneconf.org/talks/plone-server
    

    View Slide

37. PLONE SERVER
    from https://2016.ploneconf.org/talks/plone-server
    

    View Slide

38. PLONE SERVER
    from https://2016.ploneconf.org/talks/plone-server
    • plone.server is a high performance, asynchronous I/O
    backend for multinode deployments.
    • provides much more scalability, asynchronous features (like
    long polling, websockets), and a very modern technical
    stack.
    

    View Slide

39. PLONE REST API
    from https://2016.ploneconf.org/talks/rest-api
    

    View Slide

40. PLONE REST API
    from https://2016.ploneconf.org/talks/rest-api
    

    View Slide

41. PLONE REST API
    from https://2016.ploneconf.org/talks/rest-api
    

    View Slide

42. A JAVASCRIPT PLONE CLIENT
    from https://2016.ploneconf.org/talks/javascript-plone-client
    

    View Slide

43. from https://2016.ploneconf.org/talks/plone-server
    A JAVASCRIPT PLONE CLIENT
    

    View Slide

44. PloneΛ“Headless CMS”Խ
    

    View Slide

45. Plone͸“Headless CMS”Խ
    

    View Slide

46. DEMO
    

    View Slide

47. WORLD PLONE DAY 2017
    • ੈքதͷPlone ίϛϡχςΟ͕

    ຖ೥4݄ͷऴΘΓʹಉ࣌ʹ

    ϩʔΧϧΠϕϯτΛ࣮ࢪ
    • ೔࣌ : 2017೥4݄26೔ (ਫ) 19࣌ʙ
    • ྉۚ : ࠙਌ձࢀՃऀ 1500ԁ / ɹෆࢀՃͷํ͸ແྉ
    • ৔ॴ : גࣜձࣾΫϦʔΫɾΞϯυɾϦόʔࣾɹ̎F
    • ਃࠐ : https://plonejp.connpass.com/ Ͱ͓஌Βͤ͠·͢
    

    View Slide

48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide