Skip to content

Movie Archives By Rommy Closed

Stack
NextTypescript
Debut
2021-11-11

元々は学祭のオープニングコンサートの動画を器楽部にアクセス制限なしで還元するために作り始めたWebサイトだった。Googleドライブにしなかったのは、春コンのとき部員100人ぐらが一気にアクセスしてすぐ制限がかかったから。

ただ、作っているうちに修学旅行が近づき、修旅も学祭も全部まとめて共有したいと思い始めた。そんなわけで、修旅VlogをHRでお披露目したときに合わせてサイトをとりあえず完成させた。実際に日の目を見たのは、結局その1か月後に学年LINEに俺がURLを貼りつけたとき。ハマチがハマチのサイトに中々ショートカットを貼ってくれなかった。

設計

設計思想は現行のarchive.jsとほぼ一緒。動画のバックエンドとしてYouTubeを利用し、手動でプレイリストと動画のリンクのリストのデータを作る。物品貸出アプリを作ったハマチが認証機能で苦労していたのは見ていたので、形ばかりのログイン機能も付けた。

初めてJavaScriptを触ったのが9月、次に初めてNext.jsでウェブサイトを作ろうとしたのが学祭明けすぐの10月頭で、その感じで修旅前ぐらいから作り始めたのがこれ。初めてまともなプログラムを作ってかなりの知識を得たとはいえ、サーバーサイドとかHTTPとかさっぱり分からん状態で作った。ログインは簡素なパスワード認証で、認証状態はCookieに”session”とかいうデータを載せて判定していたように思う。極めつけはパスワードの環境変数をクライアントサイドに置いておくとかいう狂った仕様だった。

デザイン

これとarchive.jsを一連のサービスとしてみるとデザイン第1世代にあたる。時期的にはMogi 2021 Readmeと同時期なので、相変わらずPaper Kit 2を使ったイマイチイケてないUIに仕上がっている。

考えてみればこの一覧の感じとか今のBookmarkerにも受け継がれてるから、好きなレイアウトなんだろうな。

site screenshot

その後

年が明けてZennライクなデザインにしたくなった。ただ、このサイトのソースコードにはPaper Kit 2やらなんやらいっぱい詰まっていて、それを掃除して一から作り直すのが面倒くさかった。だからレポジトリとドメインを変えて心機一転”Archive.js”に生まれ変わった。なんでや。結果的には短命なWebサイト。