Cordova

Cordova+OnsenUI+AngularJSで多言語化対応

はじめに

Cordova+OnsenUIで多言語化を行おうとしたところ、なかなか上手く行かずにはまったため、メモを残します。

なお、サンプルのVisual Studioソリューションをhttps://github.com/ccat/CordovaExamples/tree/4745e8bfc865158ee0465f494161d3c578386c93のBlankCordovaApp2に公開してありますので参考にしてください。

ステップ全体像

1. angular, angular-translate, onsenuiをダウンロード
2. ダウンロードしたファイル群の中から必要なファイルをwww配下のフォルダに保存
3. index.htmlで各ファイルを読み込み
4. index.htmlのHTMLタグとBODYタグを修正
5. index.jsに初期化コードを追加
6. index.htmlのBODY内容を修正
7. scripts/translateに言語ファイルを作成
8. テストをしてみる

angular, angular-translate, onsenuiをダウンロード

プロジェクトフォルダ(bower.jsonが存在するフォルダ)で以下のbowerコマンドを実行し、最新版をダウンロードします。
なお、bower自身のインストールは他のサイトを参照してください。

ダウンロードしたファイル群の中から必要なファイルをwww配下のフォルダに保存

プロジェクトフォルダ(bower.jsonが存在するフォルダ)で以下のコマンドを実行し、必要なファイルをwwwは以下のフォルダにコピーします。
なお、bowerでダウンロードしただけでは利用できないので注意してください。

index.htmlで各ファイルを読み込み

index.htmlのheadに以下を追加することでライブラリを読み込み、利用できるようにします。
なお、各jsファイルは順番を変更すると動作がおかしくなるので注意してください。

index.htmlのHTMLタグとBODYタグを修正

index.htmlのHTMLとBODYタグに以下のような修正を行います。

HTMLタグの「ng-app="myApp"」は後ほどangularを初期化する際に設定する名称とあわせます。
BODYタグの「ng-controller="AppController"」はBODY全体で利用するangularのコントローラー名です。

index.jsに初期化コードを追加

index.jsの最後に以下を追加します。
各ライブラリの初期化と基本設定を行っています。

index.htmlのBODY内容を修正

index.htmlのBODYの中身を下記のように変更します。
なお、本内容はExampleですのでたいした意味はありません。

scripts/translateに言語ファイルを作成

www/scripts配下にtranslateフォルダを作成し、以下の2ファイルを作成します。

#lang_en.json


#lang_ja.json


なお、本内容はExampleですのでたいした意味はありません。

テストをしてみる

テスト機の言語設定を変更すると表示が変更されるか確認してください。