FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

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

どうでしょう藩士飯田です。
今週末はオフィスキューファンミーティング(通称ファンミ)のため北海道に遠征します。

さて、本題です。

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


翻訳の使い方

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

<h1 translate="">Hello!</h1>

※これはPHPgettextと同じ仕様ですね。

翻訳キーの抽出

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ファイルを使用する