国際化（i18n）リライトの構成

国際化リライト（「i18n リライト」）を使用して、ユーザーの国または言語設定に応じてコンテンツを提供します。たとえば、次のような構成を行うことができます。

• （国に関係なく）言語設定をフランス語にしたすべてのユーザーに同じフランス語のコンテンツを配信する。
  例: フランス語のテキストのホームページ

• 言語設定をフランス語にしたユーザーには標準フランス語のコンテンツを配信し、言語設定をフランス語にしたカナダのユーザーにはフランス語（カナダ）のコンテンツを配信する。
  例: 標準フランス語のフレーズを使用したホームページとフランス語（カナダ）のフレーズを使用したホームページ

• すべてのカナダのユーザーに同じコンテンツを配信する（言語設定に関係なく）。
  例: サイトの「デフォルト」の言語を使用するが、カナダ固有の機能（ホリデーのテーマなど）を含むホームページ

• 言語設定をフランス語にしたカナダのユーザーに、フランス語（カナダ）のコンテンツを配信する。
  例: フランス語（カナダ）のフレーズとカナダ固有の機能（ホリデーのテーマなど）を含むホームページ

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

i18n リライトの設定

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

詳しい手順は次のとおりです。

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

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

   localized-files という名前の「i18n content」ディレクトリの例を次に示します。

   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

   各サブフォルダのコンテンツに対応するリクエストを表示する

   public/
       // matches requests that aren't specified by your "i18n content" subfolders
       // example: display your homepage in the "default" language for your site with no country-specific features
       index.html  // your site's default homepage
       404.html  // your site's custom 404 page
   
       localized-files/
   
           // matches requests from Canada with any language preference
           // example: display your homepage in the "default" language for your site with a Canada-specific feature
           ALL_ca/
               index.html
   
           // matches requests from any country with a language preference of `es` or `es-foo`
           // example: display your homepage in Spanish with no country-specific features
           es_ALL/
               index.html
               404.html  // your site's custom 404 page in Spanish
   
           // matches requests from any country with a language preference of `fr` or `fr-foo`
           // example: display your homepage in Standard French with no country-specific features
           fr/
               index.html
               404.html  // your site's custom 404 page in French
   
           // matches requests from Canada with a language preference of `fr` or `fr-foo`
           // example: display your homepage in Canadian French and/or with a Canada-specific feature
           fr_ca/
               index.html

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

   • languageCode_countryCode: この言語設定と国コードを持つユーザー向けのコンテンツが含まれます。

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

   これらのコードの詳細については、以下の国コードと言語コードをご覧ください。ALL（大文字）の値を使用して、任意の国（例: es_ALL/）、または任意の言語（例: ALL_ca/）を指定できます。

   サブフォルダ内には、必ずしも public ディレクトリやその他のサブフォルダと同等の内容のファイルを置く必要はありません。特定の言語や国に特化したコンテンツを作成できます。

   注: Hosting が「i18n content」のファイルを配信する際の優先順位については、後述の「i18n content」コンテンツの優先順位をご覧ください。

2. firebase.json ファイルに i18n 属性を追加し、「i18n content」を含むディレクトリを指定します。以下は、例の続きです。

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

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

3. 「i18n content」と構成を Hosting サイトにデプロイします。

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

国コードと言語コード

「i18n content」サブフォルダに名前を付ける場合は、国コードと言語コードの両方に小文字を使用する必要があります。ALL（大文字）の値を使用して、任意の国（例: es_ALL/）、または任意の言語（例: ALL_ca/）を指定できます。

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

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

• Hosting は、配信する「i18n content」を検索するときに、Accept-Language ヘッダーの品質値に基づいて言語の優先順位を設定します。

• Hosting では、Accept-Language ヘッダー内の地域や国のサブタグは参照されないため、「i18n content」のサブフォルダ名の言語コードにはこれらのサブタグを含めることはできません。たとえば、サブフォルダ名では言語コードとして es-419 や es-US を使用できませんが、es は使用できます。

  特定の地域や国のコンテンツを配信する場合は、サポートする特定の言語と国の組み合わせのコンテンツを含むサブフォルダを作成できます。

  特定の地域や国のコンテンツをサポートする例を見る

  スペインに適用されるスペイン語コンテンツの配信とその他の国への配信（es-419 の動作を模倣）

  この例では、スペインからのリクエストの言語設定が es、es-es、さらには es-419 であっても、Hosting はこれらすべてを es として扱うため、es_es/ サブフォルダのコンテンツが提供されます。

  米国、メキシコ、またはその他の国からのリクエストで言語設定が es-419 に設定されている場合、Hosting は es-419 を es として扱うため、es_ALL/ サブフォルダのコンテンツが提供されます。

  public/
      // matches requests that aren't specified by your "i18n content" subfolders
      index.html  // the site's default homepage
  
      localized-files/
  
          // matches requests from Spain with a language preference of `es` or `es-foo`
          es_es/
              index.html
  
          // matches requests from any other country with a language preference of `es` or `es-foo`
          es_ALL/
              index.html

  特定の国に適用されるスペイン語のコンテンツの配信

  この例では、メキシコからのリクエストの言語設定が es-419 である場合、Hosting は言語コード es-419 を es として扱うため、es_mx/ サブフォルダのコンテンツが提供されます。

  米国からのリクエストの言語設定が es-419 に設定されている場合、Hosting は es-419 を es として扱い、またes_us/　 サブフォルダがないため、es_ALL/ サブフォルダのコンテンツが提供されます。

  public/
      // matches requests that aren't specified by your "i18n content" subfolders
      index.html  // the site's default homepage
  
      localized-files/
  
          // matches requests from Argentina with a language preference of `es` or `es-foo` (mimics behavior of `es-ar` header tag)
          es_ar/
              index.html
  
          // matches requests from Spain with a language preference of `es` or `es-foo` (mimics behavior of `es-es` header tag)
          es_es/
              index.html
  
          // matches requests from Mexico with a language preference of `es` or `es-foo` (mimics behavior of `es-mx` header tag)
          es_mx/
              index.html
  
          // matches requests from any other country with a language preference of `es` or `es-foo` (mimics behavior of `es-419` header tag)
          es_ALL/
              index.html

「i18n content」の優先順位

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

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

2. リダイレクトの構成

3. 正確に一致する静的コンテンツ

   1. 言語コード + 国コード（例: fr_ca/ のコンテンツ）
      優先順位は、リクエストの Accept-Language ヘッダーの各言語の品質値に従います。

   2. 国コードのみ（ALL_ca/ からのコンテンツなど）

   3. 言語コードのみ（例: fr/ や es_ALL/ からのコンテンツ）
      優先順位は、リクエストの Accept-Language ヘッダーの各言語の品質値に従います。

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

4. リライトの構成

5. 404 の処理

   1. i18n 404 ページ
      完全一致静的コンテンツの場合、上に示した優先順位に従います。

   2. カスタムの 404 ページ

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

優先順位の例

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

• 「i18n content」ディレクトリを含むローカル プロジェクト ディレクトリの例（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

• リクエスト情報の例

  • 言語コード: fr、en（フランス語、英語）
    言語コードは、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

  正解

  fr_ca/ サブフォルダの index.html

  Hosting は最初に fr_ca/ サブフォルダを検索するため、そのサブフォルダ内の index.html が完全一致として見つかります。

• リクエストされたページ: awesome-page.html

  正解

  fr/ サブフォルダの 404.html

  Hosting は、まずディレクトリ全体（すべての「i18n content」サブフォルダとルート ディレクトリを含む）を完全一致で検索しますが、awesome-page.html と完全一致するものはありません。

  そのため、Hosting は 404 処理を開始します。この処理は、完全一致検索と同じ i18n の優先順位に従います。fr/ サブフォルダは、検索された中で 404 ページを含む最初のサブフォルダです。

「i18n content」ディレクトリのこの検索と配信については、次の点にご注意ください。

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

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

• fr/ と fr_ALL/ というサブフォルダは、ユーザーの国と言語の設定から見ると同等です。ただし、両方のサブフォルダが存在する場合、Hosting は fr_ALL/ コンテンツを fr/ コンテンツの前に配信します。

言語と国コードを Cookie でオーバーライドする

配信するコンテンツを変更するには、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 オーバーライドはログに記録されません。