Tutorial:Localizing Ext (Japanese) (Legacy)
This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.
From Sencha - Learn
| Summary: このチュートリアルは Ext をローカライズ (翻訳) する方法を説明しています。 |
| Author: Jozef Sakalos (翻訳: Toshio KASUGA) |
| Published: March 9, 2008 |
| Ext Version: 2.0+ |
Languages:  English Korean Chinese Japanese
|
Contents |
はじめに
このチュートリアルを読んでいる方は英語を理解しているはずなので、ローカライゼーション (英語以外の言語への翻訳) はまったく必要ないと思われます。 しかし、我々のユーザーや管理者、事務員、販売員についてはどうでしょうか? おそらく彼らは Ext アプリケーションを自国語で見たいと思うことでしょう。
では、どのようにローカライゼーションを行うべきかを見ていきましょう。
気楽に始めましょう
Ext 2.x ディストリビューションのツリーを探索すると、source/locale (または SVN では src/locale) というディレクトリを発見するでしょう。 このディレクトリには Ext クラス用のローカライゼーション ファイルが含まれています。 解析や理屈はほどほどにして、まずはこれらのファイルを活用してみます。
下記のコードには Ext 標準パッケージに同梱されたローカライゼーションを使った例を含んでいます。 通常は、head 内のパスをあなたの Ext インストレーションに合わせる必要があるでしょう。 特にローカライゼーション ディレクトリへのパスには注意してください。
下記のコードをあなたのサーバーにコピーアンドペーストして先に言及したパスを調整してください。
注意: 下記のコードは、チュートリアル目的で JavaScript ファイルを head に直接埋め込んでいるので Firefox 以外では動作しないかも知れません。 実際のアプリケーションではこのようなテクニックは使わずに、サーバーによって適切なロケール スクリプトのタグを head 内に生成させるようにしてください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
// URL で渡された言語指定のデコード
var locale = window.location.search
? Ext.urlDecode(window.location.search.substring(1)).locale
: '';
// ロケール スクリプトを head 内に追加
var head = Ext.fly(document.getElementsByTagName('head')[0]);
if(locale) {
Ext.DomHelper.append(head, {
tag:'script'
,type:'text/javascript'
,src:'../ext/src/locale/ext-lang-' + locale + '.js'
});
}
// あらかじめ設定されたウィンドウ拡張クラスの作成
Ext.ns('Tutorial');
Tutorial.LocalizationWin = Ext.extend(Ext.Window, {
initComponent:function() {
Ext.apply(this, {
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:Ext.get('title').dom.innerHTML
,items:[{
xtype:'form'
,frame:true
,defaultType:'textfield'
,items:[{
xtype:'combo'
,fieldLabel:'Select Language'
,name:'locale'
,store:new Ext.data.SimpleStore({
id:0
,fields:['file', 'locale']
,data:[
['cs', 'Czech']
,['', 'English']
,['fr', 'French']
,['de', 'German']
,['gr', 'Greece']
,['hu', 'Hungarian']
,['it', 'Italian']
,['ja', 'Japanese']
,['pl', 'Polish']
,['pt', 'Portugal']
,['ru', 'Russian']
,['sk', 'Slovak']
,['es', 'Spanish']
,['sv_SE', 'Swedish']
,['tr', 'Turkish']
]
})
,listeners:{
select:{fn:function(combo){
window.location.search = '?'
+ Ext.urlEncode({locale:combo.getValue()})
;
}}
}
,mode:'local'
,editable:false
,forceSelection:true
,valueField:'file'
,displayField:'locale'
,triggerAction:'all'
,value:locale
},{
fieldLabel:'Text Field'
,allowBlank:false
},{
xtype:'datefield'
,fieldLabel:'Date Field'
,allowBlank:false
}]
}]
}); // eo apply
Tutorial.LocalizationWin.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}); // eo Tutorial.LocalizationWin
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// お手本ウィンドウの作成
var win = new Tutorial.LocalizationWin();
win.show();
});
</script>
<title id="title">Localization Example</title>
</head>
<body>
</body>
</html>
この例では、ローカライゼーション全体の内 Ext の基本コンポーネントである ComboBox, TextField および DateField に限定しました。 これを使って実際に DatePicker の翻訳バージョンを得てテキストを無効化する方法を見てみましょう。
どのように動くか?
"Select Language" コンボボックスの選択に基づいて Ext ロケール ディレクトリから特定の "lang" ファイルを読み込みます。 (お手本ではいくつかのトリックを使っていますが、通常はサーバーが適切な <script> タグを head 内に生成することになるでしょう。)
ローカライゼーション ファイルの内容は?
ローカライゼーション ファイルの中身を見てみましょう。 これを理解することは Ext のみでなく、アプリケーション全体をローカライズするのに役立ちます。 DatePicker のフランス語翻訳を見てみます。
if(Ext.DatePicker){ Ext.override(Ext.DatePicker, { todayText : "Aujourd'hui", minText : "Cette date est antérieure à la date minimum", maxText : "Cette date est postérieure à la date maximum", disabledDaysText : "", disabledDatesText : "", monthNames : Date.monthNames, dayNames : Date.dayNames, nextText : 'Mois suivant (CTRL+Flèche droite)', prevText : "Mois précédent (CTRL+Flèche gauche)", monthYearText : "Choisissez un mois (CTRL+Flèche haut ou bas pour changer d'année.)", todayTip : "{0} (Barre d'espace)", okText : " OK ", cancelText : "Annuler", format : "d/m/y", startDay : 1 }); }
DatePicker が存在するかどうかのイニシャル テストがあります。 (DatePicker クラスの定義を必要としない独自の Ext を作成することも可能なので、このテストは必須です) DatePicker のプロパティをいくつかオーバーライドしています。 ここでは英語のテキストを単純にフランス語のものに置き換えています。 Ext.override はクラスのプロトタイプを変更するので、上記のコードは DatePicker のインスタンスが作成される前に実行する必要があります。
アプリケーションのローカライゼーション
お手本のアプリケーションにちょっと変更を加えてみます。主にはすべてのハードコーディングされたテキストを取り除いて、それらをクラス変数にします。 この結果、コードは下記のようになるでしょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<!-- Ext ローカライゼーション用 javascript -->
<script type="text/javascript" id="extlocale"></script>
<!-- ロケールと拡張のお手本用 javascript -->
<script type="text/javascript">
// URL で渡される言語指定のデコード
var locale = window.location.search
? Ext.urlDecode(window.location.search.substring(1)).locale
: ''
;
// ロケール スクリプトを head 内に追加
var head = Ext.fly(document.getElementsByTagName('head')[0]);
if(locale) {
Ext.fly('extlocale').set({src:'../ext/src/locale/ext-lang-' + locale + '.js'});
}
// あらかじめ設定されたウィンドウ拡張クラスの作成
Ext.ns('Tutorial');
Tutorial.LocalizationWin = Ext.extend(Ext.Window, {
titleText:'Localization Example'
,selectLangText:'Select Language'
,textFieldText:'Text Field'
,dateFieldText:'Date Field'
,initComponent:function() {
Ext.apply(this, {
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:this.titleText
,items:[{
xtype:'form'
,frame:true
,defaultType:'textfield'
,items:[{
xtype:'combo'
,fieldLabel:this.selectLangText
,name:'locale'
,store:new Ext.data.SimpleStore({
id:0
,fields:['file', 'locale']
,data:[
['cs', 'Czech']
,['', 'English']
,['fr', 'French']
,['de', 'German']
,['gr', 'Greece']
,['hu', 'Hungarian']
,['it', 'Italian']
,['ja', 'Japanese']
,['pl', 'Polish']
,['pt', 'Portugal']
,['ru', 'Russian']
,['sk', 'Slovak']
,['es', 'Spanish']
,['sv_SE', 'Swedish']
,['tr', 'Turkish']
]
})
,listeners:{
select:{fn:function(combo){
window.location.search = '?'
+ Ext.urlEncode({locale:combo.getValue()})
;
}}
}
,mode:'local'
,editable:false
,forceSelection:true
,valueField:'file'
,displayField:'locale'
,triggerAction:'all'
,value:locale
},{
fieldLabel:this.textFieldText
,allowBlank:false
},{
xtype:'datefield'
,fieldLabel:this.dateFieldText
,allowBlank:false
}]
}]
}); // eo apply
Tutorial.LocalizationWin.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}); // eo Tutorial.LocalizationWin
</script>
<!-- アプリケーションのローカライゼーション用 javascript -->
<script type="text/javascript" id="applocale"></script>
<!-- アプリケーションのローカライゼーション用に src をセットする javascript -->
<script>
if(locale) {
Ext.fly('applocale').set({src:'app-lang-' + locale + '.js'});
}
</script>
<!-- メイン アプリケーション -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// お手本ウィンドウの作成
var win = new Tutorial.LocalizationWin();
win.show();
});
</script>
<title id="title">Localization Example</title>
</head>
<body>
</body>
</html>
それから、最後の手順として、アプリケーションのローカライゼーション (翻訳, 言語) ファイルを作成する必要があります。 筆者はスロバキア語をしゃべるので、ここではスロバキア用の app-lang-sk.js ファイルにします - あなたが使う言語用のバージョンを作ってみてください (html と同じディレクトリに置くか上記のコード内のパスを調整してください):
/** * Slovak localization file of Localization Tutorial Example Window */ if(Tutorial.LocalizationWin) { Ext.override(Tutorial.LocalizationWin, { titleText:'Príklad lokalizácie' ,selectLangText:'Zvoľ jazyk' ,textFieldText:'Textové pole' ,dateFieldText:'Dátumové pole' }); }
訳者注: 日本語用には下記のようなコードの app-lang-ja.js を作成します。
/** * Japanese localization file of Localization Tutorial Example Window */ if(Tutorial.LocalizationWin){ Ext.override(Tutorial.LocalizationWin, { titleText:'ローカライゼーションのお手本', selectLangText:'言語選択', textFieldText:'テキストフィールド', dateFieldText:'日付フィールド' }); }
高度なヒント
上記の例は、Ext においてアプリケーションにローカライゼーションを行う原理の基礎だということを認識してください。 重要な点は すべてのテキストをパブリック クラス変数にしてこれらを翻訳されたものでオーバーライドさせる ということです。
上級の開発者、特に GNU gettext のような翻訳インフラストラクチャーを用いるサーバーを持っている方は、大量のローカライゼーション ファイルを保守、デプロイすることの難点にすぐ気づくかも知れません。 このようなユーザーには gettext をバックエンドとして使用してサーバー側でローカライゼーション ファイルをその場で生成することをおすすめします。
この方法の主な利点はクライアントおよびサーバーサイド双方のための翻訳ファイル (*.po) を集中管理できることです。
この話題への関心度が高く、実践方法について是非知りたいという方がいれば、高度なローカライゼーションにについての Ext チュートリアルを書くかもしれません。
楽しくやりましょう!
関連する記事: