k4200’s notes and thoughts

Programmer side of k4200

PHP & JavaScriptのWebサービスを多言語対応させた(2)

前回は項目列挙しただけなので、今回から具体的に。

あくまで自分がやった方法の紹介なので、参考程度に。

事前準備

ライブラリ関連のインストール

PHP部分はZend_Translateを使用。Zend Frameworkを使ってる人は特に何もする必要は無し。そうでない場合は、Zend Frameworkをライブラリとして使用する。インストールの詳細は省略。

JavaScriptGettext.jsを使用。jsファイルを適当な場所にダウンロードする。

_ (←アンダースコア)関数・メソッドを使えるように(少なくともエラーにならないように)する

Zend_Translateは_メソッドがあるので、bootstrapかどっかでZend_Translateを初期化しておいて(その際にとりあえず空のリソースファイルを読み込ませておく)、以下のようなコードがエラーにならないようにする。

$this->t->_("ほげ");
//あるいは
$t->_("ふが");
//というのが使えるようにしておく。

JavaScriptの場合はとりあえず以下のようなスタブ関数を用意しておく。underscore.js を使ってる人は、まぁ適当に頑張って。

function _(txt, args) {
    if (typeof args == "undefined") {
        return txt;
    } else {
        return Gettext.strargs(txt, args);
    }
}

多言語化対応データの作成

PHP

ソースコードを以下のbeforeからafterのように修正する。

通常のテキスト
before: <div>テキスト</div>
after: <div><?php echo $t->_("テキスト"); ?></div>

パラメーターあり
before: <div>私の戦闘力は<?php echo $power; ?>です。</div>
after: <div><?php printf($t->_("私の戦闘力は%1\$sです。"), $power); ?></div>
JavaScript

JavaScriptも同様に。

alert('テキスト'); //before
alert(_('テキスト')); //after

// パラメーターあり
alert("私の戦闘力は" + power + "です。"); //before
alert(_("私の戦闘力は%1です。", [power])); //after
注意点

PHPファイルにJavaScriptが含まれている場合、PHPのやり方を使う。

// 例えば(あまり良くないけど) xxx.phtml のような view ファイルの中に JavaScript が含まれている場合
// before
<script>
var sometext = "ふが";
</script>

// after
<script>
var sometext = <?php echo json_encode($t->_("ふが")) ?>;
</script>
画像

プロジェクト開始時から images フォルダに画像がどんどんつっこまれていた状態だった。それを以下のようにする。

  • images/ → 変更せず
  • images/en/ 等 → 各言語用のファイル。images の下のファイルと同じファイル名、ディレクトリ構成にする。

例えば、images/top.png という画像に「ようこそ」という文字があったら、images/en/top.png という画像を作成して、文字は「Welcome」に変更する。

ソースからテキストを抽出

上の方でソースの中のテキストを _() で囲むように修正した。次にやる事は、ソースの中から _("テキスト") という翻訳対象のテキストを抜き出して、pot ファイルを作成する事。

PHPの場合

以下の通り、xgettext というコマンドを使用。

xgettext -k"_" --from-code=UTF-8 -L php -o php.pot top.php
JavaScriptの場合

PHPと同じくxgettextを使うが、ソースコードのタイプは"python"を使う。

xgettext -k"_" --from-code=UTF-8 -L python --force-po -o js.pot top.js

次回

今回は疲れたのでここまで。次回はデータ作成の部分をもう少し詳しく書こうかなと。