はじめに
いつもAkariNextで仲良くしてくださっている方はこんにちは、それ以外の方は初めまして。AkariNextの運営の一人のyupix（ゆぴ）と申すものです。 今回はこのブログがあるウェブサイトを作成したので、作成経緯と感想などを軽くまとめていこうと思います。
歴史と作成経緯
AkariNextには過去に複数のウェブサイトがありました。AkariNextに統一される前のPimcServer等にもSeesaaWikiを用いたものがありましたが、そういったものを抜きにして歴史を少し振り返っていきたいと思います。
ちなみにウェブサイトは基本的に私一人で作成してます
2019年1月 - Wix
今から5年前のものです。この時はプログラミングについて何も知らなかったので簡単に使えるWixを使ってサイトを作っていました。画像の上の文字が最高に見ずらいですね
2019年4月 - UIkit 時代
素のCSSとHTML5を使用したテンプレートを少し触って文字列を改造したりしていくうえで、HTMLとCSSに多少の心得ができたため、CSS frameworkである UIkit を使って初めて自分の手で作ったサイトです。
今日確認した限りいまだに UIkitの開発は続いているようでうれしい限りです。未だに年に数回UIkitを使って軽いサイトを作るレベルにはUIkitが好きなので、今後も開発が続いていくといいなと思ってます。
2019年8月 - Materialize 時代
2021年頃 - Vue2 時代
実はGitHub Pagesで公開していたため未だに確認することができたのでスクリーンショットを撮るために見に行ったのですが...う～ん、ごみ！ｗｗ
ストレージサーバーが無くなったせいで画像が表示されていないのかな？とも思ったのですが、ソースコードを改めてみた感じまさかのHeaderを実装して力尽きてました...
多分素のHTML+CSSしか知らない状態でいきなりSPAは結構ハードルが高かったんだと思います...
2021 ～ 2024年現在まで - 暗黒時代
>>>> まさかのサイト消滅 <<<<
現在 - 神代
暗黒時代を乗り越えた（？）ことでReactやVueに限らずフロントエンドからバックエンドまで様々な物を作れるようになりました。暗黒時代にも定期的に「ウェブサイト作らないとなー」とボイスチャットで喋っていた私ですが苦節3年弱にして遂にこのウェブサイトへと至ったわけです...
せっかくなので、今回のサイトの経過も少しだけ公開しようと思います。仮置きもありますが、そこは作っている最中の画像なので悪しからず
初版
結構色々ちぐはぐな感じがある微妙なトップページです。
記事執筆時点
この記事を書いている時ではこのように大きくデザインを変更しました。（フルサイズなので結構縦長です）
制作経緯
文中でも触れましたが、今に至るまでボイスチャットなどで定期的に話題には出ていたものの、毎回少し作っては途中でやめるを繰り返してしまい完成に至らなかったものが多くあります。
最近になりKubernetesを自宅に構築したことやDiscordへの参加者の方が連続して多かったことなどタイミングが重なったため今回やっとこうして制作に至りました。
技術スタック
開発者の方は皆さんこのサイトがどのような技術スタックで作成されているのか気になると思うので、この記事で現時点での構成を公開します。
フレームワーク - Remix & vite
フレームワークにはRemixを使用しています。私はNext.jsよりRemixの loader や action といった書き方が好きなのでこちらを選んでいます。
またViteを使用することでより良いDXなどを実現しています。
デザイン - SHADCN/UI
デザインにはTailwindCSSを使用していますが、コンポーネント群として SHADCN/UI というものを使用しています。ボタンなどといった基本的なものから、コンテキストメニューといった実装が大変なものまで欲しいものが最初から揃っていてカスタマイズも容易なことからこちらを選んでいます。
作成する上での参考にさせていただいた物
Remixの公式サイトがオープンソースになったのは結構記憶に新しいですが、このブログ機能を作成するにあたってとても参考にさせていただきました。できればShikiなどを用いたコードハイライトも行いたいのですが、記事執筆時あまり余力が残っていなかったので今後の課題ということにしています。
