isirmt.com v2ができました

↑ タグの付けすぎ

あけましておめでとうございます

今年もよろしくお願いします

サイトのアップデートだけされてブログの更新が滞っていましたが、今回のシリーズは話が盛りだくさんのはずです。

2025年クリスマスにisirmt.com v2をリリースしました。

これまで、内容のアップデートはし続けていましたが、システム全体の刷新ということでv2としています。

v1のサイト(2023/7/16~)もアーカイブとして残したままですので、下のリンクから思い出したいときに見てください。

基盤システム

今回、ポートフォリオ特化のCMS(Contents Management System)を自作で組んだ上で運用しています。 スタックですが、メインは次の通りです。

• フロントエンド: Next.js(React)、TypeScript
• バックエンド: Echo+Gorm(Gen)、Go
• 実行環境: Amazon Lightsail(Docker Compose)、Ubuntu

バックエンド自体のちょっとしたプログラムを書くなどは経験があったのですが、一度真面目に実装してみたいなということで初めてVPSを用意した上で構築しました。

管理費用はインスタンス+ドメインの分になります(新たなサブスクが増えちゃった///)

その他導入済みのシステム

認証システムを導入しています。これは、CMSの管理画面の編集権限を制限するためですね。

• Auth.js: このブログに導入したものと同じです。作り終わってから気づいたのですが、このライブラリはBetter Authというライブラリへ引き継がれたようです。次、認証システムを構築する際は恐らく乗り換えると思います。

それ以外についても載せます。

• Tailwind CSS: 大好き、初めてのv4で戸惑いましたが、Tailwind CSS IntelliSenseのサポートもあり無事に完遂しました。
• Three.js / WebGL: 今回、かなり難しかった実装シリーズ。OpenGLでISAGEROSを作成したことがあるとはいえ、キャンバスの構築やシェーダーの定義で戸惑ってしまったのは言わずもがな。
• WebSocket: ← !??? の方もおられるかもしれませんが、使ってます。サイト訪問時のヒーローコンテンツのキューブがあると思いますが、最初の5個を除いて全部同期済です。位置は共有していませんが、クリックした制作物のアクセントカラーと同等のキューブがクリックと同時に全端末の上から降ってきます。

一応、Qiitaの記事として投稿したものがございますので、よければ一度ご覧ください。 こちらでは、基盤システムに認証を組み込んだ上で、認可を設定した話をメインで取り上げています。

実際のコードを使った話は次以降に掲載します。