AWS Amplify を日本語化してみた

はじめに

このページでは Amplify の初期画面で作成した認証画面を日本語化するための方法をまとめました

※ 翻訳するメッセージについては以下のページを参考にさせていただきました。
https://www.aruse.net/entry/2019/03/25/225802

開発環境

• Windows 10
• nodist(nodeのバージョン管理)
  • node 12.13.0
• VSCode

Amplify で多言語化対応する

I18n で言語設定をしてみる

Amplify には I18n ライブラリが初めから用意されている。
そのためライブラリを import することで、多言語化対応することが可能ということがわかった。

【参考】
https://aws-amplify.github.io/docs/js/i18n

ということで、前回の投稿したソースコードを少し修正してみた。

main.js

import Amplify from "aws-amplify";
import { I18n } from "aws-amplify";
import aws_exports from "./aws-exports";

I18n.setLanguage("ja");
以下省略

これで日本語化完了したので、さあ実行してみましょう！

・・・世の中そんなに甘くなかったよ

sample で fr と書いているけれど、fr にしても変更しない・・・
ということは自分で何かしら定義しないといけないことがわかってきました。

自分自身の辞書を作成して設定する

リファレンスを読み進めると、以下の用なメソッドを見つける

どうやら必要な言語については自分で辞書を作成して設定する必要があるらしい

src/i18n/amplify/messages.js

export const messages = {
  ja: {
    "Back to Sign In": "サインイン画面に戻る",
    Confirm: "確認",
    "Confirm Sign Up": "サインアップの確認",
    "Confirmation Code": "確認コード",
    "Create Account": "新規登録",
    "Create a new account": "アカウントの新規登録",
    "Create account": "新規登録",
    Email: "メールアドレス",
    "Enter your code": "確認コードを入力してください",
    "Enter your password": "パスワードを入力してください",
    "Enter your username": "ユーザー名を入力してください",
    "Forget your password? ": "パスワードをお忘れの方 ",
    "Have an account? ": "アカウント登録済みの方 ",
    Hello: "こんにちは ",
    "Incorrect username or password": "ユーザー名またはパスワードが異なります",
    "Lost your code? ": "コードを紛失した方 ",
    "No account? ": "アカウント未登録の方 ",
    Password: "パスワード",
    "Phone Number": "電話番号",
    "Resend Code": "確認コードの再送",
    "Reset password": "パスワードのリセット",
    "Reset your password": "パスワードのリセット",
    "Send Code": "コードの送信",
    "Sign In": "サインイン",
    "Sign Out": "サインアウト",
    "Sign in": "サインイン",
    "Sign in to your account": "サインイン",
    "User does not exist": "ユーザーが存在しません",
    Username: "ユーザー名",
    "Username cannot be empty": "ユーザー名は必須入力です",
    "Username/client id combination not found.": "ユーザー名が見つかりません"
  }
};

※ フォーマットチェックをデフォルトのままで整形するとすごい悲惨な状態に・・・次までの課題とします
また上記メッセージについては冒頭のページを参考にさせていただきました。

main.js

import Amplify from "aws-amplify";
import { I18n } from "aws-amplify";
import { messages } from "./i18n/amplify/messages";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);
I18n.putVocabularies(messages);
I18n.setLanguage("ja");
以下省略

辞書を設定して日本語の辞書を使用する処理を追加して起動するとエラーが発生しなかったので、ページにアクセスをしてみましょう

日本語化されていることが確認できました！
翻訳する文言が足りなかったりすると英語が表示されたので、画面の確認作業は必要になりそうですね。。。

パスワードリセットのリンク先のページやエラー文言も無事翻訳されていました

まとめ（翻訳するには）

Amplify では I18n というライブラリを用いて翻訳を行う
その際は以下の準備を行う必要がある

• 使用する言語の辞書マップを作成する
• どの言語を用いるか明確に定義する