演習 - Blazor - Training | Microsoft Learn

5 分

この演習では、Blazor プロジェクトを作成し、モジュール全体を通して "コネクトフォー" ゲームになるアプリの構築を開始します。

新しい Blazor プロジェクトを作成する

まず、Visual Studio 2022 を使用して、ゲーム用の新しいプロジェクトを作成しましょう。

[ファイル] > [新規] > [プロジェクト] メニューの順に選択して、Visual Studio 2022 で新しい Blazor アプリを作成します。
テンプレートの一覧から [Blazor Web アプリ] を選択し、それに "ConnectFour" という名前を付けます。 [次へ] を選択します。
フレームワークのバージョンでは、[.NET 8] を選択します。 [認証の種類] を [なし]、[対話型レンダリングモード] を [サーバー]、[インタラクティビティの場所] を [ページ/コンポーネントごと] にそれぞれ設定する必要があります。他のオプションはすべて既定値のままにしておきます。

このアクションにより、アプリを含む ConnectFour ディレクトリが作成されます。
Visual Studio 2022 で F5 キーを押してアプリを実行します。

ブラウザーで Blazor アプリが実行されていることを確認できるようになりました。

お疲れさまでした。最初の Blazor アプリが作成されました。

ボードコンポーネントを作成する

次に、ゲームでプレイヤーが使用するゲームボードコンポーネントを作成しましょう。コンポーネントは、HTML と C# の組み合わせである Razor 構文を使って定義します。

Visual Studio のソリューションエクスプローラーで [コンポーネント] フォルダーを右クリックします。コンテキストメニューから [追加] > [Razor コンポーネント] の順に選択し、ファイルに Board.razor という名前を付けます。

このコンポーネントを使用して、ゲームボードのレイアウトに必要なすべてのものを保持し、それとの対話を管理します。この新しいコンポーネントの初期の内容は、h3 タグと、C# コードを記述する場所を示す @code ブロックです。
```
<h3>Board</h3>

@code {

}
```
Components/Pages/Home.razor ファイルを開き、'PageTitle' タグを使用して 3 行目以降のすべてをクリアして、Home ページを準備します。
```
@page "/"

<PageTitle>Home</PageTitle>
```
新しいコンポーネントのファイル名と一致する <Board /> タグを追加して、Board コンポーネントを Home ページに追加します。
```
@page "/"

<PageTitle>Index</PageTitle>
<Board />
```
F5 キーを使用してアプリを実行して、変更を確認します。アプリが既に実行されている場合は、[実行/続行] ボタンの横にある [ホットリロード] ボタンをタップして、実行中のアプリに変更を適用します。

ヒント

ファイルを変更するたびに実行中のアプリに変更を適用するには、[ホットリロード] メニューから [ファイルの保存時にホットリロード] オプションを選択します。

おめでとうございます。最初のコンポーネントを作成し、Blazor ページで使いました。

ゲームボードへのコンテンツとスタイルの追加

7 つの列と 6 つの行を含むゲームボードの定義を始めましょう。少しのスタイルを追加して、ボードを活性化します。

Board.razor ファイルで、先頭にある HTML を削除し、次の内容を追加して、ゲームピース用の 42 個の場所があるボードを定義します。

C# for ループを使用して、42 個のボード位置を生成できます。コンテナーの span タグが取得され、その内容が 42 回繰り返されてボードを表します。
```
<div>
   <div class="board">
      @for (var i = 0; i < 42; i++)
      {
         <span class="container">
            <span></span>
         </span>
      }
   </div>
</div>
```

ボードコンポーネントを保存すると、更新されたアプリをリビルドして起動するホットリロード機能のおかげで、アプリが更新され、空のページとして表示されます。

Note

ファイルを変更すると、Visual Studio からアプリの再起動を求められる場合があります。コードの編集時にアプリをリビルドする必要があることを確認すると、機能を追加したときにアプリが自動的に再起動され、ブラウザーが更新されます。

コンポーネントのスタイルを設定する

Board.razor ファイルで、最初の div タグより上に、ボードのフレームとプレイヤーの色を定義して、Board コンポーネントにいくつかのスタイルを追加してみましょう。

<HeadContent>
    <style>
        :root {
            --board-bg: yellow;  /** the color of the board **/
            --player1: red;      /** Player 1's piece color **/
            --player2: blue;     /** Player 2's piece color **/
        }
    </style>
</HeadContent>

<div>...</div>

これらの CSS 変数 --board-bg、--player1: red、--player2: blue は取得され、このコンポーネントのスタイルシートの残りの部分で使用されます。

次に、ゲームの完成したスタイルシートを Board コンポーネントに追加します。

ソリューションエクスプローラーで Components フォルダーを右クリックし、Board.razor.css という名前の新しい CSS ファイルを作成します。

次の内容を新しい Board.razor.css ファイルにコピーします。

div{position:relative}nav{top:4em;width:30em;display:inline-flex;flex-direction:row;margin-left:10px}nav span{width:4em;text-align:center;cursor:pointer;font-size:1em}div.board{margin-top:1em;flex-wrap:wrap;width:30em;height:24em;overflow:hidden;display:inline-flex;flex-direction:row;flex-wrap:wrap;z-index:-5;row-gap:0;pointer-events:none;border-left:10px solid var(--board-bg)}span.container{width:4em;height:4em;margin:0;padding:4px;overflow:hidden;background-color:transparent;position:relative;z-index:-2;pointer-events:none}.container span{width:3.5em;height:3.5em;border-radius:50%;box-shadow:0 0 0 3em var(--board-bg);left:0;position:absolute;display:block;z-index:5;pointer-events:none}.player1,.player2{width:3.5em;height:3.5em;border-radius:50%;left:0;top:0;position:absolute;display:block;z-index:-8}.player1{background-color:var(--player1);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player1)}.player2{background-color:var(--player2);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player2)}.col0{left:calc(0em + 9px)}.col1{left:calc(4em + 9px)}.col2{left:calc(8em + 9px)}.col3{left:calc(12em + 9px)}.col4{left:calc(16em + 9px)}.col5{left:calc(20em + 9px)}.col6{left:calc(24em + 9px)}.drop1{animation-duration:1s;animation-name:drop1}.drop2{animation-duration:1.5s;animation-name:drop2}.drop3{animation-duration:1.6s;animation-name:drop3}.drop4{animation-duration:1.7s;animation-name:drop4}.drop5{animation-duration:1.8s;animation-name:drop5}.drop6{animation-duration:1.9s;animation-name:drop6}@keyframes drop1{100%,75%,90%,97%{transform:translateY(1.27em)}80%{transform:translateY(.4em)}95%{transform:translateY(.8em)}99%{transform:translateY(1em)}}@keyframes drop2{100%,75%,90%,97%{transform:translateY(5.27em)}80%{transform:translateY(3.8em)}95%{transform:translateY(4.6em)}99%{transform:translateY(4.9em)}}@keyframes drop3{100%,75%,90%,97%{transform:translateY(9.27em)}80%{transform:translateY(7.2em)}95%{transform:translateY(8.3em)}99%{transform:translateY(8.8em)}}@keyframes drop4{100%,75%,90%,97%{transform:translateY(13.27em)}80%{transform:translateY(10.6em)}95%{transform:translateY(12em)}99%{transform:translateY(12.7em)}}@keyframes drop5{100%,75%,90%,97%{transform:translateY(17.27em)}80%{transform:translateY(14em)}95%{transform:translateY(15.7em)}99%{transform:translateY(16.5em)}}@keyframes drop6{100%,75%,90%,97%{transform:translateY(21.27em)}80%{transform:translateY(17.4em)}95%{transform:translateY(19.4em)}99%{transform:translateY(20.4em)}}

ボードと各スペースの "パンチ穴" の書式設定に使用される CSS の一部を次に示します。ゲームピースと画面上のそのアニメーションの CSS ファイルには、以下に表示されているものよりも多くの使用可能なコンテンツが含まれています。

div.board {
    margin-top: 1em;
    flex-wrap: wrap;
    width: 30em;
    height: 24em;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: -5;
    row-gap: 0;
    pointer-events: none;
    border-left: 10px solid var(--board-bg);
}

span.container {
    width: 4em;
    height: 4em;
    margin: 0;
    padding: 4px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: -2;
    pointer-events: none;
}

.container span {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 3em var(--board-bg);
    left: 0px;
    position: absolute;
    display: block;
    z-index: 5;
    pointer-events: none;
}

ブラウザーが自動的に更新され (更新されない場合は、F5 キーでブラウザーを手動更新できます)、適切な黄色の Connect Four ボードが表示されます。

Screenshot of Yellow connect four board.

おめでとうございます。ゲームの始まりです。以降のユニットでは、それにゲームのロジックを追加します。

続行

演習 - Blazor

新しい Blazor プロジェクトを作成する

ボード コンポーネントを作成する

ゲーム ボードへのコンテンツとスタイルの追加

コンポーネントのスタイルを設定する

フィードバック

ボードコンポーネントを作成する

ゲームボードへのコンテンツとスタイルの追加