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

Slide 1

Slide 1 text

CC BY 4.0 React + PloneによるSPAの実現方法 2種類を解説 ─静的サイトジェネレータ「Gatsby」─ ─SPAツールキット「Volto」─ Plone Users Group Japan 寺田学「オープンソースカンファレンス2020 Online/Fall 」 2020年10月24日

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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月）

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

CC BY 4.0 本日のトーク内容 SPAサイトの実現方法をヘッドレスCMSとしてPloneを用い Reactで作ることを説明します。

Slide 7

Slide 7 text

CC BY 4.0 SPAとは

Slide 8

Slide 8 text

CC BY 4.0 SPAとは ─ 1 ● SPAは、Single Page Applicationの略 ● JavaScriptを用いたWebアプリの実装方法 ● サーバから1ページのHTMLを返し、ルーティング機能を持つ ● URLによって画面の状態を変更できる ● JavaScriptで作られたアプリを読み込む ● REST APIでJSONをやりとり ● スマホアプリのような動き

Slide 9

Slide 9 text

CC BY 4.0 通常のWebサイトの場合、次のページを閲覧する際にハイパーリンクを用いて、サーバに別のページをリクエストするが、 SPAではアプリ内でルーティングし、 APIをコールするなどして別の情報が表示される SPAとは ─ 2

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

CC BY 4.0 静的サイトジェネレータとは

Slide 12

Slide 12 text

CC BY 4.0 静的サイトジェネレータとは ─ 1 広義な意味 ● 静的なHTML/CSS/JavaScriptのみで構成 ● バックエンドDBから動的（リアルタイム）に情報を取得しない ● CloudのストレージやWebサーバのみで構成できる ● ページやサイト構造を作る仕組みがある

Slide 13

Slide 13 text

CC BY 4.0 静的サイトジェネレータとは ─ 2 広義な静的サイトジェネレータの例 ● Jekyll　・・Rubyベース ● Hugo　・・Goベース ● Pelican　・・Pythonベース ● Sphinx　・・Pythonベース ● 商用CMSの一部

Slide 14

Slide 14 text

CC BY 4.0 静的サイトジェネレータとは ─ 3 最近の注目 ● SPAに対応した、静的サイトジェネレータがある ● 動的サイトのように動きのあるサイトが作れる

Slide 15

Slide 15 text

CC BY 4.0 静的サイトジェネレータとは ─ 2 SPAとなる静的サイトジェネレータの例 ● Gatsby　・・Reactベース ● VuePress　・・Vue.jsベース ● Next.js　・・Reactベース、静的サイトジェネレータ以外も ● Nuxt　・・Vue.jsベース、静的サイトジェネレータ以外も

Slide 16

Slide 16 text

CC BY 4.0 静的サイトジェネレータの良さ ● 運用コストが安く、管理が楽 ● CI/CDツールでビルドからデプロイまで管理できる ● Netlifyのようなホスティングサービスがある

Slide 17

Slide 17 text

CC BY 4.0 静的サイトジェネレータとPlone GatsbyとPloneが連携 ● フロントエンドをGatsbyで構築 ● コンテンツをPloneで管理 ● 静的サイトビルド時 ○ PloneのRestAPI経由で ○ Gatsbyの内部構造である、GraphQLへ

Slide 18

Slide 18 text

CC BY 4.0 静的サイトジェネレータとPlone GatsbyとPloneのサンプル

Slide 19

Slide 19 text

CC BY 4.0 SPAツールキットVoltoとは

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

CC BY 4.0 Volto編集画面

Slide 23

Slide 23 text

CC BY 4.0 Volto表示画面

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

CC BY 4.0 SPAツールキットとCMS リッチなWeb でもコンテンツ重要と思った方は SPAツールキットを模索してみては・・・

Slide 26

Slide 26 text

CC BY 4.0 ヘッドレスCMSの役割

Slide 27

Slide 27 text

CC BY 4.0 ヘッドレスCMSの役割 ─ 1 ● 閲覧側のテンプレートは不要 ● 編集やシステム管理用の画面は必要な場合もある ● データを永続化し管理する

Slide 28

Slide 28 text

CC BY 4.0 ヘッドレスCMSの役割 ─ 2 ● REST API ○ JSON形式でデータを出力 ○ JSON形式でデータを受け取る ○ 表示側だけではなく、編集機能もあるとよい ● JavaScriptアプリを読み込ませる1枚のHTML出力 ● パーマリンクからのアプリ起動

Slide 29

Slide 29 text

CC BY 4.0 Ploneとは

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

CC BY 4.0 全体構成を確認

Slide 34

Slide 34 text

CC BY 4.0 全体構成 ─ 1　静的サイトジェネレータコンテンツをエディタで書く静的ファイルを生成サーバでホストビルドアップロード

Slide 35

Slide 35 text

CC BY 4.0 全体構成 ─ 2　Gatsby + Ploneの場合コンテンツをエディタで書く Gatsbyアプリを生成サーバでホストビルドアップロード

Slide 36

Slide 36 text

CC BY 4.0 全体構成 ─ 3　Volto + Ploneの場合コンテンツをサーバのアプリで書く