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

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

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

前回はほかのWebサイトと連携するためにContent Scriptsについて詳細を解説しました。今回はWebアプリを日本だけでなく世界に公開するための国際化対応について解説していきたいと思います。

Webアプリの国際化対応

実はChrome Web Storeで公開するWebアプリは,デフォルトの設定で世界へ公開されるようになっています(⁠地域」の設定で編集可)⁠あらためて国際化対応というと非常に敷居が高く感じますが,何もしなくても既にあなたのWebアプリは世界で利用されているかもしれません。そこで,名前や説明などのちょっとした項目を各言語に対応するだけで,日本のユーザーだけでなく世界各国の多くのユーザーを獲得できる可能性があります。もちろん,Webアプリによっては名前や説明だけでなく多くのテキストを多言語化する必要があるかもしれません。しかしながら,Webアプリとしての優れたユーザーインターフェースは直感的に理解でき,感覚的に操作できるというものです。それは,言語が違っても同じです。あなたのWebアプリが優れたユーザーインターフェースを持つものであれば,多言語化はラベルなどの一部の対応で済むかもしれません。Chromeの1億6千万人にリーチするためにも是非,国際化対応を検討してみてください。

図1 日本語の詳細画面(youRoom)

図1 日本語の詳細画面(youRoom)

図2 英語の詳細画面(youRoom)

図2 英語の詳細画面(youRoom)

ロケールの決定とメタ情報の多言語化

ここからは,Chrome Web Storeで実際に国際化対応するための手順を解説していきます。最初にWebアプリで対応するロケールを決定します。Chrome Web Storeでは以下の42カ国語に対応しています。

表1 ロケール一覧

ロケールコード 言語(地域)
ar アラビア語
bg ブルガリア語
ca カタロニア語
cs チェコ語
da デンマーク語
de ドイツ語
el ギリシャ語
en 英語
en_GB 英語(イギリス)
en_US 英語(アメリカ)
es スペイン語
es_419 スペイン語(ラテンアメリカ,カリブ海地域)
et エストニア語
fi フィンランド語
fil フィリピン語
fr フランス語
he ヘブライ語
hi ヒンディー語
hr クロアチア語
hu ハンガリー語
id インドネシア語
it イタリア語
ja 日本語
ko 韓国語
lt リストアニア語
lv ラトビア語
nl オランダ語
no ノルウェー語
pl ポーランド語
pt_BR ポルトガル語(ブラジル)
pt_PT ポルトガル語(ポルトガル)
ro ルーマニア語
ru ロシア語
sk スロバキア語
sl スロベニア語
sr セルビア語
sv スウェーデン語
th タイ語
tr トルコ語
uk ウクライナ語
vi ベトナム語
zh_CN 中国語(中国)
zh_TW 中国語(台湾)

本稿では,サンプルとして日本語(ja)と英語(en)に対応します。対応するロケールが決まったら,次はWebアプリのメタ情報を多言語化します。manifest.jsonファイルを以下のように変更しましょう。

manifest.json

{
  "name": "__MSG_appName__",
  "description": "__MSG_appDesc__",
  "default_locale": "ja",

  /* 以下略 */
}

“name⁠⁠description⁠の値をプレースホルダーとして⁠__MSG_appName__⁠⁠__MSG_appDesc__⁠をそれぞれ指定しています。プレースホルダーは,⁠__MSG_任意の名前__」というフォーマットで記述します。ここでは,⁠appName⁠⁠appDesc⁠という名前を付けています。また,多言語化する場合は⁠default_locale⁠の設定が必須になります(以下,デフォルトロケール)⁠ここでは,日本語をデフォルトのロケールとしますので⁠ja⁠を指定します。

次に,プレースホルダーに対応する各言語のメッセージを用意します。各言語のメッセージは,別途messages.jsonファイルに記述します。manifest.jsonファイルと同じ場所に下記のようなファイル構成で配置しましょう。

画像

_localesフォルダを作成し,_localesフォルダ以下に各言語に対応するロケールコードをフォルダ名としてフォルダを作成します。各言語のフォルダ以下に対応するmessages.jsonファイルをそれぞれ配置します。messages.json内には,プレースホルダーに対応するメッセージを記述します。

_locales/ja/messages.json

{
  "appName": {
    "message": "アプリケーション名",
    "description": "アプリケーション名"
  },
  "appDesc": {
    "message": "アプリケーションの説明", 
    "description": "アプリケーションの説明"
  }
}

_locales/en/messages.json

{
  "appName": {
    "message": "Application name"
  },
  "appDesc": {
    "message": "Application description"
  }
}

messages.jsonには,プレースホルダーの名前を列挙して各言語に対応するメッセージを⁠message⁠に記述します。⁠description⁠には任意でプレースホルダーの説明を記述します。⁠description⁠の内容が実際のWebアプリに表示されることはありません。

あとは,これまで通りChrome Web Storeで公開すれば各言語に対応したメッセージが表示されます。

著者プロフィール

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

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

コメント

コメントの記入