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

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

国際化とは

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

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

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

• マニフェストファイルのメッセージを国際化
• アプリケーションのメッセージを国際化
• 多言語化のルール
  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を利用します.

固定文言

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

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

パラメータ付き文言

第１引数にメッセージキー、第２引数にパラメータを配列で指定して、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

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

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

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

• manifest.json
• _locales/ja/messages.json
• _locales/en/messages.json