mac020k.com大型アップデート 2025

2025年9月9日にホームページを大型アップデートしました。

アップデートを行った理由は以下の通りです。

• 管理をしやすくしたい
• Next.js、Tailwind CSSへ変更したい
• AI エディタ Cursorを使いたい
• 遊び心を加えたい

デザインの変更、バランスを整えたほか、ユーザ側への新規機能、変更点としては以下の通りです。

• Biography、Publicationなどの時系列リストを昇順・降順切替ボタンで変更できる
• ロードアニメーションの追加
• テーマカラーの変更機能追加
• コンテンツが読み込まれた際にフェードインアニメーションが起こる
• デスクトップ上でヘッダーアイコンがTopへ戻るボタンの機能を有する。なお、カーソルを合わせるとTopと表示される
• デスクトップ上で左右の余白に六角形が自由に移動するアニメーションを実装。ただし、左右の余白が表示されないようであればこのアニメーションは行われない
• スマートフォン上でハンバーガーメニューが一般的な3本線へと変更
• スマートフォン上でハンバーガーメニューの下にMenuと表示
• スマートフォン上でハンバーガーメニュー押したときにアニメーションが起こる

変更の詳細については以下のセクションで示しています。

自分のポートフォリオページを作って4年目ですが、ずっとHTML、CSS直書きでした。 基礎は身についたので、モダンな技術を使ってサイトに変更したいと半年程度思っていました。 また、最近論文が増えてきたので、HTMLファイルに直書きもややこしくなっていました。 訳あってCursorのPro Planを契約したので、試しにAI君にNext.js、Tailwind CSSへの移行をやってもらいこととしました。

行った修正は次の順です。

日本語ページをNext.js、Tailwind CSSに移行=>英語ページも移行=>tsv管理システム実装=>新規機能、遊び心追加

Next.jsへの移行はそれなりにうまくいきました。 しかし、CSSの移行はあまり良くなかったです。 使用単位がvh、vwベースからremベースに変わったので難易度が高かったのかもしれませんが、結局AI君はコードを見ているだけなのでデザイン面の維持はまだ難しいようですね。 デザインの修正は自分でやったり、AI君にやってもらいました。 ただし、AI君デザインの修正中何度も文章を勝手に変更されするのはやめてもらいたい。 準学士の私をすぐ東京大学の博士の学生にしたり、博士号を勝手に授与したり、よくわからない学会で発表させられたりと変更は多岐にわたりました。 絶妙に違う大会名だとたちが悪いですよ。 tsvで内容を管理するシステムに移行したら、勝手な文章変更はなくなるのでAI君の補助で移行を考えている人は早々に分離することがおすすめです。

色々と問題はありましたが、私自身が1からNext.js、Tailwind CSSを学んで手作業で修正するよりはスピーディーに移行できたと思います。

前回まではHTML、CSSを直で書いていたこともあり、内容を編集するのが大変でした。 どこかのホームページのようにGoogle Apps Scriptを用いてもよかったのですが、自身でシステムを設計したかったのでそうしました。 日本語ページと英語ページは絶対に存在するため、横並びで内容がそろっているのかを確認しやすいようにしたかったので、管理をExcelで行いたいと思いました。 xlsxは読み込むの大変そうだし、AI君がファイル読み込んで編集できるか怪しいです。 文章を保存するためcsvは誤作動を起こし、区切り文字を「|」にしたcsvファイルやjsonファイルにすると開いたり、保存するのに手間がかかるので除外しました。 結果tsvファイルを使用することにしました。 今後の運用でうまくいくか検証していきます。

前のページまではすごくシンプルなページだったので少し遊び心を加えました。 自分が好きな六角形を基調として各所のボタンを六角形にしています。 あとテーマカラーを変更できるようにしてみました。

もう少し若者らしくポップにしたいですが、デザインセンスが壊滅的なので徐々にブラシュアップしていきたいです。