説明
chrome.i18n
インフラストラクチャを使用すると、アプリや拡張機能全体で多言語対応が可能です。
ユーザーに表示されるすべての文字列を messages.json
という名前のファイルに格納する必要があります。新しいロケールを追加するたびに、_locales/_localeCode_
という名前のディレクトリにメッセージ ファイルが追加されます。ここで、localeCode は英語の en
などのコードです。
英語(en
)、スペイン語(es
)、韓国語(ko
)をサポートする国際化拡張機能のファイル階層は次のとおりです。
複数の言語をサポートする方法
次の図のようなファイルを持つ拡張機能があるとします。
この拡張機能を国際化するには、ユーザーに表示される各文字列に名前を付け、メッセージ ファイルに格納します。拡張機能のマニフェスト、CSS ファイル、JavaScript コードは、各文字列の名前を使用してローカライズされたバージョンを取得します。
国際化した拡張機能は次のようになります(ただし、英語の文字列しか含まれていません)。
<img "__msg_extname__",="" "default_locale"="" "en".="" "extname"."="" "hello="" _locales="" a="" alt="マニフェスト ファイル内の " and="" been="" changed="" chrome.i18n.getmessage("extname")=""definition="" en=""
多言語化に関する注意事項:
- サポートされている言語 / 地域であればどれでも使用できます。サポートされていない言語 / 地域を使用した場合、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
をコピーして変換し、_locales
の下の新しいディレクトリに配置します。たとえば、スペイン語をサポートするには、messages.json
の翻訳されたコピーを _locales/es
に配置します。次の図は、以前の拡張機能と新しいスペイン語の翻訳を示しています。
事前定義メッセージ
国際化システムには、ローカライズに役立つ事前定義のメッセージがいくつか用意されています。これには、現在の UI ロケールを検出するための @@ui_locale
と、テキスト方向を検出できるいくつかの @@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 ウェブストアでサポートされている言語 / 地域であればどれでも使用できます。
メールの検索
サポートされているロケールごとにすべての文字列を定義する必要はありません。デフォルト ロケールの messages.json
ファイル内のすべての文字列に値が入っている限り、翻訳のスパースに関係なく拡張機能またはアプリは実行されます。拡張機能システムによるメッセージ検索の仕組みは次のとおりです。
- メッセージ ファイル(ある場合)で、ユーザーが希望する言語 / 地域を検索します。たとえば、Google Chrome のロケールが英国英語(
en_GB
)に設定されている場合、システムは最初に_locales/en_GB/messages.json
でメッセージを検索します。このファイルが存在し、メッセージが存在する場合、システムはそれ以上検索しません。 - ユーザーが希望する言語 / 地域に地域が含まれる場合(つまり、ロケールにアンダースコア「_」が含まれている場合)は、その地域を含まない言語 / 地域を検索します。たとえば、
en_GB
メッセージ ファイルが存在しない場合、またはメッセージが含まれていない場合、システムはen
メッセージ ファイルを検索します。このファイルが存在し、メッセージが存在する場合、システムはそれ以上検索しません。 - デフォルトの言語 / 地域のメッセージ ファイルを検索します。たとえば、拡張機能の「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」が表示されます。
ブラウザの言語 / 地域を設定する方法
翻訳をテストするには、ブラウザの言語 / 地域を設定することをおすすめします。このセクションでは、Windows、Mac OS X、Linux、ChromeOS でロケールを設定する方法について説明します。
ウィンドウ
言語 / 地域を変更するには、地域固有のショートカットまたは Google Chrome UI を使用します。ショートカットを設定すると、複数の言語を同時に使用できるようになります。
ロケール固有のショートカットを使用する
特定の言語 / 地域で Google Chrome を起動するショートカットを作成して使用するには:
- デスクトップにすでにある Google Chrome のショートカットのコピーを作成します。
- 新しい言語 / 地域に合わせて新しいショートカットの名前を変更します。
ターゲット フィールドに
--lang
フラグと--user-data-dir
フラグが指定されているように、ショートカットのプロパティを変更します。ターゲットは、次のようになります。path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
ショートカットをダブルクリックして 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
UI の使用
Windows 版 Google Chrome の UI を使用して言語 / 地域を変更する方法は次のとおりです。
- アプリアイコン > [オプション]
- [高度な設定] タブを選択します。
- [ウェブ コンテンツ] まで下にスクロールします。
- [フォントと言語の設定を変更] をクリックします。
- [言語] タブを選択します。
- プルダウンを使用して Google Chrome の言語を設定します。
- Chrome を再起動する
Mac OS X
Mac で言語 / 地域を変更するには、システム環境設定を使用します。
- Apple メニューから [システム環境設定] を選択します。
- [Personal] セクションで [International] を選択します。
- 言語と地域を選択する
- Chrome を再起動する
Linux
Linux で言語 / 地域を変更するには、まず Google Chrome を終了します。次に 1 行で環境変数 LANGUAGE を設定し、Google Chrome を起動します。次に例を示します。
LANGUAGE=es ./chrome
ChromeOS
ChromeOS で言語 / 地域を変更するには:
- システムトレイで [設定] を選択します。
- [言語と入力] で [言語] プルダウンを選択します。
- 言語がリストにない場合は、[言語を追加] をクリックして追加します。
- 追加したら、言語の横にある [その他の操作] メニュー項目をクリックし、[ChromeOS をこの言語で表示] を選択します。
- 設定した言語の横に表示される [再起動] ボタンをクリックして 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 リファレンスをご覧ください。
型
LanguageCode
ISO 言語コード(en
、fr
など)。このメソッドでサポートされている言語の完全なリストについては、kLanguageInfoTable をご覧ください。不明な言語の場合、und
が返されます。これは、テキストの [percentage] が CLD で認識されないことを意味します。
タイプ
文字列
Methods
detectLanguage()
chrome.i18n.detectLanguage(
text: string,
callback?: function,
)
CLD を使用して、指定されたテキストの言語を検出します。
パラメータ
-
指定しています
文字列
翻訳対象のユーザー入力文字列。
-
callback
関数(省略可)
callback
パラメータは次のようになります。(result: object) => void
-
件の結果
オブジェクト
検出された言語の信頼性と DetectedLanguage の配列を保持する LanguageDetectionResult オブジェクト。
-
isReliable
boolean
CLD で検出された言語の信頼性
-
言語
オブジェクト []
detectedLanguage の配列
-
language
文字列
-
パーセンテージ
数値
検出された言語の割合
-
-
-
戻り値
-
Promise<object>
Chrome 99 以降Promise は Manifest V3 以降でのみサポートされます。他のプラットフォームではコールバックを使用する必要があります。
getAcceptLanguages()
chrome.i18n.getAcceptLanguages(
callback?: function,
)
ブラウザの承認言語を取得します。これは、ブラウザで使用されている言語 / 地域とは異なります。言語 / 地域を取得するには、i18n.getUILanguage
を使用します。
パラメータ
-
callback
関数(省略可)
callback
パラメータは次のようになります。(languages: string[]) => void
-
言語
string[]
LanguageCode の配列
-
戻り値
-
Promise<LanguageCode[]>
Chrome 99 以降Promise は Manifest V3 以降でのみサポートされます。他のプラットフォームではコールバックを使用する必要があります。
getMessage()
chrome.i18n.getMessage(
messageName: string,
substitutions?: any,
options?: object,
)
指定したメッセージ用にローカライズされた文字列を取得します。メッセージがない場合、このメソッドは空の文字列('')を返します。getMessage()
呼び出しの形式が正しくない場合(たとえば、messageName が文字列でない場合、または substitutions 配列に 9 個を超える要素がある場合)、このメソッドは undefined
を返します。
パラメータ
-
messageName
文字列
messages.json
ファイルで指定されたメッセージの名前。 -
substitutions
省略可
最大 9 個の置換文字列(メッセージで必要な場合)。
-
オプション
オブジェクト 省略可
Chrome 79 以降-
escapeLt
ブール値(省略可)
翻訳で
<
をエスケープすると<
になります。これはメッセージ自体にのみ適用され、プレースホルダには適用されません。翻訳が HTML コンテキストで使用される場合、デベロッパーはこれを使用することがあります。Closure Compiler で使用されるクロージャ テンプレートはこれを自動的に生成します。
-
戻り値
-
文字列
現在の言語 / 地域に合わせてローカライズされたメッセージです。
getUILanguage()
chrome.i18n.getUILanguage()
ブラウザの UI 言語を取得します。これは、優先ユーザー言語を返す i18n.getAcceptLanguages
とは異なります。
戻り値
-
文字列
ブラウザの UI 言語コード(en-US、fr-FR など)。