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
370
近年の PyCon 情勢から見た PyCon APAC のまとめ
terapyon
0
360
Desktop Apps Made Easy: Python Web UI Frameworks with Streamlit and Stlite
terapyon
1
73
Python実践試験、 Pythonデータ分析実践試験に 合格できるひとのレベル紹介と学習法
terapyon
0
1.5k
各種大学向けにSSO対応サイト(SP)構築の事例紹介
terapyon
0
54
コンテンツタイプと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
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
TLSから見るSREの未来
atpons
2
310
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
本当にわかりやすいAIエージェント入門
segavvy
1
460
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
0
100
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
Digitization部 紹介資料
sansan33
PRO
1
4.5k
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
shake-upを科学する
rsakata
7
1k
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Code Review Best Practice
trishagee
69
19k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Making Projects Easy
brettharned
116
6.3k
A Tale of Four Properties
chriscoyier
160
23k
Designing for humans not robots
tammielis
253
25k
The Language of Interfaces
destraynor
158
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Music & Morning Musume
bryan
46
6.7k
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