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

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

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

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

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

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

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

CC BY 4.0 SPAとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CC BY 4.0 Volto編集画面

CC BY 4.0 Volto表示画面

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

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

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

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

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

CC BY 4.0 Ploneとは

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

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

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

CC BY 4.0 全体構成を確認

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

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

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

CC BY 4.0 デモ

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

CC BY 4.0 Q&A

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

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

More Decks by Manabu TERADA

Other Decks in Technology

Featured

Transcript