Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + PloneによるSPAの実現方法2種類を解説
Search
Manabu TERADA
October 24, 2020
Technology
0
700
React + PloneによるSPAの実現方法2種類を解説
静的サイトジェネレータ「Gatsby」 / SPAツールキット「Volto」
Plone Users Group Japan 寺田 学
OSC オンライン 2020 秋
Manabu TERADA
October 24, 2020
Tweet
Share
More Decks by Manabu TERADA
See All by Manabu TERADA
PythonエンジニアになるためのテクニカルハイライトとPython実践試験学習方法
terapyon
0
37
Pythonデータ分析実践試験 出題傾向や学習のポイントとテクニカルハイライト
terapyon
1
350
近年の PyCon 情勢から見た PyCon APAC のまとめ
terapyon
0
360
Desktop Apps Made Easy: Python Web UI Frameworks with Streamlit and Stlite
terapyon
1
72
Python実践試験、 Pythonデータ分析実践試験に 合格できるひとのレベル紹介と学習法
terapyon
0
1.4k
各種大学向けにSSO対応サイト(SP)構築の事例紹介
terapyon
0
53
コンテンツタイプとUMLで考えるPlone開発(1)
terapyon
0
110
Python Web UIフレームワークのススメ
terapyon
0
1.3k
LLMを用いたPloneベクター検索 アドオンの開発の説明
terapyon
0
110
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
PO初心者が考えた ”POらしさ”
nb_rady
0
210
LLM時代の検索
shibuiwilliam
2
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
ゼロからはじめる採用広報
yutadayo
3
950
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Thoughts on Productivity
jonyablonski
69
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building Adaptive Systems
keathley
43
2.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Site-Speed That Sticks
csswizardry
10
690
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
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