Amplify Ui Libraryを使用して作成したCognito認証画面を日本語にする方法

こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。

今回は、AmplifyUILibraryを用いたAmazon Cognito認証画面を日本語にする方法についてご紹介します。

目的
I18nライブラリを使用する方法
- I18nライブラリのインポート
- 辞書をI18nに設定
I18nを用いてカスタマイズする方法
- カスタム辞書の追加
使用感など感想
まとめ

目的

本記事では、AmplifyUILibraryを用いて作成したAmazon Cognito認証画面を日本語化する方法について説明します。すでに他の記事でAmplifyUILibraryの紹介や認証画面の構築について解説していますので、ここでは日本語化の具体的な手順とコツに焦点を当てます。

↓始めに読むとよいです。

blog.serverworks.co.jp

I18nライブラリを使用する方法

まず、認証画面を日本語にするために、I18n（国際化）ライブラリを使用します。AmplifyUIはデフォルトで英語が設定されていますが、I18nライブラリを使用することで、簡単に他の言語に対応させることができます。

I18nライブラリのインポート

必要なライブラリをインポートします。

import { translations } from "@aws-amplify/ui-react";
import { I18n } from "aws-amplify/utils";

辞書をI18nに設定

定義した辞書をI18nに設定します。

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

I18nを用いてカスタマイズする方法

上記の方法で基本的な日本語化は可能ですが、一部のメッセージ英語のままである場合があります。その場合は、手動でカスタマイズを行う必要があります。

どうやら、辞書登録されているのはこの中に書いてあるものだけのようです。

参考：Github: amplify-ui/packages

そのため、以下の手順でカスタム辞書の作成を行います。

カスタム辞書の追加

カスタム辞書を追加します。

import { translations } from "@aws-amplify/ui-react";
import { I18n } from "aws-amplify/utils";

const customTranslations = {
  ja: {
    "Code *": "認証コード",
    "Password must have at least 8 characters":
      "パスワードは8文字以上必要です",
    "Your passwords must match": "パスワードが一致しません",
  }
}
I18n.putVocabularies(translations);
I18n.putVocabularies(customTranslations);
I18n.setLanguage("ja");

実践的な開発では、typesディレクトリに切り出すなどして、管理しやすくすることが望ましいです。

使用感など感想

メリット:
- ライブラリを入れるだけなので実装がかなり簡単
- 基本的な日本語化は簡単にできる。
デメリット:
- 全て日本語化する必要がある場合、カスタム辞書の利用が必須となる
- カスタム辞書は手動で一つ一つ追加する必要がある
  - 上記の方法では正規表現的なもので一括で変換することはできない