[index] [bottom] [prev] [next]

HTMLだけで、できることもある

普通のWebアプリケーション

Webアプリケーションのユーザインターフェイスは、通常HTMLで作成されます。ご存じの通り、HTMLは情報を提供する媒体としては優秀ですが、情報を入力するような場合は、とうてい優秀なインターフェイスとはいえません。

作っている側が言うのも何ですが、「よくこんなインターフェイスに、我慢できるなあ。」と思うくらいです。

実際の例で見てみましょう。簡単な伝票入力画面です。

全てのボタンはダミーです。押してもなにも起きません。

ちなみに、HTMLやJavaScriptのソースは、特に表記しません。適当にダウンロードして、解析してください。

受注伝票入力
(1/1)
明細 商品番号 商品名 数量 単価 金額 備考
合計 128,150
001 80031 浅黄色のかわいい一輪挿し 5 2,430.00 12,150
002 80088 マイセンのグラス(狐柄) 2 58,000.00 116,000

簡単に、インターフェイスを説明します。よくありがちなインターフェイスなので、何となく分かるとは思いますが。

  1. 商品番号に番号を手入力するか、商品検索ボタンを押下して、検索画面を表示し(別ウィンドウ)そこから選択して、商品を決定します。
  2. 数量を手入力します。
  3. 備考を手入力します。
  4. 登録ボタンを押下すると、一覧表示の一番下に商品が追加されます。この時点で、商品名の検索と、金額・合計の算出が行われます。
  5. 一覧表示のラジオボタンをチェックし、変更ボタンを押下することで、一覧表示中の内容が、上部の入力フィールドに表示され、変更が可能となります。
  6. 内容を変更し、登録ボタンを押下することで、一覧表示中の内容が変更されます。

かなり酷いインターフェイスですが、Scriptを使わない(使えない)場合は、この程度で我慢するしかない事が多いですね。

なにが悪くて、どう改良すれがよいのでしょう。少しずつ見ていくことにしましょう。

その前に

もし、このコンテンツを読んでいるあなたが、Webアプリケーションのユーザインターフェイスを、少しでも使いやすいものにできないか、調べている最中だとすれば、多少はお役に立てるかもしれません。

但し、作らなければ(改修しなければ)ならないWebアプリケーションのサポート対象に、ネットスケープナビゲータ4.xという文言が存在した場合、当コンテンツの内容は、全く役に立ちません。

なぜなら、ネットスケープナビゲータ4.xで満足できるインターフェイスなど、到底実現不可能だからです。

中途半端なスタイルシートのサポートや、マイナーバージョン毎に異なる、スクリプトのインターフェイスなど、到底受け入れられるはずのない実装をリリースしてしまった、ネットスケープ社がWebの表舞台を去ったのは、当然といえるでしょう。

ネットスケープナビゲータ4.xという、負の遺産を残して。

未だに、企業ユーザでは、サポートしなければならないところもあるようです(というかあります、しくしく)。

気を取り直して

さて、なぜHTMLのインターフェイスを利用した、Webアプリケーションは使いにくいのでしょう。

一つには、キーボードとマウスの併用を強いる、という部分にあるのではないでしょうか。入力はキーボードですが、ボタンは必ずマウスでクリックしなければならないインターフェイスは、結構いらいらさせられます。

最近のアプリケーションには、殆どの操作をマウスだけでできる、優れたユーザインターフェイスを持つものも少なくありませんが、流石にHTMLでそれを実現することは困難です(不可能です!)。

であれば、逆にキーボードだけで、実現するのはどうでしょう。コンピュータになれていないユーザには、未だにキーボードアレルギーの人も多いと言われていますが、マウスとの併用もありならば、受け入れてもらえるのではないでしょうか。

特に、多量のデータを入力しなければならない場合は、キーボードだけのインターフェイスの方が、マウスを使うより、遙かに効率よく入力できます。

幸い、HTML4には、accesskeyという機能が備わっています。

accesskeyを使えば、キーボードによるショートカットキーを、簡単に実現できます。

受注伝票入力 改良第一段
(1/1)
明細 商品番号 商品名 数量 単価 金額 備考
合計 128,150
001 80031 浅黄色のかわいい一輪挿し 5 2,430.00 12,150
002 80088 マイセンのグラス(狐柄) 2 58,000.00 116,000

ショートカットキーの実現方法は、Webブラウザによって異なりますが、[Alt]キーとの組み合わせが多いようです。

上記の例では、Alt+k([Alt]キーを押しながら、同時に[k]キーを押下する)で、商品検索のサブ画面が表示され(ダイアログで代用していますが)、Alt+gで商品番号入力エリアにカーソルが移動します。

多少よくなりました、商品検索を必要としない場合は、ショートカットと[Tab]キーの組み合わせで、それなりに効率よく入力できるはずです。

しかし、これでは商品を一つ登録するたびに、サーバへのアクセスが発生してしまいます。それどころか、画面に表示しきれない商品を表示するためだけに、サーバにアクセスしなければならないことになります。

確かに、千や万の単位の商品を表示するのであれば、一度にクライアントに取り込むのは無謀かもしれませんが、100や200の商品ならば、特に問題はないでしょう。上の画面の例であれば、一行分を300バイトとしても、200件で60Kバイト程度です。

それ以上に、内容の変更を行うために、明細から変更エリアにデータをコピーするだけでも、サーバへのアクセスを必要とします。クライアント側に存在する情報を、移動するだけであるにも関わらずです。

これは、サーバへのアクセス回数を増やして、高いサーバマシンを買わせようとする、ベンダーの陰謀です。間違いない!(^_^;

サーバへの負荷(アクセスの回数や、データ転送量)も含めて、Webシステムで、C/Sシステム並のインターフェイスを目指してみましょう。くどいようですが、Webブラウザは限定されます。DOM Level1は、最低サポートしていないと、話になりません。ネスケ4.xはサポート対象外です。IE4も同様です。IE5もCSSのサポートが甘いので、忘れたい存在です。

[index] [top] [prev] [next]