老舗CMS PloneとReactの融合

OSC 2019 東京 秋でのPlone User's Group Japanでの発表資料

Transcript

1. CMS Plone React CMS Plone React CMS Plone React CMS Plone React CMS Plone React CMS Plone React -SPA Volto- -SPA Volto- -SPA Volto- -SPA Volto- -SPA Volto- -SPA Volto- - 2019-11-23 - - 2019-11-23 - - 2019-11-23 - - 2019-11-23 - - 2019-11-23 - - 2019-11-23 - OSC OSC OSC OSC OSC OSC @terapyon @terapyon @terapyon @terapyon @terapyon @terapyon Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan 1 / 52
2. Twitter Twitter Twitter Twitter Twitter Twitter ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 2 / 52
3. Self introduction Self introduction Self introduction Self introduction Self introduction Self introduction Manabu TERADA Manabu TERADA Manabu TERADA Manabu TERADA Manabu TERADA Manabu TERADA ( ) ( ) ( ) ( ) ( ) ( ) Python Python Python Python Python Python PyCon JP PyCon JP PyCon JP PyCon JP PyCon JP PyCon JP Python Python Python Python Python Python Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 3 / 52
4. 4 / 52
5. PyCon JP PyCon JP PyCon JP PyCon JP PyCon JP PyCon JP 9 9 9 9 9 9 4 ( 2 ) 4 ( 2 ) 4 ( 2 ) 4 ( 2 ) 4 ( 2 ) 4 ( 2 ) 1000 1000 1000 1000 1000 1000 https://pycon.jp https://pycon.jp https://pycon.jp https://pycon.jp https://pycon.jp https://pycon.jp ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 7 / 52
6. Plone Foundation Plone Foundation Plone Foundation Plone Foundation Plone Foundation Plone Foundation Plone Foundation CMS Plone Foundation CMS Plone Foundation CMS Plone Foundation CMS Plone Foundation CMS Plone Foundation CMS Plone 2004 Plone 2004 Plone 2004 Plone 2004 Plone 2004 Plone 2004 Plone Plone Plone Plone Plone Plone Plone CMS Plone CMS Plone CMS Plone CMS Plone CMS Plone CMS Guillotina Guillotina Guillotina Guillotina Guillotina Guillotina Pyramid Web Pyramid Web Pyramid Web Pyramid Web Pyramid Web Pyramid Web Zope Web Zope Web Zope Web Zope Web Zope Web Zope Web Volto React CMS Volto React CMS Volto React CMS Volto React CMS Volto React CMS Volto React CMS ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 8 / 52
7. Plone Plone Plone Plone Plone Plone Volto SPA React Volto Volto SPA React Volto Volto SPA React Volto Volto SPA React Volto Volto SPA React Volto Volto SPA React Volto ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 9 / 52
8. Web SPA Web SPA Web SPA Web SPA Web SPA Web SPA CMS SPA Volto CMS SPA Volto CMS SPA Volto CMS SPA Volto CMS SPA Volto CMS SPA Volto ā ā ā ā ā ā ā ā ā ā ā ā 10 / 52
9. 11 / 52
10. (1) (1) (1) (1) (1) (1) CMS CMS CMS CMS CMS CMS Web Web Web Web Web Web Web Web Web Web Web Web HTTP HTTP HTTP HTTP HTTP HTTP Web Web Web Web Web Web Web Web Web Web Web Web GET/POST GET/POST GET/POST GET/POST GET/POST GET/POST HTTP HTTP HTTP HTTP HTTP HTTP ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 12 / 52
11. (2) (2) (2) (2) (2) (2) SPA SPA SPA SPA SPA SPA ( ) ( ) ( ) ( ) ( ) ( ) OGP OGP OGP OGP OGP OGP SNS SNS SNS SNS SNS SNS PWA PWA PWA PWA PWA PWA SSR SSR SSR SSR SSR SSR SEO SEO SEO SEO SEO SEO API API API API API API REST API REST API REST API REST API REST API REST API Web Web Web Web Web Web ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 13 / 52
12. (1) (1) (1) (1) (1) (1) Python Python Python Python Python Python Plone Plone Plone Plone Plone Plone JavaScript (JS) JavaScript (JS) JavaScript (JS) JavaScript (JS) JavaScript (JS) JavaScript (JS) Web Web Web Web Web Web TypeScript TypeScript TypeScript TypeScript TypeScript TypeScript JS JS JS JS JS JS React React React React React React JS Web JS Web JS Web JS Web JS Web JS Web Plone Plone Plone Plone Plone Plone OSS CMS OSS CMS OSS CMS OSS CMS OSS CMS OSS CMS Volto Volto Volto Volto Volto Volto Plone Web ( )( ) Plone Web ( )( ) Plone Web ( )( ) Plone Web ( )( ) Plone Web ( )( ) Plone Web ( )( ) WordPress WordPress WordPress WordPress WordPress WordPress CMS CMS CMS CMS CMS CMS ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 14 / 52
13. (2) (2) (2) (2) (2) (2) PHP PHP PHP PHP PHP PHP WordPress WordPress WordPress WordPress WordPress WordPress Drupal Drupal Drupal Drupal Drupal Drupal PHP CMS PHP CMS PHP CMS PHP CMS PHP CMS PHP CMS Ruby on Rails Ruby on Rails Ruby on Rails Ruby on Rails Ruby on Rails Ruby on Rails Web Web Web Web Web Web Django Django Django Django Django Django Web Python Web Python Web Python Web Python Web Python Web Python ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 15 / 52
14. Plone Plone Plone Plone Plone Plone 16 / 52
15. Plone Plone Plone Plone Plone Plone Plone 18 CMS Plone 18 CMS Plone 18 CMS Plone 18 CMS Plone 18 CMS Plone 18 CMS 17 / 52
16. Plone Plone Plone Plone Plone Plone 18 / 52
17. Plone Plone Plone Plone Plone Plone 1 1 1 1 1 1. . . . . . 2 2 2 2 2 2. . . . . . 3 3 3 3 3 3. . . . . . 4 4 4 4 4 4. . . . . . 5 5 5 5 5 5. . . . . . 6 6 6 6 6 6. . . . . . 7 7 7 7 7 7. . . . . . 8 8 8 8 8 8. . . . . . 19 / 52
18. Plone (1) Plone (1) Plone (1) Plone (1) Plone (1) Plone (1) CRM Salesforce Oracle CRM Salesforce Oracle CRM Salesforce Oracle CRM Salesforce Oracle CRM Salesforce Oracle CRM Salesforce Oracle Web Web Web Web Web Web DB (SQL NoSQL) DB (SQL NoSQL) DB (SQL NoSQL) DB (SQL NoSQL) DB (SQL NoSQL) DB (SQL NoSQL) CI Web CI Web CI Web CI Web CI Web CI Web ā ā ā ā ā ā ý ý ý ý ý ý ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý 20 / 52
19. Plone (2) Plone (2) Plone (2) Plone (2) Plone (2) Plone (2) 100 100 100 100 100 100 ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 21 / 52
20. Plone (3) Plone (3) Plone (3) Plone (3) Plone (3) Plone (3) Plone Plone Plone Plone Plone Plone Plone Plone Plone Plone Plone Plone ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 22 / 52
21. Plone (4) Plone (4) Plone (4) Plone (4) Plone (4) Plone (4) SNS SNS SNS SNS SNS SNS REST API REST API REST API REST API REST API REST API Plone Plone Plone Plone Plone Plone ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 23 / 52
22. Plone (5) Plone (5) Plone (5) Plone (5) Plone (5) Plone (5) Web Web Web Web Web Web ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 24 / 52
23. Plone (6) Plone (6) Plone (6) Plone (6) Plone (6) Plone (6) 40 40 40 40 40 40 Plone Plone Plone Plone Plone Plone ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 25 / 52
24. Plone (7) Plone (7) Plone (7) Plone (7) Plone (7) Plone (7) WCAG 2.0 WCAG 2.0 WCAG 2.0 WCAG 2.0 WCAG 2.0 WCAG 2.0 W3C WAI-AA W3C WAI-AA W3C WAI-AA W3C WAI-AA W3C WAI-AA W3C WAI-AA 508 508 508 508 508 508 Plone JavaScript Plone JavaScript Plone JavaScript Plone JavaScript Plone JavaScript Plone JavaScript ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ý ý ý ý ý ý 26 / 52
25. Plone (8) Plone (8) Plone (8) Plone (8) Plone (8) Plone (8) LDAP LDAP LDAP LDAP LDAP LDAP Active Directory Active Directory Active Directory Active Directory Active Directory Active Directory Oracle Oracle Oracle Oracle Oracle Oracle OpenID OpenID OpenID OpenID OpenID OpenID Shibboleth Shibboleth Shibboleth Shibboleth Shibboleth Shibboleth CAS CAS CAS CAS CAS CAS Kerberos Kerberos Kerberos Kerberos Kerberos Kerberos ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 27 / 52
26. Volto Volto Volto Volto Volto Volto SPA SPA SPA SPA SPA SPA React React React React React React SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS Volto Volto Volto Volto Volto Volto Volto Volto Volto Volto Volto Volto ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 28 / 52
27. (1) (1) (1) (1) (1) (1) API API API API API API ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 29 / 52
28. (2) (2) (2) (2) (2) (2) SPA Web SPA Web SPA Web SPA Web SPA Web SPA Web API API API API API API ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 30 / 52
29. (3) (3) (3) (3) (3) (3) SPA Web SPA Web SPA Web SPA Web SPA Web SPA Web API REST API CMS API REST API CMS API REST API CMS API REST API CMS API REST API CMS API REST API CMS CMS CMS CMS CMS CMS CMS ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 31 / 52
30. SPA !! SPA !! SPA !! SPA !! SPA !! SPA !! 32 / 52
31. Web Web Web Web Web Web --> ? --> ? --> ? --> ? --> ? --> ? --> SSI ( ) ? --> SSI ( ) ? --> SSI ( ) ? --> SSI ( ) ? --> SSI ( ) ? --> SSI ( ) ? --> GET ? --> GET ? --> GET ? --> GET ? --> GET ? --> GET ? --> cookie ? --> cookie ? --> cookie ? --> cookie ? --> cookie ? --> cookie ? ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý 33 / 52
32. SPA SPA SPA SPA SPA SPA SPA Single Page Application SPA Single Page Application SPA Single Page Application SPA Single Page Application SPA Single Page Application SPA Single Page Application JavaScript Web JavaScript Web JavaScript Web JavaScript Web JavaScript Web JavaScript Web 1 HTML 1 HTML 1 HTML 1 HTML 1 HTML 1 HTML JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript REST API JSON REST API JSON REST API JSON REST API JSON REST API JSON REST API JSON Web Web Web Web Web Web SPA SPA SPA SPA SPA SPA API API API API API API ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 34 / 52
33. SPA SPA SPA SPA SPA SPA Twitter Twitter Twitter Twitter Twitter Twitter Net ix Net ix Net ix Net ix Net ix Net ix ā ā ā ā ā ā ā ā ā ā ā ā 35 / 52
34. SPA SPA SPA SPA SPA SPA URL ( URL ( URL ( URL ( URL ( URL ( ) ) ) ) ) ) HTML HTML HTML HTML HTML HTML div id="app" div id="app" div id="app" div id="app" div id="app" div id="app" 1 1 1 1 1 1 HTML HTML HTML HTML HTML HTML ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 36 / 52
35. React React React React React React JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript Facebook MIT OSS Facebook MIT OSS Facebook MIT OSS Facebook MIT OSS Facebook MIT OSS Facebook MIT OSS React React React React React React Vue.js Vue.js Vue.js Vue.js Vue.js Vue.js Angular Angular Angular Angular Angular Angular JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript React React React React React React ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ā ā ā ā ā ā ý ý ý ý ý ý 37 / 52
36. SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS REST API REST API REST API REST API REST API REST API JSON JSON JSON JSON JSON JSON JSON JSON JSON JSON JSON JSON CMS REST API JSON CMS REST API JSON CMS REST API JSON CMS REST API JSON CMS REST API JSON CMS REST API JSON JavaScript 1 HTML JavaScript 1 HTML JavaScript 1 HTML JavaScript 1 HTML JavaScript 1 HTML JavaScript 1 HTML ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 38 / 52
37. SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS ā ā ā ā ā ā 39 / 52
38. SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS SPA CMS OGP Tag OGP Tag OGP Tag OGP Tag OGP Tag OGP Tag SSR SSR SSR SSR SSR SSR ā ā ā ā ā ā ā ā ā ā ā ā 40 / 52
39. Volto (1) Volto (1) Volto (1) Volto (1) Volto (1) Volto (1) Plone Plone Plone Plone Plone Plone plone.react plone.react plone.react plone.react plone.react plone.react React CMS React CMS React CMS React CMS React CMS React CMS MIT MIT MIT MIT MIT MIT Plone guillotina CMS SPA Plone guillotina CMS SPA Plone guillotina CMS SPA Plone guillotina CMS SPA Plone guillotina CMS SPA Plone guillotina CMS SPA ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 41 / 52
40. Volto (2) Volto (2) Volto (2) Volto (2) Volto (2) Volto (2) CMS Volto CMS Volto CMS Volto CMS Volto CMS Volto CMS Volto Block Block Block Block Block Block Plone Plone 6 Volto Plone Plone 6 Volto Plone Plone 6 Volto Plone Plone 6 Volto Plone Plone 6 Volto Plone Plone 6 Volto Semantic UI Semantic UI Semantic UI Semantic UI Semantic UI Semantic UI https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 42 / 52
41. Volto Volto Volto Volto Volto Volto 43 / 52
42. Volto Volto Volto Volto Volto Volto 44 / 52
43. Volto Volto Volto Volto Volto Volto Web Web Web Web Web Web TinyMCE WYSIWYG TinyMCE WYSIWYG TinyMCE WYSIWYG TinyMCE WYSIWYG TinyMCE WYSIWYG TinyMCE WYSIWYG WordPress WordPress WordPress WordPress WordPress WordPress Blog Medium Blog Medium Blog Medium Blog Medium Blog Medium Blog Medium Web Web Web Web Web Web SPA SPA SPA SPA SPA SPA PWA PWA PWA PWA PWA PWA ā ā ā ā ā ā ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ý ā ā ā ā ā ā ý ý ý ý ý ý ý ý ý ý ý ý 45 / 52
44. 46 / 52
45. Volto Volto Volto Volto Volto Volto ā ā ā ā ā ā ý ý ý ý ý ý ā ā ā ā ā ā 47 / 52
46. 48 / 52
47. Plone Plone Plone Plone Plone Plone SPA SPA SPA SPA SPA SPA Volto Volto Volto Volto Volto Volto ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā 49 / 52
48. Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! @terapyon @terapyon @terapyon @terapyon @terapyon @terapyon Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan 50 / 52
49. 51 / 52
50. Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! @terapyon @terapyon @terapyon @terapyon @terapyon @terapyon Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan 52 / 52