browser.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 ファイルが 1 つずつあります。

複数言語の対応

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

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

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

国際化された拡張機能は次のようになります(まだ英語の文字列しかありません)。

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

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

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

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

    browser.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_locale が含まれているため、現在の UI ロケールを検出できます。また、テキストの方向を検出できる @@bidi_... メッセージもいくつか含まれています。後者のメッセージの名前は、ガジェット BIDI(双方向)API の定数に似ています。

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

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

メッセージ名説明
@@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_GB や en_US など)をサポートできるもの(en など)もあります。

拡張機能は、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 グジャラト語
he ヘブライ語
hi ヒンディー語
hr クロアチア語
hu ハンガリー語
id インドネシア語
it イタリア語
ja 日本語
kn カンナダ語
ko 韓国語
lt リトアニア語
lv ラトビア語
ml マラヤーラム語
mr マラーティー語
ms マレー語
nl オランダ語
no ノルウェー語
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. messages ファイルでデフォルトのロケールを検索します。たとえば、拡張機能の「default_locale」が「es」に設定されていて、/_locales/en_GB/messages.json にも /_locales/en/messages.json にもメッセージが含まれていない場合、拡張機能は /_locales/es/messages.json のメッセージを使用します。

次の図では、「colores」という名前のメッセージは、拡張機能がサポートする 3 つのロケールすべてに存在しますが、「extName」は 2 つのロケールにしか存在しません。Google Chrome を米国英語で使用しているユーザーに「Colors」というラベルが表示される場所では、英国英語のユーザーには「Colours」と表示されます。米国英語と英国英語の両方のユーザーに、拡張機能名「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 つだけあります。

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

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

Windows

ロケールを変更するには、ロケール固有のショートカットまたは Google Chrome UI を使用します。設定が完了すると、ショートカットの方法の方がすばやく、複数の言語を一度に使用できます。

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

特定のロケールで Google Chrome を起動するショートカットを作成して使用するには:

  1. デスクトップにすでに存在する Google Chrome のショートカットのコピーを作成します。
  2. 新しいロケールに合わせて新しいショートカットの名前を変更します。
  3. [リンク先] フィールドで --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 以降 Chrome 148 以降の browser.*

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

タイプ

文字列

メソッド

detectLanguage()

Chrome 47 以降 Chrome 148 以降の browser.*
browser.i18n.detectLanguage(
  text: string,
)
: Promise<object>

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

パラメータ

  • テキスト

    文字列

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

戻り値

  • Promise<object>

    Chrome 99 以降 Chrome 148 以降の browser.*

getAcceptLanguages()

browser.i18n.getAcceptLanguages(): Promise<LanguageCode[]>

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

戻り値

  • Promise<LanguageCode[]>

    Chrome 99 以降 Chrome 148 以降の browser.*

getMessage()

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

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

パラメータ

  • messageName

    文字列

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

  • substitutions

    any 省略可

    メッセージに置換文字列が必要な場合は、最大 9 個。

  • オプション

    オブジェクト(省略可)

    Chrome 79 以降 Chrome 148 以降の browser.*
    • escapeLt

      boolean 省略可

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

戻り値

  • 文字列

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

getUILanguage()

browser.i18n.getUILanguage(): string

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

戻り値

  • 文字列

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