こんにちは、皆さん。私は砂漠の果ての狼です。
海外の達人からテトリスゲームをコピーしました。また、オンラインツールとオンラインゲームのコンポーネントをRazor共有ライブラリに抽出しました。これにより、Dotnet9 サイトと Dotnet工具箱 サイトで再利用できます。この記事では、ゲームの移植とRazor共有ライブラリへの移行手順、および数日間の開発・デプロイで遭遇したいくつかの問題とその解決策を共有します。
目次：
- テトリスゲームの追加
- コンポーネントの再利用
- 遭遇した問題と解決策
- まとめ
1. テトリスゲームの追加
1.1. ゲーム参考：BlazorGames
BlazorGamesプロジェクト情報
- GitHub：https://github.com/exceptionnotfound/BlazorGames
- オンラインアクセス先：https://blazorgames.net/
リポジトリのスクリーンショットは以下の通りです：
サイトのスクリーンショット：
このサイトには、Blazorを使って7～8個のオンライン小ゲームを開発する方法を解説する連載記事があります。比較的詳細なチュートリアルです。上の画像のように、ゲームにはソリティア（Solitaire）、テトリス（Tetris）、マインスイーパ（Minesweeper）などがあります。その中で、テトリスの連載記事のスクリーンショットは以下の通りです：
コース一覧アドレス：https://blazorgames.net/tetris
1.2. 自分のプロジェクトに追加
まず、リポジトリをクローンしてください：https://github.com/exceptionnotfound/BlazorGames
作者のコード構成は非常に明確です。まずコード構造を理解しましょう：
- 1.2.1.
/Pages配下のrazorファイル
各ゲームページです。例えば Tetris.razor。このファイルはそのまま自分のプロジェクトにコピーし、ページ下部の記事リンクを削除すれば使用できます。
- 1.2.2.
/Pages/Partials配下のrazorファイル
各ゲームの子コンポーネントです。例えば /Pages/Partials/TetrisGridCell.razor はテトリスの背景セルコンポーネントです。
- 1.2.3.
/Modelsは各ゲームで使用するModelクラス
例えば /Models/Tetris/ 配下には、テトリスの背景テーブル（Grid.cs）、セル（Cell.cs）、ブロック（Block.cs）などの定義クラスがあります。
- 1.2.4.
wwwrootディレクトリはプロジェクトのリソースディレクトリ
使用するJsライブラリ、Cssスタイル、画像、サウンドファイルなどがここに配置されています。デバッグとコードの読み取りにより、自分のプロジェクトでテトリスゲームを正常に動作させるために必要なファイルは以下の通りです：
アプリケーションスタイル（css/app.cs）、ゲーム部分のスタイル（css/games.css）、テトリス画像（images/tetrix）、ゲーム音楽再生とスコアのCookie読み書きJsライブラリ（js/utilities.js）、ゲーム背景音楽ファイル（sounds/tetris-theme.ogg）など。
これらのファイルを把握した後、自分のプロジェクトにコピーしながらデバッグを進めます。以下は、先に述べたファイルの一部のスクリーンショットです。
テトリスの背景セルコンポーネント：
テトリスのModelクラスなどの定義：
リソースファイルのスクリーンショット：
2. コンポーネントの再利用
以前は、Dotnet9サイトとDotnet工具箱サイトのオンラインツールとオンラインゲームのコードが2つにコピーされ、それぞれ保守されていましたが、そのうち90%のコードは同じであり、これは許容できないコードの重複でした。
サイト管理者は、元のDotnet工具箱リポジトリを削除し、コードをDotnet9リポジトリに統合し、共有コンポーネントをRazor共有ライブラリに抽出することを検討しました。現在の改良後の共有ライブラリのディレクトリ構造は以下の通りです：
3つのメインプロジェクト：1つ目はRazor共有ライブラリ、2つ目はDotnet9サイトのメインプロジェクト、3つ目はDotnet工具箱のメインプロジェクトです。2と3は両方とも1をプロジェクト参照として追加しています。
Razor共有ライブラリのコード構成。現在あるオンラインツールとオンラインゲームのコンポーネント：
コンポーネントのコードは以前の記事で既に掲載しているので、ここでは省略します。ただし、ゲームページのルーティングについては触れておきます。Dotnet9サイトとDotnet工具箱サイトのWebページレイアウトは異なりますが、内部のコンテンツは同じです。そのため、各ツールとゲームについて、両方のプロジェクトに対応するページルーティングを追加しています。例えば、以下のテトリスページは両方のプロジェクト内での位置を示しています：
Dotnet9内のテトリスページ：
Dotnet工具箱内のテトリスページ：
2つのページの内容はほぼ同じで、異なるのはページタイトル程度でしょう。さらに最適化できる可能性はあります。
最適化の詳細を数百字で説明するのは難しいので、興味がある方は Dotnet9ソースコード をご覧ください。
3. 遭遇した問題と解決策
Dotnet9サイトとDotnet工具箱の開発・デプロイ中にいくつかの問題に遭遇しましたが、資料を調べたり、技術グループの達人に質問したりすることでほとんど解決しました。ここでは、皆さんも遭遇する可能性のある問題をいくつか挙げ、共有・まとめます。
3.1. サーバーへの接続が多すぎる
前回の記事で、サイト管理者はサーバーへの接続が多すぎるというスクリーンショットを掲載し、サーバーの問題だと考えましたが、技術グループのメンバーがすぐに反論しました。サイト管理者のnginx設定に問題があり、Socketが適切に設定されていないために頻繁な接続が発生しているとのことです。元の記事のスクリーンショットは以下の通りです：
解決策としてのNginx参考設定は以下の通りです：
主要な注目ノード設定は proxy_http_version 1.1 ですが、サイト管理者は元々設定していました。昨夜、proxy_set_header Connection keep-alive を proxy_set_header Connection "upgrade" に変更したところ、グループメンバーに確認してもらい、上記のスクリーンショットの問題はおそらく解決したようです。皆さんもDotnet9サイトを開いて確認してみてください。
3.2. Wasmでサブページを直接開くと404
Dotnet工具箱サイトのトップページから他のサブページにアクセスするのは正常ですが、ブラウザのアドレスバーに直接サブページのURLを貼り付けてアクセスすると、サイトは404を返します。解決策もnginx設定の変更です：
location / {
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
主なポイントは try_files です。意味についてはGoogleで検索してください。
3.3. プロジェクトは正常にコンパイルされるが、画面に黒いブロックが表示される
昨日、サイト管理者はDotnet工具箱のテトリス機能をリリースしましたが、ゲームの背景画面（黒い背景）がどうしても表示されませんでした。半日かけて調査した結果、コンポーネント内の子コンポーネントが正しく読み込まれていないことが原因でした。つまり、子コンポーネントの名前空間に @using Dotnetools.Share.Components.Partials を追加していなかったのです。
元のコードは以下の通りです：
問題はF12でWebページのソースをデバッグして発見しました。子コンポーネントに対応するHTMLコードがHTMLネイティブコードにコンパイルされておらず、コンポーネントコードのまま文字列として直接コンパイルされていました。つまり、以下のように表示されていました：
名前空間参照を追加した後、ソースコードは正常に表示され、黒い背景も表示されるようになりました：
この問題は不注意によるものです。共有ライブラリを抽出した後、HTML内のrazorコンポーネントの参照が正しいかどうかを確認しませんでした。この問題に対して、VSは例外のヒントを出しません。
4. まとめ
今日はここまでです。ツールのリクエストがあれば、以下のissueリンクにコメントをお願いします。お読みいただきありがとうございました。
- サイトアドレス：Blazor Server版サイト → https://dotonet9.com/、Blazor Wasm版サイト → https://dotnetools.com/
- サイトソースコード：https://github.com/dotnet9/Dotnet9、Issue → https://github.com/dotnet9/Dotnet9/issues
- .NETバージョン：.NET 8.0.0-preview.5.23280.8
- WeChat技術グループ：サイト管理者のWeChat（codewf）を追加してください。必ず【入群】と2文字をメモしてください。
- QQ技術グループ：771992300