Appearance
Guide Introduction
archive.jsの使い方と仕様を頑張って網羅してみる。ちなみにこのサービスの正式名称は全部小文字の『archive.js』だ。
Guide Menu
Technical Details
このページではイントロとして、誰も興味がないであろうarchive.jsの技術仕様を解説する。一言で表すなら、
Next.js x Tailwindcss x Supabase on Vercel
という感じの王道スタックだ。
Rendering Mode
Next.js on Vercelで使えるページのレンダリングモードにはSG・SG with CSR・ISG・ISR・SSRがあるが、archive.jsではどれを使っているのだろうか？
| Path | Mode | Role |
|---|---|---|
/ | ISR | Top page |
/contents/[id] | SSR | Displaying each playlist |
/notices | SSR | Displaying list of notices |
/notiecs/[pathname] | SSR | Displaying each notice |
Back-end
archive.jsはSupabaseとYouTube(YouTube Data API経由)をデータベースとして利用している。動画を配信するデータベースと捉えれば、YouTubeも立派なバックエンドと考えることができる。
Front-end
やっぱり扱いやすいのはReact、そしてNext.jsだね。他にも色々フレームワークはあるけど、一番安定してて機能が豊富というとNext.jsになってしまう。ただ流石にそろそろRemixとかAstroとかでWebサイトを作ってみたい感はある。Vueは嫌い。
Design
さて、最近archive.jsのロゴを刷新したのに気付いたかな？
ZIPファイルに107って書いてあるだけです。何の捻りもない。
前まではグラデーション背景にサングラスが乗ってるだけの何も意味しないゴミだったね。ちょうど "Rommy" とか "Darth Rommy" とかのブランドと一緒にグラサンも捨てたから、いい機会だと思ったんだ。