2022 年 10 月 18 日に開催される Firebase Summit に、直接会場で、またはオンラインでご参加ください。Firebase を使用してアプリ開発を加速させ、自信を持ってアプリをリリースし、簡単にスケールする方法をご紹介します。 今すぐ申し込む

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

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

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

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

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

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

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

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

i18nリライトを設定する

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

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

  1. ローカルアプリディレクトリの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
    

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

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

Cookieのオーバーライドを使用してセットアップをテストできます。

国と言語コード

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

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

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

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

  • ホスティングでは、 Accept-Languageヘッダーの地域および国のサブタグが削除されるため、「i18ncontent」サブフォルダー名の言語コードにこれらのサブタグを含めることはできません。たとえば、サブフォルダ名の言語コードとしてes 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ディレクトリのルートなど、「i18ncontent」ディレクトリの外部にあるコンテンツです。

  4. 構成された書き換え

  5. 404処理

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

    2. カスタム404ページ

    3. デフォルトの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
    
  • リクエスト情報の例

    • 言語コード: 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/サブフォルダが含まれていても、上記のリクエスト例にはesまたはes-foo言語コードが含まれていないため、ホスティングはesに一致する「i18nコンテンツ」を検索しません。

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

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

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

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

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

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

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

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

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