#1.HTMLをいじってみる。
前回の記事の続きです。
今回も勉強したことを記録しているだけなので間違いがある可能性があります。ご了承ください。
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/", async context =>
{
await context.Response.WriteAsync("Hello World!");
});
});
StartupクラスのConfigureメソッドの中に、HTTP要求があったときにどんな処理を行うかを記述する、というのは前回学習しました。
Startup.csにあるUseEndpointsは**「アクセス時の処理を割り当てる」**役割を持っていました。デフォルトでは「エンドポイントが呼び出されたら、context.Response.WriteAsyncメソッド内の引数Hello World!をWebページ表示する」という処理が書かれています。
ここで「UseEndPointsでアクセス時の処理を変更する」というのを行えば、Webページ上に表示するものを変えることができます。どうやら特定の記述を行えばWriteAsyncメソッドの引数にHTMLタグを入れられるそうなので、学んだことを書いてみることにしました。
MapGetメソッドの第2引数の後のラムダ式に、以下のように記述を行います。
endpoints.MapGet("/", async context =>
{
context.Response.ContentType = "text/html";
await context.Response.WriteAsync("<html><title>ButterflyFishList</title></head>");
await context.Response.WriteAsync("<body><h1>Chaetodontidae</h1>");
await context.Response.WriteAsync("<i>Chelmon rostratus</i>");
await context.Response.WriteAsync("<i> Chaetodon daedalma</i>");
await context.Response.WriteAsync("</body></html>");
});
自分の趣味全開でHTMLを記述してみました。
Webページの名前はButterflyFishList(チョウチョウウオのリスト)にして、大見出しはチョウチョウウオ科の学名、本文には私の好きなユウゼンとハシナガチョウチョウウオの学名を書いてみました。
学名は斜体なので、タグで囲っています。
実行するとこんな感じになります。
HTMLを記述する前に、context.Response.ContentType = "text/html";と記述しました。
HttpResponseには、レスポンスに関するいろいろなプロパティが用意されています。今回使用したContentTypeはWebページに表示するコンテンツの種類を決めることができます。
今回は、ContentTypeを"text/html"に変更したので、出力した文字列をHTMのコードと認識してくれるようになりました。
#2.WelcomePageを表示できるらしい
HTTPリクエストを処理するためのミドルウェアを組み込むメソッドはEndPointsだけではなくいろいろあるそうです。その一例がUseWelcomePageと呼ばれるメソッド。
こいつをConfigureメソッド内に記述しておくと、ウェルカムページというなんかカラフルなページが表示されるようになります。やってみましょう。
//app.UseEndpoints(endpoints =>
//{
// endpoints.MapGet("/", async context =>
// {
// context.Response.ContentType = "text/html";
// await context.Response.WriteAsync("<html><title>ButterflyFishList</title></head>");
// await context.Response.WriteAsync("<body><h1>Chaetodontidae</h1>");
// await context.Response.WriteAsync("<i>Chelmon rostratus</i>");
// await context.Response.WriteAsync("<i> Chaetodon daedalma</i>");
// await context.Response.WriteAsync("</body></html>");
// });
//});
app.UseWelcomePage();
app.UseEndPointsの部分はすべてコメントアウトし、新たにUseWelcomePageの記述をしました。
ちなみにこれ両方書いたらどうなるのかですが、Configureメソッド内に組み込まれたミドルウェアは基本的に上から順に処理されていきます。出力の役割を持つミドルウェアを二つ書いた場合、先に書かれた方が働くので後に書かれたミドルウェアは呼び出されません。
ミドルウェアの順番は正しく記述しないとWebアプリを作るうえでエラーの原因にもなるので気を付けることが大事！
実行したらカラフルなページが表示されました。
実際のWebページを開発してる際に、ダミーとしてとりあえず表示させておきたいときとかに役立つそうです。
#3．おわりに
出力の部分をいろいろいじれることがわかりました。
これを知っていればWebアプリの開発の際に幅が広がりそうです。知識のインプットとアウトプットは大事ですね。