BlazorでのWebアプリケーション開発手法１【C#】A04_アプリの実行

Blazorのプロジェクトを作成すると、最初に「アプリの実行」という概要ページが表示されます。ここでは、この画面を閉じてから実際にアプリを実行し、ブラウザーで動作を確認するまでの一連の操作を解説します。

図1: プロジェクト作成直後に表示される概要ページ

最初に表示されるこの概要ページは、ここでは使わないのでバツ（×）で閉じておきます。ソリューションエクスプローラーにはプロジェクトのファイル一式が並んでいますが、まずは実際にプログラムを実行してみます。

図2: 概要ページを閉じる

実行ボタンでアプリを起動する

ツールバーにある緑色の三角マーク（実行ボタン）をクリックすると、アプリを実行できます。同じ操作はF5キーでも行えます。

図3: ツールバーの実行ボタン（▶ https）

実行すると、出力ウィンドウにビルドや起動時のログが表示され、続けてブラウザーが自動的に開いてアプリの画面が表示されます。

図4: 実行時に出力される起動ログ

図5: ブラウザーに表示されたBlazorアプリ（Hello, world!）

証明書関連のダイアログについて

初めて実行したときには、開発用のSSL証明書に関する確認ダイアログが表示されることがあります。「このプロジェクトはSSLを使用するように構成されています」といった内容の確認画面が出た場合は、「はい」を押してください。

図6: ASP.NET Core SSL証明書を信頼するかどうかの確認ダイアログ

図7: 「はい」をクリックして証明書を信頼する

続けて、証明書のインストールを確認するセキュリティの警告ダイアログが表示された場合も、そのままインストールを進めておきます。これらのダイアログは最初に1回だけ表示され、以降は表示されなくなります。

図8: 証明書のインストールを確認するセキュリティの警告

表示されるアドレスと使用ブラウザーの変更

アドレスバーには localhost と番号（ポート番号）が表示されます。これは開発環境（自分のPC）上でアプリを実行しているためのアドレスです。実際にAzureなどへ発行（デプロイ）した場合は、そこで設定したURLでアクセスする形になります。

図9: アドレスバーに表示される localhost とポート番号

現在はGoogle Chromeでアプリが表示されていますが、実行に使用するブラウザーは変更できます。実行ボタン横の▽（下向き矢印）をクリックすると、「Webブラウザー」の項目からブラウザーを選択できるメニューが開きます。

図10: 実行ボタン横の▽から起動オプションのメニューを開く

図11: 「Webブラウザー」サブメニュー（現在はGoogle Chromeが選択されている）

ここでたとえばMicrosoft Edgeを選択すると、次回の実行からはEdgeでアプリが表示されるようになります。

図12: Microsoft Edgeを選択する

図13: Microsoft Edgeで表示されたアプリ画面

このように、実行ボタン（またはF5キー）でアプリを起動し、ブラウザーで動作を確認する、という流れでアプリを実行していきます。