俺の「五条ハーレム」開発録 ～ゼロから創り上げた最強の城～

アンチグラビティに俺のつもりになってサイトの開発履歴をまとめてもらった

やあ。今回は、俺が作ってきたサイト「五条ハーレム」の開発の裏側について、プロジェクト立ち上げの最初から現在に至るまでの全貌を語っていこうと思う。

単なるブログや動画まとめサイトを作るだけなら今の時代いくらでもツールはある。でも、自分の活動（動画、ライブ配信、小説、BOOTHでのグッズ販売）を全部ひとまとめにして、かつ「俺の思い通りに動く最強の城」を構築するなら、隅から隅まで自作しないと気が濟まないんだよね。

てことで、Next.js（App Router）をベースに、PostgreSQLとVercel Blobを駆使して作り上げてきた軌跡を振り返るよ。


第1形態：すべての活動を一つにまとめる（初期構築）

最初は「動画・ブログ・ライブ配信をまとめる個人発信サイト」というコンセプトからスタートした。 YouTubeやニコニコ動画のリンク、日々のつぶやき（ミニブログ）、長文のブログ記事、そしてBOOTHの商品。これらがバラバラに散らかっているのが嫌だったんだ。

だから、まずは基本となるデータ構造とUIを作った。

  • 記事・動画の統合: 投稿カテゴリを「ミニブログ」「ブログ」「動画」に分けて、タイムライン上で綺麗に表示。
  • BOOTH連携: API（またはスクレイピング）を使って、自分のBOOTHショップの商品情報を自動取得。サイト内に並べて、管理画面から表示・非表示や「おすすめ」設定ができるようにした。

この時点で、単なるリンク集ではなく、「俺のコンテンツを俺のルールで展示する」基盤ができた。

第2形態：圧倒的な世界観とこだわりUI（ゲートと縦書き対応）

基盤ができたら、次は見た目と体験だ。ただの味気ないサイトじゃつまらないでしょ？

  • ゲート（入り口）の概念: 訪問者が最初に見る画面を「ゲート」として設計した。背景画像を自由に設定して、合言葉（シークレットワード）を知っている人だけが入れる限定ゲートを作ったり、世界観をしっかり演出できるようにした。
  • 縦書きと独自UI: ブログや小説を読む時のために、画面を「縦書き」対応にした。横スクロールで読めるようにしつつ、右側のレールに操作ボタンを配置。さらに、特定環境のバグ（iOSのIME変換中にカーソルが飛ぶ現象）や、一部の旧字体（神、医など）の表示にも徹底的にこだわって修正を入れた。
  • 和風月名やデザイン: カレンダーの月表示を「睦月」「如月」といった和風月名に変えたり、全体の色使いを俺好みの紫を基調としたデザインに洗練させていった。

第3形態：守るべきものは守る「二段階セキュリティ」

サイトが形になってくると、裏側の管理画面のセキュリティが気になり始める。でもさ……猜疑心はよくないと思うんだよね。 悪い奴がいなければ厳重なセキュリティなんて不要なんだよ。

だから、思想としては「普段は簡単なパスワード認証、だけど本当に重要なコア部分には堅牢な認証をかける」っていう二段階の仕組みにした。

具体的には、**Twilioを使った本物のSMS電話認証（ワンタイムパスワード）**を実装したんだ。 PBKDF2で安全にハッシュ化された管理パスワードを通った後、さらに俺の携帯番号に直接「6桁のランダムな数字（OTP）」が飛んでくる。 これなら、俺以外のやつが突破するのは物理的に不可能。まさに無下限呪術ってわけ。

第4形態：迷子を許さない司令室「困ったらここ」

サイトが複雑になると、「あれ？ 画像が表示されない」「BOOTHと同期しない」みたいなトラブルが起きる。 そういう時に、いちいちデータベースを開いたりコードを睨んだりするなんてナンセンスだよね。

だから、サイト内に**「自己診断・復旧・AI相談支援センター（通称：困ったらここ）」**を作った。 ボタン一つでサーバーの環境変数（データベースが繋がってるか、Vercel Blobが設定されてるかなど）や、現在のサイトの公開設定を一瞬でスキャンして、「何が異常か」を診断してくれる機能だ。 診断結果はワンクリックでコピーして、俺をサポートするAI隊にそのまま相談できる。俺のための最高の司令室が完成した。

最終形態：サイトが吹っ飛んでも数分で元通り。「復旧センター」の完成

そして今回、ついに究極の機能が完成した。それが**「復旧センター」**だ。

どんなに最強のシステムでも、万が一の事故はゼロじゃない。 そこで、**「ボタン一つでサイトの全て（設定・投稿・商品・コメント・拍手・ゲート・すべての画像）をZIPにまとめてダウンロードできる完全バックアップ」**を実装した。 ただテキストを保存するだけじゃなくて、Vercel Blobに上がってる画像まで全部かき集めてZIPに詰め込むんだ。これ、ブラウザの力（jszip）をフル活用してるからサーバー側のタイムアウト制限も華麗に回避してる。

さらに、毎月1日にはVercelのCron Jobが発動して自動でバックアップを取る仕組みも入れた。

もしサイトがぶっ壊れても、このZIPファイルをインポートすれば、一瞬でデータベースを上書きして、画像も全部クラウドに再アップロードされて元通り。 まさに反転術式。どんな致命傷を負っても数分で全回復できる体制が整ったってこと。

まとめ：俺だけの最強の城

最初はバラバラのコンテンツをまとめるだけの構想だったものが、UIの極限までの調整、SMSを使った堅牢な認証、自己診断システム、そしてワンクリックでの完全復旧機能まで備えた。

妥協の一切ない、俺が一番使いやすくて、俺が一番安心できる「最強の城」が出来上がった。 これからも気が向いたらアップデートしていくつもりだけど、とりあえず今の時点での完成度は文句なし。

大丈夫、俺のサイト最強だから。