国際化の書き換え (「i18n 書き換え」) を使用して、ユーザーの国または優先言語に応じて異なるコンテンツを提供します。設定できる構成の例を次に示します。
フランス語を好むすべてのユーザーに同じフランス語のコンテンツを提供します (国に関係なく)。
例: フランス語のテキストを含むホームページフランス語を好むユーザーには標準フランス語のコンテンツを提供しますが、フランス語を好むカナダのユーザーには代わりにカナダのフランス語コンテンツを提供します。
例: 標準フランス語の言い回しのホームページとカナダフランス語の言い回しのホームページカナダのすべてのユーザーに同じコンテンツを提供します (言語設定に関係なく)。
例: サイトの「デフォルト」言語を使用しているが、カナダ固有の機能 (ホリデー テーマなど) を備えたホームページフランス語を好むカナダのユーザーにカナダのフランス語のコンテンツを提供します。
例: カナダのフランス語の言い回しとカナダ固有の機能 (休日のテーマなど) を含むホームページ
Firebase Hosting は、IP アドレスからユーザーの国を判断し、 Accept-Language
リクエスト ヘッダーからユーザーの言語設定を判断します (通常はウェブ ブラウザによって自動的に設定されます)。
i18n 書き換えをセットアップする
ホスティング サイトの i18n リライトを設定するには、ローカライズされたすべてのコンテンツ用に「i18n コンテンツ」ディレクトリを作成し、 i18n
属性をfirebase.json
ファイルに追加して、新しい「i18n コンテンツ」ディレクトリを指すようにする必要があります。
詳細な手順は次のとおりです。
ローカル アプリ ディレクトリの
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
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
ディレクトリまたは他のサブフォルダー内に類似のファイルを持つ必要はありません。特定の言語や国に完全に特化したコンテンツを作成できます。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
値の先頭と末尾のスラッシュはオプションです。「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 コンテンツ」サブフォルダー名の言語コードにこれらのサブタグを含めることはできません。たとえば、サブフォルダー名の言語コードとして eses-419
またはes-US
を使用することはできませんが、es
を使用することはできます。特定の地域または国のコンテンツを提供する場合は、サポートする特定の言語と国のコンテンツを含むサブフォルダーを作成できます。
この例では、言語設定が
es
、es-es
、またはes-419
であるスペインからのリクエストは、Hosting がこれらすべての言語コードをes
として扱うため、es_es/
サブフォルダーからコンテンツを受け取ります。Hosting は
es-419
をes
として扱うため、言語設定がes-419
である米国、メキシコ、またはその他の国からのリクエストは、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
この例では、Hosting が言語コード
es-419
をes
として扱うため、言語設定がes-419
のメキシコからのリクエストはes_mx/
サブフォルダーからコンテンツを受け取ります。ただし、ホストが
es-419
をes
として扱い、es_us/ サブフォルダーがないため、言語設定がes-419
の米国からの要求は、es_ALL/
es_us/
フォルダーからコンテンツを受け取ります。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コンテンツ」の優先順位
i18n リライトを設定すると、Hosting は次の優先順位に基づいてコンテンツを提供します。
/__/*
パス セグメントで始まる予約済みの名前空間完全一致の静的コンテンツ
言語コード + 国コード (たとえば、
fr_ca/
のコンテンツ)
順序は、リクエストのAccept-Language
ヘッダー内の各言語の品質値に従います。国コードのみ (たとえば、
ALL_ca/
のコンテンツ)言語コードのみ (たとえば、
fr/
またはes_ALL/
のコンテンツ)
順序は、リクエストのAccept-Language
ヘッダー内の各言語の品質値に従います。「デフォルト」完全一致静的コンテンツ
これは、public
ディレクトリのルートなど、「i18n コンテンツ」ディレクトリの外にあるコンテンツです。
構成された書き換え
404ハンドリング
i18n 404 ページ
これは、上記の完全一致静的コンテンツの優先順位と同じ優先順位に従います。カスタム 404ページ
デフォルトの 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
リクエスト情報の例
言語コード:
fr
、en
(フランス語、次に英語)
言語コードは、Accept-Language
ヘッダーの品質値に基づいて並べられます。国コード:
ca
(カナダ)
完全一致の優先順位と言語設定の品質値に従って、Hosting は要求されたページのディレクトリを次の順序で検索します。
public/localized-files/fr_ca/
public/localized-files/en_ca/
public/localized-files/ALL_ca/
public/localized-files/fr_ALL/
public/localized-files/fr/
public/localized-files/en_ALL/
public/localized-files/en/
public/
404ハンドリング
ユーザーに提供されるページはどれですか?
リクエストされたページ:
index.html
fr_ca/
サブフォルダーのindex.html
Hosting は最初に
fr_ca/
サブフォルダーを検索するため、そのサブフォルダーでindex.html
に完全に一致するものを見つけます。要求されたページ:
awesome-page.html
fr/
サブフォルダーの404.html
ホスティングは最初にディレクトリ全体 (すべての「i18n コンテンツ」サブフォルダーとルート ディレクトリを含む) を優先順に検索して完全一致を探しますが、
awesome-page.html
の完全一致はありません。そのため、ホスティングは 404 処理を開始します。これは、完全一致検索と同じ i18n 優先順位に従います。
fr/
サブフォルダーは、404 ページを含む最初に検索されたサブフォルダーです。
この「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 を使用して国と言語のヘッダーを上書きすることで、提供されるコンテンツを変更できます。
以下に、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 のオーバーライドはログに反映されません。