翻訳のヒント 1 :
他の国のクライアントのためにアプリケーションを翻訳可能にする必要があるという問題がありました。アプリケーション内のすべてのカスタム文字列は、Ext JS のロケール ファイルでカバーされていなかったので、これらを翻訳する独自の方法を考え出す必要がありました。
翻訳のヒント 1 :
他の国のクライアントのためにアプリケーションを翻訳可能にする必要があるという問題がありました。アプリケーション内のすべてのカスタム文字列は、Ext JS のロケール ファイルでカバーされていなかったので、これらを翻訳する独自の方法を考え出す必要がありました。
私のアプリケーションでは、サーバー側で翻訳を処理するために mo/po ファイルを使用しています。すべての言語文字列を 1 つの中心的な場所 (.po ファイル) に保持したかったので、"English.js" と "French.js" ではなく "Language.js" ファイルを使用しました。ファイルの内容は次のようになります。
window.applanguage = {
/*General form elements*/
login : <?=$this->translate("Login")?>,
OK: <?=$this->translate("OK")?>,
changepassword: <?=$this->translate("Change password")?>,
currentpassword: <?=$this->translate("Current password")?>,
sam: <?=$this->translate("System Access Manager")?>,
userid: <?=$this->translate("User ID")?>,
adminid: <?=$this->translate("Admin ID")?>,
email: <?=$this->translate("Email")?>,
password: <?=$this->translate("Password")?>,
newpassword: <?=$this->translate("New password")?>,
confirmpassword: <?=$this->translate("Confirm password")?>,
confirm: <?=$this->translate("Confirm")?>,
confirmation: <?=$this->translate("Confirmation")?>,
wentwrong: <?=$this->translate("Something went wrong")?>,
username: <?=$this->translate("Username")?>,
passvalidity: <?=$this->translate("Password Validity (days)")?>,
product: <?=$this->translate("Product")?>,
accesslevel: <?=$this->translate("Access Level")?>,
timeoutmins: <?=$this->translate("Timeout (mins)")?>,
cancel: <?=$this->translate("Cancel")?>,
save: <?=$this->translate("Save")?>,
reset: <?=$this->translate("Reset")?>,
passwordutility: <?=$this->translate("Change password utility")?>,
expireform: <?=$this->translate("Session expired, please log in to continue.")?>,
adduser: <?=$this->translate("Add user")?>,
edituser: <?=$this->translate("Edit user")?>,
removeuser: <?=$this->translate("Remove user")?>,
resetuser: <?=$this->translate("Reset user")?>,
add: <?=$this->translate("Add")?>
};
このようにして、すべての翻訳を同じ場所に保持し、poedit がファイルを処理して、翻訳が必要な文字列を提案することができます。
Jed などのフロントエンド用の gettext JavaScript プラグインの使用を検討することをお勧めします。http://slexaxton.github.io/Jed/ . つまり、アプリ全体で gettext 辞書を使い続けることができます。
core.po
最終的に、すべてのバックエンド文字列を含むfrontend.po
辞書と、フロントエンド専用の辞書を作成しました。
シンプルな conteoller を使用して、jed プラグインに適した出力を生成できます。実装中に行った作業の一部をオープンソース化しました。https://github.com/aporat/zend-translate-skelton/blob/master/library/TranslateGettext/BackendProxyController.phpを参照してください。
コントローラーは Jed gettext 辞書を生成し、この JavaScript は layout.phtml に含まれています。
<script src="/language?language=en"></script>
コントローラ:
<?php
class TranslateGettext_BackendProxyController extends Zend_Controller_Action
{
/**
* See http://slexaxton.github.com/Jed/
* This is a json proxy for the frontend i18n
*/
public function indexAction()
{
$localeCode = $this->_getParam('locale');
$locale = new Zend_Locale($localeCode);
$translate = Zend_Registry::get('Zend_Translate');
if ($translate->isAvailable($locale->getLanguage())) {
$entries = Gettext\Extractors\Po::extract(APPLICATION_PATH . '/../languages/' . $locale->getLanguage() . '/LC_MESSAGES/frontend.po');
} else {
$entries = Gettext\Extractors\Po::extract(APPLICATION_PATH . '/../languages/en/LC_MESSAGES/frontend.po');
}
echo 'var i18n = new Jed({locale_data : ';
echo Gettext\Generators\Jed::generate($entries, true);
echo '});';
exit;
}
}
「resources」というフォルダーに「English.js」ファイルを作成することにしました (ただし、「locale」または任意の名前にすることができます)。このファイルで、翻訳が必要なすべてのカスタム文字列を含むオブジェクトを作成しました。これは、以下のようなものです。
window.applanguage = {
/*General form elements*/
login : "Login",
OK: "OK",
changepassword: "Change password",
currentpassword: "Current password",
sam: "System Access Manager",
userid: "User ID",
adminid: "Admin ID",
email: "Email",
password: "Password",
newpassword: "New password",
confirmpassword: "Confirm password",
confirm: "Confirm",
confirmation: "Confirmation",
wentwrong: "Something went wrong",
username: "Username",
passvalidity: "Password Validity (days)",
product: "Product",
accesslevel: "Access Level",
timeoutmins: "Timeout (mins)",
cancel: "Cancel",
save: "Save",
reset: "Reset",
passwordutility: "Change password utility",
expireform: "Session expired, please log in to continue.",
adduser: "Add user",
edituser: "Edit user",
removeuser: "Remove user",
resetuser: "Reset user",
add: "Add"
};
カスタム文字列を翻訳する必要があるところはどこでも、それを に置き換えただけwindow.applanguage.string_to_translate
です。いいえ:
Ext.Msg.show({
closable: false,
title: window.applanguage.info,
msg: window.applanguage.selectuserfirst,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO
});
アプリケーションをフランス語で作成したい場合 (面倒ですが)、"English.js" ファイルをコピーし、名前を "French,js" にして、すべての文字列をフランス語に変更します。
注意<header>
: Web ファイルの に言語ファイルを含めることを忘れないでください。これを動的に変更するには、表示する言語を PHP にグローバルに設定します (私は ZF application.ini ファイルで設定します)。その後、ヘッダーに次の行を追加できます。
<script type="text/javascript" src="../extjs/resources/<?php echo $languageFile; ?>.js"></script>
翻訳のヒント 2 :
すべての Ext JS コンポーネントを英語以外の言語に翻訳する必要がある場合は、EXT JS ロケール ファイルをheader
. たとえば、フランス語が必要な場合:
<script type="text/javascript" src="../ext-4.2.0/locale/ext-lang-fr.js"></script>
動的 PHP オプションを使用すると、次のようになります (これは ZF 用ですが、アプリでグローバル変数を使用することもできます)。
// get params from application.ini
$config = new Zend_Config_Ini('../application/configs/application.ini', 'development');
$langFile = $config->tranlation->language->file;
$extLang = null;
switch($langFile){
case 'English':
$extLang= "ext-lang-en_GB";
break;
case 'French':
$extLang= "ext-lang-fr";
break;
case 'Spanish':
$extLang= "ext-lang-es";
break;
case 'German':
$extLang= "ext-lang-de";
break;
case 'Chinese (Simplified)':
$extLang= "ext-lang-zh_CN";
break;
case 'Chinese (Traditional)':
$extLang= "ext-lang-zh_TW";
break;
}
そして、あなたの<header>
代わりにこれ:
<script type="text/javascript" src="../ext-4.2.0/locale/<?php echo $extLang; ?>.js"></script>