Headless CMS の Flamelink を使った "それっぽいサイト" を Angular で構築してみます。
Firebase に CMS の機能をあっさり追加してしまうファンタスティックなサービス。それが Flamelink です。
バックエンドは Firebase + Flamelink とし、それっぽいサイト のフロントエンドを Angular で構築してみます。
Package Manager には yarn を使用します。macOS でのセットアップは前回の記事をご覧ください。
Firebase、Flamelink の準備
以下の記事を参考に Flamelink と Firebase をセットアップします。
ここでは簡単な手順を紹介するだけにいたします。丁寧な記事に感謝！
1. Flamelink のアカウント作成
Flamelink のアカウントを作成しましょう。現在は Google アカウントでのログインが可能です。
Firebase 用のGoogleアカウントはお持ちですね？！さっさと Google アカウントでログインしてしまいましょう。
2. Firebase のプロジェクト作成
Firebaseで新規のプロジェクトを作成します。
3. Storage の初期設定
Fire Storage の有効化と、権限の設定を行います。
4. Firestore の初期設定
Firestore の有効化と権限の設定を行います。
5. Firebase と Flamelink の関連付け
"Web アプリ"のキーをコピペして Flamelink から Firebase のアクセスを有効にします。
6. スキーマ定義
Flamelink はコンテンツの項目を"スキーマ"として定義し、スキーマに応じた入力フォームを提供してくれます。
スキーマを定義することにより、様々な項目のコンテンツを作成でき、さらに Firestore にも宜しく読み書きしてくれます。これがすごいですね。
今回は myBlog1 を ID としてスキーマを定義しておきます。
さらに banner という media 項目を追加いたしました。
記事のヘッダーにどーんと載せる画像ですね。
7. サンプルのブログ定義
サンプルとしてブログ記事をあげて登録してみましょう。
手順にならって適当に、記事を追加します。
7-1. 画像のアップロード
Flamelink の画面から画像などのファイルをアップロードできます。
Cloud Storage にアップロードしてくれますが、各デバイス向けに様々なサイズにリサイズした画像を生成してくれます。これも便利ですね！
7-1. テキストエディタ
Flamelink のコンテンツ記事を編集する WYSIWYG エディタには CKEditor が使用されています。
高機能で Markdown もサポートしてます。すごい。
ただし"画像のドラッグ&ドロップで勝手にアップロード"には対応できていないので、上記の手順で別途、画像をアップロードしておく必要があります。
8. ナビゲーションの定義
ナビゲーションメニューも flamelink 上で定義できます。
ここで指定するURLはフロントエンドでのパスとなります。
ちょっとわかりにくいですが、パスとコンテンツとスキーマの関係は以下の vue.js 用のサンプルプロジェクトの README.md を見ればイメージがつかめるのではないでしょうか。
今回は適当に "main" というIDで作成しておきます。(今回はナビゲーションリンクはダミーでアイテムを表示するだけとし、URLでのリンクは設置しないでおきます。)
フロントエンドの構築
さて、ローカルマシンでの開発作業に移ります。Angular-cli で yarn は有効になってますね？！
下記の Flamelink 公式のボイラープレートプロジェクトを参考に、通常の手順 で構築していきます。
また、js-sdk のリファレンスはこちらです。
https://flamelink.github.io/flamelink-js-sdk/#/?id=flamelink-javascript-sdk
ボイラープレートでは 0.18が使用されていますが、最新のsdkは 1.0.0-alpha.12 です。
0.x から 1.0への変更には Migration Guide を参考に修正をしていきます。
0. firebase client ツールのインストール
Firebase Client ツールがインストールされていない場合は以下のコマンドでインストールしておきましょう。
$ yarn global add firebase-tools
yarn global v1.15.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
info @google-cloud/functions-emulator@1.0.0-beta.6: The engine "node" is incompatible with this module. Expected version "~6". Got "10.15.3"
info "@google-cloud/functions-emulator@1.0.0-beta.6" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "firebase-tools@6.8.0" with binaries:
- firebase
✨ Done in 28.09s.
1. Angular プロジェクト作成
まず、angular-cli で Angular のプロジェクトを作成します。
$ ng new ng-flamelink-sample
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ http://sass-lang.com/d
ocumentation/file.SASS_REFERENCE.html#syntax ]
CREATE ng-flamelink-sample/README.md (1034 bytes)
CREATE ng-flamelink-sample/.editorconfig (246 bytes)
CREATE ng-flamelink-sample/.gitignore (629 bytes)
CREATE ng-flamelink-sample/angular.json (4012 bytes)
CREATE ng-flamelink-sample/package.json (1318 bytes)
CREATE ng-flamelink-sample/tsconfig.json (435 bytes)
CREATE ng-flamelink-sample/tslint.json (1621 bytes)
CREATE ng-flamelink-sample/src/favicon.ico (5430 bytes)
CREATE ng-flamelink-sample/src/index.html (304 bytes)
CREATE ng-flamelink-sample/src/main.ts (372 bytes)
CREATE ng-flamelink-sample/src/polyfills.ts (2841 bytes)
CREATE ng-flamelink-sample/src/styles.scss (80 bytes)
CREATE ng-flamelink-sample/src/test.ts (642 bytes)
CREATE ng-flamelink-sample/src/browserslist (388 bytes)
CREATE ng-flamelink-sample/src/karma.conf.js (1032 bytes)
CREATE ng-flamelink-sample/src/tsconfig.app.json (166 bytes)
CREATE ng-flamelink-sample/src/tsconfig.spec.json (256 bytes)
CREATE ng-flamelink-sample/src/tslint.json (244 bytes)
CREATE ng-flamelink-sample/src/assets/.gitkeep (0 bytes)
CREATE ng-flamelink-sample/src/environments/environment.prod.ts (51 bytes)
CREATE ng-flamelink-sample/src/environments/environment.ts (662 bytes)
CREATE ng-flamelink-sample/src/app/app-routing.module.ts (245 bytes)
CREATE ng-flamelink-sample/src/app/app.module.ts (393 bytes)
CREATE ng-flamelink-sample/src/app/app.component.scss (0 bytes)
CREATE ng-flamelink-sample/src/app/app.component.html (1152 bytes)
CREATE ng-flamelink-sample/src/app/app.component.spec.ts (1134 bytes)
CREATE ng-flamelink-sample/src/app/app.component.ts (224 bytes)
CREATE ng-flamelink-sample/e2e/protractor.conf.js (752 bytes)
CREATE ng-flamelink-sample/e2e/tsconfig.e2e.json (213 bytes)
CREATE ng-flamelink-sample/e2e/src/app.e2e-spec.ts (648 bytes)
Successfully initialized git.
続いてプロジェクトのフォルダに移動。
$ cd ng-flamelink-sample
2. パッケージの追加
ボイラープレートの package.json を手がかりに必要なパッケージを追加します。
追加するパッケージは @angular/fire、firebase、flamelink@nextの3つです。
$ yarn add @angular/fire firebase flamelink@next
yarn add v1.15.2
[1/4] 🔍 Resolving packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "firebase > @firebase/performance@0.2.1" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/auth > @firebase/auth-types@0.6.1" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/auth > @firebase/auth-types@0.6.1" has unmet peer dependency "@firebase/util@0.x".
warning "firebase > @firebase/messaging@0.3.19" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/performance > @firebase/installations@0.1.0" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/database@0.3.20" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/performance > @firebase/installations > @firebase/installations-types@0.1.0" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/functions@0.4.6" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/database > @firebase/database-types@0.3.11" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/storage@0.2.15" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/storage > @firebase/storage-types@0.2.11" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/storage > @firebase/storage-types@0.2.11" has unmet peer dependency "@firebase/util@0.x".
warning "firebase > @firebase/messaging > @firebase/messaging-types@0.2.11" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/firestore@1.2.2" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/firestore > @firebase/firestore-types@1.2.1" has unmet peer dependency "@firebase/app-types@0.x".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 52 new dependencies.
info Direct dependencies
├─ @angular/fire@5.1.3
├─ firebase@5.11.1
└─ flamelink@1.0.0-alpha.12
info All dependencies
├─ @angular/fire@5.1.3
├─ @firebase/app-types@0.3.10
├─ @firebase/app@0.3.17
├─ @firebase/auth-types@0.6.1
├─ @firebase/auth@0.10.2
├─ @firebase/database-types@0.3.11
├─ @firebase/database@0.3.20
├─ @firebase/firestore-types@1.2.1
├─ @firebase/firestore@1.2.2
├─ @firebase/functions-types@0.3.5
├─ @firebase/functions@0.4.6
├─ @firebase/installations-types@0.1.0
├─ @firebase/installations@0.1.0
├─ @firebase/messaging@0.3.19
├─ @firebase/performance-types@0.0.1
├─ @firebase/performance@0.2.1
├─ @firebase/polyfill@0.3.13
├─ @firebase/storage-types@0.2.11
├─ @firebase/storage@0.2.15
├─ @firebase/webchannel-wrapper@0.2.19
├─ @flamelink/sdk-content-types@1.0.0-alpha.9
├─ @flamelink/sdk-content@1.0.0-alpha.11
├─ @flamelink/sdk-navigation-types@1.0.0-alpha.9
├─ @flamelink/sdk-navigation@1.0.0-alpha.11
├─ @flamelink/sdk-schemas-types@1.0.0-alpha.9
├─ @flamelink/sdk-settings-types@1.0.0-alpha.9
├─ @flamelink/sdk-settings@1.0.0-alpha.9
├─ @flamelink/sdk-storage-types@1.0.0-alpha.9
├─ @flamelink/sdk-storage@1.0.0-alpha.12
├─ @flamelink/sdk-users-types@1.0.0-alpha.9
├─ @flamelink/sdk-users@1.0.0-alpha.11
├─ @types/lodash@4.14.123
├─ ascli@1.0.1
├─ browser-image-resizer@1.2.0
├─ bytebuffer@5.0.1
├─ colour@0.7.1
├─ dom-storage@2.1.0
├─ firebase@5.11.1
├─ flamelink@1.0.0-alpha.12
├─ grpc@1.20.0
├─ idb@3.0.2
├─ isomorphic-fetch@2.2.1
├─ lodash.camelcase@4.3.0
├─ lodash.clone@4.5.0
├─ long@3.2.0
├─ node-fetch@1.7.3
├─ optjs@3.2.2
├─ promise-polyfill@8.1.0
├─ protobufjs@5.0.3
├─ whatwg-fetch@2.0.4
├─ window-size@0.1.4
└─ xmlhttprequest@1.8.0
✨ Done in 710.41s.
やはり、angularfire と flamelink で参照してる firebase 関連のパッケージでバージョンの食い違いが発生している模様ですね。。。ここは警告なので目を瞑っておきます。
またボイラープレートで指定されている angurlarfire2 は @angular/fire に移行されています。
This package has been deprecated
Author message:
AngularFire has moved, we're now @angular/fire
ということで @angular/fireを使用します。
続いて、flamelink の js-sdk では、flamelink@next を使ってね！ということらしいです。
3. firebase の設定を追加
上記の手順で作成した "Webアプリのキー" を app.firebase.config.ts にコピペして保存しておきます。
export const firebaseConfig = {
apiKey: '...',
authDomain: '...',
databaseURL: '...',
projectId: '...',
storageBucket: '...',
messagingSenderId: '...',
appId: '...'
};
Typescript で import するために export を追加します。
4. モジュールの追加
以下の @angular/fire のセットアップ手順に従ってAngularFireModuleモジュールを追加します。
@NgModuleでのimports内のAngularFireModule.initializeApp() で、上記の手順で作成した firebaseConfig を渡しています。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { firebaseConfig } from './app.firebase.config';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5. flamelink からコンテンツを取得するサービスの追加
以下のコマンドでサービスの追加を行います。
$ ng g service shared/services/flamelink
ファイルの内容は以下のように修正しました。
...
export class FlamelinkService {
// GET|SET flApp
private flApp: flamelink.App;
get FlApp(): flamelink.App {
return this.flApp;
}
set FlApp(value: flamelink.App) {
this.flApp = value;
}
constructor(@Inject(FirebaseApp) private fb: firebase.app.App) {
const config: flamelink.Config = {
firebaseApp: this.fb,
env: 'production',
locale: 'default'
};
this.FlApp = flamelink(config);
}
...
元ファイル の FlamelinkConfig は Config になってますね。
また lint でいくつかエラーがあったので修正しました。
6. navibar の追加
以下の手順でヘッダーのメニューのようなナビゲーションバーを表示するUIを作成します。
6-1. コンポーネントの生成
以下のコマンドで ナビゲーションバー用のコンポーネントを生成します。
$ ng g component components/navbar
6-2. コンポーネントの実装
上記の FlamelinkService を経由して nav プロパティから Navigation オブジェクトへアクセスします。
今回のサンプルデータに合わせてIDを修正してます。また、subscribeメソッドの引数も変わっていますね。
...
this.fl.getApp().nav.subscribe({
navigationKey: 'main',
callback : (error, menu) => {
if (error) {
return console.error('Something went wrong while retrieving the entry. Details:', error);
}
console.log('The menu object:', menu);
this.navItems = Object.keys(menu.items).map(key => menu.items[ key ]);
...
7. コンテンツページの追加
以下の手順でコンテンツを表示するページ用のコンポーネントを追加します。
7-1. コンポーネントの生成
以下のコマンドでコンテンツ用のコンポーネントを生成します。
$ ng g component templates/home
templatesは元のプロジェクトに合わせていますが、実際にはページのパスとなるべきでしょう。
7-2. コンポーネントの実装
こちらも今回のサンプルデータに合わせてスキーマIDを修正してます。また同じスキーマで、単一／リストの記事を取得するように改造しました。
...
this.fl.getApp().content.subscribe({
schemaKey: 'myBlog1',
populate: true,
entryId: 'QY3dQvQehgYFx8I6QDyT',
callback : (error, data) => {
if (error) {
console.error(error);
}
this.content = data;
}
});
this.fl.getApp().content.subscribe({
schemaKey: 'myBlog1',
callback : (error, data) => {
if (error) {
console.error(error);
}
this.posts = Object.keys(data).map(key => data[ key ]);
}
});
}
...
7-3. HTMLの修正
上記の改造に合わせてHTMLを修正いたしました。
...
<div class="jumbotron text-white bg-dark mb-0" [ngStyle]="{'background-image': 'url(' + content?.banner[0].url + ')'}">
<h1>{{ content?.title }}</h1>
</div>
</div>
</div>
<div class="container" [innerHTML]="content?.content"></div>
<div class="container">
<div class="row mb-2">
<div class="col-md-4" *ngFor="let post of posts">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<div class="card-text mb-auto"><a href="#" class="text-dark">{{ post?.title }}</a></div>
</div>
...
記事のコンテンツ埋め込みに innerHTML プロパティをバインドしてます。
このあたりのコンテンツの使い方はCMSとフロントエンドの実装でお互いにどこまでやるのか、運用方法などから個別に検討する必要がありそうですね。
7-4. CSS の修正
上記の HTML で innerHTML をバインドしましたが、この場合はHTMLのサニタイズにより style 属性などが削除されてしまう模様です。
今回は記事内で img を使用して見ましたが、サイズ指定の style タグが飛んでしまったので、コンポーネントの CSS で再度サイズを設定しています。
img {
width: 200px;
}
このあたりも画像の扱いについては検討する必要があるようです。
8. その他の準備
メインの実装は上記で完了です。あとは細々とした"つなぎこみ"を行います。
8-1. "ルート"の設定
Angular のルーティングを追加します。
const routes: Routes = [
{ path: '', component: HomeComponent }
];
8-2. エントリーポイントのHTMLを修正
エントリーポイントのHTMLである src/app/app.component.html は初期状態では Angular の 例の ページとなっています。
以下のように修正します。
<app-navbar></app-navbar>
<router-outlet></router-outlet>
8-3. bootstrap, jquery などを追加
ボイラープレートに含まれているコンポーネントとして bootstrap と jquery がまだでしたので yarn で追加しておきます。
$ yarn add bootstrap jquery
また、上記に合わせてcssの参照先、jsの参照先を angular.jsonに追記しておきます。
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
これでボイラープレートの再現手順としては以上でしょうか。
9. ローカルでの確認
yarn startコマンドで angular の開発サーバーが起動します。
$ yarn start
yarn run v1.15.2
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
o Date: 2019-05-06T13:41:19.138Z
Hash: bf6c97582492f6278bd5
Time: 29709ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 24 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 143 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.13 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.35 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ブラウザを開き http://localhost:4200 でブログの記事などが表示されればOKです！
firebase にデプロイ
ここまできたらせっかくなので firebase にデプロイしてみましょう。
以下の記事で Angular プロジェクトの Firebase へのデプロイ手順がバッチリ開設されておりますのでこれにならってデプロイしていきます。ありがとうございます！
1. ログイン
firebase コマンドを初めて使う場合はログインを行います。
$ firebase login
ブラウザが立ち上がり、Firebese CLIへのアクセス許可を行います。
また遥か昔にログインしたはず？！だったのにfirebase initなどで401エラーが出るなど調子悪い場合は以下のように --reauth オプションをつけて実行時てみましょう。
$ firebase login --reauth
2. firebase プロジェクトの設定
firebase init コマンドで初期設定を行います。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/xxxxx/xxxx/ng-flamelink-sample
? Which Firebase CLI features do you want to set up for this folder? Press Space
to select features, then Enter to confirm your choices. Hosting: Configure and
deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Select a default Firebase project for this directory: flamelinktest-ee913 (Fla
meLinkTest)
i Using project flamelinktest-ee913 (FlameLinkTest)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? dist/ng-flamelink-sample
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote dict/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
3. プロジェクトのビルド
デプロイ前に、ProductモードでAngularプロジェクトをビルドします。
$ ng build --prod
Date: 2019-05-06T12:36:28.072Z
Hash: a03892ae018c3296a912
Time: 97922ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.c5dd28b362270c767b34.js (es2015-polyfills) 56.4 kB [initial] [rendered]
chunk {2} main.7900b8c036da3f307d55.js (main) 1.32 MB [initial] [rendered]
chunk {3} polyfills.8bbb231b43165d65d357.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.f0b28ad581a97540732f.css (styles) 139 kB [initial] [rendered]
chunk {scripts} scripts.6cf4da7113bcd1218d80.js (scripts) 141 kB [entry] [rendered]
4. deploy
firebase deployコマンドでプロジェクトをデプロイします。
$ firebase deploy
=== Deploying to 'flamelinktest-ee913'...
i deploying hosting
i hosting[flamelinktest-ee913]: beginning deploy...
i hosting[flamelinktest-ee913]: found 9 files in dist/ng-flamelink-sample
✔ hosting[flamelinktest-ee913]: file upload complete
i hosting[flamelinktest-ee913]: finalizing version...
✔ hosting[flamelinktest-ee913]: version finalized
i hosting[flamelinktest-ee913]: releasing new version...
✔ hosting[flamelinktest-ee913]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/flamelinktest-ee913/overview
Hosting URL: https://flamelinktest-ee913.firebaseapp.com
Hosting URLのURLをブラウザで直接開くか、以下のコマンドでブラウザを起動することもできます。
$ firebase open
? What link would you like to open? Hosting: Deployed Site
Tip: You can also run firebase open hosting:site
Opening Hosting: Deployed Site link in your default browser:
https://flamelinktest-ee913.firebaseapp.com
ブラウザからリモートの firebaseapp.com ドメインのサイトが表示されればOKです！
参考サイト
今回は記事が長い上にリンクが散らばっているので参考サイトを以下にまとめます。
- Flamelink CMS : https://flamelink.io/
- すぐ始められる！FIrebaseをブログのCMSに変える「Flamelink」を使ってみた！
- flamelink/vue-basic: Project bootstrapped with @vue/cli
- flamelink/FlamelinkBoilerplate
- Official Flamelink JavaScript SDK
- Flamelink JavaScript SDK docs
- npm: angularfire2
- angularfire2: Installation and Setup
- Firebase CLIでAngularアプリをFirebase Hostingにデプロイする
成果物など
今回作成したサンプルのサイトはしばらくの間以下で公開しておきます。
また、上記の手順で作成したソースコードは以下のリポジトリにあげました。
いや〜、Flamelink、なかなか大変でした。ボイラープレート、メンテしてくれてないんだもん。。。
が、コンテンツのメンテナンスとプログラムのメンテナンスが分けられるので、開発チームと運用チームが別れているようなある程度の規模のサイトやシステムにはマストなサービスなのではないでしょうか。まだベータ版ですが今後も楽しみなプロジェクトです。
FlamelinkのコンテンツとAPIについてはほとんど触れられておりませんが、引き続き研究して行きたいと思います。