国際化リライト(「i18nリライト」)を使用して、ユーザーの国または優先言語に応じて異なるコンテンツを提供します。設定できる構成の例を次に示します。
フランス語を好むすべてのユーザーに同じフランス語のコンテンツを提供します(国に関係なく)。
例:フランス語のテキストを含むホームページフランス語を好むユーザーには標準フランス語のコンテンツを提供しますが、フランス語を好むカナダのユーザーには、代わりにカナダのフランス語のコンテンツを提供します。
例:標準フランス語のフレーズを使用したホームページとカナダフランス語のフレーズを使用したホームページすべてのカナダのユーザーに同じコンテンツを提供します(言語の好みに関係なく)。
例:サイトの「デフォルト」言語を使用しているが、カナダ固有の機能(休日のテーマなど)を使用しているホームページフランス語を好むカナダのユーザーにカナダのフランス語のコンテンツを提供します。
例:カナダフランス語のフレージングとカナダ固有の機能(休日のテーマなど)を含むホームページ
Firebase Hostingは、IPアドレスからユーザーの国を決定し、 Accept-Language
リクエストヘッダー(通常はウェブブラウザによって自動的に設定されます)からユーザーの言語設定を決定します。
i18nリライトを設定する
ホスティングサイトのi18n書き換えを設定するには、ローカライズされたすべてのコンテンツの「i18nコンテンツ」ディレクトリを作成してから、 firebase.json
ファイルにi18n
属性を追加して、新しい「i18nコンテンツ」ディレクトリを指すようにする必要があります。
詳細な手順は次のとおりです。
ローカルアプリディレクトリの
public
フォルダ内に、「i18nコンテンツ」用に個別のディレクトリを作成し、サイトでサポートされている言語と国の組み合わせごとにサブフォルダを作成します。各サブフォルダーに、休日をテーマにしたホームページや言語固有の404ページなど、その組み合わせに固有のコンテンツを追加します。
これは、
localized-files
と呼ばれる「i18ncontent」ディレクトリの例です。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コンテンツ」サブフォルダを含むディレクトリの名前である必要があります。すべての「i18ncontent」サブフォルダをpublic
ディレクトリのルートに配置した場合は、root
の値に/
を使用します。root
値の先頭と末尾のスラッシュはオプションです。「i18nコンテンツ」と設定をホスティングサイトにデプロイします。
Cookieのオーバーライドを使用してセットアップをテストできます。
国と言語コード
「i18ncontent」サブフォルダーに名前を付けるときは、国コードと言語コードの両方に小文字を使用する必要があります。 ALL
(大文字と小文字を区別)の値を使用して、任意の国( es_ALL/
など)または任意の言語( ALL_ca/
/など)を示すことができます。
ホスティングは、ユーザーのIPアドレスから国コードを取得します。国コードは、2文字のISO 3166-1alpha-2コードです。
言語コードは、ユーザーのAccept-Language
リクエストヘッダーから取得されます(通常、ユーザーのWebブラウザーによって自動的に設定されます)。それらはISO639-1コードです。言語コードを使用するときは、次の点に注意してください。
ホスティングは、提供する「i18nコンテンツ」を検索するときに、
Accept-Language
ヘッダーの品質値に基づいて言語を並べ替えます。ホスティングでは、
Accept-Language
ヘッダーの地域および国のサブタグが削除されるため、「i18ncontent」サブフォルダー名の言語コードにこれらのサブタグを含めることはできません。たとえば、サブフォルダ名の言語コードとしてeses-419
またはes-US
を使用することはできませんが、es
を使用することはできます。特定の地域または国のコンテンツを提供する場合は、サポートする特定の言語の国のコンテンツを含むサブフォルダーを作成できます。
この例では、
es
、es-es
、またはes-419
の言語設定を持つスペインからのリクエストは、ホスティングがすべての言語コードをes
として扱うため、es_es/
サブフォルダーからコンテンツを受け取ります。米国、メキシコ、または言語設定が
es-419
であるその他の国からのリクエストは、ホスティングが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
を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リライトを設定した場合、ホスティングは次の優先順位に基づいてコンテンツを提供します。
/__/*
パスセグメントで始まる予約済み名前空間完全一致の静的コンテンツ
言語コード+国コード(たとえば、
fr_ca/
のコンテンツ)
順序は、リクエストのAccept-Language
ヘッダーの各言語の品質値に従います。国コードのみ(たとえば、
ALL_ca/
のコンテンツ)言語コードのみ(たとえば、
fr/
またはes_ALL/
のコンテンツ)
順序は、リクエストのAccept-Language
ヘッダーの各言語の品質値に従います。「デフォルト」の完全一致静的コンテンツ
これは、public
ディレクトリのルートのように、「i18ncontent」ディレクトリの外にあるコンテンツです。
構成された書き換え
404処理
i18n404ページ
これは、完全一致の静的コンテンツについて上記でリストされているのと同じ優先順位に従います。カスタム404ページ
デフォルトの404ページ(Firebaseが提供)
優先順位の例
上から例を続けましょう。同じサンプルディレクトリとサンプルリクエストを使用します。
「i18ncontent」ディレクトリ(
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
(カナダ)
完全一致の優先順位と言語設定の品質値に従って、ホスティングは次の順序で要求されたページのディレクトリを検索します。
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
ホスティングは最初に
fr_ca/
サブフォルダーを検索するため、そのサブフォルダー内のindex.html
と完全に一致するものが見つかります。リクエストされたページ:
awesome-page.html
fr/
サブフォルダーからの404.html
ホスティングは最初にディレクトリ全体(すべての「i18nコンテンツ」サブフォルダとルートディレクトリを含む)を優先順位に従って完全一致を検索しますが、
awesome-page.html
の完全一致はありません。したがって、ホスティングは404処理を開始します。これは、完全一致検索と同じi18n優先順位に従います。
fr/
サブフォルダーは、404ページを含む最初に検索されたサブフォルダーです。
「i18ncontent」ディレクトリのこの検索と提供については、次の点に注意してください。
localized-files/
ディレクトリには実際にはen_ca/
、en_ALL/
、またはen/
サブフォルダが含まれていないため、ホスティングは、リクエストの言語と国の組み合わせに一致するサブフォルダが見つかるまで、優先度リストをスキップします。localized-files/
ディレクトリにes_ALL/
サブフォルダが含まれていても、上記のリクエスト例にはes
またはes-foo
言語コードが含まれていないため、ホスティングはes
に一致する「i18nコンテンツ」を検索しません。fr/
およびfr_ALL/
と呼ばれるサブフォルダーは、ユーザーの国と言語の好みの観点からは同等です。ただし、両方のサブフォルダーが存在する場合、ホスティングはfr/
contentの前にfr_ALL/
contentを提供します。
言語と国コードをCookieで上書きする
Cookieを使用して国と言語のヘッダーを上書きすることにより、提供されるコンテンツを変更できます。
Cookieのオーバーライドを使用する方法は次のとおりです。
言語と国の組み合わせが異なる機能をテストして、提供されるコンテンツを確認します。
ユーザーが表示されるコンテンツを変更できるようにします。たとえば、言語ピッカーを実装し、それに応じてユーザーの
firebase-language-override
を設定できます。
Cookieのオーバーライドを設定するには、 firebase-country-override
とfirebase-language-override
の両方またはいずれかの名前でCookieを設定します。たとえば、次のJavaScriptコードスニペットは国コードをca
にオーバーライドし、 Accept-Language
ヘッダーをfr,en
にオーバーライドします。
document.cookie = "firebase-country-override=ca";
document.cookie = "firebase-language-override=fr,en";
言語Cookieのオーバーライドは、サブタグや品質値を使用せずに、優先順にコンマで区切られた言語コードのリストである必要があります。
Cookieのオーバーライドはログに反映されません。