皆さん、いかがお過ごしでしょうか？
今日は、私がずっとずっと作りたいと思っていた「あるもの」がついに完成したので、そのお披露目をしたいと思います！
念願の「プレイステーションソフト一覧」が完成しました!!
私の人生におけるゲーム面では、特にプレイステーションはなくてはならない存在です。
PS4やPS5はもちろん、生産終了したとは言えども全く問題なく最前線で活躍し続けられる、優れた携帯ゲーム機であるPS Vitaまで…。気づけば自分でも把握しきれないほどのソフトが集まっていました。
「せっかくの思い出たちが、自分さえも知らずに埋もれさせてしまうわけにはいかない！」
そう一念発起して、手持ちの全ソフトを管理できる専用の一覧ページを作成しました！
プレイステーションソフト一覧について
今回のライブラリ作りで、紆余曲折あってたどり着いたのが、***「見た目（HTML）」***と***「中身（データ/JSON）」***を完全に切り分けたことです。
このやり方をしておけば、将来ソフトが増えたときに、デザインを一切いじらずにデータファイルに名前を書き加えるだけで更新ができるようになります。
今だと、ソフトを買った後は、自分で全て入力する事はなく、それこそAIにお願いして詳しい情報をネットから収集してもらいつつリスト追加も出来る時代です!!
もう一つの工夫では、メーカー名やジャンルなど持ちたい項目が増えてしまい一覧性が低くなってしまったので、*** 好きな項目だけをサブ画面から選択して ***抽出出来るようにしました。
😀対象としたプラットホーム
簡単にですが、画面遷移図というかシーケンス図をmermaidで書いてレンダリングしてみました。
ローカルでの表示と「file://」の壁
実は、作成中にちょっとした技術的な壁にぶつかりました。
HTMLファイルをPCで直接ダブルクリックして開こうとすると、ブラウザのアドレスバーが「file://」で始まります。
そこで今回は、Node.jsの「serve」パッケージを使って、パソコンの中に小さな自分専用のWebサーバーを立てることで、エラーなしでスムーズに動作を確認できるようにしました！
GitHub Pagesで世界に公開！
せっかく作った一覧なので、どこでも見られるようにインターネット上に公開しました。
利用したのは***「GitHub Pages」***というサービスです。
これは例えるなら、***「自分専用のオンライン本棚」を無料で貸してくれるサービス***のようなものです。
そこに自作のHTMLやJSONを置いておくことで、世界中のどこからでもアクセスできるようになるんですよ。
完成したページはこちらです！
これからも、素敵なゲームとの出会いを大切に記録していきたいなと思います。
皆さんも、自分だけの「好き」を形にしてみてはいかがでしょうか？
それではまた次の記事でお会いしましょう!!