ClaudeCodeLab
Use Cases

Claude Code के साथ RSS Implementation

Claude Code का उपयोग करके rss implementation सीखें। Practical tips और code examples शामिल हैं।

RSSフィードでブlogの読者獲得を加速する

RSSフィードを提供する बातで、ブlog記事のupdateをRSSリーダーで購読してもらえ है।Claude Code का उपयोग करके、RSS 2.0やAtomフィードのgenerateをकम समय मेंimplementationでき है।

basic RSSフィードgenerate

> ブlog記事のRSSフィード generateするendpointをबनाओ。
> RSS 2.0形式で、最新20件の記事を配信して。
// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';

const parser = new MarkdownIt();

export async function GET(context: { site: string }) {
  const posts = await getCollection('blog');
  
  const sortedPosts = posts
    .filter(post => !post.data.draft)
    .sort((a, b) => 
      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
    )
    .slice(0, 20);

  return rss({
    title: 'My Tech Blog',
    description: 'Webdevelopmentに関する技術ブlog',
    site: context.site,
    items: sortedPosts.map(post => ({
      title: post.data.title,
      pubDate: new Date(post.data.pubDate),
      description: post.data.description,
      link: `/blog/${post.slug}/`,
      content: sanitizeHtml(parser.render(post.body), {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
      }),
      categories: post.data.tags,
    })),
    customData: `<language>ja</language>`,
  });
}

Atomフィードのimplementation

// src/pages/atom.xml.ts
import { getCollection } from 'astro:content';

export async function GET() {
  const posts = await getCollection('blog');
  const siteUrl = 'https://example.com';

  const sortedPosts = posts
    .filter(p => !p.data.draft)
    .sort((a, b) => 
      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
    )
    .slice(0, 20);

  const atom = `<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>My Tech Blog</title>
  <link href="${siteUrl}/atom.xml" rel="self"/>
  <link href="${siteUrl}"/>
  <id>${siteUrl}/</id>
  <updated>${sortedPosts[0]?.data.pubDate ?? new Date().toISOString()}</updated>
${sortedPosts.map(post => `  <entry>
    <title>${escapeXml(post.data.title)}</title>
    <link href="${siteUrl}/blog/${post.slug}/"/>
    <id>${siteUrl}/blog/${post.slug}/</id>
    <published>${post.data.pubDate}</published>
    <summary>${escapeXml(post.data.description)}</summary>
    <category term="${post.data.tags?.[0] ?? ''}" />
  </entry>`).join('\n')}
</feed>`;

  return new Response(atom, {
    headers: { 'Content-Type': 'application/atom+xml; charset=utf-8' },
  });
}

function escapeXml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

HTMLheaderへのフィードlinkadd

<head>
  <link rel="alternate" type="application/rss+xml" 
        title="RSS Feed" href="/rss.xml" />
  <link rel="alternate" type="application/atom+xml" 
        title="Atom Feed" href="/atom.xml" />
</head>

カテゴリ別フィードのgenerate

// src/pages/rss/[category].xml.ts
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  const categories = [...new Set(posts.map(p => p.data.category))];
  
  return categories.map(category => ({
    params: { category },
  }));
}

export async function GET({ params, site }: { params: { category: string }; site: string }) {
  const posts = await getCollection('blog');
  const filtered = posts
    .filter(p => p.data.category === params.category && !p.data.draft)
    .sort((a, b) => 
      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
    );

  // RSSgenerateロジック（カテゴリ名をタイトルに含める）
  return generateRss({
    title: `My Tech Blog - ${params.category}`,
    posts: filtered,
    site,
  });
}

フィードのvalidation

generateしたRSSフィードがसही形式か、W3C Feed Validation Serviceでconfirmでき है।

> RSSフィードのvalidationtestを書いて。
> XMLの構造とRSS 2.0仕様に準拠しているかconfirmして。
import { describe, it, expect } from 'vitest';
import { XMLParser } from 'fast-xml-parser';

describe('RSS Feed', () => {
  it('有効なRSS 2.0形式である बात', async () => {
    const response = await fetch('http://localhost:4321/rss.xml');
    const xml = await response.text();
    const parser = new XMLParser();
    const result = parser.parse(xml);

    expect(result.rss).toBeDefined();
    expect(result.rss.channel.title).toBeTruthy();
    expect(result.rss.channel.item.length).toBeGreaterThan(0);
    expect(result.rss.channel.item.length).toBeLessThanOrEqual(20);
  });
});

Summary

RSSフィードのimplementationは、ブlog読者の獲得とリテンションに大きく貢献し है।Claude Code का लाभ उठाकर、SEO対策 के साथ combineてサイトの発見性を高められ है।サイトマップと一緒にbuild時に自動generateするsettingsを推奨し है।フィードの仕様के बारे मेंはRSS 2.0 Specificationをदेखें。

#Claude Code #RSS #Atom #フィード #blog

Related Posts