PWA Night vol.11 ～PWA × CMS～へ行ってきました！

PWA Night vol.11 ～PWA × CMSへ行ってきたので、自分のメモがてらいろいろと記載します。

イベントページ

PWA Night vol.11 ～PWA × CMS～ (2019/12/18 19:00〜)

Youtubeチャンネル

PWA Night

セッション・LT

1. microCMSとPWAで創るウェブ開発の未来

資料

内容

microCMSについて

・ ヘッドレスCMSの一つ。
・ 静的なページの更新部分などページの一部のみで使うことができる
・データとしてはただのJSONなので、エンジニアが簡単に組み込める
・管理画面が不要なので、大幅に実装を省略できる

microCMSの強み

・日本製なので、日本語完全サポート
・メールやチャットなどで即対応。訪問や実装のサポートもある
・完全クラウド型なので、DBの準備やメンテナンスが一切不要

PWAとmicroCMS

・フロントが完全に切り離されているので、自由にできる
・CMSのことは考えなくて良い

microCMSのライブコーディング

PWAの現状やこれから

・iosではできないことがまだ多い。
・iosのシェアも国内だと多いため無視できない
・ユーザー視点でのPWA
・ネイティブアプリではどのように対応しているか
・実例
・今度どうなるか

今度のPWAのためにmicroCMSがどのように立ち回るか

・あらゆるシーンで柔軟かつ効果的に使える立ち位置を目指す

まとめ

・ヘッドレスCMSの紹介とデモ
・PWAについて整理
・新時代のCMSはAPiベース

聞いた所感

・画面を触るのみでCMSを作ることができるので、とても使いやすそうだと感じた。

・実際にtwitterでの質問もすぐに回答していたので、本当に対応が早くて凄かった。

・iOSだとまだまだできないことが多い & ユーザーが多いので、実務とかで入れていくのは難しいと思った。

**2. WordPress と SSG で作る、情報発信サイト の JAMstack な PWA **

資料

WordPress と SSG で作る、情報発信サイト の JAMstack な PWA | Slides | Riotz.works

内容

WordPressの世界

・世界で最も使われているCMS、Webサイト
・プラグイン・テーマが豊富
・個人からビジネスまで幅広く使われている

Webフロントエンド = WordPressテーマ

JAMstackという新しいアーキテクチャが注目を集めている

SSG(Static Site Generator)をサポートしていることで、PWAも実現しやすい

JAMstackの定義

・クライアントサイトJavaScript
・再利用可能なAPI
・構築済みのマークアップ

JAMstackのメリット

・より良いパフォーマンス&より安価で簡単なスケーリング
・より高いセキュリティ
・より良質な開発者エクスペリエンス

JAMstackを構築する主なSSG

StaticGen | Top Open Source Static Site Generators

サイト系
・Gatsby(JavaScript, React, GraphQL)
・Hexo(JavaScript, EJS, Pug, Haml, Swig...)
・VuePress(JavaScript, Vue.js, Vue-OFFICIAL)
・Gridsome(JavaScript, Vue.js, GraphQL)
アプリ系
・Next.js
・Nuxt.js

代表的なHeadless CMS

headlessCMS

・Contentful
・GraphCMS
・microCMS

WordPressをServerlessにする

・サービスとしてのWordPressとし、所有ではなく利用することで構築や負担をなくす
・コンテンツの作成と管理をサービスとしてのWordPress利用、WebフロントをSSG構築する

Shifter サーバーレスなWordPress

Shifter – Serverless Static WordPress ホスティングサービス「Shifter」

情報発信としてのPWA

・Webサイトをアプリとして使うことができるように
・「アプリ」という機能はほぼなく、記事などのソースのキャッシュやオフライン化がメイン
・コンテンツの更新をアプリ通知することができるが、そこはメインではないかも

まとめ

・JAMstackなサイトは、メリットが大きい → パフォーマンス・スケーリング・セキュリティの向上が図れる
・WordpressをHeadlessCMsとして使い、JAMStackのメリットを享受
・SSGを使うことでPWAが作りやすく、PWAはCMSとも相性がよい → 情報のオフライン化こそ、情報発信サイトPWAの真骨頂

聞いた所感

・JAMstackという言葉をこの勉強会で初めて聞いたが、より良いパフォーマンス&データ と マークアップ の分離、開発ターゲットと責務の明確化などメリットが多いということを知ることができたので、よかった。

・いろいろなSSGやHeadlessCMSについて知ることができたので、よかった。

3. Firebase Flamelink Nuxt Netlify PWAを使って JAMstackなブログを作ってから1年 + NoCode CMS作りの話

資料

Firebase Flamelink Nuxt Netlify PWAを使って JAMstackなブログを作ってから1年 + NoCode CMS作りの話

内容

1. Firebase, Flamelink, Nuxt, Nextlify, PWAを使ってJAMstackなブログを作った話

Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る - Qiita

Flamelink CMS

ユーザーのFirebaseProjectをDBに使用する管理画面とAPIを提供する

JAMstack

JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！

CSR with Prerendering

Rendering on the Web  |  Google Developers

SSR的なことをあらかじめやっておけばいいじゃんという技術

2. 丸1年運用してみた振り返り

ユーザーが一番触れるのはCMS管理画面
フロントエンドやるならやはりCMS管理画面を作る必要がある

3. CMSとデザインツールを作ってる話

STUDIO | ノーコードWeb制作プラットフォーム

・コードを書かずにWebデザインできるプラットフォームサービス
・静的ページのデザインはできるが、動的なデータを用いたデザインが今後の課題

STUDIO CMS（開発中）

・一般的なスキーマ定義とコンテンツ編集ができる
・CMSデータのGUI化

聞いた所感

・JAMstackなブログの導入部分だけではなく、丸1年運用してみたことについても聞くことができたので、よかった。

・stadioについてもどんどん進化していってるので、時間があれば触っていきたいと思った。

4. LT-1: 「concrete5 CMSのPWAアドオンを試したみたよの話」

資料

内容

concrete5 CMSとは？

・2008年からある老舗オープンソースCMS
・ossになる前のconcrete CMSは2003年生まれ(WordPressと同じ年)
・ドラッグ&ドロップによる直感的操作
・PHP + MySQLで動く動的CMS

concrete5 CMSにPWAアドオンが追加された(100ドル)

PWAの感覚を掴むにはちょうど良い

5.  LT-2: 「Vue.js, GraphQLでCraft CMSへの投稿部分をPWAでアプリっぽくしてみた」

資料

内容

Craft CMS

Craft CMS について | Craft 3 ドキュメント

Craft CMS特徴

・ライブプレビュー
・Headless CMS
・Rest API
・GraphQL

Vue.js, GraphQLでGraft CMSにエントリ投稿する

Vue.js, GraphQLで Craft CMS にエントリを投稿する #craftcms | mersy note

全体的な所感

・聞く前は「PWA = ネイティブのアプリ」になるのか気になったが、現状そこまでいってはいないということを理解することができたので、よかった。

・ネイティブまではいっていないが、オフラインで見ることが可能と言う点を重点におけばPWA化の対応もアリだと思った。

・JAMstackやHeadless CMSについてもいろいろと知ることができたので、よかった。