続・先取り! Google Chrome Extensions

第10回 Chrome拡張の国際化とギャラリーへの公開と総まとめ

この記事を読むのに必要な時間:およそ 3 分

こんにちは,太田です。今回はGoogle Chrome拡張のローカライズ対応とギャラリーでの公開手順について,拡張の作り方を総まとめしつつお送りします。

今回ローカライズする拡張はこれまで連載の中で何度か取りあえげてきたSBMカウンタをベースとして使用します。SBMという略称は(そもそもソーシャルブックマークと言う呼び方も?)日本語圏以外ではあまりポピュラーではないので,Social Counterと言う名称を用います。というのも,英語圏でのはてなブックマークに相当するサービスとしてdeliciousやdiggなどがありますが,ブックマーク中心のdeliciousと,ソーシャル中心のdiggと違いがはっきりしており,はてなブックマークはその間に位置しています。というわけで,ソーシャルカウンターとややくくりを大きくしました。

i18nとl10n

i18nはInternationalization(国際化)の略語(iとn間に18文字あるという意味です)で,l10nはLocalization(地域化)の略語です。ChromeのAPIとして用意されているのはi18nですが,主にローカライズのために使用することになります。

chrome.i18n.getMessage

早速,i18n APIの使い方を見ていきます。まず,拡張のフォルダ直下に_localeというフォルダを作り,その中にさらに言語別のフォルダを作ります。使用できる言語別のフォルダ名は,次の通りです(IETFのBCP 47に従っているようです。参考:Language tags in HTML and XML)⁠

am ar bg bn ca cs da de el en en_GB en_US es es_419 et fi fil fr gu he hi hr hu id it ja kn ko lt lv ml mr nb nl or pl pt pt_BR pt_PT ro ru sk sl sr sv sw ta te th tr uk vi zh zh_CN zh_TW

なお,_localeフォルダを作ると,manifest.jsonには "default_locale" の指定が必須となる点に注意が必要です。

図1 i18nのフォルダ構成

図1 i18nのフォルダ構成

どの言語が使用されるかは,Chrome本体の設定とリンクします(オプション→高度な設定→フォントや言語を変更→言語→Google Chromeの言語)⁠よって,Chrome本体がサポートする言語が増えれば,上記の一覧にも言語が追加されることになります。

さて,作成したフォルダの中に,今度はmessages.jsonというファイルを作成します。このファイルにキーワードと,それに対応するローカライズされたメッセージを記述していきます。なお,messages.jsonのフィールドに使用できる文字は A-Z,a-z,0-9,_(正規表現の\w相当)です。

messages.jsonの中身

{
  "options": {
    "message": "設定"
  }
}

このmessageをchrome.i18n.getMessageで取得することができます。なお,このgetMessageはBackground Pageや,Options Page,Popupなどの拡張コンテキストはもちろん,Content Scriptsでも使用することができます。

chrome.i18n.getMessageの使用

var options = chrome.i18n.getMessage('options');
console.log(options); // 設定

さらに,placeholdersを使ってgetMessageに変数を渡すこともできます。

messages.jsonの中身:その2

{
  "options": {
    "message": "設定"
  },
  "append": {
    "message": "$name$に追加",
    "placeholders": {
      "name": {
        "content": "$1",
        "example": "delicious"
      }
    }
  }
}

chrome.i18n.getMessageの応用

var append = chrome.i18n.getMessage('append',service.name);
console.log(append); // はてなブックマークに追加

さて,manifest.jsonのnameやdescriptionをローカライズするには,やや特殊な対応が必要です。まず,manifest.jsonのnameとdescriptionを以下のように書き換えます。

manifest.jsonのnameとdescription

  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",

そして,messages.jsonには以下のようにフィールドを追加します。

manifest用フィールドの追加

  "extName": {
    "message": "ソーシャルカウンター"
  },
  "extDescription": {
    "message": "ソーシャルサービスでのブックマーク数などをカウントします"
  },

manifest.jsonでの__MSG_NAME__のNAMEの部分が,messages.jsonのフィールドに一致するようにします。

ちなみに,manifest.jsonやmessage.jsonで使用するJSONは,本来のJSONとは異なり,JavaScriptのようにコメント(//や/* */)を記述することが可能です。ただし,当然JSONとしてはパースできなくなるので,お薦めできません。また,JSONのフォーマットを手で書くとミスをしやすいので,JSON.stringifyメソッドで出力することをお薦めします。Web Inspectorのコンソールで以下のように実行すれば簡単に出力できます。

コンソールでJSONをコピー

copy(JSON.stringify({name:"sample",version:"1.1"},null,2));

chrome.i18n.getAcceptLanguages

getAcceptLanguagesは,Chrome本体で設定している「ウェブサイトの表示に使用する言語」を取得できます。多くの場合,複数の言語が設定されており,優先される言語順に配列で取得することができます。

日本語である "ja" が含まれている場合だけ,日本語圏向けの情報を情報を表示するといった使い方ができます。

日本語圏向けのメッセージを表示

chrome.i18n.getAcceptLanguages(function(langs){
  if (langs.indexOf('ja') >= 0){
    document.querySelector('#japan').style.display='block';
  }
});

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入