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

Plone is SPA

Plone is SPA

シングルページアプリケーション
オープンソース
SPA CMS

Manabu TERADA

March 06, 2021
Tweet

More Decks by Manabu TERADA

Other Decks in Technology

Transcript

  1. CC BY 4.0
    Plone 6 is SPA
    (シングルページアプリケーション)
    ─OSS フルSPA CMS─
    Plone Users Group Japan 寺田 学
    「オープンソースカンファレンス2021 Online/Spring 」 2021年3月6日

    View full-size slide

  2. CC BY 4.0
    セッション中の諸注意
    ● スライドは公開済み
    ● 写真撮影可能、録音・録画可能
    ● Twitterなどでのつぶやき 歓迎

    View full-size slide

  3. CC BY 4.0
    自己紹介
    寺田 学 (Manabu TERADA)
    ● Pythonエンジニア
    ● Podcast 「terapyon channel」(https://podcast.terapyon.net)
    ● 主な関連書籍(共著・監修・監訳)
    ○ 機械学習図鑑(翔泳社 : 2019年4月)
    ○ Pythonによるあたらしいデータ分析の教科書(翔泳社 :2018年9月)
    ○ スラスラわかるPython(翔泳社:2017年8月)
    ○ Pythonハッカーガイドブック(マイナビ : 2020年5月)【最後にプレゼントあります】

    View full-size slide

  4. CC BY 4.0
    本日のトークと関連組織
    Plone Users Group Japan
    として、トークします。
    ● 一般社団法人PyCon JP Association代表理事
    ● 株式会社 CMSコミュニケーションズ 代表取締役
    ● 一般社団法人Pythonエンジニア育成推進協会顧問理事
    ● Plone Foundation Ambassador
    ● PSF Fellow member 2019Q3 & Contributing member

    View full-size slide

  5. CC BY 4.0
    Plone Foundation
    Plone Foundationは、グローバルに導入されているCMSフレームワーク「Plone」の普及・
    開発を支援することを目的に2004年に設立された非営利組織です。主な活動内容は、
    Ploneソフトウェアの知財管理と、カンファレンスや開発スプリントの開催を通じたコミュニ
    ティへの支援です。
    ● Plone ・・CMSツール
    ● Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク
    ● Pyramid ・・汎用Webフレームワーク
    ● Zope ・・Webアプリケーション基盤
    ● Volto ・・SPAツールキット

    View full-size slide

  6. CC BY 4.0
    本日のトーク内容
    Ploneの次期メジャーバージョンアップ
    「Plone 6 がどのような進化をしようとしている」か
    「ヘッドレスCMSとしてPloneを用いReactで作る」
    ことについて説明します。

    View full-size slide

  7. CC BY 4.0
    Ploneの現状

    View full-size slide

  8. CC BY 4.0
    Plone(プローン)は、約20年の歴史
    オープンソースCMS
    エンタープライズ対応の高度な機能を備えており、多くの人と組織が
    関わるウェブサイトの管理に力を発揮します。
    規模に関わらず、社内情報の共有・蓄積も得意分野です。
    Ploneとは

    View full-size slide

  9. CC BY 4.0
    Ploneのスナップショット

    View full-size slide

  10. CC BY 4.0
    Ploneが提供する主な機能
    ● エンタープライズ環境との統合
    ● 柔軟なワークフロー・強固なセキュリティ
    ● すぐれた拡張性
    ● 高いスケーラビリティ
    ● 多言語対応
    ● アクセシビリティ対応
    ● 認証とシングルサインオン

    View full-size slide

  11. CC BY 4.0
    Ploneが提供する主な機能詳細
    詳細 を知りたい方は
    OSC2019 東京秋
    老舗CMS PloneとReactの融合
    https://speakerdeck.com/terapyon/lao-pu-cms-plonetoreactfalserong-he?slide=17

    View full-size slide

  12. CC BY 4.0
    Ploneの最新バージョン
    Plone 5.2.3
    2020年11月リリース
    https://plone.org/download/releases/5.2.3

    View full-size slide

  13. CC BY 4.0
    Plone 5.2 のリリース
    ● Plone 5.2 は2019年11月
    ● Python 3対応
    ● UI/機能は既存を踏襲

    View full-size slide

  14. CC BY 4.0
    Plone 5.0 のリリース
    ● Plone 5.0 は2015年9月
    ● 現在のUIを採用
    ● 内部も大きく変化した

    View full-size slide

  15. CC BY 4.0
    Plone 5.0 の過去資料
    詳細 を知りたい方は
    OSC2015 東京秋
    Plone 5 & アクセシビリティ
    https://www.slideshare.net/terapyon/plone-5-at-osc-2015-tokyo-fall

    View full-size slide

  16. CC BY 4.0
    Plone 6のコンセプト

    View full-size slide

  17. CC BY 4.0
    Plone 6
    ● 次期メジャーバージョンアップ
    ● リリース時期は未定
    ● 2つのUI

    View full-size slide

  18. CC BY 4.0
    Plone 6にはUIが2つ
    Volto: a new ReactJS-based frontend
    The “core” Barceloneta-based frontend
    https://plone.org/roadmap/plone-6-roadmap.pdf

    View full-size slide

  19. CC BY 4.0
    Plone 6 core
    ● クラシックとも呼ばれている
    ● 既存のUIをベース
    ● いままで通りの使い方を想定

    View full-size slide

  20. CC BY 4.0
    Plone 6 Volto
    ● 現在別パッケージととして提供されているVolto
    ● ReactベースのSPAツールキット
    ● Ploneの新UIとして採用が決まった
    ● 大きな変化がある

    View full-size slide

  21. CC BY 4.0
    SPAツールキットVoltoとは ─ 1
    ● Plone専用のフロントエンドアプリとして開発がスタート
    ● 当初は、plone.reactと言われていた
    ● ReactベースのCMS用のフロントエンド実装
    ● MITライセンス
    ● Ploneやguillotina CMSに対応しているSPAを作る為のもの

    View full-size slide

  22. CC BY 4.0
    SPAツールキットVoltoとは ─ 2
    ● 編集画面等のCMS管理もすべてVoltoで行う想定
    ● Blockでページを構成する
    ● Semantic UI ベース https://semantic-ui.com/
    ● カスタマイズを行うことで見た目や機能拡張が可能な仕組みを
    提供

    View full-size slide

  23. CC BY 4.0
    Volto編集画面

    View full-size slide

  24. CC BY 4.0
    Volto表示画面

    View full-size slide

  25. CC BY 4.0
    SPAツールキットの良さ
    ● Webページが、アプリ化
    ● 編集画面の変容
    ○ TinyMCEなどのWYSIWYGで書いて良いの?
    ○ WordPressやMediumなどの編集画面
    ● Webサイトは、スマホやタブレットからの閲覧がますます多くな
    り、スマホアプリとの差を減らす

    View full-size slide

  26. CC BY 4.0
    Plone 6 を一言で
    Plone 6は SPA CMS
    Volto (Reactベース) と Ploneを完全融合

    View full-size slide

  27. CC BY 4.0
    Voltoの現状

    View full-size slide

  28. CC BY 4.0
    Voltoの最新バージョン
    Volto 12.2.0
    2021年3月リリース
    https://github.com/plone/volto/releases

    View full-size slide

  29. CC BY 4.0
    Volto のリリース
    ● 積極的にバージョンアップ・機能アップを実装中
    ● 数ヶ月でメジャーバージョンアップしている
    ● ヨーロッパ中心で開発が進んでいる

    View full-size slide

  30. CC BY 4.0
    Volto / SPA
    なぜ SPA と思った方は
    OSCオンライン2020 東京春
    SPA CMSツールVolto for Ploneの紹介とPWAへの展望
    https://speakerdeck.com/terapyon/spa-cmsturuvolto-for-plonefalseshao-jie-topwahefalsezhan-wang

    View full-size slide

  31. CC BY 4.0
    Volto のリリース
    ● 積極的にバージョンアップ・機能アップを実装中
    ● 毎月のようにメジャーバージョンアップしている
    ● ヨーロッパ中心で開発が進んでいる

    View full-size slide

  32. CC BY 4.0
    Voltoの事例紹介

    View full-size slide

  33. CC BY 4.0
    Volto事例一覧
    事例がドキュメント内にある
    https://github.com/plone/volto#demo

    View full-size slide

  34. CC BY 4.0
    デモ

    View full-size slide

  35. CC BY 4.0
    書籍プレゼント

    View full-size slide

  36. CC BY 4.0
    https://bit.ly/OSC2021Spring_Form
    OSCアンケート&プレゼント

    View full-size slide

  37. CC BY 4.0
    ご清聴
    ありがとうございました。

    View full-size slide

  38. CC BY 4.0
    Q&A

    View full-size slide