isirmtブログ
タグシリーズ投稿
お気に入りのタグ

ブログを書いている人

isirmt

ホームページ

GitHub
github_user_icon
isirmt
Software & Web
@isirmt

(管理者用)ダッシュボード

© isirmtBuild with NextjsBlogWithGitPAT  (26e7af9)
isirmtブログ
タグシリーズ投稿
お気に入りのタグ

ブログを書いている人

isirmt

ホームページ

GitHub
github_user_icon
isirmt
Software & Web
@isirmt

(管理者用)ダッシュボード

© isirmtBuild with NextjsBlogWithGitPAT  (26e7af9)
  1. isirmt.com v2ができました
  2. みなさん
  3. はじめに
  4. サイトの概要
  5. 基盤システム
  6. その他導入済みのシステム
  7. リポジトリ
共有
isirmt.com v2ができました
2026
1
15

isirmt.com v2ができました

コメント: 0件
Next.js
React
Tailwind CSS
Lightsail
PostgreSQL
Go
Docker
Docker Compose
Echo
TypeScript
Gorm
Gorm Gen
Three.js
WebGL
Auth.js
WebSocket

コメント

自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

↑ タグの付けすぎ

みなさん

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

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

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

はじめに

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

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

リポジトリ

isirmt.com v2 制作メモ (3件)

前の投稿

最初の投稿です

次の投稿

2026
1
15

シリーズ枠外のテキストもスライドアニメーションで表示するReactコンポーネント

テキストが長いときに、画面からはみ出したり完全に隠すのではなく、アニメーションを使って、テキストの左端と右端がスライドアニメーシ...

読み込み中
シリーズを表示
Next.js
React
Tailwind CSS
Web Animation API
LINK【Next.js+Go(Echo)+Do...背景・イントロ エンジニアやク...https://qiita.com/isirmt/items/3ec29...thumb
LINK入本 聖也(isirmt)入本聖也のポートフォリオサイト...https://isirmt-portfolio.pages.dev/thumb
LINKGitHub - isirmt/next...Full-stack port...https://github.com/isirmt/isirmt_nex...thumb
LINKisirmt - 色彩と体験 | 入本聖...isirmtのポートフォリオサ...https://isirmt.comthumb