archive Active
Movie Archives By Rommyからデザイン変更をきっかけに焼き直したWebサイト。デザイン以外に大きく変わったのは、プレイリストのデータをローカルではなくデータベースに移して管理を便利にしたこと。これは現在までずっとブレていない。卒業をきっかけに他人の顔垂れ流しの肖像権侵害サービスを存続するかでみんなにアンケートを取った結果、非公開動画を見たい人のGoogleアカウントに共有する対策付きで存続が決定した。読まれてるかは知らないけど利用規約も書いてみた。
設計
動画データベースにYouTubeを活用し、プレイリストのデータベースをSupabaseで管理するというのが軸。そうだ、冬休みまではMicroCMSを使っていたのを忘れていた。
この芯はブレていないものの、細かい設計はかなり右往左往した。ページのレンダリング方法はSSG→Streaming SSR→SSR→ISR→SSG→SSRという変遷をたどっている。ディレクトリ設計やコードスタイルもコロコロ変わっている。書きやすい書き方を探している感じ。
卒業後の5月2日のマージが大きな分かれ目になる。
まずは認証システムで、このバージョンからログインがなくなった。それ以前のログインのシステムはシンプルなパスワード認証で、サーバーサイドでパスワードの合否とCookieのセッション管理をしていた。途中からセッションIDを生成してデータベースに期限と一緒に保存するそこそこ真面目なセッション管理システムになった。
次は動画の公開設定で、5月以前は手間を考えてパスワード認証+限定公開の方式を取っていた。ただどうしても漏洩とプライバシーの問題が常にまとわりついていたので、卒業を機に認証無し+非公開+見たい人のGoogleアカウントを追加の方式に変更した。
デザイン
archiveになってからデザインは大きく1回変わった。
最初のいわゆる”第2世代”はZennライクなスタイルで、”第1世代”のヘッダー画像を残しつつ実際にウェブサイトとしてありそうな感じのデザイン。
“第3世代”になるまでに夏休みから卒業後にかけて過渡期がある。”第2世代”のブログサイトっぽいレイアウトはそのまま、VercelのApp Routerデモサイトを参考にした要素を追加していった。デザインの色使いをインディゴに統一したのもこの時。
“第3世代”は、2023年9月にマージしたバージョンの現行デザイン。モバイル画面にはモーダルメニュー、デスクトップ画面にはサイドバーメニューが表示されるようになり、フッターは削除した。この辺まで来てようやく”第2世代”ではないといえる感じ。ちょっとダッシュボード感が出た。年明けにはCSS変数で色を丸ごと変えられるようにカラーシステムを改装してみた。
その後
特に増える機能も減る機能もないのでそもそもデザイン更新しかすることがない。今のデザインにようやく満足したので、テーマカラー変更とライブラリ更新だけする保守管理のフェーズにやっと入った感じ。
この先何かあるとしたら、同窓会用に何か動画を作るとか、要望が来てGoogleアカウントを追加するとか、archive.js自体には関係ないことだけだと思う。
なおDB経由でYouTubeのプレイリストを取ってくるだけのサイトにNext.jsはオーバーテクノロジーと判断したため、2025年末にReact Router(v7) Framework Modeに移行した。