More than 5 years have passed since last update.

AngularJSの国際化(多言語)でpoファイルを使用する

Posted at 2014-12-01

AngularJSで国際化だと標準ではangular-translateが一般的ですが、poファイルを使いたかったのでpoファイルに対応しているライブラリを探したところ、angularjs-gettextを見つけました。

翻訳の使い方

これはangular-translateと同じ使い方ですね。
少し違うのはpoファイルに対応するキーがない場合は以下の場合「Hello!」が表示されます。

sample

<h1 translate>Hello!</h1>

※これはPHPのgettextと同じ仕様ですね。

Gruntを使って翻訳キーの抽出ができます

npmでgrunt-angular-gettextをインストール

npm install grunt-angular-gettext --save-dev

grunt-angular-gettextライブラリをロード

Gruntfile.js

grunt.loadNpmTasks('grunt-angular-gettext');

src/viewのhtmlから翻訳キーを抽出しpo/template.potに出力する

Gruntfile.js

grunt.initConfig({
  nggettext_extract: {
    pot: {
      files: {
        'po/template.pot': ['src/views/*.html']
      }
    },
  },
})

poファイルをGruntでコンパイルし、翻訳ファイルtranslations.jsを作成する
※ index.htmlでこのtranslations.jsをインクルードする必要があります。

Gruntfile.js

grunt.initConfig({
  nggettext_compile: {
    all: {
      files: {
        'src/js/translations.js': ['po/*.po']
      }
    },
  },
})