SPA CMSツールVolto for Ploneの紹介とPWAへの展望

-SPAサイトを手軽に作れるフレームワークVolto-
OSCオンライン 2020春
2020-04-25

Transcript

1. SPA CMS ツールVolto for Plone の紹 SPA CMS ツールVolto for Plone の紹 SPA CMS ツールVolto for Plone の紹 SPA CMS ツールVolto for Plone の紹 SPA CMS ツールVolto for Plone の紹 SPA CMS ツールVolto for Plone の紹 介とPWA への展望 介とPWA への展望 介とPWA への展望 介とPWA への展望 介とPWA への展望 介とPWA への展望 -SPA サイトを手軽に作れるフレームワークVolto- -SPA サイトを手軽に作れるフレームワークVolto- -SPA サイトを手軽に作れるフレームワークVolto- -SPA サイトを手軽に作れるフレームワークVolto- -SPA サイトを手軽に作れるフレームワークVolto- -SPA サイトを手軽に作れるフレームワークVolto- - 2020-04-25 - - 2020-04-25 - - 2020-04-25 - - 2020-04-25 - - 2020-04-25 - - 2020-04-25 - OSC オンライン 2020 春 OSC オンライン 2020 春 OSC オンライン 2020 春 OSC オンライン 2020 春 OSC オンライン 2020 春 OSC オンライン 2020 春 @terapyon @terapyon @terapyon @terapyon @terapyon @terapyon Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan 1 / 53
2. セッション中の諸注意など セッション中の諸注意など セッション中の諸注意など セッション中の諸注意など セッション中の諸注意など セッション中の諸注意など スライドは公開済み スライドは公開済み スライドは公開済み スライドは公開済み スライドは公開済み スライドは公開済み 写真撮影可能、録音・録画可能 写真撮影可能、録音・録画可能 写真撮影可能、録音・録画可能 写真撮影可能、録音・録画可能 写真撮影可能、録音・録画可能 写真撮影可能、録音・録画可能 Twitter などでのつぶやき Twitter などでのつぶやき Twitter などでのつぶやき Twitter などでのつぶやき Twitter などでのつぶやき Twitter などでのつぶやき 歓迎 歓迎 歓迎 歓迎 歓迎 歓迎                   2 / 53
3. Self introduction Self introduction Self introduction Self introduction Self introduction Self introduction Manabu TERADA Manabu TERADA Manabu TERADA Manabu TERADA Manabu TERADA Manabu TERADA ( 寺田
   学) ( 寺田
   学) ( 寺田
   学) ( 寺田
   学) ( 寺田
   学) ( 寺田
   学) Python エンジニア Python エンジニア Python エンジニア Python エンジニア Python エンジニア Python エンジニア 一般社団法人PyCon JP Association 代表理事 一般社団法人PyCon JP Association 代表理事 一般社団法人PyCon JP Association 代表理事 一般社団法人PyCon JP Association 代表理事 一般社団法人PyCon JP Association 代表理事 一般社団法人PyCon JP Association 代表理事 一般社団法人Python エンジニア育成推進協会 顧問理事 一般社団法人Python エンジニア育成推進協会 顧問理事 一般社団法人Python エンジニア育成推進協会 顧問理事 一般社団法人Python エンジニア育成推進協会 顧問理事 一般社団法人Python エンジニア育成推進協会 顧問理事 一般社団法人Python エンジニア育成推進協会 顧問理事 Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador Plone Foundation Ambassador PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member PSF Fellow Member 2019Q3 & Contributing member Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team Member of NVDA Japanese Team                                     3 / 53
4. 4 / 53
5. Podcast Podcast Podcast Podcast Podcast Podcast 「terapyon channel 」はじめました 「terapyon channel 」はじめました 「terapyon channel 」はじめました 「terapyon channel 」はじめました 「terapyon channel 」はじめました 「terapyon channel 」はじめました terapyon こと、Manabu TERADA( 寺田学) です。 terapyon こと、Manabu TERADA( 寺田学) です。 Python でシステム構築したり、IT 系技術コンサルをしています。このポッドキャストでは私が普段 Python でシステム構築したり、IT 系技術コンサルをしています。このポッドキャストでは私が普段 感じていることやイベント情報、書籍などのIT 技術の幅広い話をしていきたいと思います。 感じていることやイベント情報、書籍などのIT 技術の幅広い話をしていきたいと思います。 Apple / Google / Spotify / etc. Apple / Google / Spotify / etc. Apple / Google / Spotify / etc. Apple / Google / Spotify / etc. Apple / Google / Spotify / etc. Apple / Google / Spotify / etc. https://open.spotify.com/show/3F1JJCqbBzmNQhSibjvzKZ https://open.spotify.com/show/3F1JJCqbBzmNQhSibjvzKZ https://open.spotify.com/show/3F1JJCqbBzmNQhSibjvzKZ https://open.spotify.com/show/3F1JJCqbBzmNQhSibjvzKZ https://open.spotify.com/show/3F1JJCqbBzmNQhSibjvzKZ https://open.spotify.com/show/3F1JJCqbBzmNQhSibjvzKZ       5 / 53
6. Plone Foundation Plone Foundation Plone Foundation Plone Foundation Plone Foundation Plone Foundation Plone Foundation は、グローバルに導入されているCMS フレームワーク Plone Foundation は、グローバルに導入されているCMS フレームワーク Plone Foundation は、グローバルに導入されているCMS フレームワーク Plone Foundation は、グローバルに導入されているCMS フレームワーク Plone Foundation は、グローバルに導入されているCMS フレームワーク Plone Foundation は、グローバルに導入されているCMS フレームワーク 「Plone 」の普及・開発を支援することを目的に2004 年に設立された非営 「Plone 」の普及・開発を支援することを目的に2004 年に設立された非営 「Plone 」の普及・開発を支援することを目的に2004 年に設立された非営 「Plone 」の普及・開発を支援することを目的に2004 年に設立された非営 「Plone 」の普及・開発を支援することを目的に2004 年に設立された非営 「Plone 」の普及・開発を支援することを目的に2004 年に設立された非営 利組織です。主な活動内容は、Plone ソフトウェアの知財管理と、カンフ 利組織です。主な活動内容は、Plone ソフトウェアの知財管理と、カンフ 利組織です。主な活動内容は、Plone ソフトウェアの知財管理と、カンフ 利組織です。主な活動内容は、Plone ソフトウェアの知財管理と、カンフ 利組織です。主な活動内容は、Plone ソフトウェアの知財管理と、カンフ 利組織です。主な活動内容は、Plone ソフトウェアの知財管理と、カンフ ァレンスや開発スプリントの開催を通じたコミュニティへの支援です。 ァレンスや開発スプリントの開催を通じたコミュニティへの支援です。 ァレンスや開発スプリントの開催を通じたコミュニティへの支援です。 ァレンスや開発スプリントの開催を通じたコミュニティへの支援です。 ァレンスや開発スプリントの開催を通じたコミュニティへの支援です。 ァレンスや開発スプリントの開催を通じたコミュニティへの支援です。 Plone ・・CMS ツール Plone ・・CMS ツール Plone ・・CMS ツール Plone ・・CMS ツール Plone ・・CMS ツール Plone ・・CMS ツール Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク Guillotina ・・次世代ヘッドレス非同期サーバフレームワーク Pyramid ・・汎用Web フレームワーク Pyramid ・・汎用Web フレームワーク Pyramid ・・汎用Web フレームワーク Pyramid ・・汎用Web フレームワーク Pyramid ・・汎用Web フレームワーク Pyramid ・・汎用Web フレームワーク Zope ・・Web アプリケーション基盤 Zope ・・Web アプリケーション基盤 Zope ・・Web アプリケーション基盤 Zope ・・Web アプリケーション基盤 Zope ・・Web アプリケーション基盤 Zope ・・Web アプリケーション基盤 Volto ・・React ベースのCMS フロントエンドエンジン Volto ・・React ベースのCMS フロントエンドエンジン Volto ・・React ベースのCMS フロントエンドエンジン Volto ・・React ベースのCMS フロントエンドエンジン Volto ・・React ベースのCMS フロントエンドエンジン Volto ・・React ベースのCMS フロントエンドエンジン                               6 / 53
7. セッションの内容 セッションの内容 セッションの内容 セッションの内容 セッションの内容 セッションの内容 SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Plone のREST API Plone のREST API Plone のREST API Plone のREST API Plone のREST API Plone のREST API PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 デモ デモ デモ デモ デモ デモ                               7 / 53
8. このセッションのゴール このセッションのゴール このセッションのゴール このセッションのゴール このセッションのゴール このセッションのゴール Web 業界にSPA という流れがあることを知ってもらう Web 業界にSPA という流れがあることを知ってもらう Web 業界にSPA という流れがあることを知ってもらう Web 業界にSPA という流れがあることを知ってもらう Web 業界にSPA という流れがあることを知ってもらう Web 業界にSPA という流れがあることを知ってもらう CMS のSPA 実装であるVolto を知ってもらう CMS のSPA 実装であるVolto を知ってもらう CMS のSPA 実装であるVolto を知ってもらう CMS のSPA 実装であるVolto を知ってもらう CMS のSPA 実装であるVolto を知ってもらう CMS のSPA 実装であるVolto を知ってもらう             8 / 53
9. SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは 9 / 53
10. なぜSPA? なぜSPA? なぜSPA? なぜSPA? なぜSPA? なぜSPA? SPA サイトの説明の前になぜ必要なのか? SPA サイトの説明の前になぜ必要なのか? SPA サイトの説明の前になぜ必要なのか? SPA サイトの説明の前になぜ必要なのか? SPA サイトの説明の前になぜ必要なのか? SPA サイトの説明の前になぜ必要なのか? 10 / 53
11. リッチなUX リッチなUX リッチなUX リッチなUX リッチなUX リッチなUX ユーザがリッチなユーザインターフェース(UI) を求めている ユーザがリッチなユーザインターフェース(UI) を求めている ユーザがリッチなユーザインターフェース(UI) を求めている ユーザがリッチなユーザインターフェース(UI) を求めている ユーザがリッチなユーザインターフェース(UI) を求めている ユーザがリッチなユーザインターフェース(UI) を求めている ユーザ体験(UX) の向上を求めていることが多くなった ユーザ体験(UX) の向上を求めていることが多くなった ユーザ体験(UX) の向上を求めていることが多くなった ユーザ体験(UX) の向上を求めていることが多くなった ユーザ体験(UX) の向上を求めていることが多くなった ユーザ体験(UX) の向上を求めていることが多くなった 例えば 例えば 例えば 例えば 例えば 例えば Gmail / Google カレンダー Gmail / Google カレンダー Gmail / Google カレンダー Gmail / Google カレンダー Gmail / Google カレンダー Gmail / Google カレンダー                   11 / 53
12. リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 (1) (1) (1) (1) (1) (1) リッチな場合 リッチな場合 リッチな場合 リッチな場合 リッチな場合 リッチな場合 スマホアプリを作る スマホアプリを作る スマホアプリを作る スマホアプリを作る スマホアプリを作る スマホアプリを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る                   12 / 53
13. リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 (2) (2) (2) (2) (2) (2) 中間的な落としどころ 中間的な落としどころ 中間的な落としどころ 中間的な落としどころ 中間的な落としどころ 中間的な落としどころ SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る バックエンドAPI サーバを作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る コンテンツ管理などの編集画面を作る                   13 / 53
14. リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 リッチなアプリなどを作る一般的な方法 (3) (3) (3) (3) (3) (3) 簡単にすませる方法 簡単にすませる方法 簡単にすませる方法 簡単にすませる方法 簡単にすませる方法 簡単にすませる方法 SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る SPA でWeb 技術を使って、フロントを作る バックエンドAPI サーバは、REST API に対応したCMS を使う バックエンドAPI サーバは、REST API に対応したCMS を使う バックエンドAPI サーバは、REST API に対応したCMS を使う バックエンドAPI サーバは、REST API に対応したCMS を使う バックエンドAPI サーバは、REST API に対応したCMS を使う バックエンドAPI サーバは、REST API に対応したCMS を使う コンテンツ管理などはCMS の機能を使う コンテンツ管理などはCMS の機能を使う コンテンツ管理などはCMS の機能を使う コンテンツ管理などはCMS の機能を使う コンテンツ管理などはCMS の機能を使う コンテンツ管理などはCMS の機能を使う                   14 / 53
15. 既存Web 技術だと何が大変か 既存Web 技術だと何が大変か 既存Web 技術だと何が大変か 既存Web 技術だと何が大変か 既存Web 技術だと何が大変か 既存Web 技術だと何が大変か ページの一部分を書き換える手段がない。 ページの一部分を書き換える手段がない。 ページの一部分を書き換える手段がない。 ページの一部分を書き換える手段がない。 ページの一部分を書き換える手段がない。 ページの一部分を書き換える手段がない。 --> フレーム使う? --> フレーム使う? --> フレーム使う? --> フレーム使う? --> フレーム使う? --> フレーム使う? --> SSI ( サーバサイドインクルード) ? --> SSI ( サーバサイドインクルード) ? --> SSI ( サーバサイドインクルード) ? --> SSI ( サーバサイドインクルード) ? --> SSI ( サーバサイドインクルード) ? --> SSI ( サーバサイドインクルード) ? 状態を持つことができない。 状態を持つことができない。 状態を持つことができない。 状態を持つことができない。 状態を持つことができない。 状態を持つことができない。 --> GET パラメータを使う? --> GET パラメータを使う? --> GET パラメータを使う? --> GET パラメータを使う? --> GET パラメータを使う? --> GET パラメータを使う? --> cookie 使う? --> cookie 使う? --> cookie 使う? --> cookie 使う? --> cookie 使う? --> cookie 使う?                                     15 / 53
16. SPA とは SPA とは SPA とは SPA とは SPA とは SPA とは SPA は、Single Page Application の略 SPA は、Single Page Application の略 SPA は、Single Page Application の略 SPA は、Single Page Application の略 SPA は、Single Page Application の略 SPA は、Single Page Application の略 JavaScript を用いたWeb アプリの実装方法 JavaScript を用いたWeb アプリの実装方法 JavaScript を用いたWeb アプリの実装方法 JavaScript を用いたWeb アプリの実装方法 JavaScript を用いたWeb アプリの実装方法 JavaScript を用いたWeb アプリの実装方法 サーバから1 ページのHTML を返し、ルーティング機能を持つ サーバから1 ページのHTML を返し、ルーティング機能を持つ サーバから1 ページのHTML を返し、ルーティング機能を持つ サーバから1 ページのHTML を返し、ルーティング機能を持つ サーバから1 ページのHTML を返し、ルーティング機能を持つ サーバから1 ページのHTML を返し、ルーティング機能を持つ JavaScript で作られたアプリを読み込む JavaScript で作られたアプリを読み込む JavaScript で作られたアプリを読み込む JavaScript で作られたアプリを読み込む JavaScript で作られたアプリを読み込む JavaScript で作られたアプリを読み込む REST API でJSON をやりとり REST API でJSON をやりとり REST API でJSON をやりとり REST API でJSON をやりとり REST API でJSON をやりとり REST API でJSON をやりとり スマホアプリのような動き スマホアプリのような動き スマホアプリのような動き スマホアプリのような動き スマホアプリのような動き スマホアプリのような動き 通常のWeb サイトの場合、次のページを閲覧する際に、ハイパーリンク 通常のWeb サイトの場合、次のページを閲覧する際に、ハイパーリンク 通常のWeb サイトの場合、次のページを閲覧する際に、ハイパーリンク 通常のWeb サイトの場合、次のページを閲覧する際に、ハイパーリンク 通常のWeb サイトの場合、次のページを閲覧する際に、ハイパーリンク 通常のWeb サイトの場合、次のページを閲覧する際に、ハイパーリンク を用いて、サーバに別のページをリクエストするが、SPA ではアプリ内 を用いて、サーバに別のページをリクエストするが、SPA ではアプリ内 を用いて、サーバに別のページをリクエストするが、SPA ではアプリ内 を用いて、サーバに別のページをリクエストするが、SPA ではアプリ内 を用いて、サーバに別のページをリクエストするが、SPA ではアプリ内 を用いて、サーバに別のページをリクエストするが、SPA ではアプリ内 でルーティングし、API をコールするなどして別の情報が表示される でルーティングし、API をコールするなどして別の情報が表示される でルーティングし、API をコールするなどして別の情報が表示される でルーティングし、API をコールするなどして別の情報が表示される でルーティングし、API をコールするなどして別の情報が表示される でルーティングし、API をコールするなどして別の情報が表示される                                     16 / 53
17. SPA の例 SPA の例 SPA の例 SPA の例 SPA の例 SPA の例 Twitter Twitter Twitter Twitter Twitter Twitter Net ix Net ix Net ix Net ix Net ix Net ix             17 / 53
18. 高度な意味でのSPA 高度な意味でのSPA 高度な意味でのSPA 高度な意味でのSPA 高度な意味でのSPA 高度な意味でのSPA 別の情報を表示するときにURL を変化させる。( つまり、パーマリンク 別の情報を表示するときにURL を変化させる。( つまり、パーマリンク 別の情報を表示するときにURL を変化させる。( つまり、パーマリンク 別の情報を表示するときにURL を変化させる。( つまり、パーマリンク 別の情報を表示するときにURL を変化させる。( つまり、パーマリンク 別の情報を表示するときにURL を変化させる。( つまり、パーマリンク を持つ) を持つ) を持つ) を持つ) を持つ) を持つ) HTML 内には、 HTML 内には、 HTML 内には、 HTML 内には、 HTML 内には、 HTML 内には、 div id="app" div id="app" div id="app" div id="app" div id="app" div id="app" などの1 要素のみで構成される事が多 などの1 要素のみで構成される事が多 などの1 要素のみで構成される事が多 などの1 要素のみで構成される事が多 などの1 要素のみで構成される事が多 などの1 要素のみで構成される事が多 い い い い い い HTML ソースを見ても何が表示されるか分からないことがある HTML ソースを見ても何が表示されるか分からないことがある HTML ソースを見ても何が表示されるか分からないことがある HTML ソースを見ても何が表示されるか分からないことがある HTML ソースを見ても何が表示されるか分からないことがある HTML ソースを見ても何が表示されるか分からないことがある                   18 / 53
19. SPA に使われる技術 SPA に使われる技術 SPA に使われる技術 SPA に使われる技術 SPA に使われる技術 SPA に使われる技術 19 / 53
20. 構成技術 構成技術 構成技術 構成技術 構成技術 構成技術 フロントエンド --> JavaScript フロントエンド --> JavaScript フロントエンド --> JavaScript フロントエンド --> JavaScript フロントエンド --> JavaScript フロントエンド --> JavaScript サーバサイト --> Python サーバサイト --> Python サーバサイト --> Python サーバサイト --> Python サーバサイト --> Python サーバサイト --> Python REST API REST API REST API REST API REST API REST API                   20 / 53
21. 旧来方式 旧来方式 旧来方式 旧来方式 旧来方式 旧来方式 21 / 53
22. SPA の場合 SPA の場合 SPA の場合 SPA の場合 SPA の場合 SPA の場合 22 / 53
23. Volto Volto Volto Volto Volto Volto Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 React とは React とは React とは React とは React とは React とは SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能                         23 / 53
24. Volto の紹介(1) Volto の紹介(1) Volto の紹介(1) Volto の紹介(1) Volto の紹介(1) Volto の紹介(1) Plone 専用のフロントエンドアプリとして開発がスタート Plone 専用のフロントエンドアプリとして開発がスタート Plone 専用のフロントエンドアプリとして開発がスタート Plone 専用のフロントエンドアプリとして開発がスタート Plone 専用のフロントエンドアプリとして開発がスタート Plone 専用のフロントエンドアプリとして開発がスタート 当初は、plone.react と言われていた 当初は、plone.react と言われていた 当初は、plone.react と言われていた 当初は、plone.react と言われていた 当初は、plone.react と言われていた 当初は、plone.react と言われていた React ベースのCMS 用のフロントエンド実装 React ベースのCMS 用のフロントエンド実装 React ベースのCMS 用のフロントエンド実装 React ベースのCMS 用のフロントエンド実装 React ベースのCMS 用のフロントエンド実装 React ベースのCMS 用のフロントエンド実装 MIT ライセンス MIT ライセンス MIT ライセンス MIT ライセンス MIT ライセンス MIT ライセンス Plone やguillotina CMS に対応しているSPA を作る為のもの Plone やguillotina CMS に対応しているSPA を作る為のもの Plone やguillotina CMS に対応しているSPA を作る為のもの Plone やguillotina CMS に対応しているSPA を作る為のもの Plone やguillotina CMS に対応しているSPA を作る為のもの Plone やguillotina CMS に対応しているSPA を作る為のもの                               24 / 53
25. Volto の紹介(2) Volto の紹介(2) Volto の紹介(2) Volto の紹介(2) Volto の紹介(2) Volto の紹介(2) 表示側だけではなく、編集画面等のCMS 管理もすべてVolto で行う想 表示側だけではなく、編集画面等のCMS 管理もすべてVolto で行う想 表示側だけではなく、編集画面等のCMS 管理もすべてVolto で行う想 表示側だけではなく、編集画面等のCMS 管理もすべてVolto で行う想 表示側だけではなく、編集画面等のCMS 管理もすべてVolto で行う想 表示側だけではなく、編集画面等のCMS 管理もすべてVolto で行う想 定 定 定 定 定 定 Block でページを構成する Block でページを構成する Block でページを構成する Block でページを構成する Block でページを構成する Block でページを構成する 次期Plone のメジャーバージョンPlone 6 でVolto が標準的に組み込ま 次期Plone のメジャーバージョンPlone 6 でVolto が標準的に組み込ま 次期Plone のメジャーバージョンPlone 6 でVolto が標準的に組み込ま 次期Plone のメジャーバージョンPlone 6 でVolto が標準的に組み込ま 次期Plone のメジャーバージョンPlone 6 でVolto が標準的に組み込ま 次期Plone のメジャーバージョンPlone 6 でVolto が標準的に組み込ま れる れる れる れる れる れる Semantic UI ベース Semantic UI ベース Semantic UI ベース Semantic UI ベース Semantic UI ベース Semantic UI ベース https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ https://semantic-ui.com/ カスタマイズを行うことで見た目や機能拡張が可能な仕組みを提供 カスタマイズを行うことで見た目や機能拡張が可能な仕組みを提供 カスタマイズを行うことで見た目や機能拡張が可能な仕組みを提供 カスタマイズを行うことで見た目や機能拡張が可能な仕組みを提供 カスタマイズを行うことで見た目や機能拡張が可能な仕組みを提供 カスタマイズを行うことで見た目や機能拡張が可能な仕組みを提供                               25 / 53
26. Volto の編集画面 Volto の編集画面 Volto の編集画面 Volto の編集画面 Volto の編集画面 Volto の編集画面 26 / 53
27. Volto の表示画面 Volto の表示画面 Volto の表示画面 Volto の表示画面 Volto の表示画面 Volto の表示画面 27 / 53
28. Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Volto への流れを確認 Web ページが、アプリ化 Web ページが、アプリ化 Web ページが、アプリ化 Web ページが、アプリ化 Web ページが、アプリ化 Web ページが、アプリ化 編集画面の変容 編集画面の変容 編集画面の変容 編集画面の変容 編集画面の変容 編集画面の変容 TinyMCE などのWYSIWYG で書いて良いの？ TinyMCE などのWYSIWYG で書いて良いの？ TinyMCE などのWYSIWYG で書いて良いの？ TinyMCE などのWYSIWYG で書いて良いの？ TinyMCE などのWYSIWYG で書いて良いの？ TinyMCE などのWYSIWYG で書いて良いの？ WordPress の編集画面 WordPress の編集画面 WordPress の編集画面 WordPress の編集画面 WordPress の編集画面 WordPress の編集画面 Blog サイト Medium などの編集画面 Blog サイト Medium などの編集画面 Blog サイト Medium などの編集画面 Blog サイト Medium などの編集画面 Blog サイト Medium などの編集画面 Blog サイト Medium などの編集画面 Web サイトは、スマホやタブレットからの閲覧がますます多くなり、 Web サイトは、スマホやタブレットからの閲覧がますます多くなり、 Web サイトは、スマホやタブレットからの閲覧がますます多くなり、 Web サイトは、スマホやタブレットからの閲覧がますます多くなり、 Web サイトは、スマホやタブレットからの閲覧がますます多くなり、 Web サイトは、スマホやタブレットからの閲覧がますます多くなり、 スマホアプリとの差を減らす スマホアプリとの差を減らす スマホアプリとの差を減らす スマホアプリとの差を減らす スマホアプリとの差を減らす スマホアプリとの差を減らす 今後はSPA が一般的なサイトの構成 今後はSPA が一般的なサイトの構成 今後はSPA が一般的なサイトの構成 今後はSPA が一般的なサイトの構成 今後はSPA が一般的なサイトの構成 今後はSPA が一般的なサイトの構成 PWA 化しアプリのように扱われる PWA 化しアプリのように扱われる PWA 化しアプリのように扱われる PWA 化しアプリのように扱われる PWA 化しアプリのように扱われる PWA 化しアプリのように扱われる                                                 28 / 53
29. React とは React とは React とは React とは React とは React とは JavaScript ライブラリの一つ JavaScript ライブラリの一つ JavaScript ライブラリの一つ JavaScript ライブラリの一つ JavaScript ライブラリの一つ JavaScript ライブラリの一つ Facebook 社が提供しているMIT ライセンスのOSS パッケージ Facebook 社が提供しているMIT ライセンスのOSS パッケージ Facebook 社が提供しているMIT ライセンスのOSS パッケージ Facebook 社が提供しているMIT ライセンスのOSS パッケージ Facebook 社が提供しているMIT ライセンスのOSS パッケージ Facebook 社が提供しているMIT ライセンスのOSS パッケージ React と似たものとして React と似たものとして React と似たものとして React と似たものとして React と似たものとして React と似たものとして Vue.js Vue.js Vue.js Vue.js Vue.js Vue.js Angular Angular Angular Angular Angular Angular など など など など など など 基本的にはページ全体をJavaScript のアプリで表示することが多い 基本的にはページ全体をJavaScript のアプリで表示することが多い 基本的にはページ全体をJavaScript のアプリで表示することが多い 基本的にはページ全体をJavaScript のアプリで表示することが多い 基本的にはページ全体をJavaScript のアプリで表示することが多い 基本的にはページ全体をJavaScript のアプリで表示することが多い 部分的にReact でできたアプリを呼び出すのはやらない 部分的にReact でできたアプリを呼び出すのはやらない 部分的にReact でできたアプリを呼び出すのはやらない 部分的にReact でできたアプリを呼び出すのはやらない 部分的にReact でできたアプリを呼び出すのはやらない 部分的にReact でできたアプリを呼び出すのはやらない                                                 29 / 53
30. SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 SPA サイトにおけるCMS が提供する機能 REST API REST API REST API REST API REST API REST API JSON 形式でデータを出力 JSON 形式でデータを出力 JSON 形式でデータを出力 JSON 形式でデータを出力 JSON 形式でデータを出力 JSON 形式でデータを出力 JSON 形式でデータを受け取る JSON 形式でデータを受け取る JSON 形式でデータを受け取る JSON 形式でデータを受け取る JSON 形式でデータを受け取る JSON 形式でデータを受け取る 表示側だけではなく、編集機能も 表示側だけではなく、編集機能も 表示側だけではなく、編集機能も 表示側だけではなく、編集機能も 表示側だけではなく、編集機能も 表示側だけではなく、編集機能も CMS が提供すべき機能をすべてREST API でJSON で出力 CMS が提供すべき機能をすべてREST API でJSON で出力 CMS が提供すべき機能をすべてREST API でJSON で出力 CMS が提供すべき機能をすべてREST API でJSON で出力 CMS が提供すべき機能をすべてREST API でJSON で出力 CMS が提供すべき機能をすべてREST API でJSON で出力 JavaScript でできているアプリを読み込ませる1 枚のHTML 出力 JavaScript でできているアプリを読み込ませる1 枚のHTML 出力 JavaScript でできているアプリを読み込ませる1 枚のHTML 出力 JavaScript でできているアプリを読み込ませる1 枚のHTML 出力 JavaScript でできているアプリを読み込ませる1 枚のHTML 出力 JavaScript でできているアプリを読み込ませる1 枚のHTML 出力 パーマリンクからのアプリ起動 パーマリンクからのアプリ起動 パーマリンクからのアプリ起動 パーマリンクからのアプリ起動 パーマリンクからのアプリ起動 パーマリンクからのアプリ起動                                           30 / 53
31. Plone とは Plone とは Plone とは Plone とは Plone とは Plone とは 31 / 53
32. Plone とは Plone とは Plone とは Plone とは Plone とは Plone とは Plone （プローン）は、18 年以上の歴史を持つオープンソースCMS Plone （プローン）は、18 年以上の歴史を持つオープンソースCMS Plone （プローン）は、18 年以上の歴史を持つオープンソースCMS Plone （プローン）は、18 年以上の歴史を持つオープンソースCMS Plone （プローン）は、18 年以上の歴史を持つオープンソースCMS Plone （プローン）は、18 年以上の歴史を持つオープンソースCMS エンタープライズ対応の高度な機能を備えており、多くの人と組 エンタープライズ対応の高度な機能を備えており、多くの人と組 エンタープライズ対応の高度な機能を備えており、多くの人と組 エンタープライズ対応の高度な機能を備えており、多くの人と組 エンタープライズ対応の高度な機能を備えており、多くの人と組 エンタープライズ対応の高度な機能を備えており、多くの人と組 織が関わるウェブサイトの管理に力を発揮します。 織が関わるウェブサイトの管理に力を発揮します。 織が関わるウェブサイトの管理に力を発揮します。 織が関わるウェブサイトの管理に力を発揮します。 織が関わるウェブサイトの管理に力を発揮します。 織が関わるウェブサイトの管理に力を発揮します。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 規模に関わらず、社内情報の共有・蓄積も得意分野です。 32 / 53
33. Plone のスナップショット Plone のスナップショット Plone のスナップショット Plone のスナップショット Plone のスナップショット Plone のスナップショット 33 / 53
34. Plone が提供する主な機能 Plone が提供する主な機能 Plone が提供する主な機能 Plone が提供する主な機能 Plone が提供する主な機能 Plone が提供する主な機能 1 1 1 1 1 1. . . . . . エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 2 2 2 2 2 2. . . . . . 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 3 3 3 3 3 3. . . . . . 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 4 4 4 4 4 4. . . . . . すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 5 5 5 5 5 5. . . . . . 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 6 6 6 6 6 6. . . . . . 多言語対応 多言語対応 多言語対応 多言語対応 多言語対応 多言語対応 7 7 7 7 7 7. . . . . . アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 8 8 8 8 8 8. . . . . . 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 34 / 53
35. Plone が提供する主な機能(1) Plone が提供する主な機能(1) Plone が提供する主な機能(1) Plone が提供する主な機能(1) Plone が提供する主な機能(1) Plone が提供する主な機能(1) エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 エンタープライズ環境との統合 標準的なエンタープライズシステムとシームレスに接続 標準的なエンタープライズシステムとシームレスに接続 標準的なエンタープライズシステムとシームレスに接続 標準的なエンタープライズシステムとシームレスに接続 標準的なエンタープライズシステムとシームレスに接続 標準的なエンタープライズシステムとシームレスに接続 各種CRM 、Salesforce 、Oracle などとシームレスに接続します。 各種CRM 、Salesforce 、Oracle などとシームレスに接続します。 各種CRM 、Salesforce 、Oracle などとシームレスに接続します。 各種CRM 、Salesforce 、Oracle などとシームレスに接続します。 各種CRM 、Salesforce 、Oracle などとシームレスに接続します。 各種CRM 、Salesforce 、Oracle などとシームレスに接続します。 各種ミドルウエアと接続 各種ミドルウエアと接続 各種ミドルウエアと接続 各種ミドルウエアと接続 各種ミドルウエアと接続 各種ミドルウエアと接続 Web サーバー Web サーバー Web サーバー Web サーバー Web サーバー Web サーバー 各種DB (SQL ・NoSQL) 各種DB (SQL ・NoSQL) 各種DB (SQL ・NoSQL) 各種DB (SQL ・NoSQL) 各種DB (SQL ・NoSQL) 各種DB (SQL ・NoSQL) その他、CI ツール、外部Web サービスや各種フレームワークと統合 その他、CI ツール、外部Web サービスや各種フレームワークと統合 その他、CI ツール、外部Web サービスや各種フレームワークと統合 その他、CI ツール、外部Web サービスや各種フレームワークと統合 その他、CI ツール、外部Web サービスや各種フレームワークと統合 その他、CI ツール、外部Web サービスや各種フレームワークと統合 できます。 できます。 できます。 できます。 できます。 できます。                                     35 / 53
36. Plone が提供する主な機能(2) Plone が提供する主な機能(2) Plone が提供する主な機能(2) Plone が提供する主な機能(2) Plone が提供する主な機能(2) Plone が提供する主な機能(2) 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー 柔軟なワークフロー ワークフローシステム ワークフローシステム ワークフローシステム ワークフローシステム ワークフローシステム ワークフローシステム バージョン管理 バージョン管理 バージョン管理 バージョン管理 バージョン管理 バージョン管理 コンテンツロック コンテンツロック コンテンツロック コンテンツロック コンテンツロック コンテンツロック 検索 検索 検索 検索 検索 検索 初期作成から公開、そしてアーカイブに至るコンテンツのライフサイク 初期作成から公開、そしてアーカイブに至るコンテンツのライフサイク 初期作成から公開、そしてアーカイブに至るコンテンツのライフサイク 初期作成から公開、そしてアーカイブに至るコンテンツのライフサイク 初期作成から公開、そしてアーカイブに至るコンテンツのライフサイク 初期作成から公開、そしてアーカイブに至るコンテンツのライフサイク ルを管理できます。ロールとグループの権限設定、編集と公開のフロー、 ルを管理できます。ロールとグループの権限設定、編集と公開のフロー、 ルを管理できます。ロールとグループの権限設定、編集と公開のフロー、 ルを管理できます。ロールとグループの権限設定、編集と公開のフロー、 ルを管理できます。ロールとグループの権限設定、編集と公開のフロー、 ルを管理できます。ロールとグループの権限設定、編集と公開のフロー、 共同作成などのプロセス管理ツールは100 ％カスタマイズ可能です。 共同作成などのプロセス管理ツールは100 ％カスタマイズ可能です。 共同作成などのプロセス管理ツールは100 ％カスタマイズ可能です。 共同作成などのプロセス管理ツールは100 ％カスタマイズ可能です。 共同作成などのプロセス管理ツールは100 ％カスタマイズ可能です。 共同作成などのプロセス管理ツールは100 ％カスタマイズ可能です。                         36 / 53
37. Plone が提供する主な機能(3) Plone が提供する主な機能(3) Plone が提供する主な機能(3) Plone が提供する主な機能(3) Plone が提供する主な機能(3) Plone が提供する主な機能(3) 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 強固なセキュリティ 脆弱性の発見件数が少ない 脆弱性の発見件数が少ない 脆弱性の発見件数が少ない 脆弱性の発見件数が少ない 脆弱性の発見件数が少ない 脆弱性の発見件数が少ない 細かなセキュリティモデル 細かなセキュリティモデル 細かなセキュリティモデル 細かなセキュリティモデル 細かなセキュリティモデル 細かなセキュリティモデル ツールのテストカバレッジと統合テスト ツールのテストカバレッジと統合テスト ツールのテストカバレッジと統合テスト ツールのテストカバレッジと統合テスト ツールのテストカバレッジと統合テスト ツールのテストカバレッジと統合テスト 見つかった脆弱性の数が非常に少ないことは、Plone のセキュリティが 見つかった脆弱性の数が非常に少ないことは、Plone のセキュリティが 見つかった脆弱性の数が非常に少ないことは、Plone のセキュリティが 見つかった脆弱性の数が非常に少ないことは、Plone のセキュリティが 見つかった脆弱性の数が非常に少ないことは、Plone のセキュリティが 見つかった脆弱性の数が非常に少ないことは、Plone のセキュリティが いかに成熟しているかを示しています。きめ細かなセキュリティモデル いかに成熟しているかを示しています。きめ細かなセキュリティモデル いかに成熟しているかを示しています。きめ細かなセキュリティモデル いかに成熟しているかを示しています。きめ細かなセキュリティモデル いかに成熟しているかを示しています。きめ細かなセキュリティモデル いかに成熟しているかを示しています。きめ細かなセキュリティモデル を持ち、優れたテストカバレッジと継続的な統合テストを経てリリース を持ち、優れたテストカバレッジと継続的な統合テストを経てリリース を持ち、優れたテストカバレッジと継続的な統合テストを経てリリース を持ち、優れたテストカバレッジと継続的な統合テストを経てリリース を持ち、優れたテストカバレッジと継続的な統合テストを経てリリース を持ち、優れたテストカバレッジと継続的な統合テストを経てリリース されるPlone は、セキュリティを重視する環境に最適です。 されるPlone は、セキュリティを重視する環境に最適です。 されるPlone は、セキュリティを重視する環境に最適です。 されるPlone は、セキュリティを重視する環境に最適です。 されるPlone は、セキュリティを重視する環境に最適です。 されるPlone は、セキュリティを重視する環境に最適です。                   37 / 53
38. Plone が提供する主な機能(4) Plone が提供する主な機能(4) Plone が提供する主な機能(4) Plone が提供する主な機能(4) Plone が提供する主な機能(4) Plone が提供する主な機能(4) すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 すぐれた拡張性 コンテンツの整理、文書ファイル生成 コンテンツの整理、文書ファイル生成 コンテンツの整理、文書ファイル生成 コンテンツの整理、文書ファイル生成 コンテンツの整理、文書ファイル生成 コンテンツの整理、文書ファイル生成 画像処理 画像処理 画像処理 画像処理 画像処理 画像処理 フォーム処理 フォーム処理 フォーム処理 フォーム処理 フォーム処理 フォーム処理 外部サービス接続、SNS 連携、 外部サービス接続、SNS 連携、 外部サービス接続、SNS 連携、 外部サービス接続、SNS 連携、 外部サービス接続、SNS 連携、 外部サービス接続、SNS 連携、 外部認証 外部認証 外部認証 外部認証 外部認証 外部認証 REST API サーバー REST API サーバー REST API サーバー REST API サーバー REST API サーバー REST API サーバー Plone の機能を拡張する数百のアドオンがあります。望みのものが見つ Plone の機能を拡張する数百のアドオンがあります。望みのものが見つ Plone の機能を拡張する数百のアドオンがあります。望みのものが見つ Plone の機能を拡張する数百のアドオンがあります。望みのものが見つ Plone の機能を拡張する数百のアドオンがあります。望みのものが見つ Plone の機能を拡張する数百のアドオンがあります。望みのものが見つ からない場合は、自分で作成することもできます。 からない場合は、自分で作成することもできます。 からない場合は、自分で作成することもできます。 からない場合は、自分で作成することもできます。 からない場合は、自分で作成することもできます。 からない場合は、自分で作成することもできます。                                     38 / 53
39. Plone が提供する主な機能(5) Plone が提供する主な機能(5) Plone が提供する主な機能(5) Plone が提供する主な機能(5) Plone が提供する主な機能(5) Plone が提供する主な機能(5) 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 高いスケーラビリティ 標準的なシステム 標準的なシステム 標準的なシステム 標準的なシステム 標準的なシステム 標準的なシステム 大規模かつ複雑なシステム 大規模かつ複雑なシステム 大規模かつ複雑なシステム 大規模かつ複雑なシステム 大規模かつ複雑なシステム 大規模かつ複雑なシステム コンテンツ検索 コンテンツ検索 コンテンツ検索 コンテンツ検索 コンテンツ検索 コンテンツ検索 外部統合機能 外部統合機能 外部統合機能 外部統合機能 外部統合機能 外部統合機能 バックアップ・復元機能 バックアップ・復元機能 バックアップ・復元機能 バックアップ・復元機能 バックアップ・復元機能 バックアップ・復元機能 インストールしてすぐに使用可能です。クラスタリング機能も備えてお インストールしてすぐに使用可能です。クラスタリング機能も備えてお インストールしてすぐに使用可能です。クラスタリング機能も備えてお インストールしてすぐに使用可能です。クラスタリング機能も備えてお インストールしてすぐに使用可能です。クラスタリング機能も備えてお インストールしてすぐに使用可能です。クラスタリング機能も備えてお り、Web サイトを複数のサーバーに分割して高トラフィックを処理でき り、Web サイトを複数のサーバーに分割して高トラフィックを処理でき り、Web サイトを複数のサーバーに分割して高トラフィックを処理でき り、Web サイトを複数のサーバーに分割して高トラフィックを処理でき り、Web サイトを複数のサーバーに分割して高トラフィックを処理でき り、Web サイトを複数のサーバーに分割して高トラフィックを処理でき ます。 ます。 ます。 ます。 ます。 ます。                               39 / 53
40. Plone が提供する主な機能(6) Plone が提供する主な機能(6) Plone が提供する主な機能(6) Plone が提供する主な機能(6) Plone が提供する主な機能(6) Plone が提供する主な機能(6) 多言語対応 多言語対応 多言語対応 多言語対応 多言語対応 多言語対応 英語 英語 英語 英語 英語 英語 ヨーロッパ各国 ヨーロッパ各国 ヨーロッパ各国 ヨーロッパ各国 ヨーロッパ各国 ヨーロッパ各国 中国語 中国語 中国語 中国語 中国語 中国語 日本語 日本語 日本語 日本語 日本語 日本語 40 以上の言語に対応しています。アラビア語やヘブライ語など 40 以上の言語に対応しています。アラビア語やヘブライ語など 40 以上の言語に対応しています。アラビア語やヘブライ語など 40 以上の言語に対応しています。アラビア語やヘブライ語など 40 以上の言語に対応しています。アラビア語やヘブライ語など 40 以上の言語に対応しています。アラビア語やヘブライ語など の右から左へ書かれる言語も簡単に処理できます。 Plone のドキ の右から左へ書かれる言語も簡単に処理できます。 Plone のドキ の右から左へ書かれる言語も簡単に処理できます。 Plone のドキ の右から左へ書かれる言語も簡単に処理できます。 Plone のドキ の右から左へ書かれる言語も簡単に処理できます。 Plone のドキ の右から左へ書かれる言語も簡単に処理できます。 Plone のドキ ュメントも多言語対応です。 ュメントも多言語対応です。 ュメントも多言語対応です。 ュメントも多言語対応です。 ュメントも多言語対応です。 ュメントも多言語対応です。                         40 / 53
41. Plone が提供する主な機能(7) Plone が提供する主な機能(7) Plone が提供する主な機能(7) Plone が提供する主な機能(7) Plone が提供する主な機能(7) Plone が提供する主な機能(7) アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 アクセシビリティ対応 WCAG 2.0 に準拠 WCAG 2.0 に準拠 WCAG 2.0 に準拠 WCAG 2.0 に準拠 WCAG 2.0 に準拠 WCAG 2.0 に準拠 W3C のWAI-AA W3C のWAI-AA W3C のWAI-AA W3C のWAI-AA W3C のWAI-AA W3C のWAI-AA セクション508 標準 セクション508 標準 セクション508 標準 セクション508 標準 セクション508 標準 セクション508 標準 米国政府による視覚障害者および運動障害者向けの 米国政府による視覚障害者および運動障害者向けの 米国政府による視覚障害者および運動障害者向けの 米国政府による視覚障害者および運動障害者向けの 米国政府による視覚障害者および運動障害者向けの 米国政府による視覚障害者および運動障害者向けの Plone のJavaScript には、あらゆるブラウザで動作するフォールバックモ Plone のJavaScript には、あらゆるブラウザで動作するフォールバックモ Plone のJavaScript には、あらゆるブラウザで動作するフォールバックモ Plone のJavaScript には、あらゆるブラウザで動作するフォールバックモ Plone のJavaScript には、あらゆるブラウザで動作するフォールバックモ Plone のJavaScript には、あらゆるブラウザで動作するフォールバックモ ードがあります。 ードがあります。 ードがあります。 ードがあります。 ードがあります。 ードがあります。                         41 / 53
42. Plone が提供する主な機能(8) Plone が提供する主な機能(8) Plone が提供する主な機能(8) Plone が提供する主な機能(8) Plone が提供する主な機能(8) Plone が提供する主な機能(8) 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン 認証とシングルサインオン LDAP LDAP LDAP LDAP LDAP LDAP Active Directory Active Directory Active Directory Active Directory Active Directory Active Directory Oracle Oracle Oracle Oracle Oracle Oracle OpenID OpenID OpenID OpenID OpenID OpenID Shibboleth Shibboleth Shibboleth Shibboleth Shibboleth Shibboleth CAS CAS CAS CAS CAS CAS Kerberos Kerberos Kerberos Kerberos Kerberos Kerberos 多くの認証システムと簡単に統合できます。 多くの認証システムと簡単に統合できます。 多くの認証システムと簡単に統合できます。 多くの認証システムと簡単に統合できます。 多くの認証システムと簡単に統合できます。 多くの認証システムと簡単に統合できます。                                           42 / 53
43. Plone が提供するREST API Plone が提供するREST API Plone が提供するREST API Plone が提供するREST API Plone が提供するREST API Plone が提供するREST API 43 / 53
44. SPA でCMS が提供しないもの SPA でCMS が提供しないもの SPA でCMS が提供しないもの SPA でCMS が提供しないもの SPA でCMS が提供しないもの SPA でCMS が提供しないもの テンプレート テンプレート テンプレート テンプレート テンプレート テンプレート       44 / 53
45. SPA でCMS が提供すべき SPA でCMS が提供すべき SPA でCMS が提供すべき SPA でCMS が提供すべき SPA でCMS が提供すべき SPA でCMS が提供すべき OGP Tag OGP Tag OGP Tag OGP Tag OGP Tag OGP Tag SSR 用の静的出力 SSR 用の静的出力 SSR 用の静的出力 SSR 用の静的出力 SSR 用の静的出力 SSR 用の静的出力             45 / 53
46. PWA PWA PWA PWA PWA PWA 46 / 53
47. PWA とは PWA とは PWA とは PWA とは PWA とは PWA とは https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Intr https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Intr https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Intr https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Intr https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Intr https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Intr oduction oduction oduction oduction oduction oduction 47 / 53
48. Volto におけるPWA の状況 Volto におけるPWA の状況 Volto におけるPWA の状況 Volto におけるPWA の状況 Volto におけるPWA の状況 Volto におけるPWA の状況 利用可能な準備はできている 利用可能な準備はできている 利用可能な準備はできている 利用可能な準備はできている 利用可能な準備はできている 利用可能な準備はできている しかし、他への影響テストが未完 しかし、他への影響テストが未完 しかし、他への影響テストが未完 しかし、他への影響テストが未完 しかし、他への影響テストが未完 しかし、他への影響テストが未完 Volto 標準で有効にするかは未定 Volto 標準で有効にするかは未定 Volto 標準で有効にするかは未定 Volto 標準で有効にするかは未定 Volto 標準で有効にするかは未定 Volto 標準で有効にするかは未定 PWA の持つ機能が多いのでどの部分をどこまでやるか議論中 PWA の持つ機能が多いのでどの部分をどこまでやるか議論中 PWA の持つ機能が多いのでどの部分をどこまでやるか議論中 PWA の持つ機能が多いのでどの部分をどこまでやるか議論中 PWA の持つ機能が多いのでどの部分をどこまでやるか議論中 PWA の持つ機能が多いのでどの部分をどこまでやるか議論中                         48 / 53
49. デモ デモ デモ デモ デモ デモ 49 / 53
50. まとめ まとめ まとめ まとめ まとめ まとめ SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは SPA サイトとは Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Volto の紹介 Plone のREST API Plone のREST API Plone のREST API Plone のREST API Plone のREST API Plone のREST API PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 PWA についてとVolto のPWA 対応方法 興味があればブース(30XXXXX) に来てください 興味があればブース(30XXXXX) に来てください 興味があればブース(30XXXXX) に来てください 興味があればブース(30XXXXX) に来てください 興味があればブース(30XXXXX) に来てください 興味があればブース(30XXXXX) に来てください                         50 / 53
51. Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております @terapyon @terapyon @terapyon @terapyon @terapyon @terapyon Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan 51 / 53
52. 質疑応答 質疑応答 質疑応答 質疑応答 質疑応答 質疑応答 52 / 53
53. Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております ご質問をお待ちしております @terapyon @terapyon @terapyon @terapyon @terapyon @terapyon Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan Plone User's Group Japan 53 / 53