Apache Cordovaで作るWindowsストアアプリをローカライズする(小規模アプリ向け)

表題の通りApache CordovaでWindowsストアアプリをローカライズします。とりあえずやってみたら動いた レベルなので正しい方法なのか知りません。もっと良い方法があったら教えてくださるとたすかります＞＜

# とりあえず環境紹介
タグにかいているとおりですが、以下の環境です。

 * Windows 10 Professional
 * Visual Studio 2015 Community Edition
 * 使用したプロジェクトテンプレート：JavaScript\Apache Cordova Apps\空のアプリ(Apache Cordova)

# きほん？
とりあえずローカライズが必要な場合、まずは、

 * プロジェクトの既定の言語を、en-USにする
 * 画面UIを全部英語にする

とするのが基本かな？と思っていますので、まずそうします。理由は、ローカライズ対象となる言語（たとえば英語と日本語）以外の言語環境でアプリを表示した場合は、英語で表示して欲しいので。そのためまずは、英語を基本として、日本語用のローカライズパッケージを作る という形になります。

# 実際の作業
まず、ローカライズする場合、作業は大きく二種類に分かれます。

 * 画面UIのローカライズ
 * アプリケーション名などアプリ情報のローカライズ

この二つは全くやり方が異なりますので、別々に説明します。

## 画面UIのローカライズ
Cordova上で現在動いているPCの言語を取得するには、navigator.languageを使用します(Androidでは必ずenになってしまう なんていう噂もありましたが、今回はWindows向けのアプリですので今回はこれだけで)。そのため、もし、navigator.languageがja-JPならば、各種UI部品に日本語文字列を設定してあげるだけで大丈夫です。

今回は小規模なアプリでしたので、こんな感じで誤魔化しました(本当は[localize.js]( https://github.com/coderifous/jquery-localize)などを使った方がいいと思います)。

```js:index.js
var localize = new Array();
localize["ja-JP"] = {
  "[テキストが含まれる部分のID]": "[ID部分に表示するテキスト]",
  "[テキストが含まれる部分のID]": "[ID部分に表示するテキスト]",
  "[テキストが含まれる部分のID]": "[ID部分に表示するテキスト]"
};
if (localize[navigator.language]) {
  var lo = localize[navigator.language];
  for (var n in lo) {
    var elm = document.getElementById(n);
    if (!elm) continue;
    if (elm.winControl) {
      elm.winControl.label = lo[n];
    } else {
      elm.innerText = lo[n];
    }
  }
}
```

上記で、「HTML内のIDを探し、それがwinControlであればそのラベルを、そうでなければinnerTextの文字列を書き換え」します。メッセージダイアログなど一切無いごく小規模なアプリであれば、とりあえずコレでいけそう。

実際にコレをプログラムのonDeviceReadyなどに貼り付けて実行するとき、気をつけて欲しいのは、もしここで実行時エラーが起こると、プログラムが一瞬起動して、すぐにプログラムがおちてしまうこと。

localize配列の初期化が失敗していたり、コンパイルエラーにはならないほどの些細なミスがあったりしてないか、よく確認しましょう。

## アプリケーション名などアプリ情報のローカライズ
こちらが結構難しかった。答えがわかってしまうとたいしたことないのですが、仕組みがわかるまでは結構大変です。

ここでは順を追って説明します。

 1. ローカライズ用(ja-JP)のresjsonファイルを作成
 2. 既定の言語(en-US)のresjsonファイルを作成
 3. config.xmlを編集

というわけで順を追って解説します。

また、ここからの処理は残念ながらApache Cordovaの機能ではないため、nativeなフォルダにファイルを配置していきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/14499/039abe90-7c73-77ea-0272-3f74b872f17c.png)

### ローカライズ用のresjsonファイルを作成
まず、ローカライズ用のresjsonファイルを作成します。
res\native\フォルダの下に、strings\ja-JP\resource.resjsonというファイルを作成し、以下のように記述します。

```json:resource.resjson
{
    "AppName"     : "[アプリ名]",
    "Description" : "[アプリの説明]",
    "Author"      : "[自分の名前]"
}
```

AppName以外は実は無くても良さそうですが、今回は定義しておきます。

### 既定の言語用のresjsonファイルを作成
先ほどと同じような要領で、res\native\strings\en-US\resource.resjsonを作成して以下のように記述します。

```json:resource.resjson
{
    "AppName"     : "[Application Name]",
    "Description" : "[Application Description]",
    "Author"      : "[Your Name]"
}
```

当然ですが全部英語です。

ここまで書けて、次のような構造になるはず。

![image](https://qiita-image-store.s3.amazonaws.com/0/14499/b31d3e87-639d-c738-e77a-7afcdcf8a8e4.png)

### config.xmlを編集する

次に、プロジェクトルートのフォルダにある、config.xmlを編集します。ここで、ダブルクリックしてプロパティビューを開いた後、右クリックメニューから「コードの表示」を選択します。
![image](https://qiita-image-store.s3.amazonaws.com/0/14499/67cf2f78-9363-5708-ba1d-f46d87b782ae.png)

すると、エディタ画面にXMLの中身が出てきますので、次の項目を追加します。

```xml:config.xml
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.takamichie.acerola" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
  <!-- 中略 -->
  <platform name="windows">
    <name>ms-resource:AppName</name>
    <description>ms-resource:Description</description>
    <author href="http://cordova.io" email="dev@cordova.apache.org">ms-resource:Author</author>
  </platform>
  <!-- 中略 -->
  <vs:platformSpecificValues>
    <vs:platformSpecificWidget platformName="windows" id="WSAcerola" version="1.0.0.0">
      <vs:name>ms-resource:AppName</vs:name>
    </vs:platformSpecificWidget>
  </vs:platformSpecificValues>
  <!-- 中略 -->
</widget>
```

ポイントは、アプリ名やアプリの説明などを記載する箇所を、「ms-resource:[リソースID]」にすることです。ただ、冒頭の&lt;name&gt;～&lt;/name&gt;をそのままいじってしまうとAndroidやiOSなどに転用するときのアプリ名まで変わってしまうので、&lt;platform&gt;要素で区切ってあげます。

# 以上！
以上でローカライズの作業は終わりです。実行してみるとアプリがローカライズされているのがわかると思います（Windows10からなのか、基本的にアプリは「アプリの実行中に言語が切り替わる」というのまでは想定しなくても良いようなので、とりあえずこの実装で問題はなさそうです）。

# ちなみに、この方法を見つけた手順
いちおう今後のために、この方法でアプリ名がローカライズできることを見つけた手順をメモしておきます。

## プロジェクトルート\platforms\windowsフォルダを見る
Visual Studioでコンパイルを行うと、まず、Windowsに必要なファイルのみを残したプロジェクトが、platforms\windows\配下にコピーされます。とりあえず配下に出力されるslnファイルを開こうとしたところ、なぜかVisual Studioが固まってしまうため、jsprojファイルを開きます。

すると、素のJavascriptプロジェクト＋Cordova向けのライブラリなプロジェクトが開かれます。

ここから先はVisual Studio2013まででもできていた、HTML5＋Javascriptなアプリと作りは同じなので、既存のローカライズに関する情報が使えます。
[MSDNによると](http://blogs.msdn.com/b/windowsappdev_ja/archive/2013/02/11/windows-world-market.aspx)、string\[言語ID]\resource.resjsonに書いた情報がそのまま反映できるようなので、そのとおりに作ってみたらとりあえず上手くいった というわけ。

これ以外にも、Cordovaでアプリを作っていておかしいな？これどうするのかな？という部分が見つかったら、一度ビルドをしてみてからplatforms配下のファイルを覗いてみる というのは、ひとつの手かもしれません。

# 参照プロジェクト

で、今回使ったプロジェクトは、Githubに公開しているものです。

 * https://github.com/TakamiChie/WSAcerola

これを見ただけではわからないというところがあれば見てみてもよいかと思います。