[AWS Amplify] ログイン画面を日本語化する

AWS Amplify,IT記事

まずプラグインを公開してくれている方がいるので、こちらを使います。

https://github.com/aws-amplify-jp/vocabulary-ja

npm install @aws-amplify-jp/vocabulary-ja

importします。(typescriptなら、const ja = require(“@aws-amplify-jp/vocabulary-ja");

import { I18n } from "aws-amplify";
import { Translations } from "@aws-amplify/ui-components";
import ja from "@aws-amplify-jp/vocabulary-ja";

I18n.putVocabulariesForLanguage("ja-JP", ja(Translations));

あとさらに追加でcognitoのエラーメッセージ部分を無理やり日本語化します。

任意の名前でjsファイルを作り、以下のように書きます。日本語は適当に変えてください。

export const messages = {
  "ja-JP": {
    "1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6":
      "パスワードは8文字以上にしてください",
    "2 validation errors detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6; Value at 'password' failed to satisfy constraint: Member must satisfy regular expression pattern: ^[\\S]+.*[\\S]+$":
      "パスワードは8文字以上にしてください",
    "Account recovery requires verified contact information":
      "コンタクトの情報を検証する為に、アカウントの回復が必要です",
    "An account with the given email already exists.":
      "このメールアドレスはすでに登録されています",
    "Custom auth lambda trigger is not configured for the user pool.":
      "パスワードが入力されていません",
    "Cannot reset password for the user as there is no registered/verified email or phone_number":
      "メールアドレスや電話番号が登録されていないため、ユーザーのパスワードをリセットできません。",
    "Incorrect username or password.": "ユーザー名またはパスワードが異なります",
    "Invalid password format": "パスワードのフォーマットが無効です",
    "Invalid verification code provided, please try again.":
      "無効な確認コードです。再度ご確認ください",
    "Password cannot be empty": "パスワードを入力してください",
    "Password did not conform with policy: Password not long enough":
      "パスワードは8文字以上にしてください",
    "User does not exist": "ユーザーが存在しません",
    "User does not exist.": "ユーザーが存在しません",
    "Username cannot be empty": "ユーザー名を入力してください",
  },
};

このファイルと冒頭のプラグインを両方読み込むように書き換えます。

import { I18n } from "aws-amplify";
import { Translations } from "@aws-amplify/ui-components";
const ja = require("@aws-amplify-jp/vocabulary-ja");

import { messages } from "./formMessage";
I18n.putVocabularies(messages);

I18n.putVocabulariesForLanguage("ja-JP", ja(Translations));
I18n.setLanguage('ja-JP');

とりあえずはこれで日本語化出来ました。