#12 画面に表示される文字を多言語化する

# #12 画面に表示される文字を多言語化する[messages.properties]
日本語以外もWeb画面上に表示できるよう設定していきます。

# 前提条件
この記事はSpringの最低限の知識が必要になります。
また、なるべく分かりやすく書くつもりですが、この記事の目的は自分の勉強のアウトプットであるため、所々説明は省略します。

# 前回まで
この記事は#10記事の続きとなります。#10ではmessages.propertiesを用いて画面に表示される文字の共通化を行いました。

https://qiita.com/Jackoguro/items/b71597bfeb79a90e7b7c

# 構築環境
1. 各バージョン
Spring Boot ver 2.7.5

2. 依存関係
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/2a154793-8a45-27b0-cd32-b184567eaea5.png)

# 成果物
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/1db8a09a-afab-5fdf-7be2-214d0da3411e.png)
ログイン画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/d7bb40d1-b571-a6f4-de0a-4fc5d5ed03db.png)
新規登録画面


# 今回行うこと
今回は以下の流れに沿って進めていきます。
1. 環境設定
　1. messagesフォルダを作成し、messages.propertiesを移動させる
　1. 英語用のmessages_en.propertiesを作成する
　1. application.propertiesに移動先のパスを記述する
 
1. messages_en.propertiesに内容を記述する
1. UserService.java、SignupControllの内容を一部変更する

## 1. 事前準備
### 1. messagesフォルダを作成し、messages.propertiesを移動させる
src/main/resourcesフォルダの直下にmessagesフォルダを作成し、前回作成したmessages.propertiesを移動させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/d1e46036-11e0-c1ab-8f50-a31396ff5dcb.png)

### 2. 英語用のmessages_en.propertiesを作成する
先ほど作成したmessagesフォルダ内にmessages_en.propertiesを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/a25a0661-4249-8261-96d8-d416c1866a0a.png)

### 3. application.propertiesに移動先のパスを記述する
application.properties内にパスを変更するための内容を記述する
```properties:application.properties
#DataSource
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:XE
spring.datasource.username=system 
spring.datasource.password=5931
spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver

#Message
spring.messages.basename=messages/messages
```
:::note
spring.messages.basenameには、src/main/resourcesからの相対パスを設定します。
なお、拡張子は言語毎に読み込むファイル名が変わるため付けません。
英語ならmessages_en.properties、フランス語ならmessages_fr.propertiesのように名付けます。
:::

## 2. messages_en.propertiesに内容を記述する
```properties:messages_en.properties
# 共通部分
common.Login = Login
common.UserId = User ID
common.Password = Password

# ログイン画面(新しく追加)
login.ToSignup = New registration is here

# 新規登録画面
user.signup.UsreRegistration = User Registration
user.signup.PhoneNumber = Phone Number
user.signup.PostalNumber = Posta lNumber
user.signup.Address = Address
user.signup.UserName = User Name
user.signup.Birthday = Birthday
user.signup.Age = Age
user.signup.AccountIcon = Account Icon(optional)
user.signup.Gender = Gender
user.signup.Male = Male
user.signup.FeMale = FeMale
 
```

## 3. UserService.java、SignupControllの内容を一部変更する
```java:UserService.java
package com.example.service;

import java.util.LinkedHashMap;
import java.util.Locale;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.stereotype.Service;

@Service
public class UserService {
	
	/* messages.propertiesのインスタンスを作成 */
	@Autowired
	private MessageSource messagesource;
	
	/* 性別のMapを生成する */
	public Map<String, Integer> getGenderMap(Locale locale) { // 変更点：引数にlocaleを加える。
		Map<String, Integer> genderMap = new LinkedHashMap<>();
		String male = messagesource.getMessage("user.signup.Male", null, locale); // 変更点：Locale.JAPAN → locale
		String female = messagesource.getMessage("user.signup.FeMale", null, locale); // 変更点：Locale.JAPAN → locale
		genderMap.put(male, 1);
		genderMap.put(female, 2);
		return genderMap;
	}
}
```
引数を新しく加えたので、呼び出し先であるSignupController.javaの一部も変更します。

```java:SignupController.java
package com.example.controller;

import java.util.Locale;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.service.UserService;

@Controller
@RequestMapping("/user")
public class SignupController {
	
	@Autowired
	private UserService userservice;

	/* ユーザー登録画面を表示 */
	@GetMapping("/signup")
	public String getSignup(Model model, Locale locale) { // 変更点：引数にlocaleを加える。
		// 性別を取得
		Map<String, Integer> genderMap = userservice.getGenderMap(locale); // 変更点：引数にlocaleを加える。
		model.addAttribute("genderMap", genderMap);
		
		// ユーザー登録画面に遷移
		return "user/signup";
	}
	
	/* ユーザー登録処理 */
	@PostMapping("/signup")
	public String postSignup() {
		// ログイン画面にリダイレクト
		return "redirect:/login";
	}
}
```

# 最後に
正しく英語で表示できているか確認します。
今回はGoogle Chromeを使用しているのでこちらでの確認方法を載せます。
参考サイトを載せておきますがこちらで簡単にまとめます。

https://support.google.com/chrome/answer/173424?hl=ja

1. 画面右上の``Google Chromeの設定``(縦に3つの点のアイコン)をクリックしその中にある``設定``をクリック
1. 画面左側にあるメニューバーから``言語``をクリック
1. ``優先言語``の``英語``の``その他の操作``(縦に3つの点のアイコン)をクリックし``トップに移動``を選択

設定が正しく行われているならば以下のように変更されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/1db8a09a-afab-5fdf-7be2-214d0da3411e.png)
ログイン画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/d7bb40d1-b571-a6f4-de0a-4fc5d5ed03db.png)
新規登録画面

Account Iconの部分を見ると英語に直されていないのですが、type="file"で設定しているこの部分はOSの言語設定に依存してるようなのでWebブラウザの設定を変更しても変えられないようです。