説明
chrome.i18n
インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。
マニフェスト
拡張機能に /_locales
ディレクトリがある場合は、マニフェストで "default_locale"
を定義する必要があります。
コンセプトと使用方法
ユーザーに表示される文字列はすべて、messages.json
という名前のファイルに格納する必要があります。新しい言語 / 地域を追加するたびに、/_locales/_localeCode_
という名前のディレクトリにメッセージ ファイルを追加します。ここで、localeCode は、英語の場合は en
などのコードです。
英語(en
)、スペイン語(es
)、韓国語(ko
)をサポートする国際化された拡張機能のファイル階層は次のとおりです。
複数言語の対応
次の図に示すファイルを含む拡張機能があるとします。
この拡張機能を国際化するには、ユーザーに表示される各文字列に名前を付け、メッセージ ファイルに格納します。拡張機能のマニフェスト、CSS ファイル、JavaScript コードは、各文字列の名前を使用してローカライズされたバージョンを取得します。
国際化された拡張機能は次のようになります(英語の文字列のみが含まれています)。
国際化に関する注意事項:
- サポートされている言語 / 地域であれば、どの言語 / 地域でも使用できます。サポートされていない言語 / 地域を使用している場合、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
の下に配置します。次の図は、以前の拡張機能と新しいスペイン語の翻訳を示しています。
事前定義メッセージ
国際化システムには、ローカライズに役立ついくつかの定義済みメッセージが用意されています。たとえば、現在の 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_GB
や en_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
ファイルにすべての文字列の値が含まれていれば、翻訳がどれほどまばらでも、拡張機能またはアプリは実行されます。拡張機能システムがメッセージを検索する方法は次のとおりです。
- メッセージ ファイル(存在する場合)で、ユーザーの優先ロケールを検索します。たとえば、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 を使用しているユーザーには「色」というラベルが表示されますが、英国英語のユーザーには「色」と表示されます。米国英語と英国英語の両方のユーザーには、拡張機能の名前「Hello World」が表示されます。デフォルトの言語はスペイン語であるため、英語以外の言語で Google Chrome を実行しているユーザーには、ラベル「Colores」と拡張機能名「Hola mundo」が表示されます。
ブラウザの言語 / 地域を設定する
翻訳をテストするには、ブラウザのロケールを設定することをおすすめします。このセクションでは、Windows、Mac OS、Linux、ChromeOS で言語 / 地域を設定する方法について説明します。
Windows
言語 / 地域は、言語 / 地域固有のショートカットまたは Google Chrome UI を使用して変更できます。ショートカットを使用する方法は、一度設定すればより速く、複数の言語を同時に使用できます。
言語 / 地域固有のショートカットを使用する
特定の言語 / 地域で Google Chrome を起動するショートカットを作成して使用する手順は次のとおりです。
- デスクトップにすでにある Google Chrome のショートカットのコピーを作成します。
- 新しい言語 / 地域に合わせて新しいショートカットの名前を変更します。
ショートカットのプロパティを変更して、[Target] フィールドに
--lang
フラグと--user-data-dir
フラグを指定します。ターゲットは、次のようになります。path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
ショートカットをダブルクリックして 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 を使用して言語 / 地域を変更する方法は次のとおりです。
- アプリアイコン > [オプション]
- [詳細] タブを選択します。
- [ウェブ コンテンツ] までスクロールします。
- [フォントと言語の設定を変更] をクリックします。
- [言語] タブを選択します。
- プルダウンを使用して Google Chrome の言語を設定します。
- Chrome を再起動する
Mac OS
Mac でロケールを変更するには、システム環境設定を使用します。
- Apple メニューから [システム環境設定] を選択します。
- [個人情報] で [国際] を選択します。
- 言語と地域を選択する
- 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()
次のコードは、ブラウザから 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
ISO 言語コード(en
や fr
など)。このメソッドでサポートされている言語の一覧については、kLanguageInfoTable をご覧ください。不明な言語の場合は und
が返されます。これは、テキストの [割合] が CLD で不明であることを意味します。
タイプ
文字列
メソッド
detectLanguage()
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()
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
ブール値(省略可)
翻訳で
<
を<
にエスケープします。これはメッセージ自体にのみ適用され、プレースホルダには適用されません。翻訳が HTML コンテキストで使用される場合は、この方法を使用することをおすすめします。Closure Compiler で使用される Closure テンプレートは、これを自動的に生成します。
-
戻り値
-
文字列
現在の言語 / 地域にローカライズされたメッセージ。
getUILanguage()
chrome.i18n.getUILanguage()
ブラウザのブラウザ UI 言語を取得します。これは、ユーザーの優先言語を返す i18n.getAcceptLanguages
とは異なります。
戻り値
-
文字列
ブラウザの UI 言語コード(en-US や fr-FR など)。