Amplify FrameworkのUIコンポーネントをカスタマイズして、テーマカラーの変更と日本語化をしてみた

2020.04.27

こんにちは!DA(データアナリティクス)事業本部 インテグレーション部の大高です。

先日、試してみた新しくなったAmplify FrameworkのUIコンポーネントですが、今回はUIのカスタマイズを試してみました。

色を変えてみる

テーマのカスタマイズについては以下のヘルプに記載がありますので、早速試してみます。

rootのcssに適用が良いとのことなので、下記のとおりsrc/styles.scssへ追記してみます。

src/styles.scss

:root {
    --amplify-primary-color: #fc7963;
    --amplify-primary-tint: #ff7359;
    --amplify-primary-shade: #e0573e;
}

元のオレンジの色合いから変わってますね。

ちなみに、変更前はこちらです。

コンポーネントの文字列を日本語に変えてみる

コンポーネントのヘルプを見ると、コンポーネントの文字列はI18n.get(Translations.SIGN_IN_HEADER_TEXT)など、I18nを利用しているようです。

下記のドキュメントに記載の通り、Amplifyのライブラリでこれを利用すれば言語切り替えが出来そうですね。

ディクショナリの元になるものを探したところ、以下が参考になりそうでした。Angular側も探しましたがそれらしきものは見当たらず、React側のコンポーネントのソースになります。

要は以下の日本語版があれば良さそうですね。

export const dict = {
    de: {
        'Sign In': 'Anmelden',
        'Sign Up': 'Registrieren',
        'Sign Out': 'Abmelden',
        'Sign in to your account': 'Melden Sie sich mit Ihrem Account an',
        'Username': 'Benutzername',
        'Password': 'Passwort',
        'Enter your username': 'Geben Sie Ihren Benutzernamen ein',
        'Enter your password': 'Geben Sie Ihr Passwort ein',
        'No account? ': 'Kein Account? ',
        'Forget your password? ': 'Passwort vergessen? ',
        'Reset password': 'Passwort zurücksetzen',
        'User does not exist': 'Dieser Benutzer existiert nicht',
        'User already exists': 'Dieser Benutzer existiert bereits',
        'Incorrect username or password': 'Falscher Benutzername oder falsches Passwort',
        'Invalid password format': 'Ungültiges Passwort-Format',
        'Create account': 'Hier registrieren',
        'Forgot Password': 'Passwort vergessen',
        'Change Password': 'Passwort ändern',
        'New Password': 'Neues Passwort',
        'Email': 'Email',
        'Phone Number': 'Telefonnummer',
        'Confirm a Code': 'Code bestätigen',
        'Confirm Sign In': 'Anmeldung bestätigen',
        'Confirm Sign Up': 'Registrierung bestätigen',
        'Back to Sign In': 'Zurück zur Anmeldung',
        'Send Code': 'Code senden',
        'Confirm': 'Bestätigen',
        'Resend Code': 'Code erneut senden',
        'Submit': 'Abschicken',
        'Skip': 'Überspringen',
        'Verify': 'Verifizieren',
        'Verify Contact': 'Kontakt verifizieren',
        'Code': 'Code',
        'Confirmation Code': 'Bestätigungs-Code',
        'Lost your code? ': 'Code verloren? ',
        'Account recovery requires verified contact information': 'Zurücksetzen des Account benötigt einen verifizierten Account',
        'Invalid phone number format': `Ungültiges Telefonummern-Format. Benutze eine Nummer im Format: +12345678900`,
        'Create Account': 'Account erstellen',
        'Have an account? ': 'Schon registriert? ',
        'Sign in': 'Anmelden',
        'Create a new account': 'Erstelle einen neuen Account',
        'Reset your password': 'Zurücksetzen des Passworts',
        'An account with the given email already exists.': 'Ein Account mit dieser Email existiert bereits.',
        'Username cannot be empty': 'Benutzername darf nicht leer sein',
        'Password attempts exceeded': 'Die maximale Anzahl der fehlerhaften Anmeldeversuche wurde erreicht',
    },
};

以下を参考にjsファイル化してディクショナリとして読み込ませます。(一部、キー値を修正しています)

$ mkdir -p src/assets/i18n/amplify
$ touch src/assets/i18n/amplify/vocabularies.js

src/assets/i18n/amplify/vocabularies.js

export const vocabularies = {
    ja: {
        'Sign In': 'サインイン',
        'Sign Up': 'サインアップ',
        'Sign Out': 'サインアウト',
        'Sign in to your account': 'アカウントにサインイン',
        'Username *': 'ユーザー名 *',
        'Password *': 'パスワード *',
        'Enter your username': 'ユーザー名を入力',
        'Enter your password': 'パスワードを入力',
        'No account?': 'アカウントが未登録ですか?',
        'Forgot your password?': 'パスワードをお忘れですか?',
        'Reset password': 'パスワードをリセット',
        'User does not exist': 'ユーザーが存在しません',
        'User already exists': 'ユーザーは既に存在します',
        'Incorrect username or password.': 'ユーザー名またはパスワードが違います',
        'Invalid password format': 'パスワードのフォーマットが不正です',
        'Create account': 'アカウントを作成',
        'Forgot Password': 'パスワードを忘れた',
        'Change Password': 'パスワードを変更',
        'New Password': '新しいパスワード',
        'Email': 'Email',
        'Phone Number': '電話番号',
        'Confirm a Code': 'コードを確認',
        'Confirm Sign In': 'サインインを確認',
        'Confirm Sign up': 'サインアップを確認',
        'Back to Sign In': 'サインインに戻る',
        'Send Code': 'コードを送信',
        'Confirm': '確認',
        'Resend Code': 'コードを再送',
        'Submit': '送信',
        'Skip': 'スキップ',
        'Verify': '検証',
        'Verify Contact': '連絡先を検証',
        'Code': 'Code',
        'Confirmation Code': '確認コード',
        'Lost your code?': 'コードがありませんか?',
        'Account recovery requires verified contact information': 'Account recovery requires verified contact information',
        'Invalid phone number format': '不正な電話番号フォーマットです。 電話番号は次のフォーマットで入力してください: +12345678900',
        'Create Account': 'アカウントを作成',
        'Have an account?': 'アカウントをお持ちですか?',
        'Sign in': 'サインイン',
        'Create a new account': '新しいアカウントを作成',
        'Reset your password': 'パスワードをリセット',
        'An account with the given email already exists.': 'そのメールアドレスは既に存在します',
        'Username cannot be empty': 'ユーザー名は必須です',
        'Password attempts exceeded': 'パスワード試行回数が超過しました',
    },
};

呼び出し方としては app.module.ts で、以下のように対応すれば良さそうです。

src/app/app.module.ts

import { I18n } from 'aws-amplify';
import { vocabularies } from '../assets/i18n/amplify/vocabularies';

I18n.putVocabularies(vocabularies);
I18n.setLanguage('ja');

これで起動してみると、こんな感じに日本語化されました! 日本語化したことで、少しレイアウトが崩れているので、このあたりは要調整ですね。

別の画面に移ると、一部英語が残ってしまっているようです。おそらくキーとの紐づけが出来ていないので、これは地道にキーを探して日本語化していこうと思います。

まとめ

以上、新しくなったAmplify FrameworkのUIコンポーネントのカスタマイズを試してみました。

どなたかのお役に立てば幸いです。それでは!