now-reading-page

ユーザーが現在読んでいるものや最近読んだものを表示する、美しいスタンドアロンの HTML ページを生成します。出力は、ブラウザーで開いたり、個人サイトでホストしたりできる単一の HTML ファイルです。

Readwise へのアクセス

Readwise MCP ツール（例：mcp__readwise__reader_list_documents）が利用可能か確認してください。利用できる場合は、全体を通してそれらを使用し、このコンテキストをサブエージェントにも渡してください。利用できない場合は、代わりに同等の readwise CLI コマンド（例：readwise list、readwise read <id>）を使用してください。以下の手順で MCP ツール名が示されている場合は、必要に応じて CLI の同等コマンドに読み替えてください。

手順

Task サブエージェントを起動して、すべてのデータの取得と HTML ファイルの生成を行います。サブエージェントは次の手順に従います。

1. データを取得する

以下をすべて並行して実行します。

• Shortlist： location="shortlist"、limit=50、response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"] を指定して mcp__readwise__reader_list_documents を実行
• Later： location="later"、limit=50、response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"] を指定して mcp__readwise__reader_list_documents を実行
• Inbox： location="new"、limit=50、response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"] を指定して mcp__readwise__reader_list_documents を実行
• Archive の 1 ページ目： location="archive"、limit=50、response_fields=["title", "author", "category", "reading_progress", "last_opened_at", "image", "url", "site_name", "saved_at", "word_count"] を指定して mcp__readwise__reader_list_documents を実行

2. Archive を十分にページネーションする

最初の Archive の取得後、nextPageCursor を使ってさらにページを取得します（各ページの limit=50）。読書ヒートマップが 6 か月分をカバーできるよう、少なくともあと 6 ページ（合計約 350 件）を取得してください。last_opened_at が 6 か月以上前の最古の項目に達するか、ページがなくなるまでページネーションを続けます。

3. 分類する

取得したデータから、次の 2 つのリストを作成します。

• 現在読んでいるもの： Shortlist、Later、Inbox の項目のうち、reading_progress が 0.05 から 0.99 の間（読み始めていて、まだ読み終えていないもの）。last_opened_at の降順で並べ替えます。
• 最近読んだもの： Archive の項目のうち、reading_progress が 0.9 を超えるもの（実際に読み終えたもの）。last_opened_at の降順で並べ替え、月ごとにグループ化します。データがある月はすべて表示します。

また、ヒートマップ用に、reading_progress が 0.9 を超える Archive 項目の last_opened_at の日付をすべて収集します。

「次に読むもの」セクションはありません。 ユーザーが読んでいるもの、または読んだものだけを表示してください。

4. HTML を生成する

現在の作業ディレクトリに now-reading/ ディレクトリがなければ作成し、HTML ファイルを now-reading/index.html に書き込みます。

デザインの方向性： 温かみのあるセピア調のエディトリアルデザインです。メディアダッシュボードではなく、個人の読書記録をイメージしてください。

フォント： Google Fonts の Newsreader（見出し用セリフ体）と DM Sans（本文用サンセリフ体）を使用します。<link> タグで読み込みます。

カラーパレット（CSS 変数）：

--bg: #f6f1eb          (warm parchment background)
--surface: #ede6dc     (card/heatmap empty cell background)
--surface-hover: #e4dbd0
--border: #d9d0c4
--text: #4a4239        (main body text)
--text-muted: #8a7e72
--text-dim: #b0a597
--heading: #2c251e
--accent: #a0724a      (warm brown — progress bars, active states)
--accent-dim: rgba(160, 114, 74, 0.12)

レイアウト： 最大幅 760px で中央揃え。レスポンシブ対応。

セクションの順序：

1. ヘッダー： Newsreader の大きく細いウェイトで「What I'm reading」を表示します。サブタイトルは「Powered by Readwise Reader」とし、アクセントカラーのリンクを付けます。

2. 現在読んでいる本 — 小型大文字のセクションラベルを付けます。CSS グリッド（repeat(auto-fill, minmax(160px, 1fr))）を使ったカードギャラリーで、コンテナいっぱいにカードを配置します。各カード：

   • aspect-ratio: 3/2、角丸、ホバー時に浮き上がる効果
   • 利用可能な場合は表紙画像（image フィールド）を表示します。ない場合はグラデーションのプレースホルダーを表示します（タイトルのハッシュ値から色相を決定）。
   • 下部に暗いグラデーションのオーバーレイを重ね、白いタイトルと著者名を表示します。
   • カード下部に進捗バーを表示します。高さ 5px のトラック（半透明の暗色）に、アクセントカラーの塗りつぶしを設定します。
   • カードから Reader の URL にリンクします。

3. 読書アクティビティ — コンテナ幅いっぱいに広がる GitHub 風のヒートマップです。CSS flex を使い、週とセルに flex: 1 を指定して引き伸ばします。温かみのあるアンバー系のカラースケール（rgba(160, 114, 74, 0.2/0.4/0.65/1.0)）を使います。月ラベルを上部に、曜日ラベル（Mon/Wed/Fri）を左側に表示します。6 か月分を表示します。

4. 最近読んだもの — JavaScript で切り替えられるカテゴリーフィルターピル（All、Articles、Books、Tweets、RSS、Email）を表示します。続いて、月ごとにエントリーをグループ化します（例：「FEBRUARY 2026」を小型大文字で表示）。各エントリーは次の要素を含む行として表示します。

   • 左側に日付（等幅数字、控えめな色）
   • カテゴリーの絵文字（📄 記事、📚 本、🐦 ツイート、📰 RSS、✉️ メール、🎬 動画、🎙 ポッドキャスト、📑 PDF）
   • タイトル（リンク付き、ミディアムウェイト）と著者／ソース（控えめな色、小さめ）

スタイルに関する注意：

• すべての CSS は CSS 変数とともに <style> タグ内に記述します。
• セクションに、ページ読み込み時にふわっと上がる控えめなアニメーションを付けます。
• セクション間に区切り線（1px solid var(--border)）を入れます。
• レスポンシブ対応：モバイルではカードを 2 列のグリッドで表示します。

5. 結果を返す

生成した HTML ファイルの絶対パスと、現在読んでいるものの数、最近読んだものの数、アクティビティデータの日付範囲の概要を返します。

サブエージェントからの応答後

1. ファイルを生成したことと、その保存先をユーザーに伝えます。
2. ブラウザーで開くかどうかを確認します：open now-reading/index.html
3. 調整したい点があるか尋ねます。