記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p data-bm="62" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">了解です。 前回のモデルとサンプルデータを、さらに 多言語対応 と&nbsp;SEO向け設定 を組み込んだ形にリファインします。 今回の改良点は以下です。<ul data-bm="63" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">多言語対応：<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TitleEn</code> / <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">DescriptionEn</code> を追加し、英語表示にも対応</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">SEO対応：<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Slug</code> プロパティを追加し、URL生成やSEO最適化に利用可能</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">IsVisibleInMenu を追加し、メニューには表示しないが直接アクセス可能なページを制御</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">サンプルデータを多言語・SEOを意識した形に変更</li></ul><h2 data-bm="64" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">モデル例（Menu.cs）</h2><pre data-priority="2" data-bm="65" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="72" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(243, 249, 254);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(11, 73, 127);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MyApp.Models
{
 /// &lt;summary&gt;
 /// 階層型メニュー項目モデル（多言語・SEO対応）
 /// &lt;/summary&gt;
 public class Menu
 {
 [Key]
 public int Id { get; set; }

 [Required]
 [MaxLength(100)]
 public string Title { get; set; }

 [MaxLength(100)]
 public string TitleEn { get; set; }

 [MaxLength(200)]
 public string Url { get; set; }

 /// &lt;summary&gt;
 /// SEO用スラッグ（URL生成に利用）
 /// &lt;/summary&gt;
 [MaxLength(100)]
 public string Slug { get; set; }

 public int SortOrder { get; set; } = 0;

 public bool IsActive { get; set; } = true;

 /// &lt;summary&gt;
 /// メニューに表示するかどうか（falseなら直接アクセスのみ）
 /// &lt;/summary&gt;
 public bool IsVisibleInMenu { get; set; } = true;

 [MaxLength(50)]
 public string IconClass { get; set; }

 [MaxLength(250)]
 public string Description { get; set; }

 [MaxLength(250)]
 public string DescriptionEn { get; set; }

 [MaxLength(20)]
 public string Target { get; set; } = &quot;_self&quot;;

 [MaxLength(50)]
 public string PermissionKey { get; set; }

 public int? ParentId { get; set; }

 [ForeignKey(&quot;ParentId&quot;)]
 public Menu Parent { get; set; }

 public ICollection&lt;Menu&gt; Children { get; set; } = new List&lt;Menu&gt;();
 }
}
</code></pre><h2 data-bm="66" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">サンプルデータ（Seed）</h2><pre data-priority="2" data-bm="67" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="73" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(243, 249, 254);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(11, 73, 127);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">using Microsoft.EntityFrameworkCore;
using MyApp.Models;

namespace MyApp.Data
{
 public class AppDbContext : DbContext
 {
 public DbSet&lt;Menu&gt; Menus { get; set; }

 public AppDbContext(DbContextOptions&lt;AppDbContext&gt; options) : base(options) { }

 protected override void OnModelCreating(ModelBuilder modelBuilder)
 {
 // トップレベルメニュー
 modelBuilder.Entity&lt;Menu&gt;().HasData(
 new Menu { Id = 1, Title = &quot;ホーム&quot;, TitleEn = &quot;Home&quot;, Url = &quot;/&quot;, Slug = &quot;home&quot;, SortOrder = 1, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-home&quot;, Description = &quot;サイトのトップページ&quot;, DescriptionEn = &quot;Website home page&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;Guest&quot; },
 new Menu { Id = 2, Title = &quot;サービス&quot;, TitleEn = &quot;Services&quot;, Url = &quot;/services&quot;, Slug = &quot;services&quot;, SortOrder = 2, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-cogs&quot;, Description = &quot;提供サービス一覧&quot;, DescriptionEn = &quot;List of services&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;User&quot; },
 new Menu { Id = 3, Title = &quot;ブログ&quot;, TitleEn = &quot;Blog&quot;, Url = &quot;/blog&quot;, Slug = &quot;blog&quot;, SortOrder = 3, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-blog&quot;, Description = &quot;最新ニュースと記事&quot;, DescriptionEn = &quot;Latest news and articles&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;Guest&quot; }
 );

 // 子メニュー（サービス）
 modelBuilder.Entity&lt;Menu&gt;().HasData(
 new Menu { Id = 4, Title = &quot;Web開発&quot;, TitleEn = &quot;Web Development&quot;, Url = &quot;/services/web&quot;, Slug = &quot;web-development&quot;, SortOrder = 1, ParentId = 2, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-code&quot;, Description = &quot;Webアプリ開発&quot;, DescriptionEn = &quot;Web application development&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;User&quot; },
 new Menu { Id = 5, Title = &quot;モバイルアプリ&quot;, TitleEn = &quot;Mobile Apps&quot;, Url = &quot;/services/mobile&quot;, Slug = &quot;mobile-apps&quot;, SortOrder = 2, ParentId = 2, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-mobile&quot;, Description = &quot;スマホアプリ開発&quot;, DescriptionEn = &quot;Mobile application development&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;User&quot; }
 );

 // 孫メニュー（Web開発）
 modelBuilder.Entity&lt;Menu&gt;().HasData(
 new Menu { Id = 6, Title = &quot;フロントエンド&quot;, TitleEn = &quot;Frontend&quot;, Url = &quot;/services/web/frontend&quot;, Slug = &quot;frontend&quot;, SortOrder = 1, ParentId = 4, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-desktop&quot;, Description = &quot;UI/UX設計&quot;, DescriptionEn = &quot;UI/UX design&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;User&quot; },
 new Menu { Id = 7, Title = &quot;バックエンド&quot;, TitleEn = &quot;Backend&quot;, Url = &quot;/services/web/backend&quot;, Slug = &quot;backend&quot;, SortOrder = 2, ParentId = 4, IsActive = true, IsVisibleInMenu = true, IconClass = &quot;fa fa-server&quot;, Description = &quot;API・DB構築&quot;, DescriptionEn = &quot;API and database development&quot;, Target = &quot;_self&quot;, PermissionKey = &quot;User&quot; }
 );
 }
 }
}
</code></pre><h2 data-bm="68" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">改良ポイント</h2><ul data-bm="69" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">多言語対応：<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TitleEn</code> / <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">DescriptionEn</code> により、UI言語切替が可能。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">SEO対応：<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Slug</code> を使ってクリーンURL生成や検索エンジン最適化が可能。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">IsVisibleInMenu により、メニュー非表示ページ（LPやキャンペーンページなど）も管理可能。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">サンプルデータは日本語・英語両方を含み、国際化対応サイトを想定。</li></ul><p data-bm="70" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">このバージョンを使えば、多言語対応の階層ドロップダウンメニューを構築できます。 もし希望があれば、このモデルを使った 言語切替対応の Razor View 実装例 も提示できます。<p data-bm="71" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">次はこの多言語モデルを使って、言語切替付き階層ドロップダウン描画コードを作りますか？Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる