1. 前回までのあらすじ
Visual Studio で ASP.NET Core フレームワークのWebアプリケーションを作成しました。加えて Identity (ログインページ) を作成し、それをデータベースに更新してログインに必要な要素をセットアップしました。
2. 問題点と目標
Identity を導入できたのはいいのですが、Webページが英語で表示されています。これをなんとか日本語に直していきたいというのが今回の趣旨です。
3. Identity のスキャフォールディングを生成
そもそも、スキャフォールディングとはどんな意味でしょうか？よくわからないので調べてみました。
スキャフォールディング (Scaffolding) はデータモデルをもとにして、データベースに対して生成 (Create)、読み込み (Read)、更新 (Update)、削除 (Delete) の処理を行うための画面を自動生成する機能のことです。
要はデータベースを操作するようなView (画面) を自動で作ってくれるやつですね。すごい便利ですね。早速作っていきます。
まずはソリューションエクスプローラのプロジェクトディレクトリを右クリックして、Add から New Scaffolded Item をクリックします。
そして左側の一覧から Identity を選択し、追加します。
たくさんのチェックボックスがありますが、すべて選択していいと思います。ここは必要な機能 (パスワードリセットや二段階認証など) を選択すればいいですが、すべて選んでおきましょう。
すべてチェックした後に、Data context class のメニューから ApplicationDbContext が選択できるようになっていると思います。これを選択して追加します。ApplicationDbContext は View と ユーザ情報の集まったデータベースを1対1で結びつけるようなものだと思います。(ここら辺はよくわからない)
ここで、ソリューションエクスプローラーを確認してみます。ログインや登録に関するView がいろいろ追加されていますね。
これを1つ1つ作ろうとすれば大変ですよね。これがスキャフォールディングの力です。もちろん、これらの View はデータベース (ローカル) と接続されており、そのページからデータベースを操作することができます。
ここまでくれば、あとは日本語化するだけです。
4. View と 入力フォームの日本語化
ログインページに関する View (ページ) が生成されたので、これらの中からログインに関する View を探します。 Login.cshtml .がそれっぽいので開いてみましょう。
View 部分なので、HTML形式で書かれています。拡張子が cshtml なのは HTML の中に C# が記述できることを意味しています。先頭に@マークをつけて囲めば、その囲まれたところに C# が書けます。(強い)
とりあえず英語っぽい文章を探して日本語に書き換えてみます。
書き換えたら実行してみましょう。
良い感じに反映されていますね。これを他の View に対しても行います。すべてを紹介するとブログが大変なことになるのでログインページだけにしておきます。(例えば登録画面は Register.cshtml ですね)
気づいた人もいるかもしれません。入力フォームのラベルが英語です。これはどこから変更できるかというと、Login.cshtml の▼マークをクリックすると Login.cshtml.cs というファイルがあります。ここで日本語に変更します。
下のほうにスクロールすると、public class InputModel と書かれたクラスがあります。
このEmail と Password が 入力フォームに当たります。ここで [Required] の次の行に[Display(Name = "メールアドレス")] と追記してください。Password のほうも同様です。
これで実行してみましょう
無事に入力フォームが日本語になりました！
このようにして他の View にぶら下がっている .cs ファイルの中をいじれば表示名を変更することができます。
5. まとめ
Identity のページに手を加えたいとき、スキャフォールディングを使います。そのとき、Data context を間違えないようにしてください。
Identity の View は Areas ディレクトリの中に入っており、形式は .cshtml になっています。また、入力フォームを制御しているのはその中の .cs で記述されたファイルです。表示名を変えたいときは魔法のコードを追記します。
これで日本語化する方法については大丈夫だと思います。ということで、以上を参考にして気のすむまで View を修正してみてください。
