Webアプリを公開しよう! Chrome Web Store/Apps入門

第9回 Web アプリを世界に公開しよう

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

Webアプリ本体の多言語化

Webアプリ本体に含まれるラベルやテキストなどを多言語化します。Packaged AppsやExtensionsであればchrome.i18nというAPIが用意されており,messages.jsonに記述した各言語のテキストをWebアプリ内で取得することができます。Hosted Appsの場合残念ながらchrome.i18nを利用することができませんので,新たに仕組みを用意するか外部のフレームワークなどを利用する必要があります。ここでは,Packaged Appsの多言語化として解説します。

メッセージの取得

基本的な使い方は,各ロケールのmessages.jsonに定義されたメッセージをJavaScriptで取得する形となります。例えば,既に定義している⁠appName⁠を取得し,画面に表示するコードは次のようになります。

サンプルコード(メッセージの取得)

var appName = chrome.i18n.getMessage('appName');
document.getElementById('appNameSpan').textContent = appName;

chrome.i18n以下のgetMessage()メソッドの第1引数にメッセージの名前を指定します。このメソッドで取得されるメッセージは,Webアプリを表示しているChromeブラウザの現在の言語設定によって決まります。Chromeブラウザに設定されている言語は,環境設定の「高度な設定」から確認,設定することができます。また,JavaScriptからWebアプリを表示しているChromeブラウザが対応する言語を取得することもできます。

サンプルコード(対応する言語を取得)

chrome.i18n.getAcceptLanguages(function(languages) {
    cosole.log(languages);
});

対応する言語は,getAcceptLanguages()メソッドを使います。第1引数にコールバックを指定し,対応言語の一覧を配列として受け取ります。

プレースホルダー付きメッセージの定義と取得

固定のメッセージだけでなく,メッセージの内容を少し変えて表示したいという場合があるでしょう。その場合,プレースホルダー付きメッセージを使います。プレースホルダー付きメッセージは,メッセージの一部を変更できるように定義する必要があります。例えば,エラーメッセージの詳細を後から指定する場合には,messages.jsonファイルで次のように定義します。

messages.json

"errorMessage": {
  "message": "エラー: $details$",
  "description": "エラーメッセージ",
  "placeholders": {
    "details": {
      "content": "$1",
      "example": "登録に失敗しました。"
  }
}

メッセージの名前を⁠errorMessage⁠としています。エラーメッセージの詳細となる部分をプレースホルダーとして⁠$details$⁠というように指定しています。プレースホルダーは,⁠$プレースホルダー名$」というフォーマットでメッセージの中に記述します。また,新たに⁠placeholders⁠以下の定義を追加し,その中でプレースホルダーに対応する⁠content⁠を記述します。⁠content⁠には⁠$1⁠を指定していますが,この「$1」〜は,getMessage()メソッドのオプションとして渡される配列の各要素を表します。⁠example⁠は任意でプレースホルダーの例などを記述してください。

サンプルコード(プレースホルダー付きメッセージの取得)

var errorMessage = chrome.i18n.getMessage('errorMessage', '通信できませんでした。');

// 複数のプレースホルダーを指定している場合
// chrome.i18n.getMessage('msgName', ['param1', 'param2', …];

表2 chrome.i18n

メソッド/プロパティ 説明
getMessage(messageName, substitutions) メッセージを取得する。プレースホルダー付きメッセージは第2引数に配列で置換する値を指定する
getAcceptLanguages(callback) 表示しているブラウザの対応する言語を取得する。コールバックで言語の一覧を配列で受け取る

CSSファイルへの埋め込み

各メッセージは,CSSファイルへ直接埋め込むことができます。次のように記述することで,まるでプリプロセッサのようにChromeブラウザが自動的にメッセージ部分を変更して適用します。例えば,言語によって背景色が変わるようにしてみましょう。

CSSファイルのサンプル(背景色を変える)

body {
  background-color: __MSG_color__;
}

“color⁠という名前でメッセージを定義し,CSSファイル内で自動的に変更される部分をプレースホルダーとして⁠__MSG_color__⁠と記述しています。この記述方法は,メタ情報を多言語化する際にmanifest.jsonファイルに記述したものと同様です。このように,CSSファイルにもメッセージを適用することができます。また,自身で定義するメッセージ以外にも既に定義済みのメッセージがいくつかありますので必要に応じて使用してください。

表3 定義済みメッセージ一覧

メッセージ名 内容
@@extension_id 拡張ID
@@ui_locale 表示中のブラウザのロケール
@@bidi_dir テキストの方向
英 語:⁠ltr⁠(left-to-right)
日本語:⁠rtl⁠(right-to-left)
@@bidi_reversed_dir @@bidi_dirの逆方向
@@bidi_start_edge “ltr⁠の場合,⁠left⁠
⁠rtl⁠の場合,⁠right”
@@bidi_end_edge “ltr⁠の場合,⁠right⁠
⁠rtl⁠の場合,⁠left”

定義済みメッセージのサンプル(文字方向でマージンを変える)

.title {
  padding-__MSG_@@bidi_start_edge__: 0;
  padding-__MSG_@@bidi_end_edge__: 1.5em;
}

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。