Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

国際化とは

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

i18n-after-2.gif

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

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

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

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

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

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

dhun
気づけばそろそろ四十路. 疲れがとれにくくなってきたけど、まだまだ現役プログラマーです ヽ(^。^)ノ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした