⚡ Twitterの検索/リストやRSSを一括でチェック & 既読管理できるツールをFirebaseで作った #React

お久しぶりです 🙌
以前 Web ページをそのまま保存するツールを作った @yarnaimo です。

みなさんは RSS などの情報収集にどのようなツールを使っていますか？

私は今まで Google Apps Script と Fusion Tables を使って RSS を Slack に流していたのですが、Fusion Tables が 12 月に消滅してしまうということで（？）この機会に Firebase や React などを使って新しく情報収集ツールを作ってみました。

✨ 作ったもの

Sodafloat
https://github.com/yarnaimo/sodafloat

Sodafloat は Twitter と RSS の情報を一括でチェック & 既読管理できるツールです！

各自で Firebase プロジェクトを作成しデプロイしていただく形になっています。

📌 Sodafloat の機能

Sodafloat は Firebase で動作します。Twitter の検索クエリやリスト、RSS フィードの URL などを登録しておくと Cloud Functions が自動的に巡回し、更新があれば Firestore に保存します。未読のツイートや記事は Firebase Hosting 上の Web ページでチェックできます。(Web ページは Next.js を使って Cloud Functions 経由で SSR しています)
Web ページのレイアウトはマルチタブになっていて、 Twitter や RSS から取得した情報を任意のタブに表示できます。
各タブではすべての情報がフラットに表示されるのではなく、各サイトや検索クエリごとに分かれたカードで表示されます。
RSS の記事は複数選択してまとめて開くことができます。
各カードの既読ボタンを押さないと既読にならないので、途中で別のタブに移動した場合などでも Slack のように意図せず既読になることがありません。
RSS を巡回する際には記事の OGP タグも取得するのでサムネイルが表示できます。
Twitter 検索機能はエゴサやパブサなどにも便利です。
PWA にも対応しています。

🚀 デプロイ方法

Sodafloat は各自で Firebase にデプロイしていただく形になっていますが、個人で利用する範囲内であれば基本的に無料で運用することができます。

1. Firebase プロジェクトの作成

まず Firebase プロジェクトとデータベースを作成します。これには Google アカウントが必要です。

プロジェクトの作成
- Firebase Console を開きます。
- プロジェクトを追加 をクリックします。
- プロジェクト名 とその下の プロジェクト ID を設定します。例えば ID を project-id にした場合、Web ページの URL が https://project-id.web.app のようになります。プロジェクト名はあとから変更できますが、ID は変更できません。
- Google アナリティクスは必要ないのでオフにして プロジェクトを作成 をクリックします。しばらく待つとプロジェクトの作成が完了します。
データベースの作成
- プロジェクト画面の左にある Database を開きます。
- データベースの作成 をクリックします。
- セキュリティルールは 本番環境で開始 を選択します。
- Firestore のロケーションを選択します。日本で使う場合、asia-northeast1 (東京リージョン) が最も高速でおすすめです。

2. プランの変更・課金設定

Sodafloat は Cloud Functions で外部への通信を行うので、Firebase プロジェクトを Blaze プランに切り替える必要があります。Blaze プランは従量課金制ですが、個人で利用する範囲内であればほぼ無料枠に収まると思います。

Blaze プランへのアップグレード
- プロジェクト画面の左上にある アップグレード をクリックします。
- Blaze プラン を選択します。
- 請求先をまだ登録していない場合、次の画面でカード情報などを入力し購入を確定します。すでに登録している場合は 購入 をクリックすると Blaze プランへのアップグレードが完了します。
1 日あたりの費用制限の設定
- https://console.cloud.google.com/appengine/settings を開き、Google Cloud Platform のロゴの右にあるメニューから作成したプロジェクトを選択します。
- アプリケーションの設定 の中の 編集 をクリックし、1 日の使用量上限を入力して保存します。とりあえず 0 ドル で運用してみて無料枠に収まらなかった場合に増やすのがいいと思います。
予算アラートの設定
- 費用制限の設定画面の左上のメニューから お支払い をクリックし、その中の 予算とアラート を開いて 予算の作成 をクリックします。作成したプロジェクトを プロジェクト 欄で指定し、任意の金額やルールを指定します。

3. デプロイの準備 → デプロイ

Sodafloat のデプロイには git, Node.js, yarn が必要です。また yarn global add firebase-tools で Firebase CLI をインストールしておいてください。

Sodafloat の GitHub リポジトリをローカルに clone してディレクトリに移動し、設定ファイル用のディレクトリを作成します。

git clone https://github.com/yarnaimo/sodafloat.git
cd sodafloat
mkdir -p src/.config

yarn で依存関係をインストールします。時間がかかるので、待っている間に Firebase にデプロイする手前まで並行して進めてもらっても構いません。

yarn

Web アプリの設定
- プロジェクト画面の左上にある 歯車アイコン → プロジェクトの設定 を開きます。
- マイアプリ の </> ボタンをクリックします。
- アプリのニックネームを設定し、Firebase Hosing のオプションにチェックを入れて アプリを登録 します。このニックネームはあとから変更できます。
- (2) 以降の内容は行わず 次へ を数回クリックしてください。
- すると先ほどの マイアプリ のところにアプリの情報が表示されるので、Firebase SDK snippet の中の 構成 をクリックします。
- 右下のボタンでスクリプトをコピーします。
- コピーしたスクリプトの先頭に export を加えたものを src/.config/firebase-web.ts として保存します。

src/.config/firebase-web.ts

export const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  // 省略
  appId: "xxx"
};

以下のように .firebaserc ファイルを作成します。

.firebaserc

{
  "projects": {
    "default": "ここにプロジェクト ID を入力"
  }
}

Firebase CLI で Google アカウントにログインし、Firebase にデプロイします。

firebase login
yarn deploy

✔ Deploy complete! と表示されたらデプロイ完了です！！

4. アプリの初期設定

最後にアプリの初期設定を行います。

🔒 ログイン・管理者の設定
- プロジェクト画面の左にある Authentication を開き、ログイン方法 をクリックします。
- Google をクリックし、Google ログインを有効にして保存します。
- 次の URL の project-id の部分をプロジェクト ID に置き換えて別タブで開き、Google アカウントでアプリにログインします。
  https://project-id.web.app/login
- ログイン方法 の画面に戻り、隣にある ユーザー をクリックします。するとログインしたユーザーが表示されるはずなので、右のボタンで UID をコピーします。
- 左にある Database を開き、コレクションを開始 をクリックします。
- コレクション ID を admin にして次に進みます。
- ドキュメント ID 欄に先ほどコピーした UID を貼り付け、フィールドは空のまま保存します。
- Web ページに戻りリロードします。
以上で、admin に保存された UID のユーザーのみがデータベースにアクセスできるようになりました
Twitter アクセストークンの設定
- Twitter から情報を取得したい場合は Twitter API のアクセストークンを Firestore に保存する必要があります。
- コレクションを開始 をクリックし、コレクション ID に twitterAccounts、ドキュメント ID に default を指定します。ドキュメントには以下のフィールドを追加し、Twitter のトークンなどをそれぞれ入力して保存してください。
  - consumerKey
  - consumerSecret
  - token
  - tokenSecret
  - lists (空の array)
  array を選択すると 0 番目のアイテムが追加されますが、右のボタンで削除して空の配列にしてください。
タイムライン (タブ) とソースの追加
- Web ページの右上の + をクリックするとタイムライン (タブ) が追加できます。アイコンは Material Design Icons から選べます。ここでは試しに名前を Tech、アイコンを cellphone-link にして保存してみます。
- すると Tech タブが表示されたと思います。
- 次に左上のロゴをクリックして Feed ソースの一覧 を開きます。
- Feed ソースを追加 をクリックし、 RSS フィードの URL と保存先タイムラインを入力して保存します。(この例は GIGAZINE です)
- しばらく (最大で 1 時間) 待つとタイムラインに記事の一覧が表示されます。記事を開きたいときは、選択状態にしてから右上の 開く でまとめて開きます。
- すべて既読 をクリックするとそのカード内の記事を既読にできます。
Twitter の検索/リストも Tweet ソースの一覧 から同じように追加できます。

Web ページは Cloud Functions 経由で表示していますが、Cloud Functions は一定時間アクセスがないとスリープ状態になるようなので Google Apps Script か https://cron-job.org 辺りで定期的に起こすのが良いでしょう。

技術的な話

言語はすべて TypeScript で書いていて Web フレームワークは React / Next.js を使っています。データ自体を SSR しているわけではないのでパフォーマンス面では Next.js を使うメリットは少ないですが、ディレクトリにファイルを置くだけでいい感じにルーティングしてくれたり Babel の設定が楽だったりするので採用しました。ちなみにこちらは宗教戦争の画像です。
UI には RMWC (React Material Web Components)、CSS-in-JS は Emotion を使っています。
Firestore のデータの操作には自作の BlueSpark というライブラリを使っています。
開発期間は 1 ヶ月ぐらいです。
Sodafloat という名前は Search と Feed からきています。¹

まとめ

Sodafloat を使うと Twitter や RSS の情報を効率的に収集することができます。ぜひ使ってみてください！！

Twitter - @yarnaimo
Github - @yarnaimo

某コンテンツのクリームソーダも関係してます ↩