chrome.i18n

説明

chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。

マニフェスト

拡張機能に /_locales ディレクトリがある場合は、マニフェスト"default_locale" を定義する必要があります。

コンセプトと使用方法

ユーザーに表示される文字列はすべて、messages.json という名前のファイルに格納する必要があります。新しい言語 / 地域を追加するたびに、/_locales/_localeCode_ という名前のディレクトリにメッセージ ファイルを追加します。ここで、localeCode は、英語の場合は en などのコードです。

英語(en)、スペイン語(es)、韓国語(ko)をサポートする国際化された拡張機能のファイル階層は次のとおりです。

拡張機能ディレクトリ: manifest.json、*.html、*.js、/_locales ディレクトリ。/_locales ディレクトリに、en、es、ko の各ディレクトリがあり、それぞれに messages.json ファイルがあります。

複数言語の対応

次の図に示すファイルを含む拡張機能があるとします。

manifest.json ファイルと JavaScript を含むファイル。.json ファイルに「Hello World」が含まれています。JavaScript ファイルの title が「Hello World」です。

この拡張機能を国際化するには、ユーザーに表示される各文字列に名前を付け、メッセージ ファイルに格納します。拡張機能のマニフェスト、CSS ファイル、JavaScript コードは、各文字列の名前を使用してローカライズされたバージョンを取得します。

国際化された拡張機能は次のようになります(英語の文字列のみが含まれています)。

manifest.json ファイルでは、「Hello World」が「__MSG_extName__」に変更され、新しい「default_locale」アイテムの値が「en」になっています。JavaScript ファイルで、「Hello World」が chrome.i18n.getMessage('extName') に変更されました。/_locales/ja/messages.json という名前の新しいファイルで「extName」を定義します。

国際化に関する注意事項:

  • サポートされている言語 / 地域であれば、どの言語 / 地域でも使用できます。サポートされていない言語 / 地域を使用している場合、Google Chrome では無視されます。
  • manifest.json ファイルと CSS ファイルで、messagename という名前の文字列を次のように参照します。

    __MSG_messagename__
    
  • 拡張機能またはアプリの JavaScript コードで、次のように messagename という名前の文字列を参照します。

    chrome.i18n.getMessage("messagename")
    
  • getMessage() の呼び出しごとに、メッセージに含める文字列を最大 9 個指定できます。詳しくは、例: getMessage をご覧ください。

  • @@bidi_dir@@ui_locale などのメッセージは、国際化システムによって提供されます。事前定義されたメッセージ名の一覧については、事前定義メッセージをご覧ください。

  • messages.json では、ユーザーに表示される各文字列に名前、[message] アイテム、省略可能な [description] アイテムがあります。名前は、文字列を識別するキー(「extName」や「search_string」など)です。「message」には、このロケールの文字列の値を指定します。省略可能な「description」は、拡張機能で文字列がどのように使用されているかを確認できない翻訳者向けのヘルプです。次に例を示します。

    {
      "search_string": {
        "message": "hello%20world",
        "description": "The string we search for. Put %20 between words that go together."
      },
      ...
    }
    

詳細については、形式: 言語 / 地域固有のメッセージをご覧ください。

拡張機能を国際化すると、翻訳が簡単になります。messages.json をコピーして変換し、コピーを /_locales の下の新しいディレクトリに配置します。たとえば、スペイン語をサポートするには、messages.json の翻訳コピーを /_locales/es の下に配置します。次の図は、以前の拡張機能と新しいスペイン語の翻訳を示しています。

前述の図と同じですが、/_locales/es/messages.json に、メッセージのスペイン語翻訳を含む新しいファイルがあります。

事前定義メッセージ

国際化システムには、ローカライズに役立ついくつかの定義済みメッセージが用意されています。たとえば、現在の UI の言語 / 地域を検出できる @@ui_locale や、テキストの向きを検出できる @@bidi_... メッセージなどがあります。後者のメッセージの名前は、ガジェット BIDI(双方向)API の定数と類似しています。

拡張機能またはアプリがローカライズされているかどうかにかかわらず、CSS ファイルと JavaScript ファイルで特別なメッセージ @@extension_id を使用できます。このメッセージは、マニフェスト ファイルでは機能しません。

次の表に、各事前定義メッセージの説明を示します。

メッセージ名説明
@@extension_id拡張機能またはアプリ ID。この文字列を使用して、拡張機能内のリソースの URL を作成できます。ローカライズされていない拡張機能でもこのメッセージを使用できます。
注: このメッセージは、マニフェスト ファイルでは使用できません。
@@ui_locale現在の言語 / 地域。この文字列を使用して、言語 / 地域固有の URL を作成できます。
@@bidi_dir現在のロケールのテキストの向き。英語などの左から右に記述する言語の場合は「ltr」、アラビア語などの右から左に記述する言語の場合は「rtl」です。
@@bidi_reversed_dir@@bidi_dir が「ltr」の場合、これは「rtl」です。それ以外の場合は「ltr」です。
@@bidi_start_edge@@bidi_dir が「ltr」の場合、これは「left」です。それ以外の場合は「right」です。
@@bidi_end_edge@@bidi_dir が「ltr」の場合、これは「right」です。それ以外の場合は「left」です。

CSS ファイルで @@extension_id を使用して URL を作成する例を次に示します。

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

拡張機能 ID が abcdefghijklmnopqrstuvwxyzabcdef の場合、上のコード スニペットの太字の行は次のようになります。

  background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/background.png');

CSS ファイルで @@bidi_* メッセージを使用する場合の例を次に示します。

body {
  direction: __MSG_@@bidi_dir__;
}

div#header {
  margin-bottom: 1.05em;
  overflow: hidden;
  padding-bottom: 1.5em;
  padding-__MSG_@@bidi_start_edge__: 0;
  padding-__MSG_@@bidi_end_edge__: 1.5em;
  position: relative;
}

英語などの左から右に記述する言語では、太字の線は次のようになります。

  dir: ltr;
  padding-left: 0;
  padding-right: 1.5em;

言語 / 地域

1 つの翻訳で複数の言語バリエーションをサポートできるロケール(en など)や、1 つの翻訳で複数の言語バリエーションをサポートできるロケール(en_GBen_US など)など、さまざまなロケールを指定できます。

拡張機能は、Chrome ウェブストアでサポートされている言語 / 地域にローカライズできます。言語 / 地域がここに記載されていない場合は、最も近い言語 / 地域を選択してください。たとえば、拡張機能のデフォルトの言語 / 地域が "de_CH" の場合は、Chrome ウェブストアで "de" を選択します。

言語 / 地域コード 言語(地域)
ar アラビア語
am アムハラ語
bg ブルガリア語
bn ベンガル語
ca カタロニア語
cs チェコ語
da デンマーク語
de ドイツ語
el ギリシャ語
en 英語
en_AU 英語 (オーストラリア)
EN_GB 英語(英国)
en_US 英語(アメリカ)
es スペイン語
es_419 スペイン語(ラテンアメリカ、カリブ海)
et エストニア語
fa ペルシャ語
fi フィンランド語
fil フィリピン語
fr フランス語
gu グジャラート語
ヘブライ語
hi ヒンディー語
時間 クロアチア語
hu ハンガリー語
id インドネシア語
it イタリア語
ja 日本語
kn カンナダ語
ko 韓国語
lt リトアニア語
lv ラトビア語
ml マラヤーラム語
mr マラーティー語
ミリ秒 マレー語
nl オランダ語
× ノルウェー語
pl ポーランド語
pt_BR ポルトガル語(ブラジル)
pt_PT ポルトガル語 (ポルトガル)
ro ルーマニア語
ru ロシア語
sk スロバキア語
sl スロベニア語
sr セルビア語
sv スウェーデン語
sw スワヒリ語
ta タミル文字
te テルグ文字
th タイ語
tr トルコ語
uk ウクライナ語
vi ベトナム語
zh_CN 中国語(中国)
zh_TW 中国語(台湾)

メールを検索

サポートされているすべてのロケールのすべての文字列を定義する必要はありません。デフォルトのロケールの messages.json ファイルにすべての文字列の値が含まれていれば、翻訳がどれほどまばらでも、拡張機能またはアプリは実行されます。拡張機能システムがメッセージを検索する方法は次のとおりです。

  1. メッセージ ファイル(存在する場合)で、ユーザーの優先ロケールを検索します。たとえば、Google Chrome の言語 / 地域が英国英語(en_GB)に設定されている場合、システムはまず /_locales/en_GB/messages.json でメッセージを検索します。そのファイルが存在し、メッセージが含まれている場合、システムはさらに検索しません。
  2. ユーザーの希望するロケールにリージョンがある場合(ロケールにアンダースコア(_)がある場合)、そのリージョンのないロケールを検索します。たとえば、en_GB メッセージ ファイルが存在しない場合や、メッセージが含まれていない場合、システムは en メッセージ ファイルを検索します。そのファイルが存在し、メッセージが含まれている場合、システムはさらに検索しません。
  3. メッセージ ファイルでデフォルトのロケールを検索します。たとえば、拡張機能の「default_locale」が「es」に設定されていて、/_locales/en_GB/messages.json/_locales/en/messages.json のどちらにもメッセージが含まれていない場合、拡張機能は /_locales/es/messages.json のメッセージを使用します。

次の図では、「colores」という名前のメッセージは、拡張機能がサポートする 3 つの言語 / 地域すべてに存在しますが、「extName」は 2 つの言語 / 地域にのみ存在します。米国英語で Google Chrome を使用しているユーザーには「色」というラベルが表示されますが、英国英語のユーザーには「色」と表示されます。米国英語と英国英語の両方のユーザーには、拡張機能の名前「Hello World」が表示されます。デフォルトの言語はスペイン語であるため、英語以外の言語で Google Chrome を実行しているユーザーには、ラベル「Colores」と拡張機能名「Hola mundo」が表示されます。

4 つのファイル: manifest.json と 3 つの messages.json ファイル(es、en、en_GB 用)。es ファイルと en ファイルには、「extName」と「colores」という名前のメッセージのエントリが表示されます。en_GB ファイルには、「colores」のエントリが 1 つだけあります。

ブラウザの言語 / 地域を設定する

翻訳をテストするには、ブラウザのロケールを設定することをおすすめします。このセクションでは、WindowsMac OSLinuxChromeOS で言語 / 地域を設定する方法について説明します。

Windows

言語 / 地域は、言語 / 地域固有のショートカットまたは Google Chrome UI を使用して変更できます。ショートカットを使用する方法は、一度設定すればより速く、複数の言語を同時に使用できます。

言語 / 地域固有のショートカットを使用する

特定の言語 / 地域で Google Chrome を起動するショートカットを作成して使用する手順は次のとおりです。

  1. デスクトップにすでにある Google Chrome のショートカットのコピーを作成します。
  2. 新しい言語 / 地域に合わせて新しいショートカットの名前を変更します。
  3. ショートカットのプロパティを変更して、[Target] フィールドに --lang フラグと --user-data-dir フラグを指定します。ターゲットは、次のようになります。

    path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
    
  4. ショートカットをダブルクリックして Google Chrome を起動します。

たとえば、スペイン語(es)で Google Chrome を起動するショートカットを作成するには、次のターゲットを持つ chrome-es という名前のショートカットを作成します。

path_to_chrome.exe --lang=es --user-data-dir=c:\chrome-profile-es

ショートカットはいくつでも作成できるため、複数の言語で簡単にテストできます。次に例を示します。

path_to_chrome.exe --lang=en --user-data-dir=c:\chrome-profile-en
path_to_chrome.exe --lang=en_GB --user-data-dir=c:\chrome-profile-en_GB
path_to_chrome.exe --lang=ko --user-data-dir=c:\chrome-profile-ko
UI を使用する

Windows 版 Google Chrome の UI を使用して言語 / 地域を変更する方法は次のとおりです。

  1. アプリアイコン > [オプション]
  2. [詳細] タブを選択します。
  3. [ウェブ コンテンツ] までスクロールします。
  4. [フォントと言語の設定を変更] をクリックします。
  5. [言語] タブを選択します。
  6. プルダウンを使用して Google Chrome の言語を設定します。
  7. Chrome を再起動する

Mac OS

Mac でロケールを変更するには、システム環境設定を使用します。

  1. Apple メニューから [システム環境設定] を選択します。
  2. [個人情報] で [国際] を選択します。
  3. 言語と地域を選択する
  4. Chrome を再起動する

Linux

Linux で言語 / 地域を変更するには、まず Google Chrome を終了します。次に、1 行で LANGUAGE 環境変数を設定し、Google Chrome を起動します。次に例を示します。

LANGUAGE=es ./chrome

ChromeOS

ChromeOS で言語 / 地域を変更するには:

  1. システムトレイで [設定] を選択します。
  2. [言語と入力] で [言語] プルダウンを選択します。
  3. 言語がリストにない場合は、[言語を追加] をクリックして追加します。
  4. 追加したら、言語の横にあるその他アイコン をクリックし、[ChromeOS をこの言語で表示] を選択します。
  5. 設定した言語の横にある [再起動] ボタンをクリックして、ChromeOS を再起動します。

国際化の例は、examples/api/i18n ディレクトリにあります。完全な例については、examples/extensions/news をご覧ください。その他の例やソースコードの表示方法については、サンプルをご覧ください。

getMessage()

次のコードは、ブラウザからローカライズされたメッセージを取得し、文字列として表示します。メッセージ内の 2 つのプレースホルダが文字列「string1」と「string2」に置き換えられます。

function getMessage() {
  var message = chrome.i18n.getMessage("click_here", ["string1", "string2"]);
  document.getElementById("languageSpan").innerHTML = message;
}

単一の文字列を指定して使用する方法は次のとおりです。

  // In JavaScript code
  status.innerText = chrome.i18n.getMessage("error", errorDetails);
"error": {
  "message": "Error: $details$",
  "description": "Generic error template. Expects error parameter to be passed in.",
  "placeholders": {
    "details": {
      "content": "$1",
      "example": "Failed to fetch RSS feed."
    }
  }
}

プレースホルダの詳細については、言語 / 地域固有のメッセージ ページをご覧ください。getMessage() の呼び出しの詳細については、API リファレンスをご覧ください。

getAcceptLanguages()

次のコードは、ブラウザから accept-languages を取得し、各 accept-language を「,」で区切って文字列として表示します。

function getAcceptLanguages() {
  chrome.i18n.getAcceptLanguages(function(languageList) {
    var languages = languageList.join(",");
    document.getElementById("languageSpan").innerHTML = languages;
  })
}

getAcceptLanguages() の呼び出しについて詳しくは、API リファレンスをご覧ください。

detectLanguage()

次のコードは、指定された文字列から最大 3 つの言語を検出し、結果を改行で区切られた文字列として表示します。

function detectLanguage(inputText) {
  chrome.i18n.detectLanguage(inputText, function(result) {
    var outputLang = "Detected Language: ";
    var outputPercent = "Language Percentage: ";
    for(i = 0; i < result.languages.length; i++) {
      outputLang += result.languages[i].language + " ";
      outputPercent +=result.languages[i].percentage + " ";
    }
    document.getElementById("languageSpan").innerHTML = outputLang + "\n" + outputPercent + "\nReliable: " + result.isReliable;
  });
}

detectLanguage(inputText) の呼び出しについて詳しくは、API リファレンスをご覧ください。

LanguageCode

Chrome 47 以降

ISO 言語コード(enfr など)。このメソッドでサポートされている言語の一覧については、kLanguageInfoTable をご覧ください。不明な言語の場合は und が返されます。これは、テキストの [割合] が CLD で不明であることを意味します。

タイプ

文字列

メソッド

detectLanguage()

Promise Chrome 47 以降
chrome.i18n.detectLanguage(
  text: string,
  callback?: function,
)

CLD を使用して、指定されたテキストの言語を検出します。

パラメータ

  • テキスト

    文字列

    翻訳するユーザー入力文字列。

  • callback

    function 省略可

    callback パラメータは次のようになります。

    (result: object) => void

    • 件の結果

      オブジェクト

      検出された言語の信頼性と DetectedLanguage の配列を保持する LanguageDetectionResult オブジェクト

      • isReliable

        ブール値

        CLD で検出された言語の信頼性

      • 言語

        object[]

        detectedLanguage の配列

        • language

          文字列

        • パーセンテージ

          数値

          検出された言語の割合

戻り値

  • Promise<object>

    Chrome 99 以降

    Promise は Manifest V3 以降でサポートされていますが、下位互換性を確保するためにコールバックが用意されています。同じ関数呼び出しで両方を使用することはできません。Promise は、コールバックに渡されるのと同じ型で解決されます。

getAcceptLanguages()

Promise
chrome.i18n.getAcceptLanguages(
  callback?: function,
)

ブラウザの accept-languages を取得します。これは、ブラウザで使用されるロケールとは異なります。ロケールを取得するには、i18n.getUILanguage を使用します。

パラメータ

  • callback

    function 省略可

    callback パラメータは次のようになります。

    (languages: string[]) => void

    • 言語

      string[]

      LanguageCode の配列

戻り値

  • Promise<LanguageCode[]>

    Chrome 99 以降

    Promise は Manifest V3 以降でサポートされていますが、下位互換性を確保するためにコールバックが用意されています。同じ関数呼び出しで両方を使用することはできません。Promise は、コールバックに渡されるのと同じ型で解決されます。

getMessage()

chrome.i18n.getMessage(
  messageName: string,
  substitutions?: any,
  options?: object,
)

指定したメッセージのローカライズされた文字列を取得します。メッセージがない場合、このメソッドは空の文字列('')を返します。getMessage() 呼び出しの形式が正しくない場合(messageName が文字列でない場合や、substitutions 配列に 9 つを超える要素がある場合など)は、このメソッドは undefined を返します。

パラメータ

  • messageName

    文字列

    messages.json ファイルで指定されたメッセージの名前。

  • substitutions

    任意(省略可

    メッセージに必要に応じて最大 9 個の置換文字列。

  • オプション

    オブジェクト(省略可)

    Chrome 79 以降
    • escapeLt

      ブール値(省略可)

      翻訳で <&lt; にエスケープします。これはメッセージ自体にのみ適用され、プレースホルダには適用されません。翻訳が HTML コンテキストで使用される場合は、この方法を使用することをおすすめします。Closure Compiler で使用される Closure テンプレートは、これを自動的に生成します。

戻り値

  • 文字列

    現在の言語 / 地域にローカライズされたメッセージ。

getUILanguage()

chrome.i18n.getUILanguage()

ブラウザのブラウザ UI 言語を取得します。これは、ユーザーの優先言語を返す i18n.getAcceptLanguages とは異なります。

戻り値

  • 文字列

    ブラウザの UI 言語コード(en-US や fr-FR など)。