概要

この記事では前回前々回の記事に続き、ページを改良していきます。

■VisualStudioでC#＋ASP.NETでWEBサイトを作ってGitで管理する
 ■WEBアプリをAzureへデプロイして公開し独自ドメインを設定する

今回は以下の内容を紹介します。

複数のサイト
複数のページ
画面の共通化（_Layout.cshtml,_ViewStart.cshtml）
SCSSのセットアップ

複数のサイト

VisualStudioのプロジェクト1つが1つのWEBサイトになります。今回は新しくWebSite_Golfというゴルフ用のサイトを作ってみました。

前回と同様にAzureにWEBサイトを作成しデプロイします。前回は新規にAppServiceプランを作成しましたが今回は前回作ったものを選択します。課金はAppServiceプランごとに行われるので2つ目のWEBサイトを作ったことでお金がさらに出ていくことはありません。

もちろん1つのAppServiceプランに無限にWEBサイトを作れるわけではありません。1つのAppServiceプランにたくさんWEBサイトを作っていくとCPUやメモリの消費量が上がります。リソースの使用量が上がるとサイトの動作が遅くなります。そのタイミングで新しいAppServiceプランを作るということになるでしょう。

前回同様、カスタムドメインの設定をしていきます。
■WEBアプリをAzureへデプロイして公開し独自ドメインを設定する
今回はgolf.higty.comというドメインにしてみました。
http://golf.higty.com
このサイトにはマスターズの開催コースであるオーガスタ・ナショナルゴルフクラブのことを書いていくことにします。

複数のページの作成方法

以前の記事ではページが一つしかないWEBサイトを構築しました。
■VisualStudioでC#＋ASP.NETでWEBサイトを作ってGitで管理する
今回は複数のページの作り方を紹介していきます。URLの管理はHoleControllerで可能です。

HomeController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebSite.Controllers
{
    public class HoleController : Controller
    {
        [HttpGet("/")]
        public IActionResult Root()
        {
            return View();
        }
        [HttpGet("/Masters/Hole/{number}")]
        public IActionResult Hole(Int32 number)
        {
            if (number == 2 || number == 7)
            {
                return View("Hole" + number);
            }
            return View("UnderConstruction");
        }
    }
}

Rootメソッドがルートのページ(http://golf.higty.com/)
Holeメソッドが各ホールのページ(http://golf.higty.com/Masters/Hole/2)
になります。各ホールのページを詳しく見てみます。

        [HttpGet("/Masters/Hole/{number}")]
        public IActionResult Hole(Int32 number)
        {
            if (number == 2 || number == 7)
            {
                return View("Hole" + number);
            }
            return View("UnderConstruction");
        }

まだ2番ホールと7番ホールしか作っていません。それ以外のホールの時は作成中ですというページに飛ばします。

ブレイクポイントをセットしてデバッグを開始し、/Masters/Hole/2にアクセスしてみます。numberに2という値が入ってきているのがわかります。

Viewメソッドでビューの名前を指定しています。"Hole" + 2で"Hole2"という文字になり、Views/Holeフォルダの下にあるHole2.cshtmlファイルがビューとして使われることになります。

あとはHole1-Hole18まで全て作っていけば18ページ分のページを作成できます。

まだ未作成の場合（2番7番ホール以外）はUnderCnostruction.cshtlmページが表示されます。

画面の共通化（_Layout.cshtml,_ViewStart.cshtml）

2番ホールと7番ホールのページを見てみましょう。画面上部の各ホールへのリンクが共通です。

こういった画面の外側のレイアウトを共通化する方法として_Layout.cshtmlファイルという仕組みがあります。概念としてはこんな感じです。

実際の_Layout.cshtmlファイルです。

_Layout.cshtml

<!DOCTYPE html>

<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <link href="~/Css/Common.css" rel="stylesheet" />
</head>
<body>
    <div class="content-panel">
        <div class="hole-list">
            @for (int i = 1; i <= 18; i++)
            {
                <a href="@String.Format("/Masters/Hole/{0}", i)">Hole @i.ToString()</a>
            }
        </div>
        <div class="hole-description-panel">
            @RenderBody()
        </div>
    </div>
</body>
</html>

@RenderBody()のところに各ページのHTMLが挿入されます。

Hole2.cshtmlの一番上にこのように書くと

@{
    Layout = "~/Views/_Layout.cshtml";
}

_Layout.cshtmlを使ってHTMLを生成することになります。

Hole1-Hole18の各HoleX.cshtmlファイルにこの記述を書くのが手間な場合はViewsフォルダの直下に_ViewStart.cshtmlファイルを作成してその記述を省くことができます。

_ViewStart.cshtml

@{
    Layout = "~/Views/_Layout.cshtml";
}

wwwroot,HTML,CSS,SCSSについて

画面の見た目はCSSファイルにまとめましょう。CSSの拡張機能であるWeb Compilerをインストールすると各ブラウザごとに異なる記述を共通化できます。
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

インストールしておきましょう。メニューバー→ツール→拡張機能と更新プログラムでWeb Compilerと入力して検索します。

インストールが終わったらwwwrootフォルダの下にCssフォルダを作成し、フォルダ右クリック→追加→新しい項目からCommon.scssファイルを追加します。scssファイルを右クリック→Web Compiler→Recompile fileでCSSファイルが生成されます。

Common.min.cssはいらない文字（空白文字とか）を削ってサイズが最小化されたファイルになります。本番環境にデプロイするときはこちらを使うといい感じです。（今回はまだ使いません。）

Common.cssファイルへのリンクを_Layout.cshtmlに追加します。

_Layout.cshtml

<!DOCTYPE html>

<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <link href="~/Css/Common.css" rel="stylesheet" />
</head>
<body>
...以下略

これでHole1-Hole18の全ページでCommon.cssファイルの設定が効くようになりました。

SCSSファイルを使用するとブラウザごとの記述の違いを共通化できます。
例えばdisplay:flexの設定をこんな感じで共通化しておいて

Common.scss

@mixin display_flex() {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

それをこのように使用すると

Common.scss

.hole-image-list-panel {
    @include display_flex();
    width:100%;
}

Common.cssファイルはこのように生成されます。

Common.css

.hole-image-list-panel {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%; }

今回は.hole-image-list-panelの一か所ですが複数個所ある場合にはプログラムの保守性が向上します。ブラウザが増えたときでも@mixin display_flex()の中身を変更すれば全ての場所に適用されるので便利です。こういった変更の回数を減らせることを保守性が向上するといいます。

まとめ

今回は複数サイト、ページの増やし方、いろいろな共通化の仕方を紹介しました。次回以降でこのサイトをいろいろ改良していきます。フォローしてね。

以前の記事はこちら↓
■VisualStudioでC#＋ASP.NETでWEBサイトを作ってGitで管理する
 ■WEBアプリをAzureへデプロイして公開し独自ドメインを設定する