"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", li: "li", p: "p", pre: "pre", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "日々の情報収集において、複数のニュースサイトや個人ブログを行き来するのは時間がかかります。この課題を解決するため、RSSフィードからの自動収集・要約・OGP画像生成までをワンストップで行う「News記事収集ツール」を開発しました。本記事ではその設計と実装の詳細を紹介します。" }), "\n", _jsx(_components.h2, { children: "1. 開発の背景と目的" }), "\n", _jsx(_components.p, { children: "複数のメディアを毎日チェックしていると、情報の取捨選択だけで多くの時間を消費します。そこで、以下の機能を備えたWebアプリを自作することにしました。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["複数のRSSフィードからの記事を", _jsx(_components.strong, { children: "自動収集・保存" })] }), "\n", _jsxs(_components.li, { children: ["AI要約による", _jsx(_components.strong, { children: "情報の圧縮と可読性の向上" })] }), "\n", _jsxs(_components.li, { children: ["SNSシェア時に映える", _jsx(_components.strong, { children: "動的OGP画像の自動生成" })] }), "\n", _jsxs(_components.li, { children: ["記事を整理・閲覧できる", _jsx(_components.strong, { children: "直感的なUI" })] }), "\n"] }), "\n", _jsx(_components.h2, { children: "2. 技術スタック" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "項目" }), _jsx(_components.th, { children: "使用技術" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "フレームワーク" }), _jsx(_components.td, { children: "Next.js 15（App Router）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "スタイリング" }), _jsx(_components.td, { children: "Tailwind CSS + shadcn/ui" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "データベース" }), _jsx(_components.td, { children: "Neon + Prisma ORM" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "OGP画像生成" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "@vercel/og" }), "（ImageResponse）"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "デプロイ" }), _jsx(_components.td, { children: "Vercel" })] })] })] }), "\n", _jsx(_components.p, { children: "App RouterのServer Componentsでデータ取得を完結させることで、クライアントへの不要なJavaScript転送を最小限に抑えています。" }), "\n", _jsx(_components.h2, { children: "3. RSSフィードの自動収集" }), "\n", _jsxs(_components.p, { children: ["定期的なRSS取得には、Vercelの", _jsx(_components.strong, { children: "Cron Jobs" }), "を活用しています。指定した間隔でAPIルートを叩き、各フィードの最新記事をDBへ差分保存します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/api/cron/fetch-feeds/route.ts\nimport { NextResponse } from 'next/server';\nimport Parser from 'rss-parser';\nimport { prisma } from '@/lib/prisma';\n\nconst parser = new Parser();\n\nconst FEEDS = [\n { url: 'https://example-news.com/rss', source: 'Example News' },\n { url: 'https://techblog.example.jp/feed', source: 'Tech Blog JP' },\n];\n\nexport async function GET(req: Request) {\n // Cron Jobからのリクエストのみ許可\n const authHeader = req.headers.get('authorization');\n if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {\n return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });\n }\n\n for (const feed of FEEDS) {\n const parsed = await parser.parseURL(feed.url);\n\n for (const item of parsed.items) {\n // 既存記事はスキップ（upsert）\n await prisma.article.upsert({\n where: { url: item.link ?? '' },\n update: {},\n create: {\n title: item.title ?? '(no title)',\n content: item.contentSnippet ?? '',\n source: feed.source,\n url: item.link ?? '',\n pubDate: new Date(item.pubDate ?? Date.now()),\n },\n });\n }\n }\n\n return NextResponse.json({ ok: true });\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "vercel.json" }), " でCronスケジュールを設定します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"crons\": [\n {\n \"path\": \"/api/cron/fetch-feeds\",\n \"schedule\": \"0 * * * *\"\n }\n ]\n}\n" }) }), "\n", _jsx(_components.h2, { children: "4. データベース設計" }), "\n", _jsxs(_components.p, { children: ["Prismaで管理する ", _jsx(_components.code, { children: "Article" }), " モデルの定義です。要約（", _jsx(_components.code, { children: "summary" }), "）やバイアス分類（", _jsx(_components.code, { children: "bias" }), "）はAI処理後に更新するフィールドとして任意にしています。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-prisma", children: "// prisma/schema.prisma\n\ngenerator client {\n provider = \"prisma-client-js\"\n}\n\ndatasource db {\n provider = \"postgresql\"\n url = env(\"DATABASE_URL\")\n}\n\nmodel Article {\n id String @id @default(cuid())\n title String\n content String @db.Text\n summary String? @db.Text\n source String\n url String @unique\n pubDate DateTime\n bias String?\n\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n\n @@index([pubDate])\n @@index([source])\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "url" }), " に ", _jsx(_components.code, { children: "@unique" }), " を付けることで重複保存を防ぎ、", _jsx(_components.code, { children: "pubDate" }), " と ", _jsx(_components.code, { children: "source" }), " にインデックスを張ることで絞り込みクエリを高速化しています。"] }), "\n", _jsx(_components.h2, { children: "5. 動的OGP画像の生成" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "@vercel/og" }), " を使い、記事ページのOGP画像をエッジで動的生成します。X（Twitter）やSlackでリンクを貼ったときに、タイトル・ソース名・日付が表示される見栄えのよいカードが生成されます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/api/og/route.tsx\nimport { ImageResponse } from '@vercel/og';\nimport { NextRequest } from 'next/server';\n\nexport const runtime = 'edge';\n\nexport async function GET(req: NextRequest) {\n const { searchParams } = req.nextUrl;\n const title = searchParams.get('title') ?? 'News記事収集ツール';\n const source = searchParams.get('source') ?? '';\n const date = searchParams.get('date') ?? '';\n\n return new ImageResponse(\n (\n \n

{source}

\n {title}\n

{date}

\n \n ),\n { width: 1200, height: 630 }\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "各記事ページのメタデータでこのAPIを参照します。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/articles/[id]/page.tsx\nexport async function generateMetadata({ params }: Props): Promise {\n const article = await getArticle(params.id);\n\n const ogUrl = new URL('/api/og', process.env.NEXT_PUBLIC_BASE_URL);\n ogUrl.searchParams.set('title', article.title);\n ogUrl.searchParams.set('source', article.source);\n ogUrl.searchParams.set('date', article.pubDate.toISOString().slice(0, 10));\n\n return {\n title: article.title,\n description: article.summary ?? article.content.slice(0, 120),\n openGraph: {\n images: [{ url: ogUrl.toString(), width: 1200, height: 630 }],\n },\n };\n}\n" }) }), "\n", _jsx(_components.h2, { children: "6. 記事一覧UIの実装" }), "\n", _jsx(_components.p, { children: "Server Componentsで記事を取得し、クライアントコンポーネントで検索・フィルタリングを行う構成にしています。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/articles/page.tsx\nimport { prisma } from '@/lib/prisma';\nimport { ArticleList } from './_components/ArticleList';\n\nexport default async function ArticlesPage() {\n const articles = await prisma.article.findMany({\n orderBy: { pubDate: 'desc' },\n take: 100,\n select: {\n id: true,\n title: true,\n summary: true,\n source: true,\n url: true,\n pubDate: true,\n bias: true,\n },\n });\n\n return (\n

最新ニュース

\n \n

\n );\n}\n" }) }), "\n", _jsx(_components.h2, { children: "7. 今後の展望" }), "\n", _jsx(_components.p, { children: "現在対応しているのはRSSフィードのみですが、以下の機能追加を予定しています。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "RSSフィード以外のスクレイピング対応" }), " — RSSを提供していないサイトへの対応"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "バイアス自動判定" }), " — 記事の論調をAIで分類し、複数の視点から情報を比較"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "記事ランキング機能" }), " — 閲覧数・シェア数をもとにトレンド記事を表示"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "モバイル向けUIの最適化" }), " — スマートフォンからの快適な閲覧体験"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "管理画面からの手動投稿" }), " — RSSに登録されていない記事を手動で追加"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "まとめ" }), "\n", _jsx(_components.p, { children: "今回開発したNews記事収集ツールのポイントを振り返ります。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Vercel Cron Jobs" }), " でRSSフィードを定期取得し、", _jsx(_components.code, { children: "upsert" }), " で重複を防ぐ"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Prismaのインデックス設計" }), " で大量記事でも高速な絞り込みを実現"] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "@vercel/og" }), " のエッジ生成"] }), " でSNSシェア時の見栄えを大幅に向上"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Server Components + Client Components の分離" }), " でパフォーマンスと操作性を両立"] }), "\n"] }), "\n", _jsx(_components.p, { children: "情報収集の効率化に興味がある方や、OGP動的生成・Cron Jobsの実装を検討している方の参考になれば嬉しいです。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

News記事収集ツールを作成しました