この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Closure Libraryに用意されている「goog.ui.BidiInput」は、ヘブライ語やアラビア語などの「RTL（Right To Left）」言語を判別して自動的に入力フィールドの向きを「RTL」にしてくれるUIコンポーネントです。
デモ
デモコード
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>goog.ui.BidiInput</title>
<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript">
goog.require('goog.ui.BidiInput');
</script>
</head>
<body>
<fieldset>
<legend>通常のテキストインプット</legend>
<input type="text" value="שלום, עולם!" />：「RTL言語」で入力した場合でも「LTR（Left To Right）」で入力されます。
</fieldset>
<fieldset>
<legend>BidiInput（decorate）</legend>
<input type="text" id="element1" value="שלום, עולם!" />：「RTL言語」で入力した場合のみ「RTL」で入力されます。
<script type="text/javascript">
var bi1= new goog.ui.BidiInput();
bi1.decorate(goog.dom.getElement('element1'));
</script>
</fieldset>
<fieldset>
<legend>BidiInput（render）</legend>
<span id="element2"></span>：「RTL言語」で入力した場合のみ「RTL」で入力されます。
<script type="text/javascript">
var bi2 = new goog.ui.BidiInput();
bi2.render(goog.dom.getElement('element2'));
bi2.setValue('שלום, עולם!');
</script>
</fieldset>
<fieldset>
<legend>BidiInput（textarea）</legend>
<div dir="rtl"><textarea id="element3">שלום, עולם!</textarea></div>
<div style="text-align:right;">「RTL言語」で入力した場合のみ「RTL」で入力されます。</div>
<script type="text/javascript">
var bi3 = new goog.ui.BidiInput();
bi3.decorate(goog.dom.getElement('element3'));
</script>
</fieldset>
</body>
</html>使い方
BidiInputは「goog.ui.Component」のサブクラスなので、「render」メソッド（指定要素にBidiInputのinput要素を追加）または「decorate」メソッド（指定したinput要素にBidiInput機能を付与）を用います。
Closure Libraryのロード
<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript">
goog.require('goog.ui.BidiInput');
</script>- 6行目
- Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。） - 7～9行目
- 必要とするClosure Libraryを宣言します。ここでは今回利用する「goog.ui.BidiInput」のみを宣言しています。
BidiInputコンポーネントで装飾する
<input type="text" id="element1" value="שלום, עולם!" />：「RTL言語」で入力した場合のみ「RTL」で入力されます。
<script type="text/javascript">
var bi1= new goog.ui.BidiInput();
bi1.decorate(goog.dom.getElement('element1'));
</script>- 18行目
- 「装飾」対象のinput要素です。このinput要素にBidiInputの機能を付与します。
- 20行目
- BidiInputクラスのインスタンスを生成します。
- 21行目
- 対象のinput要素を引数としてBidiInputオブジェクトの「decorate」メソッドを呼び出すことで、対象input要素はBidiInputとなります。
BidiInputコンポーネントを描画する
<span id="element2"></span>：「RTL言語」で入力した場合のみ「RTL」で入力されます。
<script type="text/javascript">
var bi2 = new goog.ui.BidiInput();
bi2.render(goog.dom.getElement('element2'));
bi2.setValue('שלום, עולם!');
</script>- 26行目
- BidiInputコンポーネントを挿入する対象のspan要素です。
- 28行目
- BidiInputクラスのインスタンスを生成します。
- 29行目
- 対象のspan要素を引数としてBidiInputオブジェクトの「render」メソッドを呼び出すことで、対象span要素にBidiInputコンポーネントのinput要素が挿入されます。
- 30行目
- 挿入されたBidiInputコンポーネントに値（文字列）を設定しています。
textarea要素を装飾する
input要素同様に、BidiInputコンポーネントでtextarea要素も装飾できます。
<div dir="rtl"><textarea id="element3">שלום, עולם!</textarea></div>
<div style="text-align:right;">「RTL言語」で入力した場合のみ「RTL」で入力されます。</div>
<script type="text/javascript">
var bi3 = new goog.ui.BidiInput();
bi3.decorate(goog.dom.getElement('element3'));
</script>まとめ
LTR言語圏の人々にとってはあまり馴染みの無い事柄かもしれませんが、アプリケーション国際化の際には是非とも検討すべきでしょう。Closure Libraryは、世界中の人々から利用されているGoogleのプロダクトに採用されているだけあって、i18nに対して非常に気を配られたつくりになっています。
186
