インプレースエディタ
インプレースエディタとは、基本的には、ユーザーがクリックして編集できるテキストを含んだ<div>のことです。このコントロールに関係する要素は次のとおりです。
- Ajax.InPlaceEditorクラスのインスタンス
- 編集されたテキストを受け取って、データベースへの格納や電子メールでの送信などの処理を行うサーバーサイドコンポーネント
ごく単純なインプレースエディタの作成例をリスト4に示します。
<html> <head> <script type="text/javascript" src="../scripts/prototype.js"> </script> <script type="text/javascript" src="../scripts/script.aculo.us.js"> </script> <script type="text/javascript"> Event.observe(window, "load", function() { new Ajax.InPlaceEditor('elem', 'editor-test.php', { okText: 'Update', cancelText: 'Cancel', size: 70 } ); } ); </script> </head> <body> <div id="elem" style="width: 300px;"> Click here to make the text editable</div> </body> </html>
サーバーコンポーネントeditor-test.phpは編集されたテキストを受け取り、それを再びクライアントにエコーします。図3はエディタの初期状態を示しており、図4はユーザーがテキストをクリックした後のエディタの状態を示しています。
実際のコードを見れば分かりますが、インプレースエディタの作成はScript.aculo.usを使って簡単に行えます。必要なことは、Ajax.InPlaceEditorのインスタンスを作成し、次の3つのパラメータを渡すことだけです。
- <div>のID
- テキストを処理するサーバーコンポーネントのURL
- エディタをカスタマイズするためのオプションを含んだユビキタスなリテラルオブジェクト
最もよく使われるインプレースエディタのオプションを表3に示します。
| オプション | 説明 |
| okText | OKボタンに使用するテキストです。 |
| cancelText | Cancelリンクに使用するテキストです。 |
| savingText | 保存アクションの進行中に表示されるテキストです。デフォルトは「Saving..」です。 |
| rows | テキストフィールドに使用する行数です。1より大きい場合は、テキスト領域としてレンダリングされます。デフォルトは1です。 |
| cols | 使用する列数です。 |
| size | colsと同じですが、rowsが1のときに適用されます。 |
| onComplete | 更新が成功した場合に呼び出すコールバック関数です。 |
| onFailure | 失敗した場合に呼び出すコールバック関数です。 |
スライダ
スライダはデスクトップアプリケーションで日常的に使われているコントロールです。例えば、ボリュームコントロールはスライダの典型例です。スライダは基本的に「トラック」と、トラックに沿って動かせる「ハンドル」とから成っています。次の例では、ユーザーがハンドルをドラッグしたときに値を表示する簡単なスライダを作成しています。
Event.observe(window, "load", function() { new Control.Slider( 'sliderHandle', 'sliderTrack', { range : $R(0, 100), values : [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], onChange : updateValue, onSlide : updateValue } ); } );
上記のコードはHTMLページの一部にすぎません。実際のHTMLページは本稿のダウンロードサンプルに「simple-slider.htm」という名前で収録されています。
このコードでは、Control.Sliderのインスタンスを作成し、そこに次のパラメータを渡します。
- ハンドルを表す<div>のID
- トラックを表す<div>のID
- スライダをカスタマイズするためのリテラルオブジェクト
上の例で使われているオプションは次のとおりです。
- range -- 値の範囲
- values -- スライダが取ることのできる値（このオプションを定義すると、スライダに非連続的な値を取らせることができます）
- onChange -- ユーザーがハンドルの位置を変更したときに呼び出すコールバック関数
- onSlide -- ユーザーがハンドルをドラッグしたときに呼び出すコールバック関数
上の例では、onChangeとonSlideのどちらについても、コールバック関数としてupdateValueを使用しました。この関数はスライダの現在の値を表示する<div>の状態を更新するだけです。
このHTMLコードの要件は、次のように、ハンドルがトラックの子要素でなければならないという点だけです。
<div id="sliderTrack"> <div id="sliderHandle"></div> </div>
スライダの動作を図5に示します。
もちろん、CSSコードに手を加えればスライダの外観をさらにカスタマイズすることができます。例えば、スライダの見栄えをよくするために、トラックとハンドルの両方にイメージを使用することができます。
最後にもう1つヒントを紹介しておきましょう。次のようにすると、スライダの値をプログラム的に変更することができます。
var sliderRef = new Control.Slider( 'sliderHandle', 'sliderTrack', { range: $R(0, 100), values : [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], onChange : upDateValue, onSlide : updateValue } ); // set the slider value sliderRef.setValue(80);
この手法を使用するには、まずスライダインスタンスを参照に結びつける必要があります。そうすれば、Control.SliderクラスのsetValueメソッドを使って値を変更できます。
エンドユーザーエクスペリエンスの向上
これまでアプリケーション開発の世界では、応答性や使用できるコントロールの多彩さといった理由から、Webアプリケーションよりもデスクトップアプリケーションの方が好まれてきました。しかし今日では、Script.aculo.usなどのUIライブラリとAjaxライブラリを利用することで、応答性も見栄えもよいWebアプリケーションを開発できます。
本稿では、Script.aculo.usのコントロールをWebアプリケーションに組み込んで、より良いエンドユーザーエクスペリエンスを実現するための方法を紹介しました。
