Building Simple Multilingual ASP.NET Core Website

このチュートリアルでは、ASP.NET Coreで新しい多言語Webサイトを作成し、IISに公開します。ASP.NET Coreのバージョン1.0は2016年6月にリリースされたので、かなり新しいツールです。その主な特徴は、Windows、Linux、Macでアプリをクロスプラットフォームで開発および実行できることです。

Katie Mikova Last Updated Feb 25, 2025 10min read

今日はWindowsに焦点を当てます。ASP.NET CoreはASP.NET MVC 5と比較していくつかの違いを含んでいるので、それは何か単純なものから始めることをお勧めします、そして私たちのウェブサイトは、2つのウェブページで構成され、両方とも3つの言語で、それは良いオファーです。

Windows での .NET Core 環境の作成

ASP.NET Coreから始めるには、Visual Studio 2015とVisual Studio Update3がインストールされている必要があります。両方をすでにインストールしている場合は、この手順をスキップします。そうでない場合は、ここでVisual Studio Communityを無料で入手できます: Visual Studio Community 2015のダウンロードとVisual Studio Update 3はこちら: Visual Studio Update 3のダウンロード。Visual Studio Community 2015 のインストール中に、既定のインストールを選択するだけです。

Visual Studio および .NET Core Windows Server ホスティング用の .NET Core 1.0 のインストール

次に、Visual Studio用の.NET Core 1.0と.NET Core Windows Server Hostingをインストールする必要があるため、Webサイトを構築して公開できるようになります。Visual Studio用の.NET Core 1.0はこちらから入手できます:.NET Core 1.0 for Visual Studioのダウンロードと.NET Core Windowsサーバーホスティングはこちら:.NET Core Windowsサーバーホスティングダウンロード。

ウェブサイトの作成

これらすべての必需品をすでにインストールしている場合は、新しいWebサイトの作成に進むことができます。これを行うには、Visual Studio 2015 を開き、[ファイル] / [新規作成] / [プロジェクト] に移動し、[Visual C#/Web] / [ASP.NET Core Web アプリケーション (.NET Core)]を選択します。NETCoreWebsiteという名前を付けます(図1)。

図 1 – ASP .NET Core アプリケーションのテンプレートの作成

次のウィンドウでは、認証のタイプとともにテンプレートのタイプを選択する必要があります。この場合、それぞれWebアプリケーションと認証なしになります。[クラウドでホスト]オプションのチェックを外す必要があります(図2)。

図2 – 適切なテンプレートと認証タイプの選択

新しいASP.NET Coreプロジェクトが作成されました。さらに、Webブラウザに表示できます。これを行うには、ナビゲーションバーの[IIS Express]ボタンをクリックします。数秒後、デフォルトのWebサイトがWebブラウザに表示されます。ナビゲーションバーですべての項目を切り替えることができます。

図3 – 新しいASP.NET Coreプロジェクトの作成時に作成されたデフォルトのWebサイト

Web ページと静的ファイルの追加

次に、独自のWebサイトを作成します。このチュートリアルで説明するすべてのディレクトリとファイルは、ソリューションエクスプローラーのsrc/NETCoreWebsiteに配置されています。

まず、不要なファイルを削除する必要があります。これを行うには、[表示] / [ホーム]に移動し、そこに配置されている3つのWebページをすべて削除します。その後、wwwroot / imagesに移動し、ディレクトリに含まれるすべての画像を削除します。

次に、Webページをプロジェクトに追加します。[表示] / [ホーム]に移動し、右クリックして[追加] / [新しいアイテム]を選択します(図4)。

図 4 – プロジェクトへの新しい Web ページの追加

新しいウィンドウで、[.NET Core] / [ASP.NET/MVC 表示ページ] を選択します。FirstWebpage.cshtmlという名前を付けます(図5)。

図 5 – プロジェクトへの新しい Web ページの追加、続き

私たちのウェブページがちょうど作成されました。SecondWebpage.cshtmlに対してその手順を繰り返します。

次に、最後の手順で作成した .cshtml ファイルに HTML コードを入力します。重要:これらの.cshtmlファイルには、共有要素(ナビゲーションバーやフッターなど)の宣言、CSSファイルへの参照、フォント、および<script>タグの宣言なしに、<body>タグの内容のみを含める必要があります。<body>タグも含めないでください。

画像、CSS、JavaScriptなどの静的ファイルをプロジェクトに追加する時が来ました。数ステップ前に、wwwroot / imagesから不要な画像を削除しました。次に、このディレクトリに画像を直接追加します。それを右クリックして、[ファイルエクスプローラーでフォルダを開く]を選択します(図6)。これにより、ファイルエクスプローラーで画像ディレクトリが開き、ここで画像をコピーするだけです。手記：すべての画像パスの先頭に "~/" を追加することを忘れないでください。

図6 – ファイルエクスプローラーでディレクトリを開いて新しいアイテムを簡単に追加

非常によく似た方法で、CSSファイルとJavaScriptファイルを追加できます。それらをwwwroot / cssまたはwwwroot / jsに追加する必要があります。

ASP.NET Core MVCパターンを使用しているため、コントローラーはエンドユーザーにビューを表示する責任があります。Webページを表示するには、コントローラーディレクトリに配置されたHomeController.csを編集する必要があります。

HomeController.csでは、メソッド About() と Contact() を削除します。次に、Index()メソッドをコピーして、元のIndex()メソッドのすぐ下に貼り付けます。その後、最初の方法では "Index" を "FirstWebpage" に変更し、2 番目の方法では "SecondWebpage" に変更します。これらのメソッドは、ブラウザでWebページを表示できるようにするViewのみを返します。この手順を完了すると、HomeController.csクラスは次のようになります。

public class HomeController : Controller {
    public IActionResult FirstWebpage() {
        return View();
    }

    public IActionResult SecondWebpage() {
        return View();
    }

    public IActionResult Error() {
        return View();
    }
}

Startup.csクラスに移動し、Configureというメソッドを見つけます。メソッド本体には、次のようなコードがあります。

app.UseMvc(routes=> {
        routes.MapRoute(name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });

{action=Index}を{action=FirstWebpage}に変更して、選択したウェブページがデフォルトで表示されるようにします。

次のステップでは、CSSファイルとJavaScriptファイルへの参照を追加し、共有ファイルを抽出します。

共有ファイルの抽出

共有ファイルを抽出するには、edit_Layout.cshtmlファイルを編集する必要があります。レイアウトページには、Webサイトの構造と共有コンテンツが含まれています。レイアウトページにWebページ(コンテンツページ)がリンクされている場合、レイアウトページ(テンプレート)に従って表示されます。

レイアウトページは、コンテンツページが含まれる@RenderBody()メソッドの呼び出しを除いて、通常のWebページと同じです。

_Layout.cshtmlを開きます。ご覧のとおり、<head> タグと CSS および JavaScript ファイルへの参照はここで定義されています。

CSSから始めましょう。Developmentという環境を見つけます。このように呼ばれる環境は、<頭>に1つ、<body>に1つ、2つあることに注意してください。CSSファイルへの参照を追加したいので、もちろん<head> Development環境のコードを変更します。

開発では、<link rel="stylesheet" href="~/css/site.css" /> を見つけます。独自のCSSファイルへの参照を追加したいので、site.cssをCSSファイルの名前に変更するだけです。

また、当社のウェブサイトで使用されるフォントへの参照を追加する必要があります。CSS ファイル参照のすぐ下に <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" /> を追加してください。

開発環境の包含をステージング、本番環境(すぐ下にあります)にコピーすることは非常に重要ですので、プロジェクトを公開した後、追加された参照を使用できるようになります。

次に、JavaScript ファイルへの参照を追加します。

<body>の宣言で、Developmentという環境を見つけます。そこには、次のような行があります。

< script src ="~/js/site.js" asp-append-version ="true"></ script >

以前と同じように、site.jsをJavaScriptファイルの名前に変更するだけです。その場合はpopups.jsになります。

再度、開発環境の内容をステージング、本番環境にコピーします。

編集の最後のポイント_Layout.cshtmlは、当社のWebサイトの共有要素を定義することです。この場合、ナビゲーションバーとフッターになりますが、これらは両方のWebページで同じです。デフォルトのナビゲーションバーコードを独自のナビゲーションバーコードに置き換え、フッターに対して同じ手順を繰り返すだけです。

それが完了している場合は、IIS Expressボタンをクリックして、ブラウザでWebサイトを表示できます。

リソースを使用してWebサイトをローカライズする

リコースを利用することは、当社のウェブサイトをローカライズするための迅速かつ簡単な方法です。詳細については、グローバリゼーションとローカリゼーションをご覧ください。

リソースを追加する前に、各リクエストの言語を選択する戦略を実装する必要があります。これを行うには、Startup.csに移動し、ConfigureServicesというメソッドを見つけます。メソッド本体を次のようなコードで置き換えます。

services.AddLocalization(options=> options.ResourcesPath="Resources");
services.AddMvc() .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix) .AddDataAnnotationsLocalization();

ローカライゼーションサービスをサービスコンテナに追加し、リソースパスをリソースに設定しました(これについてはすぐに作成します)。また、ビューファイルのサフィックスに基づいてローカライゼーションを行うこともできます。

私たちは、ウェブサイトを英語、ポーランド語、ドイツ語の3つの言語にローカライズしたいと考えています。デフォルトの言語は英語です。Startup.cs Configureというメソッドを見つけて、次のようなコードを追加します。

var supportedCultures=new[] {
    new CultureInfo("en-US"),
    new CultureInfo("pl-PL"),
    new CultureInfo("de-DE")
};

app.UseRequestLocalization(new RequestLocalizationOptions {
        DefaultRequestCulture=new RequestCulture("en-US"),
        SupportedCultures=supportedCultures,
        SupportedUICultures=supportedCultures
    });

Startup.csの最初に次のコードを追加します。

using System.Globalization;
using Microsoft.AspNetCore.Mvc.Razor;
using Microsoft.AspNetCore.Localization;

次に、Webサイトをローカライズするためのリソースを追加します。ソリューションエクスプローラでsrc/NETCoreWebsiteを右クリックし、[追加/新しいフォルダ]を選択します (図 7)。「Resources」という名前を付けます。

図7 – リソースファイルを含む新しいディレクトリの追加

その後、Resourcesディレクトリを右クリックし、[Add / New Item]を選択します(図8)。

In new window choose .NET Core/Code/Resources File. Name it Views.Home.FirstWebpage.en.resx (fig. 9).

図 9 – 新しいリソースファイルの追加

英語のFirstWebpage.cshtmlのリソースファイルが作成されました。ポーランド語とドイツ語でこの手順を繰り返します (enをそれぞれplとdeに変更することを忘れないでください)。その後、Resourcesディレクトリに3つのリソースファイルがあるはずです。

次に、SecondWebpage.cshtmlのリソースファイルを作成する必要があります。上記の手順を 3 回繰り返します (言語ごとに)。リソースファイルの名前のFirstWebpageをSecondWebpageに変更し、サフィックスを変更することを忘れないでください。

また、_Layout.cshtmlのリソースファイルも作成する必要があります。お気づきのように、リソースファイルの名前は、適切な.cshtmlファイルへのパスと言語サフィックスです。_Layout.cshtmlはホームディレクトリに配置されていませんが、共有ディレクトリに配置されているため、英語のリソースファイル名はViews.Shared._Layout.en.resxになります。ポーランド語とドイツ語について、この手順を繰り返します。

私たちは、ウェブサイトのローカライズに進むことができます。FirstWebpage.cshtml、SecondWebpage.cshtml、_Layout.cshtmlの先頭に次のコードを追加します。

@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

コード内の任意の文字列をローカライズするには、.cshtml ファイル内の選択した文字列を @Localizer["String or it's ID"] に置き換える必要があります。短い文と 1 単語の文字列を @Localizer["String"] に置き換え、長い文を @Localizer["ID"] に置き換えることをお勧めします。たとえば、ローカライズする場合はお問い合わせと書く必要があります @Localizer["お問い合わせ"] ですが、ローカライズする場合はこのチュートリアルでは、ASP .NET Core を使用して Windows で多言語 Web サイトを構築して公開する方法を説明します。@Localizer["チュートリアルについて"] と書くことをお勧めします。

コードで @Localizer["About tutorial"] を使用したと仮定しましょう。他の言語に翻訳するには、適切なリソースファイルを開き、Key write About tutorialとValue translated sentence で開きます。それだけです。

当社のウェブサイトのナビゲーションバーで適切な言語を選択できます。これを機能させるには、次のようなボタンを_Layout.cshtmlにコーディングする必要があります。

お気に入りのフレームワークを使用して、あらゆるシナリオに対応する最新の Web アプリケーションを作成します。今すぐIgnite UIをダウンロードして、Infragistics JavaScript/HTML5 コントロールのパワーを体験してください。

操作方法