はじめに
こんにちは、Taichi Endohです。
前回までは「最強の城」としてのアーキテクチャを整えてきましたが、今回はその中身を**「生きているシステム」**へと進化させました。
具体的には、記事データの管理をファイルベース(MDX)からデータベース(PostgreSQL)へ移行し、さらにAIによる自動翻訳とX(旧Twitter)への自動投稿を実装しました。
「記事を書く」という行為だけで、あとはシステムが勝手に多言語化し、SNSで宣伝してくれる。そんな理想のフローを実現した技術的な裏側を紹介します。
1. 脱・ファイル管理。Vercel Postgresへの移行
これまではブログ記事をGitリポジトリ内のMDXファイルとして管理していましたが、管理画面からスマホ一台で更新できるようにするため、データベース化を決意しました。
採用したのは Vercel Postgres (Neon)。
サーバーレスでスケーラブル、かつVercelとの親和性が最高です。ORMには Prisma を採用し、型安全にDBを操作しています。
// schema.prisma
model Post {
id String @id @default(cuid())
title_ja String
content_ja String
// ...他言語カラムなど
}
2. 書くのは日本語だけ。OpenAIによる自動翻訳
「英語でも発信したい、でも翻訳は面倒くさい」。 このジレンマを解消するために、記事保存のAPI(Next.js Route Handlers)に OpenAI API (GPT-4o-mini) を組み込みました。
日本語で記事を保存すると、バックグラウンドでAIが以下の処理を行います。
タイトルの英訳
あらすじの英訳
本文全体の英訳(Markdown形式を維持)
これにより、私は日本語で執筆することだけに集中できるようになりました。
3. Xへの全自動投稿
ブログを更新したら、Xで告知するのは必須です。でも、いちいちリンクをコピーして投稿文を考えるのは手間ですよね。
そこで twitter-api-v2 を導入し、投稿フローを完全自動化しました。 ここでもAIを活用し、「記事の内容を要約して、ハッシュタグ付きの魅力的な紹介文(140文字以内)」を生成させています。
// 自動生成される投稿のイメージ
"個人開発ブログを更新しました!
今回はDB移行とAI自動翻訳の実装について。
技術スタックはNext.js + Prisma + OpenAIです。
ぜひ読んでみてください! #Nextjs #PersonalDevelopment
https://..."
まとめ
今回のアップデートで、私のポートフォリオは単なる静的サイトから、**「自動化されたコンテンツ配信プラットフォーム」**へと進化しました。
個人開発の醍醐味は、こうした「あったらいいな」を自分の手ですぐに形にできることです。 今後もこの「実験場」で新しい技術を試し続けていきます。