夢 -ヴェイパーウェーブ- 2.0

見どころ特徴

• ウィンドウ形式のインターフェース

  OS の操作感を再現し、各紹介ページがそれぞれ操作できる独立したウィンドウになっています。

• ラジオ

  ブラウザ標準の Audio API で実装した音楽プレーヤー。曲を切り替えながら、音楽を聴きつつサイトを巡れます。

• 3 言語対応

  システムの言語を繁体字中国語・簡体字中国語・英語から切り替えられます（日本語は非対応）。

メイキング課題と解決策

1. 01 ウィンドウを表示範囲の外に出さない

   課題

   ウィンドウをドラッグする際は、位置と画面の境界を計算し、表示範囲の外へ出ないようにする必要がある。

   解決策

   境界の計算とパラメータ調整に AI を活用し、計算ミスのリスクを抑えた。ドラッグで見落としがちな低レベルの処理は interact.js に任せた。

2. 02 ブラウザのリサイズ後に位置がずれる

   課題

   ブラウザのサイズを変えたあとウィンドウを再計算しないと、新しいサイズで正しく配置できず、ドラッグ時に予期しない不具合が起きる。

   解決策

   debounce でリサイズが止まるのを待ち、:key でウィンドウを作り直して中央に配置し、位置はユーザーに戻してもらう。リサイズを繰り返すことはまれなので、比率で位置を換算するより単純で確実。

3. 03 クリックしたウィンドウを最前面に

   課題

   OS と同じように、クリックしたウィンドウが最前面に来るようにしたい。

   解決策

   使用中の最大の z-index を記録し、クリックされたウィンドウにその値に 1 を足して設定する。z-index の上限は 2147483647 で、通常の利用ではまず到達しない。