【T1a】ASP.NET Core の基本(4/4)

プロジェクトタイプ	ASP.NET Core (空)
プロジェクト名	`T1a`
ソリューション名	`PIT1`
ターゲットフレームワーク	.NET 8.0(長期的なサポート)
最上位レベルのステートメントを使用しない	使用する(チェックオフ)

注意

本ページの作業内容は 前のページまでの続き になっていることに注意せよ．
- 先に前のページまでをすべて読み，指示されている作業を済ませてから本ページを読むこと．
- プロジェクトの作成作業についてはプロジェクトの作成と実行を参照せよ．

1a-4. 単純なウェブサーバを構成する

「ASP.NET Core Web アプリケーション」を実際に実行する方法はさまざまであるが，このタイプのアプリケーションは基本的に それ自体がリクエストを受け付けることができるウェブサーバ(HTTPデーモン)として機能する．試しに，いま作成したプロジェクトをあらかじめ用意したHTMLファイルなどを返すだけのウェブサーバとして構成してみよう．

このためにProgram.csのapp.MapGet(...)の部分を削除して，_に示すように書き換えよう．

Program.csの書き換え

1
2
3
4
5
6
7
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseDefaultFiles(); // デフォルトファイルを使用する
app.UseStaticFiles();  // 静的ファイルを使用する

app.Run();

_のようにすると，HTMLファイルやCSSファイル，画像ファイルなどあらかじめ用意されている静的ファイルを公開できるようになる．公開する静的ファイルはデフォルトでは，プロジェクトフォルダの直下の wwwrootという名前のフォルダ に配置することになっている．このフォルダはウェブルートと呼ばれる．実際にこのウェブルートフォルダを作成してみよう．ソリューションエクスプローラーでプロジェクト名を右クリックし，「追加」→「新しいフォルダー」を選択し，フォルダ名としてwwwrootと指定する¹．正しく設定すれば，フォルダのアイコンが「」のように変化するはずである(_)．

それではこのフォルダにHTMLファイルを追加しよう．ソリューションエクスプローラー上で， wwwrootを右クリックし「追加」→「新しい項目」をクリックする(_が表示された場合は，「すべてのテンプレートの表示」ボタンをクリックする)．「新しい項目の追加」ダイアログで，「HTMLページ」を探して選択し，ファイル名にindex.htmlと指定して「追加」ボタンをクリックする (_)．今後も，このようなファイルを追加する作業はさまざまな場面で必要になるので，操作方法は覚えておこう．

作成されたHTMLファイルには，HTMLの大枠はあらかじめ書き込まれている．ここでは何のファイルにアクセスしているかわかりやすいように_のようにタイトル，見出しを追記しよう(2行目はページの言語設定である)．

index.htmlの中身

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    <h1>今見ているのは index.html </h1>
</body>
</html>

ここまでできたらデバッグ実行してみよう．すると_のように表示される．

知っての通りHTMLファイルはそれ自体は単純なテキストファイルである．ウェブブラウザで表示されているときは，それに見た目の指定が加味されて表示されているため，HTMLファイルそのものと表示されたページの見た目はイコールではない．そのためページが本当に先ほど記述したものと同じであるかを確認しよう．

たいていのウェブブラウザにはいま表示されているページの元となったHTMLファイルの内容を表示する機能が備わっている．Firefoxの場合は_に示す通り， ページを右クリックして「ページのソースを表示」をクリックすることで確認できる．

表示されたページのソースと Visual Studio 上のindex.htmlの内容を見比べてみよう． _に示すように，デバッグ用に自動的に付加されている行があるが，確かに同じファイルが表示されていることがわかるはずである (さきほどの「Hello World!」のままになってしまう場合には，ソースが表示されたタブでF5キーを押すなどして再読み込みをしよう)．

ここでURLについて少し説明しておこう．デバッグ実行時，ウェブブラウザのアドレスバーに http://localhost:ポート番号/のように表示されたはずである．このURLの各部には _に示すような意味がある．

これは「localhostというマシンにある/というファイル」を意味している．しかし先ほど作成したのはindex.htmlというファイルであって/というファイル名ではなかったはずである．にもかかわらずなぜindex.htmlが表示されたかというと，先ほど_で，UseDefaultFiles()メソッドを呼び出したためである．

実は/はファイルではなくフォルダ(≒ディレクトリ)の参照を意味する．そしてUseDefaultFiles()メソッドの呼び出しによって，フォルダへの参照がそのフォルダ以下にあるindex.htmlなどのファイル²に読み替えられるように設定されたため， /に代わって，index.htmlが表示されたのである．

ここではindex.htmlのみを表示していたが，もちろんwwwrootフォルダに別のファイルを置けばそのファイルも表示可能になる．試しにindex.htmlをhoge.htmlという名前で複製してみよう． _，_に示すようにタイトルと見出しとタイトルも変更しておく．

hoge.htmlの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Hoge</title>
</head>
<body>
    <h1>今見ているのは hoge.html</h1>
</body>
</html>

また，_に示すようにindex.htmlにhoge.htmlへのリンクを追記しよう．

index.htmlに追記

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    <h1>今見ているのは index.html </h1>
    <a href="hoge.html">hogeへ</a>    
</body>
</html>

この状態でデバッグ実行してみよう．「hogeへ」のリンクをクリックすると，_に示すようにhoge.htmlに遷移しアドレスバーも書き換わることが確認できるはずである．

ここまでの動作を確認したら一つ目のチュートリアルは完了である．以降の作業における混乱を防ぐため，次に進む前に Visual Studio のエディタをすべて閉じておこう．Visual Studio のいずれかのエディタのタブを右クリックして「すべてのドキュメントを閉じる」をクリックすれば，エディタをすべて閉じることができる(_)³．

すべて半角小文字なので注意せよ． ↩︎
index とは索引という意味である．つまりそのフォルダの内にあるファイルの一覧を意味している． ↩︎
Visual Studio のバージョン／リビジョンによっては「すべてのドキュメントを閉じる」と表示される場合もある． ↩︎

Last updated on 2024-04-12
Published on 2024-04-12