どうでしょう藩士の飯田です。
今週末はオフィスキューファンミーティング(通称ファンミ)のため北海道に遠征します。
さて、本題です。
AngularJSで国際化だと標準ではangular-translateが一般的ですが、poファイルを使いたかったのでpoファイルに対応しているライブラリを探したところ、angularjs-gettextを見つけました。
翻訳の使い方
これはangular-translateと同じ使い方ですね。
少し違うのはpoファイルに対応するキーがない場合は以下の場合「Hello!」が表示されます。
<h1 translate="">Hello!</h1>
翻訳キーの抽出
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']
}
},
},
})Gruntでのコンパイル
poファイルをGruntでコンパイルし、翻訳ファイルtranslations.jsを作成する(Gruntfile.js)
※ index.htmlでこのtranslations.jsをインクルードする必要があります。
grunt.initConfig({
nggettext_compile: {
all: {
files: {
'src/js/translations.js': ['po/*.po']
}
},
},
})元記事はこちらです。
「AngularJSの国際化(多言語)でpoファイルを使用する」