🏯
Amplify Cognito (Amplify UIライブラリ)で多言語対応：日本語化をスムーズに実現する方法

2025/01/06に公開
AWS
 概要この記事では、AWS Amplify UIライブラリを使用して作成したAmazon Cognitoの認証画面を日本語化する方法をご紹介します。日本語化対応のためのコードもそのまま利用できるので、ぜひ参考にしてください！

 対応前と対応後のイメージ対応前: 認証画面の表示が英語のみ

例: "Sign in"、"Forgot your password?" など英語のまま表示される

対応後: 日本語で自然な表示に変更

例: "サインイン"、"パスワードをお忘れですか？" など

 対応前

 対応後

 実装手順以下のコードをプロジェクトに追加するだけで、日本語化が簡単に実現できます
import { I18n } from "aws-amplify/utils";
import { PT_BR } from "./translations/pt-br";
I18n.putVocabularies(PT_BR);
I18n.setLanguage('ja');
翻訳ファイルを準備

日本語の翻訳ファイル（例: translations/ja.js）を作成し、必要な文字列を追加します。
export const PT_BR = {
  ja: {
    // サインイン画面
    'Username': 'メールアドレス',
    'Password': 'パスワード',
    'Email Address *': 'メールアドレス',
    'Enter your phone_number': '電話番号を入力してください',
    'Enter your Username': 'ユーザー名を入力してください',
    'Enter your Password': 'パスワードを入力してください',
    'Confirm Password': 'パスワードを確認',
    'Please confirm your Password': 'パスワードを再入力してください',
    'Reset Password': 'パスワードのリセット',
    'Enter your username': '名前（ID）を入力してください',
    'Sign In': 'サインイン',
    'Sign in': 'サインイン',
    'Sign Up': 'サインアップ',
    'Forgot your password?': 'パスワードをお忘れの方',
    'Reset password': 'パスワードをリセット',
    'No account?': 'アカウントを持っていない方',
    'Create account': 'アカウントを作成',
    'Create Account': 'アカウントを作成',
    'Have an account?': 'アカウントお持ちの方',
    'Confirm Sign up': 'サインアップの確認',
    'Back to Sign In': 'サインインに戻る',
    'Send code': 'コードを送信',

    'Sign in to your account': 'アカウントにサインイン ',
    'Sign In with Amazon': 'Amazonでサインイン',
    'Sign In with Apple': 'Apple でサインイン',
    'Sign In with Facebook': 'Facebookでサインイン',
    'Sign In with Google': 'Googleでサインイン',

    'Sign Up to your account': 'アカウントを作成',
    'Sign Up with Amazon': 'Amazonでアカウントを作成',
    'Sign Up with Apple': 'Appleでアカウントを作成',
    'Sign Up with Facebook': 'Facebookでアカウントを作成',
    'Sign Up with Google': 'Googleでアカウントを作成',

    'Enter your confirmation code': '検証コードを入力してください',
    'Enter your new password': '新しいパスワードを入力してください',
    'Enter your password': 'パスワードを入力してください',
    'Enter your username': 'ユーザー名を入力してください',
    'Password cannot be empty': 'パスワードは必須入力です',
    'Please Sign In / Sign Up': 'サインインまたは新規登録をしてください',
    'User does not exist': 'ユーザーが存在しません',
    'Username cannot be empty': 'ユーザー名は必須入力です',
    'Username/client id combination not found.': 'ユーザー名が見つかりません',

    'Confirm': '送信',
    'Confirmation Code': '確認コード',
    'Resend Code': 'コードを再送',
    'We Emailed You': 'メールを送信しました',
    'Enter your code': '認証コード',
     // 必要に応じて他のラベルも追加
    'Password must have at least 8 characters': 'パスワードは8文字以上にしてください',
    'Your passwords must match': 'パスワードがマッチしません',
    'Password did not conform with policy: Password not long enough':'パスワードは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文字以上、大文字小文字を含む英数字を指定してください',
    'User does not exist.': 'ユーザーが存在しません',
    'Incorrect username or password.': 'ユーザー名またはパスワードが違います',
    'User is not confirmed.': 'ユーザーは検証されていません',
    'User already exists': 'ユーザーは既に存在します',
    'Invalid verification code provided, please try again.': '指定された確認コードが無効です。もう一度お試しください',
    'Invalid password format': 'パスワードのフォーマットが不正です',
    'Invalid phone number format': '不正な電話番号フォーマットです。 電話番号は次のフォーマットで入力してください: +12345678900',
    'An account with the given email already exists.': 'そのメールアドレスは既に存在します',
    'Username cannot be empty': 'ユーザー名は必須です',
    'Password attempts exceeded': 'パスワード試行回数が超過しました',
    'Password cannot be empty': 'パスワードは必須入力です',
    'Attempt limit exceeded, please try after some time.': '試行制限を超過しました。しばらくしてからもう一度お試しください',
    'Username/client id combination not found.': 'ユーザーが存在しません',
    'CUSTOM_AUTH is not enabled for the client.': 'パスワードは必須です',
    'Password does not conform to policy: Password not long enough': 'パスワードは8文字以上を入力してください (8文字以上の大文字小文字を含む英数字)',
    'Password does not conform to policy: Password must have uppercase characters': 'パスワードには大文字を含めてください (8文字以上の大文字小文字を含む英数字)',
    'Password does not conform to policy: Password must have lowercase characters': 'パスワードには小文字を含めてください (8文字以上の大文字小文字を含む英数字)',
    'Password does not conform to policy: Password must have numeric characters': 'パスワードには数字を含めてください (8文字以上の大文字小文字を含む英数字)',
    "1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6": 'パスワードは8文字以上、大文字小文字を含む英数字を指定してください',
  },
};
Amplifyプロジェクトに適用

上記のコードを認証画面を管理するスクリプトやコンポーネントに組み込むことで、日本語化が有効になります。

 まとめAWS Amplify Cognitoを日本語化することで、ユーザーに親しみやすい認証画面を提供でき、満足度を高めることが可能です。

対応後は、実際のユーザーに使ってもらい、フィードバックをもとに改善を繰り返すことで、さらに優れたユーザー体験を実現できます。
ぜひこの記事を参考に、あなたのプロジェクトでも日本語化に取り組んでみてください！
概要

対応前と対応後のイメージ

対応前

対応後

実装手順

まとめ

Discussion
