お久しぶりです 🙌
以前 [Web ページをそのまま保存するツール] (https://qiita.com/yarnaimo/items/66f3b71077d15a22699d) を作った @yarnaimo です。
みなさんは RSS などの情報収集にどのようなツールを使っていますか？
私は今まで Google Apps Script と Fusion Tables を使って RSS を Slack に流していたのですが、Fusion Tables が 12 月に消滅してしまうということで（？）この機会に Firebase や React などを使って新しく情報収集ツールを作ってみました。
✨ 作ったもの
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 ドルで運用してみて無料枠に収まらなかった場合に増やすのがいいと思います。
-
https://console.cloud.google.com/appengine/settings を開き、
-
予算アラートの設定
- 費用制限の設定画面の左上のメニューから
お支払いをクリックし、その中の予算とアラートを開いて予算の作成をクリックします。作成したプロジェクトをプロジェクト欄で指定し、任意の金額やルールを指定します。
- 費用制限の設定画面の左上のメニューから
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として保存します。
-
export const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
// 省略
appId: "xxx"
};
- 以下のように
.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 ページの右上の
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 からきています。1
まとめ
Sodafloat を使うと Twitter や RSS の情報を効率的に収集することができます。ぜひ使ってみてください！！
-
某コンテンツのクリームソーダも関係してます ↩