独自の、RSSリーダーを作ってみた
※この記事はnoteからの移行となります。
今回は、「RSSリーダー + α」のWebアプリを大きく作り変えて、ほぼ完成形になったので、その紹介とこだわりポイントについて書いてみようと思います。
どんなアプリを作ったの？
一言で言うと、「個人情報をサーバーに預けず、ブラウザだけで完結する軽量RSSリーダー」です。
シンプルにニュースやブログをチェックできるだけでなく、ヘッダーに現在の天気情報がちょこんと表示される機能を＋αとして搭載しています。
主な特徴
- 完全ローカル完結（Local-First）
- アカウント登録や外部サーバーへのデータ保存は一切なし。
- フィード情報や設定はすべて自分のブラウザ（
localStorage）に安全に保存されます。
- BYOK（Bring Your Own Key）方式
- 天気データなどの外部API利用には、ユーザー自身が取得したAPIキーを入力する仕組みを採用。
- サーバー維持費ゼロ・セキュリティリスクゼロを実現しています。
- スマホアプリ風の洗練されたUI
- Tailwind CSSとFlowbiteを使用しています。
なぜ作ったのか？（開発の背景）
既存のRSSリーダーは高機能で便利な反面、以下の点が少し気になっていました。
- アカウント管理の手間
- サーバー側に自分の閲覧傾向などのデータが残るプライバシー上の懸念
- 有料プランはできるだけ避けたい人がいること
そこで、「データも権限もすべてユーザー自身が所有し、無駄な中継サーバーを挟まない仕組みにすれば、一生無料で安全に使い続けられるのでは？」と考え、JavaScript（Vanilla JS）とTailwind CSS（初期はMaterializeで開発）で一から構築しました。
こだわりのポイント
ユーザー主導のアプリであること
天気情報の取得にはOpenWeatherMapのAPIを利用していますが、アプリ側で共有のキーを持たず、ユーザーに自身のキーを入れてもらう構成にしました。
- メリット
- 運営コストを抑えられる
- APIキーへの不正アクセスの心配がほぼ不要
- デメリット
- 最初の登録に少し手間がある（後ほど解説）
天候によって表情を変えるUI
天気の詳細モーダルは、その時の天候（晴れ・夜・雨・雪など）に合わせて背景のテーマカラーが動的に変化します。RSSチェックのついでに、少しワクワクするような体験を目指しました。
天気の都市は、世界各地の主要都市（日本だと東京や大阪、名古屋、札幌など、アメリカだとクパティーノやニューヨークなど、シンガポール、モスクワ、パリなど）に対応しています。
大変だった点
基礎を一度作り変えた
ここが開発中で最も大変なポイントでした……！
最初は Materialize CSS を使って構築していたのですが、作っていくうちにデザインの拡張性やカスタマイズ性に限界を感じ、Tailwind CSS + Flowbite への移行を決断。
コードを一度バラバラにして作り直す作業となり、生成AI（AIアシスタント）と共にコードの移行を進めたものの、途中でAIが想定外の書き換えをしたりハルシネーションを起こしたりと悪戦苦闘。それでも粘り強くデバッグを重ね、なんとか理想の完成形まで持ち込むことができました！
OpenWeatherMapの無料APIキー取得方法
このRSSリーダーの天気表示機能を使うには、OpenWeatherMap（無料）のAPIキーが必要です。数分で簡単に取得できるので、以下の手順でお試しください。
Step 1: 無料アカウントを作成する
- OpenWeatherMap 公式サイトにアクセスします。
- 以下の項目を入力してアカウントを作成します。
- Username: ユーザー名（英数字）
- Email: メールアドレス
- Password: パスワード
- いくつかあるチェックボックスすべてにチェックを入れます。
- 「Create Account」ボタンをクリックします。
Step 2: メール認証を完了させる
- 登録したメールアドレス宛に OpenWeatherMap から確認メールが届きます。
- メール内の
Verify your emailボタン（または認証リンク）をクリックして認証を完了させます。
Step 3: APIキーを取得・コピーする
- ログイン後、画面右上のユーザー名をクリックし、メニューから 「My API keys」 を選択します。
- 「Key」 の欄に長めのアルファベットと数字の文字列（例:
a1b2c3d4e5...）が表示されているので、これをコピーします。
※自分で新しいキーを発行したい場合は、右側の Create key から新しい名前をつけて生成することもできます。
Step 4: RSSリーダーアプリに入力する
- サイドバーから、設定 > 天気設定 にアクセスします。
- コピーしたAPIキーを「API Key」入力欄に貼り付けて「保存する」を押します。
- お好みで地域名（例:
TokyoやOsaka）を設定すれば、ヘッダーに現在の天気が自動で表示されます！
注意： アカウントを作成したばかりの初期キーは、登録直後だと キー無効（401エラー） になることがあります。有効化されるまで20分ほどかかる場合があるため、うまく表示されない場合は少し時間をおいてから再度お試しください。
まとめと今後の展望
今回のアプリは一般公開しています。「サーバーに頼らずブラウザの力で自律して動かす」という設計思想（Local-First）の快適さを改めて実感しました。
