Posted at

Chromeエクステンションを作ろう:国際化編

More than 3 years have passed since last update.

説明で使用した拡張機能はこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです.

ソースコードはこちらから閲覧できます.


国際化とは

拡張機能でメッセージなどを複数の地域や言語に対応させる仕組みです.

詳細は公式サイトを参照してください.


プラグインで実装したこと


  • マニフェストファイルのメッセージを国際化

  • アプリケーションのメッセージを国際化

  • 多言語化のルール


    1. 日本語が有効であれば、日本語で表示

    2. それ以外の環境であれば、英語で表示




メッセージファイルの準備

まず、マニフェストファイルのデフォルトロケールにenを指定します.

拡張機能を国際化をする場合は必須属性となります.


manifest.json

   ,"default_locale": "en"


次にメッセージファイルを準備します.

ルートディレクトリに_localesディレクトリを追加して、その中に日本語と英語のメッセージファイルを配置します.

src/

+-- manifest.json
+-- _locales/
+-- ja/messages.json
+-- en/messages.json

こうすることで、ブラウザのロケールが日本であれば日本語>英語の優先順位でメッセージが解決されます.


メッセージファイルの書式


固定文言

メッセージキーに対してオブジェクトを定義して、message属性にメッセージを記述します.


messages.json

{

"ext_name": { "message": "Redmine Lazy Applicant" }
,"ext_desc": { "message": "怠惰な申請者. Redmineのチケットが簡単に登録できるようになるプラグインです." }
}


パラメータ付き文言

メッセージキーに対してオブジェクトを定義して、message属性にメッセージを記述します.

placeholders属性に、パラメータを展開するプレースホルダの名前とパラメータ番号を記述します.


messages.json

{

"content_msg_storeTemplate": { "message": "テンプレートに$target$を保存しました",
"placeholders": {
"target": { "content": "$1" }
}
}
}


メッセージの解決

メッセージの解決にはchrome.i18n.getMessageを利用します.


固定文言

第1引数にメッセージキーを指定して、chrome.i18n.getMessageを呼び出します.

var msg = chrome.i18n.getMessage('ext_desc');


パラメータ付き文言

第1引数にメッセージキー、第2引数にパラメータを配列で指定して、chrome.i18n.getMessageを呼び出します.

指定したパラメータはプレースホルダに展開されます.

var msg = chrome.i18n.getMessage('content_msg_storeTemplate', ['サンプル']);


マニフェストファイルやCSSファイルからメッセージを利用

'__MSG_' + メッセージキー + '__'の形式で記述することで、マニフェストファイルやCSSファイルからでもメッセージファイルを利用できます.

プラグインでは行っていませんが、地域ごとに画像リソースを切り替えることも簡単に実現できそうです.


manifest.json

{

"manifest_version": 2
,"name": "__MSG_ext_name__"
,"description": "__MSG_ext_desc__"
}


tips


ブラウザのロケールを切り替える

こちらにプラットホーム毎の切替手順が記載されています.


説明で紹介したプラグインのソースコード