PWA Night vol.11 ～PWA × CMS～へ行ってきました！
PWA Night vol.11 ～PWA × CMSへ行ってきたので、自分のメモがてらいろいろと記載します。
イベントページ
Youtubeチャンネル
セッション・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の世界
・世界で最も使われているCMS、Webサイト
・プラグイン・テーマが豊富
・個人からビジネスまで幅広く使われている
Webフロントエンド = WordPressテーマ
JAMstackという新しいアーキテクチャが注目を集めている
SSG(Static Site Generator)をサポートしていることで、PWAも実現しやすい
JAMstackの定義
・クライアントサイトJavaScript
・再利用可能なAPI
・構築済みのマークアップ
JAMstackのメリット
・より良いパフォーマンス&より安価で簡単なスケーリング
・より高いセキュリティ
・より良質な開発者エクスペリエンス
JAMstackを構築する主なSSG
サイト系
・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
・Contentful
・GraphCMS
・microCMS
WordPressをServerlessにする
・サービスとしてのWordPressとし、所有ではなく利用することで構築や負担をなくす
・コンテンツの作成と管理をサービスとしてのWordPress利用、WebフロントをSSG構築する
Shifter サーバーレスなWordPress
情報発信としてのPWA
・Webサイトをアプリとして使うことができるように
・「アプリ」という機能はほぼなく、記事などのソースのキャッシュやオフライン化がメイン
・コンテンツの更新をアプリ通知することができるが、そこはメインではないかも
まとめ
・JAMstackなサイトは、メリットが大きい → パフォーマンス・スケーリング・セキュリティの向上が図れる
・WordpressをHeadlessCMsとして使い、JAMStackのメリットを享受
・SSGを使うことでPWAが作りやすく、PWAはCMSとも相性がよい → 情報のオフライン化こそ、情報発信サイトPWAの真骨頂
聞いた所感
・JAMstackという言葉をこの勉強会で初めて聞いたが、より良いパフォーマンス&データ と マークアップ の分離、開発ターゲットと責務の明確化などメリットが多いということを知ることができたので、よかった。
・いろいろなSSGやHeadlessCMSについて知ることができたので、よかった。
3. Firebase Flamelink Nuxt Netlify PWAを使って JAMstackなブログを作ってから1年 + NoCode CMS作りの話
資料
内容
1. Firebase, Flamelink, Nuxt, Nextlify, PWAを使ってJAMstackなブログを作った話
ユーザーのFirebaseProjectをDBに使用する管理画面とAPIを提供する
JAMstack
CSR with Prerendering
SSR的なことをあらかじめやっておけばいいじゃんという技術
2. 丸1年運用してみた振り返り
ユーザーが一番触れるのはCMS管理画面
フロントエンドやるならやはりCMS管理画面を作る必要がある
3. CMSとデザインツールを作ってる話
・コードを書かずに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特徴
・ライブプレビュー
・Headless CMS
・Rest API
・GraphQL
Vue.js, GraphQLでGraft CMSにエントリ投稿する
全体的な所感
・聞く前は「PWA = ネイティブのアプリ」になるのか気になったが、現状そこまでいってはいないということを理解することができたので、よかった。
・ネイティブまではいっていないが、オフラインで見ることが可能と言う点を重点におけばPWA化の対応もアリだと思った。
・JAMstackやHeadless CMSについてもいろいろと知ることができたので、よかった。