プロジェクト概要

この個人向けウェブサイトは、ASP.NET Core MVC アーキテクチャと Bootstrap を利用して構築されています。

• 主要コンテンツ：プロフィール、ポートフォリオ（写真ギャラリー）、音楽エントリ
• 主要機能：ユーザー情報の CRUD、レスポンシブ対応 UI、内部ナビゲーションの実装

プロジェクト構成

開発手順と実装例

1. プロジェクトの初期設定

Visual Studio 2019 を使用し、「ASP.NET Core Web Application (Model-View-Controller)」テンプレートより新規プロジェクトを作成します。デバッグなしで実行するには、Ctrl + F5 を使用します。

2. 最初のコントローラとビューの追加

例えば、「Portfolio」モジュールを追加する場合、まず Controllers 配下に PortfolioController.cs を追加します。次に Views/Portfolio ディレクトリを作成し、Index.cshtml を以下のように定義します：

@{
    ViewData["Title"] = "Portfolio";
}
<div class="text-center">
    <h2 class="display-4">My Portfolio</h2>
    <p class="lead"> showcased creative works and projects.</p>
</div>

ナビゲーションバーにリンクを追加するには、Views/Shared/_Layout.cshtml の以下部分に新しい項目を挿入します：

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" asp-controller="Portfolio" asp-action="Index">Portfolio</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
</ul>

3. モデルと EF Core の導入

Models 配下に、以下のようなエンティティクラスを定義します：

using System;
using System.ComponentModel.DataAnnotations;

namespace PersonalSite.Models
{
    public class ProjectEntry
    {
        public int Id { get; set; }

        [Required, StringLength(100)]
        public string Title { get; set; }

        [StringLength(500)]
        public string Description { get; set; }

        [DataType(DataType.Date)]
        public DateTime Date { get; set; }

        public string Link { get; set; }
    }
}

次に、データコンテキストを定義します：

using Microsoft.EntityFrameworkCore;
using PersonalSite.Models;

namespace PersonalSite.Data
{
    public class SiteDbContext : DbContext
    {
        public SiteDbContext(DbContextOptions<SiteDbContext> options) : base(options) { }
        
        public DbSet<ProjectEntry> Projects { get; set; }
    }
}

プロジェクト参照に Microsoft.EntityFrameworkCore.Design を追加し、PMC で以下のコマンドを実行して初期マイグレーションを作成します：

Add-Migration CreateProjectTable
Update-Database

4. データ初期化と Seed 功能の実装

起動時にデータを初期化するため、SeedData.cs を以下のように追加します：

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using PersonalSite.Data;

namespace PersonalSite.Models
{
    public static class SeedData
    {
        public static void Initialize(IServiceProvider services)
        {
            using var context = new SiteDbContext(
                services.GetRequiredService<DbContextOptions<SiteDbContext>>());

            if (context.Projects.Any()) return;

            context.Projects.AddRange(
                new ProjectEntry {
                    Title = "Blog System", Description = "Lightweight blog engine", 
                    Date = new DateTime(2023, 4, 12), Link = "/blog"
                },
                new ProjectEntry {
                    Title = "Photo Gallery", Description = "Responsive image showcase", 
                    Date = new DateTime(2023, 8, 20), Link = "/gallery"
                }
            );

            context.SaveChanges();
        }
    }
}

Program.cs の Main メソッドで初期化を呼び出します：

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>();
        });

public static void Main(string[] args)
{
    var host = CreateHostBuilder(args).Build();
    using (var scope = host.Services.CreateScope())
    {
        var services = scope.ServiceProvider;
        try { SeedData.Initialize(services); }
        catch (Exception ex) { /* handle */ }
    }
    host.Run();
}

5. Bootstrap を活用したレスポンシブ対応

_Layout.cshtml では、グリッドシステムや Bootstrap Utility Class を活用し、画面幅に応じたレイアウト調整を行います。たとえば、以下のスニペットで、写真ギャラリーをレスポンシブグリッドで表示できます：

<div class="container mt-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
    @foreach (var item in Model) {
        <div class="col">
            <div class="card h-100 shadow-sm">
                <img src="@item.ImageUrl" class="card-img-top" alt="@item.Title">
                <div class="card-body">
                    <h5 class="card-title">@item.Title</h5>
                    <p class="card-text">@item.Description</p>
                </div>
            </div>
        </div>
    }
    </div>
</div>