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

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

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

Plone Users Group Japan 寺田 学

OSC オンライン 2020 秋

0dbafc17e04503dfef253274853b2c8a?s=128

Manabu TERADA

October 24, 2020
Tweet

Transcript

  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