TECH OJIはこんな構成で作っています。
目次
TECH OJIは、ただ記事を書くためだけに作ったブログではありません。
せっかく自分で作るなら、普段触っているフロントエンドだけで完結させず、バックエンドやデータベース、記事管理の仕組みまで含めて、自分で一通り触れる構成にしたいと思って作っています。
なので、このサイトの構成は「ブログを作るための最小構成」というより、個人開発をしながら自分の守備範囲を広げるための構成に近いです。
今回は、TECH OJIが今どんな構成になっているのかと、なぜその技術を選んだのかをまとめます。
細かい設定や実装方法まで全部書くと長くなるので、今回はまず全体像の話です。
今のTECH OJIの全体構成
大きく分けると、TECH OJIではこんな役割分担にしています。
フロントエンド：Next.js
バックエンド / API：Laravel
データベース：Supabase（PostgreSQL）
記事原稿の管理：Google Sheets
記事データの受け渡し：Google Apps Script（GAS）
画像素材の管理：Google Drive
記事制作の補助：ChatGPT
フロントだけで全部やるのではなく、表示・API・データ・記事制作をそれぞれ分けています。
最初からこの形が完璧に決まっていたわけではありません。
作りながら「ここは分けた方がいい」「これは管理画面側に寄せたい」と考えて、少しずつ今の形になっています。
たぶん今後も変わります。
それも個人開発の面白いところだと思っています。
フロントエンドはNext.js
サイトの表示側にはNext.jsを使っています。
自分はもともとフロントエンド寄りの経験が多いので、まずは得意なところを軸にしながらサイト全体を作りたかったのが理由のひとつです。
一方で、TECH OJIでは単純な静的ページだけではなく、記事一覧・記事詳細・カテゴリ・タグなど、データを受け取って表示する部分もあります。
そのため、フロントエンドはNext.jsに任せて、データの管理やAPIは別にする構成にしました。
全部をひとつに詰め込むより、
表示する役割と、データを扱う役割を分けてみる。
というのを実際にやってみたかった、という理由も大きいです。
バックエンドにLaravelを選んだ理由
バックエンドにはLaravelを使っています。
ここはTECH OJIを作るうえで、かなり学習目的が入っている部分です。
これまでPHP自体は触ってきましたが、バックエンド全体を設計して、APIを作って、データベースとつないで、管理側まで含めて組み立てる経験はもっと増やしたいと思っていました。
だったら個人開発で実際に使ってみよう、という流れです。
Laravel側では、フロントエンドから直接データベースを触らせるのではなく、必要な処理をAPIとして受け持つ形にしています。
今後AI機能をCMS側に入れる場合も、APIキーや処理の制御はLaravel側に置く想定です。
Next.jsだけで何でもやるより、あえてLaravelを間に置くことで、
APIをどう設計するか
バリデーションをどうするか
データをどう受け渡すか
バックエンド側で何を持つべきか
を考える機会が増えました。
効率だけを考えたら別の構成もあると思います。
でもTECH OJIでは、作ること自体が勉強でもあるので、この分離にはかなり意味があると思っています。
データベースはSupabaseのPostgreSQL
データベースにはSupabaseを使っています。
中身はPostgreSQLなので、単に記事を保存するだけではなく、テーブル設計やリレーション、制約など、データベース自体の勉強にもつなげられます。
個人開発では、データベースそのものの運用に時間を使いすぎるより、まずアプリ側の実装を進めたいこともあります。
その点で、管理画面から状態を確認しやすく、PostgreSQLを使えるSupabaseは今の自分には扱いやすい選択でした。
もちろん、Supabaseを使えば何も考えなくていいわけではありません。
どういうテーブル構成にするのか、どこまでLaravel側で扱うのかなどは、作りながら調整しています。
このあたりは、それだけで別の記事にできそうです。
記事はGoogle Sheetsから入れる
TECH OJIで少し変わっているのが、記事制作の流れです。
記事を書くためだけにCMSの入力画面へ入り、そこで最初から最後まで文章を書く形にはしていません。
今は、
ChatGPTで記事を作る
→ Google Sheetsで原稿を管理する
→ GASでLaravel APIへ送る
→ Supabaseへ下書きとして登録する
→ CMSで最終確認する
という流れにしています。
Google Sheetsには、記事候補と完成原稿を分けて管理しています。
完成した記事には、
タイトル
本文
抜粋
カテゴリ
タグ
SEOタイトル
meta description
画像の差し込み位置
などを持たせています。
記事本文の中で画像が必要な場所には、あらかじめ {{IMAGE:01}} のような記号を入れておきます。
記事をブログ側へ取り込んでIDが決まったあとに画像を作り、記事ごとのフォルダで管理する流れです。
この辺はまだ作りながら改善していますが、記事を書く工程と、CMSへ登録する工程を分けたかったので、今のところこの形が気に入っています。
CMS内のAIは「記事を書くAI」にしない
AIも使っていますが、CMSの中でAIにゼロから記事を量産させる想定にはしていません。
新しい記事を考えたり本文を書いたりするのは、基本的にChatGPTと一緒に進めます。
一方でCMS側のAIは、
文章の書き直し
校正
要約
SEOタイトル
meta description
見出し構成の改善
など、すでにある原稿を整える役割に寄せる予定です。
AIが勝手に公開済みの記事を書き換えるのではなく、Before / AfterやDiffを確認して、人間が承認する形にしたいと思っています。
このあたりも、AIを使えば何でも自動化すればいいというより、
どこまでAIに任せて、どこから人が判断するのか
を考えながら作っています。
画像も記事本文とは別工程にした
画像も本文を書きながら同時に完成させる形にはしていません。
本文を書いている段階では、「ここにどんな画像が必要か」だけを決めます。
その後、記事IDが決まってからアイキャッチ・本文画像・SNS用画像をまとめて制作します。
画像のテイストも毎回バラバラにせず、TECH OJI全体で同じ雰囲気になるようにルールを作っています。
こういう細かい運用まで自分で考えられるのも、個人ブログを自作する面白さだと思います。
技術選定の正解を紹介したいわけではない
今回紹介した構成は、
Next.js + Laravel + Supabase + Google Sheets + GAS
です。
ただ、「ブログならこの構成が正解」という話ではありません。
むしろ普通のブログを公開するだけなら、もっと簡単な方法はいくらでもあります。
TECH OJIでこの構成にしているのは、
フロントエンドをさらに触りたい
バックエンドを本格的に勉強したい
PostgreSQLにも慣れたい
APIを使ったデータ連携を経験したい
AIを開発や記事制作にどう組み込めるか試したい
という、自分のやりたいことがかなり入っているからです。
だから構成も、これから変わる可能性があります。
「最初に決めた構成を絶対に守る」というより、実際に使ってみて微妙だったら変える。
その変更理由やハマったところも、TECH OJIの記事として残していくつもりです。
次は、それぞれをもう少し細かく書いていきたい
今回はサイト全体の構成をざっくり紹介しました。
Next.js、Laravel、Supabase、記事管理、画像管理など、それぞれ掘っていくと書けることはかなりあります。
実際に作っていてハマったところもありますし、「最初はこう考えていたけど途中で変えた」という部分もあります。
そういうところを、これから個別の記事として少しずつ残していきます。
TECH OJI自体を作ることが、そのまま次の記事のネタになっていく。
しばらくはそんな感じで、このブログ自体も育てていこうと思っています。
