Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

国際化(i18n)の書き換えを構成する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

国際化の書き換え (「i18n 書き換え」) を使用して、ユーザーの国または優先言語に応じて異なるコンテンツを提供します。設定できる構成の例を次に示します。

  • フランス語を好むすべてのユーザーに同じフランス語のコンテンツを提供します (国に関係なく)。
    例: フランス語のテキストを含むホームページ

  • フランス語を好むユーザーには標準フランス語のコンテンツを提供しますが、フランス語を好むカナダのユーザーには代わりにカナダのフランス語コンテンツを提供します。
    例: 標準フランス語の言い回しのホームページとカナダフランス語の言い回しのホームページ

  • カナダのすべてのユーザーに同じコンテンツを提供します (言語設定に関係なく)。
    例: サイトの「デフォルト」言語を使用しているが、カナダ固有の機能 (ホリデー テーマなど) を備えたホームページ

  • フランス語を好むカナダのユーザーにカナダのフランス語のコンテンツを提供します。
    例: カナダのフランス語の言い回しとカナダ固有の機能 (休日のテーマなど) を含むホームページ

Firebase Hosting は、IP アドレスからユーザーの国を判断し、 Accept-Languageリクエスト ヘッダーからユーザーの言語設定を判断します (通常はウェブ ブラウザによって自動的に設定されます)。

i18n 書き換えをセットアップする

ホスティング サイトの i18n リライトを設定するには、ローカライズされたすべてのコンテンツ用に「i18n コンテンツ」ディレクトリを作成し、 i18n属性をfirebase.jsonファイルに追加して、新しい「i18n コンテンツ」ディレクトリを指すようにする必要があります。

詳細な手順は次のとおりです。

  1. ローカル アプリ ディレクトリのpublicフォルダー内に、「i18n コンテンツ」用に別のディレクトリを作成し、サイトでサポートされている言語と国の組み合わせごとにサブフォルダーを作成します。

    各サブフォルダーに、休日をテーマにしたホームページや言語固有の 404 ページなど、その組み合わせに固有のコンテンツを追加します。

    localized-filesと呼ばれる「i18n コンテンツ」ディレクトリの例を次に示します。

    public/
        index.html  // your site's default homepage
        404.html  // your site's custom 404 page
    
        localized-files/
            ALL_ca/
                index.html
            es_ALL/
                index.html
                404.html
            fr/
                index.html
                404.html
            fr_ca/
                index.html
    

    localized-files/ディレクトリには、サイトでサポートされている言語と国の組み合わせごとに個別のサブフォルダーが含まれています。各サブフォルダーの命名パターンは、次のいずれかの形式に従う必要があります。

    • languageCode_countryCode : その言語設定その国コードを持つユーザーに固有のコンテンツが含まれています

    • languageCode : その言語設定を持つユーザーに固有のコンテンツが含まれていますが、コンテンツは国固有ではありません。基本的にlanguageCode_ALLと同等

    これらのコードの詳細については、以下のサブセクションの国と言語のコードを参照してください。 ALLの値 (大文字と小文字を区別) を使用して、任意の国 ( es_ALL/など) または任意の言語 ( ALL_ca/ / など) を示すことができます。

    サブフォルダー内のファイルは、 publicディレクトリまたは他のサブフォルダー内に類似のファイルを持つ必要はありません。特定の言語や国に完全に特化したコンテンツを作成できます。

  2. i18n属性をfirebase.jsonファイルに追加し、「i18n コンテンツ」を含むディレクトリを指定します。例を続けます。

    // firebase.json
    
    "hosting": {
    
      "public": "public",
    
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
    
      "i18n": {
        "root": "/localized-files"  // directory that contains your "i18n content"
      }
    
      ...
    }
    

    rootに指定するディレクトリは、すべての「i18n コンテンツ」サブフォルダを含むディレクトリの名前である必要があります。すべての「i18n コンテンツ」サブフォルダーをpublicディレクトリのルートに配置した場合は、 rootの値に/を使用します。 root値の先頭と末尾のスラッシュはオプションです。

  3. 「i18n コンテンツ」と構成をホスティング サイトにデプロイします。

Cookie オーバーライドを使用して設定をテストできます。

国コードと言語コード

「i18n コンテンツ」サブフォルダーに名前を付けるときは、国コードと言語コードの両方に小文字を使用する必要があります。 ALLの値 (大文字と小文字を区別) を使用して、任意の国 ( es_ALL/など) または任意の言語 ( ALL_ca/ / など) を示すことができます。

ホスティングは、ユーザーの IP アドレスから国コードを取得します。国コードは、2 文字のISO 3166-1 alpha-2 コードです。

言語コードは、ユーザーのAccept-Languageリクエスト ヘッダーから取得されます (通常、ウェブ ブラウザによって自動的に設定されます)。それらはISO 639-1 コードです。言語コードを使用する場合は、次の点に注意してください。

  • Hosting が提供する「i18n コンテンツ」を検索するとき、 Accept-Languageヘッダーの品質値に基づいて言語を並べ替えます。

  • ホスティングは、 Accept-Languageヘッダーの地域および国のサブタグを削除するため、「i18n コンテンツ」サブフォルダー名の言語コードにこれらのサブタグを含めることはできません。たとえば、サブフォルダー名の言語コードとして es es-419またはes-USを使用することはできませんが、 esを使用することはできます。

    特定の地域または国のコンテンツを提供する場合は、サポートする特定の言語と国のコンテンツを含むサブフォルダーを作成できます。

「i18nコンテンツ」の優先順位

i18n リライトを設定すると、Hosting は次の優先順位に基づいてコンテンツを提供します。

  1. /__/*パス セグメントで始まる予約済みの名前空間

  2. 構成されたリダイレクト

  3. 完全一致の静的コンテンツ

    1. 言語コード + 国コード (たとえば、 fr_ca/のコンテンツ)
      順序は、リクエストのAccept-Languageヘッダー内の各言語の品質値に従います。

    2. 国コードのみ (たとえば、 ALL_ca/のコンテンツ)

    3. 言語コードのみ (たとえば、 fr/またはes_ALL/のコンテンツ)
      順序は、リクエストのAccept-Languageヘッダー内の各言語の品質値に従います。

    4. 「デフォルト」完全一致静的コンテンツ
      これは、 publicディレクトリのルートなど、「i18n コンテンツ」ディレクトリの外にあるコンテンツです。

  4. 構成された書き換え

  5. 404ハンドリング

    1. i18n 404 ページ
      これは、上記の完全一致静的コンテンツの優先順位と同じ優先順位に従います。

    2. カスタム 404ページ

    3. デフォルトの 404 ページ (Firebase が提供)

優先順位の例

上記の例を続けましょう。同じサンプル ディレクトリとサンプル リクエストを使用します。

  • 「i18n コンテンツ」ディレクトリ ( localized-filesと呼ばれる) を含むローカル プロジェクト ディレクトリの例

    public/
        index.html  // your site's default homepage
        404.html  // your site's custom 404 page
    
        localized-files/
            ALL_ca/
                index.html
            es_ALL/
                index.html
                404.html
            fr/
                index.html
                404.html
            fr_ca/
                index.html
    
  • リクエスト情報の例

    • 言語コード: fren (フランス語、次に英語)
      言語コードは、 Accept-Languageヘッダーの品質値に基づいて並べられます。

    • 国コード: ca (カナダ)

完全一致の優先順位と言語設定の品質値に従って、Hosting は要求されたページのディレクトリを次の順序で検索します。

  1. public/localized-files/fr_ca/

  2. public/localized-files/en_ca/

  3. public/localized-files/ALL_ca/

  4. public/localized-files/fr_ALL/

  5. public/localized-files/fr/

  6. public/localized-files/en_ALL/

  7. public/localized-files/en/

  8. public/

  9. 404ハンドリング

ユーザーに提供されるページはどれですか?

  • リクエストされたページ: index.html

  • 要求されたページ: awesome-page.html

この「i18n コンテンツ」ディレクトリの検索と提供については、次の点に注意してください。

  • localized-files/ディレクトリには、実際にはen_ca/en_ALL/ 、またはen/サブフォルダーが含まれていないため、Hosting は、リクエストの言語と国の組み合わせに一致するサブフォルダーが見つかるまで、優先順位リストをスキップします。

  • localized-files/ディレクトリにはes_ALL/サブフォルダーが含まれていますが、上記のリクエスト例にはesまたはes-foo言語コードが含まれていないため、Hosting はesに一致する「i18n コンテンツ」を検索しません。

  • fr/およびfr_ALL/という名前のサブフォルダーは、ユーザーの国および言語設定の観点からは同等です。ただし、両方のサブフォルダーが存在する場合、ホスティングはfr/コンテンツの前にfr_ALL/コンテンツを提供します。

Cookie を使用して国と言語のヘッダーを上書きすることで、提供されるコンテンツを変更できます。

以下に、Cookie のオーバーライドを使用できるいくつかの方法を示します。

  • さまざまな言語/国の組み合わせで機能をテストして、提供されるコンテンツを確認します。

  • ユーザーが表示されるコンテンツを変更できるようにします。たとえば、言語ピッカーを実装し、それに応じてユーザーのfirebase-language-override Cookie を設定できます。

Cookie オーバーライドを構成するには、次の名前の両方またはいずれかで Cookie を設定します: firebase-country-overrideおよびfirebase-language-override 。たとえば、次の JavaScript コード スニペットは、国コードをcaにオーバーライドし、 Accept-Languageヘッダーをfr,enにオーバーライドします。

document.cookie = "firebase-country-override=ca";
document.cookie = "firebase-language-override=fr,en";

言語 Cookie のオーバーライドは、サブタグや品質値を含まない、言語コードのコンマ区切りリストである必要があります。

Cookie のオーバーライドはログに反映されません。