소개

이 페이지에서는 Amplify의 초기 화면에서 작성한 인증 화면을 일본어화하는 방법을 정리했습니다.

※ 번역하는 메시지에 대해서는 이하의 페이지를 참고로 했습니다.
htps //w w. 어서. 네트/엔트리/2019/03/25/225802

개발 환경

Windows 10

nodist(node의 버전 관리)

node 12.13.0

VSCode

Amplify로 다국어화 가능

I18n에서 언어 설정을 시도합니다.

Amplify에는 I18n 라이브러리가 처음부터 준비되어 있다.
그 때문에 라이브러리를 import 하는 것으로, 다언어화 대응하는 것이 가능하다는 것을 알았다.

【참고】
htps : // 아 ws-아 mpぃfy. 기주 b. 이오 / cs / js / 18

그래서 전회의 투고한 소스 코드를 조금 수정해 보았다.

main.js

import Amplify from "aws-amplify";
import { I18n } from "aws-amplify";
import aws_exports from "./aws-exports";

I18n.setLanguage("ja");
以下省略

이것으로 일본어화 완료했으므로, 자 실행해 봅시다!


... 세상에 그렇게 달지 않았다.

sample 로 fr 라고 쓰고 있지만, fr 로 해도 변경하지 않는다・・・
라는 것은 스스로 무엇인가 정의하지 않으면 안 되는 것을 알았습니다.

자신의 사전을 만들고 설정

참조를 읽을 때 다음에 대한 메소드를 찾습니다.



아무래도 필요한 언어에 대해서는 스스로 사전을 작성해 설정할 필요가 있는 것 같다

src/i18n/amplify/messages.js

export const messages = {
  ja: {
    "Back to Sign In": "サインイン画面に戻る",
    Confirm: "確認",
    "Confirm Sign Up": "サインアップの確認",
    "Confirmation Code": "確認コード",
    "Create Account": "新規登録",
    "Create a new account": "アカウントの新規登録",
    "Create account": "新規登録",
    Email: "メールアドレス",
    "Enter your code": "確認コードを入力してください",
    "Enter your password": "パスワードを入力してください",
    "Enter your username": "ユーザー名を入力してください",
    "Forget your password? ": "パスワードをお忘れの方 ",
    "Have an account? ": "アカウント登録済みの方 ",
    Hello: "こんにちは ",
    "Incorrect username or password": "ユーザー名またはパスワードが異なります",
    "Lost your code? ": "コードを紛失した方 ",
    "No account? ": "アカウント未登録の方 ",
    Password: "パスワード",
    "Phone Number": "電話番号",
    "Resend Code": "確認コードの再送",
    "Reset password": "パスワードのリセット",
    "Reset your password": "パスワードのリセット",
    "Send Code": "コードの送信",
    "Sign In": "サインイン",
    "Sign Out": "サインアウト",
    "Sign in": "サインイン",
    "Sign in to your account": "サインイン",
    "User does not exist": "ユーザーが存在しません",
    Username: "ユーザー名",
    "Username cannot be empty": "ユーザー名は必須入力です",
    "Username/client id combination not found.": "ユーザー名が見つかりません"
  }
};

※ 포맷 체크를 디폴트인 채로 성형하면 대단한 비참한 상태로・・・다음까지의 과제로 합니다
또 상기 메세지에 대해서는 서두의 페이지를 참고로 했습니다.

main.js

import Amplify from "aws-amplify";
import { I18n } from "aws-amplify";
import { messages } from "./i18n/amplify/messages";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);
I18n.putVocabularies(messages);
I18n.setLanguage("ja");
以下省略

사전을 설정하고 일본어 사전을 사용하는 처리를 추가하고 시작하면 오류가 발생하지 않았으므로 페이지에 액세스해 봅시다.



일본어화되어 있는 것을 확인할 수 있었습니다!
번역하는 문언이 부족하면 영어가 표시되었으므로 화면 확인 작업이 필요할 것 같네요. . .

비밀번호 재설정 링크의 페이지와 오류 문장도 안전하게 번역되었습니다.

요약(번역하려면)

Amplify는 I18n이라는 라이브러리를 사용하여 번역을 수행합니다.
그 때는 다음의 준비를 할 필요가 있다

사용할 언어의 사전 맵 만들기

어떤 언어를 사용할지 명확하게 정의한다