chrome.i18n

説明

マニフェスト

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

コンセプトと使用方法

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

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

複数言語の対応

次の図のようなファイルを持つ拡張機能があるとします。

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

国際化した拡張機能は次のようになります（ただし、英語の文字列しか含まれていません）。

<img "__msg_extname__",="1" "default_locale"="1"

多言語化に関する注意事項:

• サポートされている言語 / 地域であればどれでも使用できます。サポートされていない言語 / 地域を使用した場合、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」項目で構成されます。name は、文字列を識別する「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 をコピーして変換し、/_locates の下の新しいディレクトリに配置します。たとえば、スペイン語をサポートするには、messages.json の翻訳されたコピーを /_locates/es に配置します。次の図は、以前の拡張機能と新しいスペイン語の翻訳を示しています。

事前定義メッセージ

国際化システムには、ローカライズに役立つ事前定義のメッセージがいくつか用意されています。これには、現在の UI ロケールを検出するための @@ui_locale と、テキスト方向を検出できるいくつかの @@bidi_... メッセージが含まれます。後者のメッセージの名前は、ガジェット BIDI（双方向）API の定数と類似しています。

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

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

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 つの翻訳で 1 つの言語の複数のバリエーションをサポートするもの（en など）を含む、多くのロケールから選択できます（例: en_GB、en_US）。

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

メッセージを検索する

サポートされているロケールごとにすべての文字列を定義する必要はありません。デフォルト ロケールの messages.json ファイル内のすべての文字列に値が入っている限り、翻訳のスパースに関係なく拡張機能またはアプリは実行されます。拡張機能システムによるメッセージ検索の仕組みは次のとおりです。

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

次の図では、「colores」という名前のメッセージは拡張機能がサポートしている 3 つのロケールすべてにありますが、「extName」という名前のロケールは 2 つだけです。米国英語の Google Chrome ユーザーには「Colors」というラベルが表示されていても、英国英語のユーザーには「Colours」と表示されます。英語（米国）と英語（英国）のどちらのユーザーにも、拡張機能名は「Hello World」と表示されます。デフォルトの言語はスペイン語であるため、英語以外の言語で Google Chrome を実行しているユーザーには、「Colores」というラベルと拡張機能名「Hola mundo」が表示されます。

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

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

ウィンドウ

言語 / 地域を変更するには、地域固有のショートカットまたは 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 を起動します。

たとえば、Google Chrome をスペイン語（es）で起動するショートカットを作成するには、次のターゲットを持つ 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

管理画面を使用する

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

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

Mac OS X

Mac で言語 / 地域を変更するには、システム環境設定を使用します。

1. Apple メニューから [システム環境設定] を選択します。
2. [Personal] セクションで [International] を選択します。
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()

次のコードは、ブラウザから allow-language を取得し、各 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 リファレンスをご覧ください。

chrome.i18n.detectLanguage(
  text: string,
  callback?: function,
)

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

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

chrome.i18n.getUILanguage()