Angular + Firebase で ブログ機能作る時にやったこと

こんにちは、あかいです！

本記事は Angular Advent Calendar 2019 の2日目の記事です！！

---

フリーランスで活動するにあたって、
継続的なコンテンツの更新を行うために、ポートフォリオサイトにブログ機能を持たせたいと考えました。

Ninja、FC2、楽天、アメーバ、はてな…… 世の中には高品質なブログサービスがたくさんあります。
しかし、これらのサービスをそのまま利用すると、別のドメインでブログを管理することになるので、
SPAの性質上、デザインや機能の統合が難しくなります。

そこでFirebase/Firestoreを利用したサーバーレスアーキテクチャによるブログ実装を、
イチから行うことを決意いたしました。

Firestoreはリアルタイムデータベースがウリなので
ブログにしちゃうのはなんとなく勿体無い気もしますが、
これがなかなか実装していて面白かったです。

完成したブログはこちらです↓

• https://ver1000000.com/blog

---

AngularとはなんぞやとかFirebaseとはなんぞやなど、導入について今回は書かないので、
その辺は各自でお調べ下さい！！

以下のページが役に立つと思います！

• angularfire/install-and-setup.md at master · angular/angularfire

環境、パッケージのインストール

Angularのバージョンは8.2.8で、FirebaseはBlazeプランを利用しています。
ブログ機能の構築を行うために、以下のパッケージを導入しました

• @angular/fire
  • AngularでFirebaseを操作するためのパッケージ。 なくてもFirebaseは使えると思うが、設定周りとかこっち使ったほうがスムーズになるはず
• firebase
• ng-in-viewport
  • ブログ記事無限スクロールの実装に利用
• firebase-tools

Firestore設計

以下のような2つのドキュメント（SQLでいうテーブル）を用意しました。

interface BlogEntry {
  id: string;
  slug: string; // 記事のパーマネントURLに利用する文字。
  title: string;
  body: string; // markdownをhtmlに変換した文字列。 ここをinternalHTMLにいれるのでXSSに注意！
  markdown: string;
  categories: string[];
  createdAt: firestore.Timestamp;
  updatedAt: firestore.Timestamp;
  expiresAt: firestore.Timestamp | boolean;
}

// FirestoreではSQLでは基本のcountなどの集計関数が使えないので、
// 記事の更新削除をフックして数情報を更新してやる
interface BlogCounter {
  categories: { [categoryName: string]: number };
  years: { [year: number]: number }
}

やったことやってないこと（今後やりたいこと）

• 管理者（私）のログイン機能
• 記事のCRUD
• マークダウンでの記事作成
  • Firebase Functions でCRUDをフックし、
    Marked でマークダウンをhtmlにし、
    Highlight.js でコードのハイライトを行っています
• カテゴリ機能
  • Firebase Functionsでカテゴリごとの記事数や種類を更新することで実現しています
• 無限スクロールによるページング
  • Firebaseはページングが貧弱で「3つ前のデータを取得する」とかに難儀するので、
    過去を振り返る必要のない無限スクロールにしました
• パーマリンク作成（記事の詳細ページ）
• 絞り込み機能
• レスポンシブ対応
• 読み込み中の可視化
• SSR(Server-Side-Rendering)
  • SNSでのシェア機能
  • 記事ごとのOGP設定
• RSS配信
  • トラックバック機能は……いまどきいらないね
• コメント/いいね的機能
• テキスト検索機能
  • AlgoliaやらElasticSearchやら
• 画像投稿/画像貼り付け
• Lighthouseとかでアクセシビリティの担保

（↑の中で「ここを掘り下げてほしい」というものがあればコメントお願いします、書きます）

所見

• Firebaseは無料プランでもめちゃくちゃ遊べる
  • 私は今回、Blaze（従量課金制）プランにしたのですが、上記のことはほぼすべてSpark（無料）プランで行えます。
• RDBめちゃおもしろい
• 無限スクロールとの親和性がすごい
• SSRはドキュメントが最新に追いついていなかったりしてめちゃくちゃ大変
• SQLで当たり前のことでも、NoSQLだと勝手が違うということがたくさんある

参考

• angular/angularfire: The official Angular library for Firebase.
• Firebase と Nuxt.js で個人ブログを作った話 - Mobile Factory Tech Blog
  • 「ブログをつくるぞ〜Firebaseで設計どうすんだ〜？」となったあと、この記事がかなり参考になりました
• Angular Universalについて語るスレ - General - Discourse | Angular Japan User Group

---

明日は@ringtail003さんです！ よろしくおねがいします！