0
0

AWS Amplifyを使って日本語のログイン画面を作るとユーザー名のプレースホルダが英語になる

Posted at

Amplify UIのログイン画面

Amplify UIを使えば画像のようなログイン画面が簡単につくれます。

image.png

この画面の作り方は公式にも、いろんなサイトにも載っているので今回は割愛します。

公式はこちら

Amplify UIを日本語にしようとしたら一部だけ英語のまま

このUIに対して、I18nというモジュールを使えば日本語化することができます。
しかし、ユーザー名のプレースホルダだけ「Enter your Username」で英語のままになります。

原因

英語と日本語のマッピングファイルは下記に置いてあり、日本語化するときにこのファイルを使っています。

しかし、「Enter your Username」とすべきところを「Enter your username」としてしまっており、参照できずに英語のままになってます。(usernameの"u"が小文字になってます)

これについては既に見つけている方がおり、プルリクを出していました。

対処法

プルリクが出されているのでいずれ修正されると思いますが、対応方法としてはモジュールの中身のマッピングファイルを直接直すか、下記の記述を追加することで回避できます。

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

// 下記を追加
I18n.putVocabularies({
  ja: {
    'Enter your Username': 'ユーザー名を入力',
  },
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0