現在使われているviteのプロジェクトをnextjsに差し替えてください。export.xml以外は全て削除しても構いません。 LLR Readerは、3ペインのRSSリーダーにする予定です。 LivedoorReaderが採用していたようなデザインにしたいですが、これは後で決めます。 一旦は、空のページを作成します。 フレームワークとして、Next.jsを採用してください。 CSSのフレームワークとしては、tailwind.cssを採用してください。 formatとlintにはbiomeを使います。 プログラムの開発終了後、formatとlintを必ず実行するようにしてください。 では、3ペインRSSリーダーを作成します。 RSSを呼び出すための情報源はexport.xmlを参照する形にします。src/export.xmlをpublicディレクトリに入れてそこから呼び込む仕組みにしてください。 RSSリーダーのデザインは、LivedoorReaderのような３ペイン構造にします。 左ペインには、各種ウェブサイトのタイトルと、未読記事の数が表示されます。 右上ペインには、ウェブサイトの記事一覧が表示されます。 右下ペインには、実際のウェブサイト記事が表示されます。 左ペインの操作は、マウスまたはキーボードでの操作になります。 キーボードのaキーを押すと、上のウェブサイトへ、sキーを押すと下のウェブサイトへ、移動します。 ウェブサイトを移動すると、右上ペインの記事一覧が更新されます。 右上ペインの操作もマウスまたはキーボードで操作します。 キーボードのkキーを押すと、上の記事へ、jキーを押すと下の記事へ移動します。 記事を移動すると、右下ペインのウェブサイト記事が更新されます。 スペースキーを押すと、右下ペインのスクロールダウンをするようにしてください。shift+スペースキーの場合は、スクロールアップ するようにしてくだしあ。 ページ全体にヘッダーが欲しいです。ヘッダーにはLLRと表示して下さい。 ３ペイン表示でなくなってしまいました。 ヘッダー 左ペイン　右上ペイン 　　　　　右下ペイン フッター このような構造にしたいです。 ヘッダーとフッターは画面内に収まるようにします。 ヘッダーとフッターに挟まれたコンテンツ部分は、スクロール可能なようにしてください。 右下ペインが表示されていません。高さ調整が失敗しているようです。直してください。 Footerの年数部分を2024-2026のように、現在の西暦年まで表記するようにしてください。固定の文字列ではなく、計算で、2026の部分を表示するようにしたいです。new Dateをして、getFullYearで取得した値を設定するようにします。 export.xmlの中身を精査するtoolを作りたいです。toolディレクトリを作成し、export.xmlの中身を精査してください。 データにアクセスできなかったり、URLが存在しないデータについては排除して、新たなexport.xmlを生成するようにしたいです。 export.xmlから、特定のキーワードを含むURLを除くツールを作成したいです。 例えば、twitterやfavotterというキーワードを含むURLを除外するイメージです。 今回、アイコンを追加しました。追加したアイコンに合わせて、faviconやmanifest.jsonを生成してください。 ありがとうございます。次は、アプリのパフォーマンスを向上させたいです。Lighthouseで点数が低くなるような処理について対応してください。 ヘッダーのLLRの所にアイコンを表示するようにしてください。 iframeで表示しようとするとエラーになるページが多くなっています。 RSSのaritcleを表示するように修正してください。 Shift-JISまたは、euc-jpで配信されているRSSが文字化けしています。RSSの文字コードを見て、UTF-8に変換するように修正してください。 次に、oキーを押下すると記事ページをバックグラウンドタブで開く機能を追加してください。 sキーやaキーを押した時に、Subscriptionsのスクロールをコントロールしてください。現在選んでいるフィードがトップに来るようにスクロールしてください。 現在のRSSデータを何かにキャッシュして一度読み込んでいたらそのキャッシュから取得するような処理にしたいです。どのような方法があるか検討してください。 では、IndexedDBを使った永続キャッシュを実装してください。ただし、ユーザが何かしらの方法で初期化する機能も欲しいです。cキーを押したら、IndexedDBのキャッシュをクリアするかどうかのダイアログを表示して、はいを選んだ時はキャッシュをクリアし、いいえを選んだ時はダイアログを非表示にしてください。 先読み機能も追加したいです。service workerで、今開いているフィード以降のフィードを先読みしてIndexedDBに保存する処理も追加してください。 操作方法を表示したいです。？キーを押下すると、操作方法一覧がダイアログ表示されるようにしてください。そのダイアログはESCキーまたはCtrl+[を押下すると消されるようにしてください。 文字サイズを変更する機能が欲しいです。 <キーを押すと文字を小さく、>キーを押すと文字を大きくするようにしてください。 一番小さい文字サイズは、text-base、一番大きい文字サイズはtext-6xlになるようにしてください。 文字サイズに関しては、システム全体で同じ文字サイズを共有するようにしたいです。 データをlocalStorageに残すようにしますが、ライブラリとしてjotaiを使うようにしてください。 jotaiのインストールにはbunを使ってください。 ヘルプの説明文を日本語に翻訳してください。 文字サイズ変更は、システム全体に適用してください。すなわち、フィード、記事一覧、記事全体に対してです。ヘッダーとフッター及びヘルプの説明文には文字サイズ変更は適用しなくても問題ありません。 次に、いくつかのフィードをexport.xmlから除外するスクリプトを作成します。 rssをパースして、取得したarticlesが0件のフィードはexport.xmlから除いてください。 ただし、URLに以下の文字列が含まれていたら、articles取得をせずに無条件で削除してください。 blog.excite.co.jp my.opera.com d.hatena.ne.jp LLRのアイコンの背景色と同じ色にヘッダーの背景色を変えてください。また、テキストも白から黒にしてください。 SubscriptonsをFeedsに変更してください。 また、sキーやaキーを押した時、ArticlesにSubscriptionsのタイトルを表示するようにしてください。 `Articles - ${blogTitle}` イメージはこのような感じです。 デザインを変更します。現在3ペインですが、2ペインにします。 記事のタイトルを表示していた部分を拡張し、記事のタイトル＋記事の本文の表示にします。 記事本文を表示していた部分は削除してください。 2ペイン変更に伴い、キーボードの動作も変わります。 j/kを押下すると、記事単位でスクロールするようにします。 スペースキーを押下すると、ページダウン、Shift+スペースキーでページアップの動きをするようにしてください。 想定と違います。 記事のタイトル＋記事の本文を最初からすべて表示するようにしてください。 1記事ではなく、RSSで読み込んだ記事と本文全てを表示します。 スペースキーの動作を変更したいです。 スペースキーを押下してスクロールしていくと、記事Indexが表示位置の記事に変わるようにしてください。 現状は、表示位置との連動がされていないので、行き過ぎた記事で、jキーを押すと上にスクロールしてしまい、気持ち悪い挙動をします。 また、タイトルの背景色を変えて、視認性を上げてください。 次に、検証をして欲しいです。 今、RSSの読込はapp/api/proxy/route.ts経由で読み込んでいます。通常のfetchでの読込が可能かどうか検証してください。 すなわち、サーバ側ではなく、クライアント側（ブラウザ側）だけで完結するかどうかを試して欲しいです。 例えば、serviceworker内で外部サイトのRSSの読込ができるのかどうかなど検証して欲しいです。 もし、それが可能であるならば、RSSの読込処理をクライアントサイトで完結するように修正してください。 もし、それが不可能であるならば、代替としてどのような処理が考えられるか教えて下さい。 調査ありがとうございます。 今、vercelにこのアプリを置く予定なのですが、hobbyプランだと何アクセスまでだったら、賄えるでしょうか。 例えば、一般公開していろいろな人がこのRSS Readerを使うと想定して、何人までだったら許容できますか？ やはり、そうですよね。 例えば、フロントエンド部分とバックエンドを分離して開発すると、この点の解消ができるのかなと考えています。 フロントエンドはViteに切替ほとんどstatic htmlにし、バックエンド（＝RSSを読み込み部分）はcloudeflare workersを使うという設計に変更した場合、どれぐらいのユーザまでが許容可能でしょうか。 今は、public/export.xmlを固定で読み込んでいますが、例えば、ユーザからのopmlファイルをドラッグ＆ドロップでlocalStorage等に保存して動作させるみたいな事をしてみたいです。 では、プロジェクトを分けましょう。バックエンド処理に関しては、新たにレポジトリを作成してcloudflare workersで起動するような設計にしたいです。最初にそういう指示を出すためのmarkdownをdocument/backend.mdに出力してください。 それのmarkdownファイルを元に、新たなレポジトリを作成します。 cloudflareにdocument/backend.mdに基づいたworkersを作成しました。 URLは下記になります。 https://llr-cf-workers.arc-6e4.workers.dev/ この機能を元に、フロントエンドのフレームワークとしてNext.jsを使っていましたが、これの使用をやめます。 代りに、Viteに切り替えてください。 そして、RSS呼び出しに関しては上記のcloudflare workesを利用してください。 https://github.com/ArcCosine/LLR-cf-workers/blob/main/README.md ↑ここに仕様が書いていますので、この仕様に沿って実装してください。 VITE_RSS_API_BASE_URLを設定するようにしたいです。.envファイルを作成し、VITE_RSS_API_BASE_URLを設定してください。値はhttps://llr-cf-workers.arc-6e4.workers.dev/です。 現在のApp.tsxはかなり巨大なコンポーネントになってしまっています。機能ごとに切り分けて、src/components以下に新たに分割してください。 現在、Viteのバージョン7を採用していますが、最新バージョンである、Vite8を使うようにしたいです。マイグレーションしてください。 次は、AritclePaneのarticle.pubDateの日付表示を修正したいです。現在はそのまま出していますが、日本人にとって理解しやすいフォーマットにします。yyyy年MM月dd日 mm時ss分というフォーマットに切り替えてください。日付変換ライブラリとして、date-fnsを採用してください。 ありがとうございます。次は、sキーやaキーの挙動です。sキーやaキーを押下したら、記事Indexを初期化してください。前の記事Indexが残っていると不自然に感じます。 どうやら、スクロール位置も記録しているようです。こちらもリセットしてもらえますか？ 次に、現在public/export.xmlから呼び出していますが、この呼び出しをやめてください。 public/export.xmlは、document/export.xmlへ移動してください。 次に、画面にexport.xmlのようなopmlファイルがドラッグ＆ドロップされるとそれを読み込んでRSSを表示できるようにしてください。 初期状態では、読込領域を表示して、そこに視覚的にドラッグ＆ドロップしたくなるようにしてください。 また、読み込んだopmlファイルは、IndexedDBに保存するようにしてください。 IndexedDBが存在しているならば、読込領域の表示は不要です。 読込領域を表示するためのボタンをヘッダーの右端に追加します。 そのボタンを押すと、読込領域を表示するようにします。 そこに新たにopmlファイルがドラッグ＆ドロップあるいはファイル読み込みがされたら、既存のIndexedDBを削除してそのopmlファイルをIndexedDBに保存するようにしてください。 文言を修正したいです。 export.xmlのようなという文言は削除してください。 ClearCacheDialogの文言を日本語に差し替えてください。また、このダイアログはyキーを押すと、yes。nキーまたはESCキーを押すとnoの挙動をするように修正してください。 では最後に、このプロジェクトをcloudflare pagesへdeployできるように環境構築してください。 現在、opmlファイルを読込、フィード一覧を表示できています。このフィード一覧にフィードを追加したり削除したりするUIを新たに作りたいです。 編集用のUIを新たにコンポーネントとして定義し、その中でフィードの追加/削除/編集ができるようにしてください。 保存先は、今まで通りIndexedDBです。 チェックボックス、フィード名、フィードURL、編集ボタン、削除ボタン で構成されるリストを表示するようにしてください。 編集用のUIもキーボードでの操作を前提としたいです。 jキーで、下のフィードへ、kキーで上のフィードへ移動します。 フォーカスがあたっている部分は、その他のリストと色が違っているようにしてください。 最初は0行目にフォーカスを当てます。 eキーでフォーカスがあたっているフィードの編集が可能です。 タイトル、htmlUrl、xmlUrlが編集できるダイアログをさらに表示します。 編集ボタンを押した時、eキーを押した時と同じ挙動をします。 dキーでフォーカスがあたっているフィードの削除が可能です。 削除ボタンを押した時、dキーを押した時と同じ挙動をします。 xキーを押すと、フォーカスがあたっているフィードの選択、選択解除ができます。 複数フィードが選択されている状態で、dキーを押すと、複数個削除します。 一括削除ボタンはヘッダー部分に追加してください。 ESCキーを押すと、ダイアログが表示されなくなります。 削除する時は、一旦confirmするように修正してください。 フィード追加ダイアログは、RSSのパスのみを入力するようにしてください。htmlUrlはそのRSSデータを見て生成するようにしてください。 もし、クライアントサイドでこれが実現できないならば教えて下さい。 フィード管理を開くためのショートカットが欲しいです。mキーを押下すると、フィード管理ダイアログを開くようにしてください。 フィード一覧に関して、最終更新日順に表示するようにしてください。 最終更新日の表示はリアルタイムに行わないでください。 最初の起動時に実行するようにしてください。 OPML出力ボタンを作成してください。IndexedDBに保存されているデータをOPML形式で出力します。 右上の各種ボタンをドロップダウンで表示するようにしたい。 右上には歯車のアイコンを表示し、それをクリックすると、 OPML読込 OPML出力 フィード管理 の順でメニュー表示されるように修正して欲しい。 アイコンに関しては、https://lucide.dev/のアイコンを採用してください。 例えば、このようなフィードや http://sangoukan.xrea.jp/cgi-bin/tDiary/index.rdf このようなフィードのhttps://pc.watch.impress.co.jp/data/rss/1.0/pcw/feed.rdf 日付取得が上手く行っていない。何が原因なのか。 どちらも、の中に、日付が記録されている。 次に、フィード管理画面で、新たにフィードが追加された場合、重複チェックを行なってください。現在同じフィードが重複して登録可能になっています。もし、重複した場合、既にこのフィードは登録済です。更新しますか？のダイアログを出し、更新するを選んだ場合は、今登録したデータを残し、更新しないを選んだ場合は、データ登録しないようにしてください。 記事をjキーやkキーでスクロールして表示すると、スクロール位置が完全にヘッダー部分にくっついて表示されます。 初期状態ではpaddingがあるので、このpaddingを維持した状態でスクロールして欲しいです。 次に、ある記事では、dc:contentタグとdescriptionタグでそれぞれRSSを配信しています。dc:contentとdescriptionが両方存在していた場合、文字数が長い方を表示するように修正してください。 次に、フィードの切替の時の挙動です。たまに、他のフィードの記事が残ってしまうケースがあります。完全に前のフィードの記事を残さないように修正してください。 次は、記事本文の表示部分で、横スクロールが出てしまうケースがあります。これを無くしたいです。 テスト用として、以下のRSSをレンダリングして、チェックしてください。 http://amamako.hateblo.jp/feed その方法では、改善されませんでした。 ArticlePaneで、AritcleContentをwrapしているdivに、 overflow-wrap: break-word; に相当するtailwindcssを当てはめてください。 最後に、feedの先読み機能の修正です。初回起動時のみ、トップフィード上位30件に関して、キャッシュに保存されていたとしても一旦再取得して更新するようにしてください。 理由としては、トップフィード上位30件は更新頻度の高いWebサイトが多いからです。 oキーを押すと、バックグラウンドのタブで開くように修正できませんか？ 現在、初回起動時のみ、トップフィード上位30件を再取得するようにしているのですが、フィードの並び順が取得した日付順になっていません。 こちら対応してください。 App.tsxで、 useEffect(() => { document.title = "LLR Reader"; }, []); という処理がありますが、これは何をする目的で記載されているのでしょうか。 もし、意味が無いようでしたら、削除してください。 文字サイズを大きくする時、2つ不満点があります。 1. 記事タイトルのサイズが固定 →記事タイトルも合わせて大きくしてください。ただし、本文サイズと記事タイトルのフォントサイズの比率は維持してください。 2. line-heightが固定なので、文字を大きくすると、文字が重なって表示されてしまいます。line-heightも合わせてください。 最新記事を読み込んだ後、Feedsの位置が変化してしまっています。これでは操作感に違和感を感じます。 日付更新に関しては内部的に行い、一旦レンダリング済のFeedsはソートし直さないように修正してください。 ただし、初回起動に関しては例外で、上位３０件を読み取った後、日付更新を行い、日付順にソートする機能はそのまま残してください。 Feedsの表示非表示用のボタンが欲しいです。Feeds領域の右下に設置します。アコーディオンのようなアニメーションをしてください。合わせて、キーボードのショートカットキーにもFeedsの表示/非表示機能を付けたいです。fキーをクリックすると、Feedsの表示非表示をするようにしてください。 ボタンの位置を調整したいです。Feedsを開いているときは、FeedsとArticlesの境界線中央にボタンを配置してください。閉じている時は今の場所と同じで構いません。 ボタンが見えなくなっています。また、縦方向に関しては先程のまま、画面下部での表示にしてください。 完璧です！次に、Articlesの右端に、次のフィード、前のフィードへ移動可能なボタンを設置してください。 フィード移動ボタンを右下に配置してください。 フィード移動ボタンの上に、キャッシュクリアボタンを追加してください。キャッシュをクリアするかどうかのダイアログを表示するボタンです。