いつも「もりもりゲームブログ」に遊びに来てくださり、本当にありがとうございます！
このブログは、ゲームという名前ですが、それは原初の名前を大切に守っているだけで、ゲームだけでなく日々のさまざまな出来事、技術的な挑戦、そして日常で心動かされた温かい思い出を、素直に優しく思いやりのある形でお届けする個人コラムサイトです。他者を傷つけることなく、読んでくださる皆さんの心が少しでもほっこりと温かくなるような、前向きな言葉を大切に紡いでいます。
さて、今回は、私自身の小さな技術的挑戦についてのお話と、Webページ公開にまつわる思い出話もさせて頂きたいです！
GitHub Pages (GitPages)にて、自作のガイドブックやインタラクティブな入門書、所有しているプレイステーションのゲームライブラリなどを公開しているのですが、このたび**ポータルとなるトップメニュー画面（index.html）を大幅にリニューアル**いたしました！決して大層なものではないかもしれませんが、デザインや操作感にたくさんのこだわりを詰め込みましたので、記念にその機能や作られた背景、そして技術的な見どころについて詳しく解説させていただきたいと思います。
✨ リニューアルした公開コンテンツメニューはこちら ✨
すりガラス調の綺麗なカードと滑らかなドラッグ＆タブ切替を、ぜひ実際の画面で体験してみてください！
🚀 もりもり gitPages 公開コンテンツを開く（外部サイト）昔懐かしい自作サーバー時代からGitPagesという現代の便利な環境へ
皆さんは、ご自分でWebサーバーを立ててサイトを公開した経験はありますでしょうか？今でこそ、クラウドや静的サイトホスティングサービスを使って数クリックで世界中にWebページを公開できる時代になりましたが、昔の私は自作のデスクトップPCにLinuxやWebサーバーソフト（Apacheなど）をインストールして、自前で24時間Webサイトを公開していた時期がありました。
さらに珍しい体験としては、**PlayStation 3 (PS3) にLinux OS（OtherOS機能）を導入し、データベースにMySQL、スクリプト言語にPHPを組み合わせて動的なWebページを手作りして運用していた**こともあります！当時は「ゲーム機でデータベースやWebサーバーが動いているんだ！」と大きな感動を覚えたものでした。
しかし、個人で物理サーバーを24時間365日連続運用するのには、次のような大きな壁がありました。
- ✔ ハードウェアの耐久性低下と故障のリスク： 家庭用機器や一般PCの常時稼働による熱やパーツ劣化の心配
- ✔ 電気代のプレッシャー： 月々の電気代がかさみ、精神的な負担になってしまうこと
- ✔ セキュリティ担保の難しさ： ルーターのポート開放や脆弱性対策、不正アクセスの防御を全て個人で自己責任にて担保しなければならない重圧
GitPages (GitHub Pages)という本当にありがたいインフラが存在します。サーバーの保守費用や電気代を気にすることなく、SSL化された安全な環境で「文字通りの」コンテンツを届けることができるのは、開発者として本当に頭が下がる思いです。
💡 ポイント：疎結合なマイクロサービス志向の楽しさ
「すべてを1つの巨大で重厚なシステム（モノリス）に詰め込む」のではなく、目的ごとに特化した複数の小さなサービスやツールを組み合わせ、アイデア次第で1つの大きなユーザー体験を実現する時代です。制約の中で工夫を重ねて表現の幅を広げていく作業は、まるでパズルを組み立てるような楽しさに満ちています！
新メニューUIの全貌！グラスモーフィズムとインタラクティブ機能
今回リニューアルしたトップメニュー（index.html）は、単なるリンク集ではなく、見ているだけでワクワクするようなリッチなデザインと高い操作性を追求しました！その主な技術的こだわりと特長をいくつかご紹介させていただきます。
「光と透明感が織りなす癒しのデザイン空間。すりガラスの向こうに広がる、多様なコンテンツへの入り口。」
#39C5BB）を中心とした配色を採用し、CSSのbackdrop-filter: blur(18px) saturate(160%)を活用して、まるで透明度の高いすりガラスが浮いているかのような現代的で幻想的なカードUIを表現しました。
.card.dragging）を入れて滑らかな手触りを実現しました。
- ✔ ⚡ AI & 開発ガイド (Page 1)： 複数のAI協働プロジェクトを横断統括する特別ガイド「👑親 ソリューションズ横断統括ガイド (v1)」、個別プロジェクト開発構造「🤖子 個別プロジェクト開発構造ガイド (v2)」、自作ドキュメントライブラリ
- ✔ 🎮 プレイステーション (Page 2)： 所有PlayStationソフト一覧のHTML画面とJSONデータ。**※2026年8月6日の最新アップデートにより、横スクロールの視認性が大幅改善され、番号クリックで詳細カードを表示できるようになりました！**
- ✔ ✍ SNS & ブログ (Page 3)： 日々の想いを伝える「もりもりゲームブログ」と、つぶやき文化を堅持する「X（旧Twitter）@Talk_morimori」
FLOW CHART
ユーザーがGitPagesトップメニューを活用するまでのインタラクティブフロー
① ユーザー ➡ ブラウザ (index.html)
ページアクセス＆UI描画
GitPagesのURL（https://morimorivita.github.io/openContents/）へアクセスすると、CSSのbackdrop-filterによる透過すりガラス（グラスモーフィズム）のカードが画面中央にフェードイン表示されます。
⬇
② ユーザー ➡ ヘッダー領域
ドラッグ移動操作
カードヘッダーをドラッグすることで、画面内の好きな位置へ滑らかにカードを移動。JavaScriptの各種イベントが位置座標（left / top）を動的に計算します。
⬇
③ ユーザー ➡ カテゴリタブ / ドット
ページ切替処理
「AI & 開発ガイド」「プレイステーション」「SNS & ブログ」のタブや矢印ボタンをクリックすると、アクティブなコンテンツがスムーズにアニメーション切り替えされます。
⬇
④ ユーザー ➡ 各種外部・内部リンク
目的ページへ遷移
目的のバッジ付きメニューリンクをクリック！親プロジェクト統括ガイドやPSソフトライブラリ、ブログへ別ウインドウまたは同一タブで快適にアクセス完了です。
技術要素とカテゴリコンテンツの比較・まとめ
今回構築したメニューの構成と、背後で活躍している技術仕様を分かりやすく一覧表にまとめてみました！| カテゴリ名 | 主なコンテンツ・対象機能 | 技術的見どころ・UI特性 |
|---|---|---|
| ⚡ Page 1: AI & 開発ガイド | 👑親 ソリューションズ横断統括ガイド 🤖子 個別プロジェクト開発構造ガイド 📚 ドキュメント&ガイドライブラリ |
紫〜パープルグラデーションバッジ、プロジェクト階層構造の分かりやすい分類指示 |
| 🎮 Page 2: プレイステーション | 所有PSソフト一覧 (HTML画面) 所有PSソフト一覧 (JSONデータ) |
2026/08/06最新アプデ：横スクロール改善・番号クリックによるポップアップカード表示対応 |
| ✍ Page 3: SNS & ブログ | もりもりゲームブログ (Blogspot) X (Twitter) @Talk_morimori |
外部サイト連携、ホバー時の滑らかな発光・移動エフェクト、原初のツイッター文化継承 |
// ドラッグ移動の開始・移動・終了処理の例
function onStart(cx, cy) {
dragging = true; startX = cx; startY = cy;
origLeft = parseInt(card.style.left) || 0;
origTop = parseInt(card.style.top) || 0;
card.classList.add('dragging');
}
function onMove(cx, cy) {
if (!dragging) return;
const dx = cx - startX, dy = cy - startY;
card.style.left = Math.max(0, Math.min(window.innerWidth - card.offsetWidth, origLeft + dx)) + 'px';
card.style.top = Math.max(0, Math.min(window.innerHeight - card.offsetHeight, origTop + dy)) + 'px';
}
function onEnd() {
dragging = false;
card.classList.remove('dragging');
}単なるリンク集メニューではありますが、これからも気がついた時に少しずつ改善を重ね、より便利で心地よい空間に育てていきたいと思います！
🎉 公開コンテンツメニューを実際に触ってみよう！ 🎉
以下のボタンから、リニューアルしたトップメニュー（GitPages）へ直接アクセスしていただけます！
✨ https://morimorivita.github.io/openContents/ を開く ›
それではまた次の記事でお会いしましょう!!
