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

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

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

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

Zenichiro Yasuda

March 11, 2017
Tweet

More Decks by Zenichiro Yasuda

Other Decks in Technology

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