HPを更新しました。

2026/11/07

ホームページをリニューアルしました

長らく放置していた tukuyo.net を作り直しました。見た目だけでなく、裏側もまるごと入れ替えています。この記事では、何が変わったのかと、どう作ったのかをまとめます。

ライトとダークの両方のテーマに対応しました。端末の設定に自動で追従しますが、ページ内のコンソールから切り替えることもできます。

トップページは About、Experience、Works、Article、Contact の5つのセクションにまとめ、ヘッダーからそれぞれに飛べるようにしました。

トップページにターミナル風のコンソールを置きました。help と打つとコマンド一覧が出ます。works や articles で一覧を見たり、theme でテーマを切り替えたり、lang で日本語と英語を切り替えたりできます。

これまではてなブログに書いていた記事を、このサイトの Article に移しました。はてなブログは閉じています。古い記事も含めて、ここで読めます。

RSS も用意したので、購読される方は https://tukuyo.net/feed.xml をどうぞ。

サイト内の文言を日本語と英語で切り替えられるようにしました。ブラウザの言語設定に合わせて表示され、コンソールの lang コマンドで変更できます。

Contact セクションからメッセージを送れます。ボット対策を入れているので、普通に使う分には何も意識しなくて大丈夫です。

以前は Firebase Hosting で動かしていましたが、今回 Cloudflare に全面移行しました。

やはりCloudflareだなぁという感じがしている。こういうちょっとしたことをするならCloudflareが一番いいなぁと思いました。エグレス料金はタダだし最高だ。

フロントエンドは Lit で書いた Web Components に Tailwind CSS v4 を組み合わせています。すべてのコンポーネントが Shadow DOM で動いているので、Tailwind を Shadow DOM の中で使うためのちょっとした仕組みを入れています。

記事と作品の編集、経歴の管理、お問い合わせの確認ができる管理画面を別ドメインで動かしています。記事は Markdown で書いて、プレビューを見ながら公開できます。画像をアップロードすると R2 に保存され、サイズ違いの画像が自動で用意されます。

サイト本体はシングルページアプリケーションですが、記事ページや作品ページは Workers 側でタイトル、説明、OGP 画像、JSON-LD を埋め込んで返しています。OGP 画像は記事のタイトルから自動で生成しています。X や Discord にリンクを貼ったときにきれいに表示されるはずです。

昔はこんなことをするのにも時間をかけていたけど、AIが凄すぎる。自分でコーディングしていた時と比べると1/10くらいの感じだなぁ。。すごい時代にエンジニアとして生きて入れるのがありがたい。

ご意見やご感想があれば、Contact から気軽に送ってください。