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

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

  • 607
Loading comments...

More from Masaya Kazama