Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

  • フランス語を好むユーザーに標準フランス語のコンテンツを提供するが、フランス語を好むカナダのユーザーのために、代わりにカナダのフランス語のコンテンツを提供します。
    例:標準フランス語のフレーズを使用したホームページとカナダフランス語のフレーズを使用したホームページ

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

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

Firebaseホスティングは、そのIPアドレスからのユーザーの言語設定からユーザーの国を決定しAccept-Languageリクエストヘッダ(通常は自分のWebブラウザによって自動的に設定します)。

i18nリライトを設定する

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

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

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

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

    ここでは、「国際化コンテンツ」ディレクトリと呼ばれる例だ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
    

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

    • languageCode_countryCode :その言語設定その国コードを持っているユーザーのためにコンテンツの特定が含まれています

    • languageCode :その言語の好みを持っているユーザーのためのコンテンツの特定が含まれますが、内容は国固有ではありません。基本的に同等languageCode_ALL

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

    サブフォルダ内のファイルがに類似したファイルを用意する必要はありませんpublicディレクトリや他のサブフォルダ。言語や国に完全に固有のコンテンツを作成できます。

  2. 追加i18nあなたに属性をfirebase.jsonファイルと「国際化コンテンツ」を含むディレクトリを指定します。例を続ける:

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

    指定したディレクトリrootすべてあなたの「国際化コンテンツ」サブフォルダを含むディレクトリの名前でなければなりません。あなたのルートにすべてのあなたの「国際化コンテンツ」サブフォルダを配置した場合publicディレクトリ、使用/の値のroot 。で先頭と最後のスラッシュroot値はオプションです。

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

あなたは使用してセットアップをテストすることができますクッキーの上書きを

国と言語コード

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

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

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

  • 配信する「国際化コンテンツ」を検索しホスティングするとき、それは中品質値に基づいて言語順序付けAccept-Languageヘッダを。

  • ホスティングは、のいずれかの地域や国サブタグ低下しAccept-Language 「国際化コンテンツ」サブフォルダ名に言語コードは、これらのサブタグを含めることはできませんので、ヘッダを。たとえば、あなたが使用することはできませんes-419またはes-USサブフォルダ名に言語コードとして、しかし、あなたは使用することができes

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

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

i18n書き換えを設定した場合、ホスティングは次の優先順位に基づいてコンテンツを提供します。

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

  2. 設定済みのリダイレクト

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

    1. 言語コード+国コード(例えば、からコンテンツfr_ca/
      順序は、要求の中の各言語の品質値以下Accept-Languageヘッダを。

    2. 国コードのみ(から例えば、コンテンツALL_ca/

    3. 唯一の言語コード(例えば、からコンテンツfr/又はes_ALL/
      順序は、要求の中の各言語の品質値以下Accept-Languageヘッダを。

    4. 「デフォルト」の完全一致静的コンテンツ
      これは、のルートに同じように、「国際化コンテンツ」ディレクトリの外のコンテンツであるpublicディレクトリ。

  4. 設定済みの書き換え

  5. 404処理

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

    2. カスタム404ページ

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

優先順位の例

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

  • 「国際化コンテンツ」ディレクトリと例ローカルプロジェクトディレクトリ(と呼ばれる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 (カナダ)

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

  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

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

  • localized-files/ディレクトリが実際に含まれていませんen_ca/en_ALL/またはen/サブフォルダ、それはリクエストの言語-国の組み合わせに対するマッチングサブフォルダを見つけるまでちょうど優先順位リストを下にスキップしますホスティング。

  • にもかかわらず、 localized-files/ディレクトリが含まれていes_ALL/サブフォルダ、上記の例の要求が含まれていませんeses-fooように、「国際化コンテンツ」と一致するものを検索しませんホスティング、言語コードをes

  • 呼ばれるサブフォルダfr/fr_ALL/ユーザーの国や言語の好みの観点から同等です。しかし、両方のサブフォルダが存在する場合、ホスティングは機能しますfr_ALL/前にコンテンツfr/コンテンツを。

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

Cookieのオーバーライドを使用する方法は次のとおりです。

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

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

:これらの名前の両方またはいずれかでのconfigureクッキーの上書き、セットクッキーにfirebase-country-overridefirebase-language-override 。たとえば、次のJavaScriptコードスニペットは、国コードがあることを優先しますcaAccept-Languageであることを見出しfr,en

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

言語Cookieのオーバーライドは、サブタグや品質値を使用せずに、優先順にコンマで区切った言語コードのリストである必要があります。

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