Firebase
Flamelink
Nuxt
Netlify
PWAを使って
JAMstackなブログを作ってから1年
+
NoCode CMS作りの話
@PWA Night vol.11 2019-12-18
@miyaoka
-
Front-end Architect @STUDIO
-
Adviser @ROXX
本日のアジェンダ
-
Firebase（略）なブログを作った話
-
そこから1年運用した課題感
-
CMSとデザインツールを作ってる話
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作った話
1
構成
Flamelink CMS
ユーザーのFirebaseProjectをDBに使用する管理画面とAPIを提供する
Developer
ローカルサーバーでアプリケーション開発
Editor
- 編集者がCMSにログインして記事投稿
- HeadlessCMSはプレビュー画面を持たないので、自前で用意する必要がある
Preview用画面
- クエリで記事IDを指定して記事プレビューができるページをホスティングしておく
- Firebaseなので更新がリアルタイムプレビューできる
Client (PWA)
- APIレスポンスを全部jsonファイルにしたものをCDNに配置（クライアントでは直接Firebaseに接続する必要が無いようにする）
- 一度取得したら次回からはSWでキャッシュ優先表示
- アプリとしてインストール可能
PWAの話はここで終了です
JAMstack
この間インタビュー受けて話しました
CSR with Prerendering
SSR的なことをあらかじめやっておけばいいじゃんという技術
丸一年運用してみた振り返り
2
開発者側
-
Flamelink使ってみたかった
-
JAMstackで管理要らずで嬉しい
-
作るだけ作って、あとはあんまり見てない
編集者側
-
Flamelinkの編集画面で記事書くのつらい
-
記事のソートとか、メディア管理とかいまいち
それはそう
なんとなく
わかってた
ユーザーが一番触れるのはCMS管理画面
フロントエンドやるならやはりCMS管理画面を作る必要がある
CMSとデザインツールを作ってる話
3
STUDIO
コードを書かずにWebデザインできるプラットフォームサービス
STUDIOエディタ
静的ページのデザインはできるが、動的なデータを用いたデザインが今後の課題
STUDIOエディタ
+
CMS
STUDIO CMS（開発中）
一般的なスキーマ定義とコンテンツ編集ができるよ
デモ：Design with Real Data
CMSデータのGUI化
Collection
をキャンバスにドロップ
Content
を要素に接続
NoCode & CMS & Design
- まずは専用CMSとして扱うことで、エディターに接続された状態で表示
- CMSデータをD&Dで要素にバインドすることでデザインに反映
- 一般的なAPIとの接続も今後の頑張り次第
Firebase Flamelink Nuxt Netlify PWAを使って JAMstackなブログを作ってから1年 + NoCode CMS作りの話
By Masaya Kazama
