Tutorialの流れから少し離れまして、AngularJSにおいて多言語対応する方法に関してレポートです。
Angularを利用することで、サーバ側で実装していたViewレイヤの仕組みをクライアント側に移行できるようになります。
加えて、I18n(Internatinalization)も含めて実現できるように出来る方法を検討するべく、
2回構成でAngularでI18nを実現することをお題にして取りまとめます。
(もしかしたら、3回構成になる可能性もあります)
- 1回目：AngularJSでI18nを実現するモジュールをリストアップ （Angular js support for localization の記事を参考に)
- 2回目：実際にTutorialのスクリプトに組み込みを行う
という流れで進めていく予定です。
1回目：AngularJSでI18nを実現するモジュールをリストアップ
多言語化する目的
世界地図上で狭い日本国内だけの発信だけではなく、他の国に発信できるようになりたい。というのもありますが、
世界情勢の変化や経済的な状況のもと、ビジネスを大きくするには日本だけでは難しい状況にあること。
などから、Webアプリを作成して楽しむおよび生計を立てるには、多言語でアプリを組む必要性が十分にあるのではないかと個人的に考えます。
また、どうせアプリケーションを作るなら、より多くの人に使ってもらえる仕組みを作るために、はじめから利用言語のLocalizationを考えて作るに越したことはないと思っています。
上記のように記述しましたが、実際のところ多言語で本格的にアプリケーションを作成した経験がないため、
既存のAngularJSモジュールのLocalizationを紹介されていた下記の記事に沿って利用するモジュールを調べてリストアップします。
Angular js support for localization
3種類の仕組み
上記の記事では3種類の気鋭のクリエイターがモジュールおよび組み方を紹介しています。
- AngularJSの組み込みディレクティブとサービスで実現するためページ紹介と簡単なサンプルコード紹介
- Localizing Your AngularJS app
- Angular Translator
AngularJSの組み込みディレクティブとサービスで実現するためページ紹介と簡単なサンプルコード紹介
AngularJSの公式ページのI18n and L10n in AngularJSに、I18nを実現するための解説ページがあります。
$localeサービスを活用する仕組みとして、datetime, number and currency などのフィルタがサポートされているようです。
加えて、ngPluralize directiveで、データの数に合わせて表示する文字列切り替える仕組みが利用できるようです。
($localeサービスで取得するlocale IDは、ICU websiteに則っている）
$localeサービスを利用すれば、自前でlocal IDに合わせて様々な表示切替はできそうですが、自前での実装が多くなりそうです。
Localizing Your AngularJS app
この仕組みは、静的ファイルでもREST apiでも行けるのですが、Angularの仕組みを使わず自前で処理していて、サンプルコードを見た限りでは、Angularの仕組みを使っても同じくらいのコード量で書けるのではないかと考えます。
Angular Translator
このAngular Translatorが投稿された中でサイトのボリューが一番あり、ドキュメントも充実していました。
また、サンプルを見た限りでは、Angularの仕組みを使うより、また、上の仕組みを使うよりも自前で記述するコード量が減りそうです。
簡易なページでは、配列でコード中に埋め込むこともできますし、静的ファイルやREST apiも利用できます。
また、デモコードもドキュメントもたくさんあり悩みながらも何とかできそうです。
bowerで落としてくるとAngularは1.0.8に対応しているよう見えたため少し心配ですが、こちらの仕組みを利用して2回目を取りまとめてみる予定です。
以上、記事中の3種類の組み方の紹介から説明ページを参照して作成したレポートになります。
どの仕組みも直接的に文章を置換してくれるものではないので、テンプレート内で表示に関係ないキーワードを埋め込まなければならない方式なので、キーワードの作成方法を少し工夫が必要だ考えています。
ひとまず、AngularでI18nを実現するとどうなるのかのイメージだけでもレポートできればと考えています。