映画アバター短評(ネタバレなし)
UIプロトタイプ:autocomplete (jQuery plug-in jSuggest)

プロトタイプ:AJAXで改良するフォーム入力

 ここのところ、Google App Engine上でアプリを作っている私だが、iPhoneアプリとかを作り慣れている私としては、単純なHTMLページの組み合わせでUIを作るというのでは面白くない。そこで、サーバーがModel、クライアントがViewとControllerというアーキテクチャととことん追求してサービスを作っているのだが、そのためにはさまざまなUI部品を作らなければならず、そこにやたらと時間がかかっている。

 始めた当初は、「今はオープンソースの時代だからUI部品もオープンなものを集めてくれば済む」と軽く思っていたのだが、実際に使おうとすると不必要に複雑だったり、汎用化されすぎていたりしてそのままでは使えないものが大半。結局のところ、そのまま使える品質のJavaScriptライブラリはjQueryのみで、それ以外は、(1)オープンなものを元にシンプルなものを作り直す、(2)スクラッチでゼロから作る、のどちらかになっている。

 ということで、今日紹介するのは、色々と既存のものを調べた結果自作することになった SmartField というJavaScriptライブラリ(JQueryプラグイン)。フォーム入力を分かりやすくするために、入力前にグレーのテキストを表示しておく Watermark の機能と、各入力項目ごとに複数の Validation 関数とエラーメッセージをクライアント側に用意しておき、大半のエラー処理をクライアント側でする、というライブラリである。

 とにかく、HTML+CSSがView、JavaScriptがControllerという関係を厳密に保とうとすると、Watermark として表示するテキストや、エラーメッセージはHTML側に置く必要があるため、そこからデザインを始めた。具体的には、

        <div class='smart' id='field1'>

            <span class='sf_overlay'>ここにパスワードを入力</span>

            <input type="password" name="password" id="password" class="password" >

            <span class='sf_messages'>

                <span>アルファベットと数字のみが使えます</span>

                <span>少なくとも4文字以上必要です</span>

            </span>

        </div>

と書いておけば、「ここにパスワードを入力」という文字列がWatermarkとして表示される。それに加え、二つあるValidation関数それぞれに、「アルファベットと数字のみが使えます」と「少なくとも4文字以上必要です」が対応している。

 ちなみに、Watermarkとエラーメッセージのテキストは当初は隠しておく必要がある(display:none)。スタイルシートはこんな感じだ(sf_overlayのposition:absoluteとz-index:2は必須。paddingとfont-sizeはWatermarkテキストをinputフィールドの上にきれいに表示するためのおまじない...ここはアプリごとに微調整が必要かも知れない)。

.sf_overlay {

    position:absolute

    color:#777;

    padding-left:4px;

    padding-top:2px;

    z-index:2;

    display: none;

    font-size: 90%;

}

.sf_messages {

    color: red;

    display: none;

}

 そして対応するValidation関数は、こんな感じで記述する。

    $('.smart').SmartField();

    $('#submit').click(function() {

        return

            $('#field1')[0].sf_validate([

                function(v) { return /^[a-zA-Z0-9]*$/.test(v); },

                function(v) { return v.length >= 4; }

            ]) == 0);

    });

 最初の行で、フィールドを「SmartField化」し、次の行で Submit ボタンが押された時に Validation 関数を実行するように指定する。どこかにエラーがあれば、対応するエラーメッセージを表示した上でSubmitはキャンセルされる、という仕組みだ。sf_validate() メソッドに関数のアレイを渡しているが、これが Validation 関数。それぞれが HTML 中のエラーメッセージに対応している。

 ちなみに、このライブラリ(ソースコードはこちら)はオープンソース(MITライセンス)なので自由に使っていただいて結構だが、ドキュメントはまだ書いていないので、サンプルやソースを参考にして使っていただきたい。

 下に貼付けたサンプルは、作っているアプリのパスワード設定画面の部分を抜き出したもの(Watermarkを前提に、ラベルを排除するなどの工夫がしてある)。極端に短いパスワードや特殊記号を入力してエラーがどんな感じで表示されるか試していただきたい。一通り、Safari4, Firefox3.5, IE7, Opera9 では動作確認をしてあるが、万が一バグ(Watermarkが見えない、など)を見つけた方はコメント欄などで報告していただけるとありがたい。

Comments

yellowseadog

Operaの現行バージョンは10.10です!(>__<)b

annoy

好みの問題もあるとは思いますが、GWT は駄目なんですか?

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)