1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【第5回】個人開発ポートフォリオを「全自動運用」へ。DB移行からAI自動翻訳・X投稿まで一気に実装した話

Posted at

はじめに

こんにちは、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://..."

まとめ

今回のアップデートで、私のポートフォリオは単なる静的サイトから、**「自動化されたコンテンツ配信プラットフォーム」**へと進化しました。

個人開発の醍醐味は、こうした「あったらいいな」を自分の手ですぐに形にできることです。 今後もこの「実験場」で新しい技術を試し続けていきます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?