React + PloneによるSPAの実現方法2種類を解説

静的サイトジェネレータ「Gatsby」 / SPAツールキット「Volto」

Plone Users Group Japan 寺田 学

OSC オンライン 2020 秋

1. CC BY 4.0 React + PloneによるSPAの 実現方法 2種類を解説 ─静的サイトジェネレータ「Gatsby」─ ─SPAツールキット「Volto」─ Plone Users Group Japan 寺田 学 「オープンソースカンファレンス2020 Online/Fall 」 2020年10月24日
2. CC BY 4.0 セッション中の諸注意 • スライドは公開済み • 写真撮影可能、録音・録画可能 • Twitterなどでのつぶやき 歓迎
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月）
4. CC BY 4.0 本日のトークと関連組織 Plone Users Group Japan として、トークします。 • 一般社団法人PyCon JP Association代表理事 • 株式会社 CMSコミュニケーションズ 代表取締役 • 一般社団法人Pythonエンジニア育成推進協会顧問理事 • Plone Foundation Ambassador • PSF Fellow member 2019Q3 & Contributing member
5. CC BY 4.0 Plone Foundation Plone Foundationは、グローバルに導入されているCMSフレームワーク「Plone」の普及・ 開発を支援することを目的に2004年に設立された非営利組織です。主な活動内容は、 Ploneソフトウェアの知財管理と、カンファレンスや開発スプリントの開催を通じたコミュニ ティへの支援です。 • Plone ・・CMSツール • Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク • Pyramid ・・汎用Webフレームワーク • Zope ・・Webアプリケーション基盤 • Volto ・・SPAツールキット
6. CC BY 4.0 本日のトーク内容 SPAサイトの実現方法を ヘッドレスCMSとしてPloneを用い Reactで作ることを説明します。
7. CC BY 4.0 SPAとは
8. CC BY 4.0 SPAとは ─ 1 • SPAは、Single Page Applicationの略 • JavaScriptを用いたWebアプリの実装方法 • サーバから1ページのHTMLを返し、ルーティング機能を持つ • URLによって画面の状態を変更できる • JavaScriptで作られたアプリを読み込む • REST APIでJSONをやりとり • スマホアプリのような動き
9. CC BY 4.0 通常のWebサイトの場合、 次のページを閲覧する際にハイパーリンクを用いて、 サーバに別のページをリクエストするが、 SPAではアプリ内でルーティングし、 APIをコールするなどして別の情報が表示される SPAとは ─ 2
10. CC BY 4.0 SPAとは ─ 3 なぜ SPA と思った方は OSCオンライン2020 東京春 SPA CMSツールVolto for Ploneの紹介とPWAへの展望 https://speakerdeck.com/terapyon/spa-cmsturuvolto-for-plonefalseshao-jie-topwahefalsezhan-wang
11. CC BY 4.0 静的サイトジェネレータとは
12. CC BY 4.0 静的サイトジェネレータとは ─ 1 広義な意味 • 静的なHTML/CSS/JavaScriptのみで構成 • バックエンドDBから動的（リアルタイム）に情報を取得しない • CloudのストレージやWebサーバのみで構成できる • ページやサイト構造を作る仕組みがある
13. CC BY 4.0 静的サイトジェネレータとは ─ 2 広義な静的サイトジェネレータの例 • Jekyll　・・Rubyベース • Hugo　・・Goベース • Pelican　・・Pythonベース • Sphinx　・・Pythonベース • 商用CMSの一部
14. CC BY 4.0 静的サイトジェネレータとは ─ 3 最近の注目 • SPAに対応した、静的サイトジェネレータがある • 動的サイトのように動きのあるサイトが作れる
15. CC BY 4.0 静的サイトジェネレータとは ─ 2 SPAとなる静的サイトジェネレータの例 • Gatsby　・・Reactベース • VuePress　・・Vue.jsベース • Next.js　・・Reactベース、静的サイトジェネレータ以外も • Nuxt　・・Vue.jsベース、静的サイトジェネレータ以外も
16. CC BY 4.0 静的サイトジェネレータの良さ • 運用コストが安く、管理が楽 • CI/CDツールでビルドからデプロイまで管理できる • Netlifyのようなホスティングサービスがある
17. CC BY 4.0 静的サイトジェネレータとPlone GatsbyとPloneが連携 • フロントエンドをGatsbyで構築 • コンテンツをPloneで管理 • 静的サイトビルド時 ◦ PloneのRestAPI経由で ◦ Gatsbyの内部構造である、GraphQLへ
18. CC BY 4.0 静的サイトジェネレータとPlone GatsbyとPloneのサンプル
19. CC BY 4.0 SPAツールキットVoltoとは
20. CC BY 4.0 SPAツールキットVoltoとは ─ 1 • Plone専用のフロントエンドアプリとして開発がスタート • 当初は、plone.reactと言われていた • ReactベースのCMS用のフロントエンド実装 • MITライセンス • Ploneやguillotina CMSに対応しているSPAを作る為のもの
21. CC BY 4.0 SPAツールキットVoltoとは ─ 2 • 編集画面等のCMS管理もすべてVoltoで行う想定 • Blockでページを構成する • 次期PloneのメジャーバージョンPlone 6でVoltoが標準? • Semantic UI ベース https://semantic-ui.com/ • カスタマイズを行うことで見た目や機能拡張が可能な仕組みを 提供
22. CC BY 4.0 Volto編集画面
23. CC BY 4.0 Volto表示画面
24. CC BY 4.0 SPAツールキットの良さ • Webページが、アプリ化 • 編集画面の変容 ◦ TinyMCEなどのWYSIWYGで書いて良いの？ ◦ WordPressやMediumなどの編集画面 • Webサイトは、スマホやタブレットからの閲覧がますます多くな り、スマホアプリとの差を減らす
25. CC BY 4.0 SPAツールキットとCMS リッチなWeb でもコンテンツ重要と思った方は SPAツールキットを模索してみては・・・
26. CC BY 4.0 ヘッドレスCMSの役割
27. CC BY 4.0 ヘッドレスCMSの役割 ─ 1 • 閲覧側のテンプレートは不要 • 編集やシステム管理用の画面は必要な場合もある • データを永続化し管理する
28. CC BY 4.0 ヘッドレスCMSの役割 ─ 2 • REST API ◦ JSON形式でデータを出力 ◦ JSON形式でデータを受け取る ◦ 表示側だけではなく、編集機能もあるとよい • JavaScriptアプリを読み込ませる1枚のHTML出力 • パーマリンクからのアプリ起動
29. CC BY 4.0 Ploneとは
30. CC BY 4.0 Plone（プローン）は、約20年の歴史 オープンソースCMS エンタープライズ対応の高度な機能を備えており、多くの人と組織が 関わるウェブサイトの管理に力を発揮します。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 Ploneとは ─ 1
31. CC BY 4.0 Ploneのスナップショット
32. CC BY 4.0 Ploneが提供する主な機能 ─ 1 • エンタープライズ環境との統合 • 柔軟なワークフロー・強固なセキュリティ • すぐれた拡張性 • 高いスケーラビリティ • 多言語対応 • アクセシビリティ対応 • 認証とシングルサインオン
33. CC BY 4.0 全体構成を確認
34. CC BY 4.0 全体構成 ─ 1　静的サイトジェネレータ コンテンツを エディタで書く 静的ファイルを 生成 サーバでホスト ビルド アップロード
35. CC BY 4.0 全体構成 ─ 2　Gatsby + Ploneの場合 コンテンツを エディタで書く Gatsbyアプリを 生成 サーバでホスト ビルド アップロード
36. CC BY 4.0 全体構成 ─ 3　Volto + Ploneの場合 コンテンツを サーバのアプリで書く
37. CC BY 4.0 デモ
38. CC BY 4.0 ご清聴 ありがとうございました。
39. CC BY 4.0 Q&A