はじめに

firebase/firebaseui-web による Firebase Authentication の認証 UI をローカライズ(日本語化)する方法。

TL;DR

  • 読み込む script に __{LANGUAGE_CODE} を付ける
  • 日本語の場合は以下のように変更
1
2
-<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.js"></script>
+<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth__ja.js"></script>
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. CDN
    2. その他のケース
  4. まとめ
  5. その他・メモ
  6. 参考文献

詳細

参考: firebase/firebaseui-web

CDN

以下 CDN を使っている前提の話。

README に書かれている通り、読み込む script を https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.js から https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth__{LANGUAGE_CODE}.js にすれば良い。

サポートしている言語は LANGUAGES.md に書かれている。日本語 UI にする場合は以下の用に変更する。

1
2
3
-<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.js"></script>
+<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth__ja.js"></script>
 <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.css" />

ちなみに、Stripe & Firebase によるサブスクリプションのメモ で使った stripe-firebase-extensions/firestore-stripe-subscriptions - GitHub だと、script は以下のようになっていた。

1
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>

これも同様に https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth__{LANGUAGE_CODE}.js に変更で日本語化できた。

1
2
3
4
5
6
7
 // OK
-<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+<script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>

 // NG
-<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui__ja.js"></script>

その他のケース

自分は試してないが、以下が参考になりそう。

まとめ

  • 読み込む script に __{LANGUAGE_CODE} を付ける
  • 日本語の場合は以下のように変更
1
2
-<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.js"></script>
+<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth__ja.js"></script>

その他・メモ

なし

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list