個人的に運用している各種ブログの投稿情報(RSS)を集約するサイトをNext.jsとVercelで展開しました
はじめに
現在、個人的に管理運営しているブログプラットフォームが幾つかあり、用途や目的別にそれぞれを書き分けています。
| プラットフォーム | 用途目的 | URL |
|---|---|---|
| Zenn | 仕事周り、主に技術方面 | しんやさんの記事一覧 - Zenn |
| note | 仕事周り、主に非技術方面 | しんや｜note |
| はてなブログ | 仕事以外、雑記など | shinyaa31 blog |
投稿情報はそれぞれ管理しつつも投稿量が増えてくるとそのメンテナンスも煩雑になってきます。何より他者に投稿情報を共有するのがメンテナンス以上に大変になっていくのは想像に難くないでしょう。ということでまとめてこの辺の情報を管理出来るソリューションが無いものか...と探してみたところそのものズバリの素晴らしいものがありました。catnoseさん謹製のこちらのエントリで紹介されているGitHubリポジトリを活用することでやりたいことが実現出来そうです。
実際、企業レベルでこの仕組みを活用・展開しているところも散見されます。今回はこの仕組みを個人レベルで導入・活用していこうというお話です。当エントリではNext.jsアプリケーションの導入、Vercel環境へのデプロイ、及びClaude Codeで個人好みの体裁に改修を加えた点について紹介します。
環境準備
上記catnoseさんのエントリを参考にまずはローカル端末(masOS/Apple M4)で動作させるための動作環境を準備。
npmの導入：
% npm --version
11.6.0
yarnの導入：
% npm install -g yarn
% yarn --version
1.22.22
gitの導入：
% git --version
% git version 2.50.1 (Apple Git-155)
Privateリポジトリとして管理展開し、まずは素のままでアプリケーションが稼働するか確認します。
yarnインストール：
% git clone git@github.com:shinyaa31/shinyaa31-blog-hub.git
% cd shinyaa31-blog-hub
## yarnインストール
% yarn install
yarn install v1.22.22
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
✨ Done in 68.97s.
yarnビルド：
## yarnでbuildコマンド実行.
% yarn build
yarn run v1.22.22
$ run-s build:posts build:next
$ ts-node --project tsconfig.builder.json ./src/builder/posts.ts
$ next build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
info - Checking validity of types
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (11/11)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 757 B 88 kB
├ /_app 0 B 73.5 kB
├ ○ /404 781 B 74.2 kB
├ ○ /about 1.21 kB 74.7 kB
├ ○ /members 10.2 kB 83.7 kB
└ ● /members/[id] 3.03 kB 90.3 kB
├ /members/catnose
├ /members/john_doe
├ /members/amanda
└ [+3 more paths]
+ First Load JS shared by all 73.5 kB
├ chunks/framework-5f4595e5518b5600.js 42 kB
├ chunks/main-51c020f07404c01a.js 27.7 kB
├ chunks/pages/_app-bcbcad744f6be93a.js 2.93 kB
├ chunks/webpack-d7b038a63b619762.js 771 B
└ css/759b284521dfa05c.css 1.93 kB
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
✨ Done in 9.93s.
yarn dev実行(サーバ起動)：
% yarn dev
yarn run v1.22.22
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
event - compiled client and server successfully in 647 ms (161 modules)
wait - compiling /404 (client and server)...
event - compiled client and server successfully in 62 ms (170 modules)
https://localhost:3000/ にブラウザアクセスすることでサンプルアプリケーションの稼働を確認出来ました。
アプリケーション設定変更
収集・閲覧したいプラットフォームの内容と、アプリケーションの設定に手を入れます。
著者及びRSSフィードの設定
プロジェクト配下に存在するファイルを改修し、収集したい情報が含まれているRSSフィードの情報と、そのRSSフィードを管理するエントリの管理者＝著者の情報を反映します。
今回は著者＝私(しんや/shinyaa31)のみ。members.tsの内容を、収集したいエントリのRSSデータを含めて設定を変更・保存しました。
% vi members.ts
import { Member } from "@src/types";
export const members: Member[] = [
{
id: "shinyaa31",
name: "しんや",
role: "WebMaster",
bio: "Blogger, Engineer.",
avatarSrc: "https://pbs.twimg.com/profile_images/870282332762013696/Hn4DEpzy_400x400.jpg",
sources: [
"https://zenn.dev/shinyaa31/feed",
"https://note.com/shinyaa31/rss",
"https://shinyaa31.blog/rss",
"https://dev.classmethod.jp/author/shinyaa31/feed/"
],
twitterUsername: "shinyaa31",
websiteUrl: "https://shinyaa31.jp/"
}
];
サイト設定
次いでサイト設定の変更。site/config.tsの内容を若干アレンジを加える形で修正しました。
% vi members.ts
export const config = {
siteMeta: {
title: "shinyaa31's Blog Hub",
teamName: "shinyaa31.",
description: "RSS based blog starter kit for shinyaa31(しんや).",
},
siteRoot:
process.env.NODE_ENV === "production"
? "https://team-blog-hub.vercel.app"
: "http://localhost:3000",
headerLinks: [
{
title: "About",
href: "/about",
},
{
title: "Profile",
href: "https://shinyaa31.jp/",
},
{
title: "Spacial Thanks",
href: "https://zenn.dev/catnose99/articles/cb72a73368a547756862",
},
],
};
yarn build&yarn devコマンド実行でアプリケーションをリロード、変更した内容で表示されればOK。一旦ここまでの内容をGitリポジトリに反映させました。
Claude Code経由でアプリケーション改修
基本的な動作、確認事項であれば上記手順で要件は満たせているのですが、せっかくならばより使いやすくしたいところです。ここはClaude Codeを活用することでがしがしVibe Codingしちゃいましょう。
gitリポジトリ配下でclaudeコマンドを実行し、会話しながらやりたいことを進めていきます。
実際行った作業(改修内容)は以下。「やりたいこと」「実際の改修作業」までをClaude Codeに進めてもらい、改修内容の確認とソースコードへの反映は私自身の手で行いました。
- サイトの色味(背景色&文字色)を黒基調から白基調に変更
- 記事表示レイアウトを2列から1列に変更
- エントリごとの情報に『投稿日時』をJST表記で追加
- エントリごとの表示領域にアイキャッチ画像を追加
- Zennエントリの記事内TOPの画像をアイキャッチ画像として表示するように変更
- サイト説明文を修正
- 日付範囲による絞り込み検索機能を追加
- 絞り込み検索条件にブログ種別を追加(Zenn/note/はてなブログ)
適宜Claude Codeとの会話やり取り、動作確認を行い最終的には以下のような見た目、機能実装まで完了。1〜2時間程度で大方やりたいことが実現出来てました。素敵。
WebアプリケーションとしてVercel環境へデプロイ
作成したアプリケーションをパブリックでアクセス出来るように外部サービス環境に展開します。今回はVercelを利用することにしました。最低限利活用が出来れば良いので無料のHobbyプランで進めました。
Vercelアカウント作成&ログイン以降、実施した手順は以下の通り。
Vercelアカウント作成&ログイン
公式TOPページの[Sign Up]からアカウント作成及びログインを実施。
プロジェクト作成
Vercelログイン後、画面メニュー(左上)ボタンより[Add New...]→[Project]を選択。
GitHubリポジトリ連携
- VercelアカウントとGitHubリポジトリの連携設定を進めます。
上記設定で利用したGitHubアカウントとの連携を行い、
対象となるリポジトリのみ有効にする形で指定。
対象リポジトリをVercel環境にインポートしていきます。[import]を選択し、
必要な設定を加えます。特に凝ったことをするつもりも無かったので基本はそのままで進めました。
程なくして取り込み完了。
デプロイが完了したWebアプリケーションにアクセスしてみます。良い感じで動いています！
ちなみに、ここまでの設定を済ませておくことで『アプリケーションの改修』時にはリポジトリへの反映が完了した時点で、自動でVercel環境がリポジトリの変更内容をアップデート(再デプロイ)してくれるようになります。素敵。
まとめ
という訳で、個人運用しているブログプラットフォームの投稿情報をRSSフィードを元に集約し、一括表示可能なサイトを展開したお話でした。RSSフィードの情報さえあれば非常に少ない労力でここまで出来るのはとてもありがたいですね。catnoseさんに大感謝です。また、生成AIエージェント(今回はClaude Code)を活用することでアレンジも非常に効率良く短時間で済ませることが出来ました。これもありがたい点ですね。
表向き、パブリックな形で投稿情報を集約、公開する分にはこの対応で十分過ぎる、満足行く対応が出来たと思います。今後は投稿情報に関わる詳細な情報(プラットフォーム毎の投稿本数、エントリ個別のPVやSNS関連情報など)をプラットフォームを横断する形で集約、分析可能な環境を並行して整備していきたいと思います。
Discussion