Vanilla JS でシンプルな RSS フィードウィジェットを作成する
RSS は古いフォーマットですが、ウェブ上でコンテンツを共有するための最良の方法の一つであり続けています。
多くの開発者が RSS フィードを表示するために重いフレームワークを使用していますが、それらは必要ありません。RSS は単なる XML です。ブラウザは追加のライブラリなしで XML をネイティブに読み取ることができます。
Vanilla JavaScript と CSS だけで、クリーンな RSS ウィジェットを構築できます。
手順は以下の通りです：
- Fetch API を使用して XML データを取得する。
- DOMParser を使用して、その XML を検索可能なドキュメントに変換する。
- データを JavaScript オブジェクトにマッピングする。
- データを HTML カードとしてレンダリングする。
CORS エラーに注意してください。サーバーがリクエストをブロックすると、ブラウザがそれを停止させます。テストには allorigins.win のようなプロキシを使用できます。実際のプロジェクトでは、Cloudflare Worker を使用してリクエストを処理してください。
ウィジェットの仕組みは以下の通りです：
• フィード URL を取得する。 • チャネルのタイトルと説明を解析する。 • 各アイテムをループして、タイトル、リンク、日付を取得する。 • レスポンシブなカードのグリッドを作成する。
カテゴリフィルターを追加することも可能です。これにより、ユーザーは Tech や Food などのトピックを選択できるようになります。
この方法は、あらゆる標準的な RSS フィードで動作します。同じページにテック系のフィードやポッドキャストのフィードを追加することもでき、それぞれが独立して動作します。
プロジェクトの次のステップ：
- フィードを最新の状態に保つための自動更新機能を追加する。
- 特定の投稿を見つけるための検索バーを追加する。
- sessionStorage を使用してデータをキャッシュし、高速化する。
- CSS 変数を使用してダークモードを追加する。
プロジェクトに不要なものを詰め込むのはやめましょう。ブラウザに既に組み込まれているツールを活用してください。
出典: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803