都道府県の選択や、もっと複雑なところでは海外サイトの国名選択など、セレクトボックスから目的のものを探す際になかなか見つからずにイライラしてしまった経験はありませんか？
都道府県選択であれば、北海道から沖縄までの地域順、国名選択であればアルファベット順など、ルールに従ってソートされていることがほとんどですので、そのルールさえ分かっていれば、ある程度簡単に探すことができます。また、optgroupタグを利用するなど、標準の仕組みでできる改善策もあります。
とはいえ、いくら分かりやすくなるような工夫をしても、セレクトボックス自体がそもそも一覧性が低いため、ユーザビリティの改善にも限度があります。
そんなとき、セレクトボックスを分かりやすいパネル表示に拡張してくれる、selectable.jsはいかがでしょうか？
このスクリプトを適用すると、通常のセレクトボックスの見た目が変わり、一覧性の高いパネル表示に変更されます。仕組み自体はセレクトボックスを利用して、見た目だけ変えるしくみですので、サーバーサイトのプログラムの変更は不要で、導入も比較的容易です。
SuperSliderは複数並んだラジオボタンを見た目だけスライダーバー風に変更する、PrototypeとScript.aculo.usをベースにしたスクリプトです。
ウェブ上のFAQの末尾などに「この情報は役にたちましたか？」のような形でフィードバック用のアンケートが用意されていることがあります。一般的にこのようなアンケートはラジオボタンによる段階評価で行うことが多いのですが、段階評価であれば、スライダーバーのような全体の高低の関係が視覚的に分かるUIのほうが理解しやすく、回答の間違いも減ると思います。
スライダーバーはJavaScriptなどを使えば実現できるのですが、既存の仕組みがラジオボタンだったり、JavaScriptを利用できない環境でも使える必要がある場合などもあります。
そのような場合には、実際の仕組み自体はラジオボタンで実装しておき、見た目だけSuperSliderを使ってスライダーバー風にしてしまうというのが、JavaScript有効/無効の両方に効果的に対応する方法ではないでしょうか？
Masked Input Pluginは、jQueryベースのフォーマット入力サポートプラグインです。
入力フォームで郵便番号や電話番号を入力させる場合、ハイフンなどの区切り文字ごとにインプット要素を分けるかどうか、分けない場合区切り文字を入力させるかどうかで悩むと思います。
区切り文字ごとにインプット要素を分けた場合、 フォーマットと異なる形式で入力されることによる入力エラーなどは減りますが、タブやマウスクリックでインプット要素間を行き来する手間などが問題になります。
逆に、区切り文字も含めてひとつのインプット要素に入力させる場合には、フォーマットどおりに入力する手間が問題になります。
インプット要素間の行き来を自動的に行ってくれるものとして、以前「入力後に自動でフォーカスを移動してくれるスクリプト: Autotab」を紹介しましたが、Masked Input Pluginはひとつのインプット要素の中でフォーマットどおりに入力することをサポートするスクリプトです。。
Masked Input Pluginが適用されたインプット要素は、一見普通のテキストボックスのように見えますが、フォーカスを当てるとフォーマットを表す背景が表示されます。
上記画像は日付を入力するフォーマットで、「XX/XX/XXXX」という形式の入力を行う場合の例です。
フォーマットを背景に表示してくれるだけであれば、インプット要素の右側などに入力サンプルを例示しておくのとあまり違いがありませんが、Masked Input Pluginの場合には、さらに便利なことに、フォーマットに含まれる”/”(スラッシュ)などの入力はユーザーが行う必要がなく、自動的に補完されます。
つまり、XX/XX/XXXXというフォーマットであれば、数字を2文字入力した段階で”/”が自動的に補完され、3文字目の入力が”/”の後にくるようになります。
s3Sliderは複数の画像と説明文を一定時間で切り替えて表示するためのjQueryプラグインです。
このような動的な切り替えはFlashで行うことが多かったと思いますが、最近はJavaScriptでもクオリティの高いものを作ることができます。
Flashの場合にはテキストをコピーできないなどの問題がありますが、s3Sliderの場合はJavaScriptによる実装なので問題ありません。
アクセシビリティ的な視点でみると、FlashにしろJavaScriptにしろ、切り替え表示のような見せ方には難があるとおもいますが、プレゼンテーション的な視点では効果的な場面もあると思います。
「1234567890円」
上の金額がいくらだかパッと見で分かりますか？
業務で金額を入力してもらうフォームを作成していて、入力してる数字がいったいいくらなのか分かりづらかったので、読みやすいように単位で区切って横に表示してあげるJavaScriptを作成してみました。
似たようなもので、カンマを挿入するというものもありますが、生粋の日本人としては、カンマで区切られててもパッと見でいくらか分からないので、このような形にしてみました。
htmlは以下のような感じです。
<script type=”text/javascript” language=”JavaScript” charset=”UTF-8″ src=”numtani.js” /></script>
<input type=”text” id=”num” onKeyUp=”numTani(this);”/>
<span id=”num_msg”></span>
設置手順
セレクトボックスを使う場合、選択肢が多くなるにつれて、自分が選択したい選択肢を見つけるのが難しくなってしまいます。
そんなときには、情報の組織化を行ない、探しやすくしてあげる必要がありますが、その１つの手段として、optgroupというものがあります。
この機能を利用すると、セレクトボックスの表示は以下のようになります。
optgroupを利用するためのソースは以下のようになります。
<select name=”browser”>
<optgroup label=”Internet Explorer” class=”ie”>
<option label=”IE5.5″ value=”ie5″>IE5.5</option>
<option label=”IE6″ value=”ie6″>IE6</option>
<option label=”IE7″ value=”ie7″>IE7</option>
</optgroup>
<optgroup label=”Firefox” class=”ff”>
<option label=”FF1.5″ value=”ff1″>FF1.5</option>
<option label=”FF2″ value=”ff2″>FF2</option>
<option label=”FF3″ value=”ff3″>FF3</option>
</optgroup>
</select>
htmlの標準コンポーネントとして用意されているセレクトボックスですが、選択肢に色を付けたいとか、画像を使いたいというようなことに対応できないので若干機能不足を感じたことは無いでしょうか？
そんなときに便利なのが、セレクトボックスを独自実装して機能を拡張したSelectBoxFactoryです。
選択肢に画像を使ったり、
選択肢をリンクにしたり、
選択肢に色付けしたり、
といった、普通のセレクトボックスではできないことが実現された、ちょっと便利な拡張セレクトボックスが色々用意されています。
JavaScriptを使った独自実装なので、通常のセレクトボックスに変えてこれを利用すべきかどうか検討は必要です。
しかし、これを使うと今までやりたくてもできなかったことが実現できるかもしれません。
複数個の選択肢の中から順不同で複数を選択させる場合の入力方式としては、チェックボックスを利用する事が多いと思います。チェックボックスは一覧性があり、全体を把握できる点では分かりやすいですが、表示領域を広く取ってしまうため、使いづらい場合もあります。
今回紹介するSelectMultipleは、LIVEPIPE UIというライブラリの中の1つの機能なのですが、セレクトボックスで複数選択を可能にする入力インターフェースを提供しています。
初期状態では、通常のセレクトボックスとなんら変わりないのですが、横の"Select Multiple"をクリックすると、複数選択用のメニューが表示されます。
ここで、例えば上記のような３つを選ぶと、セレクトボックスの選択肢として、３つがセットになった選択肢が表示されるという仕組みです。
この方法であれば、省スペースで複数選択を実現できるので、インターフェースの一つの参考として覚えておいて損は無いと思います。
自治体や公官庁など、ターゲットユーザーが幅広くアクセシビリティが要求されるサイトや、ニュースサイトなど読み物主体のページで、文字サイズを変更できる機能をよく見かけます。「小」「中」「大」と３段階で切り替えられたり、「縮小」「標準」「拡大」など、多段階で切り替えられるものがよく使われています。
今回紹介するText Size Sliderは、そのような文字サイズの変更をスライダーのUIを用いて実現しているのが特徴です。
文字を大きくして見るというニーズは、高齢者の方には特に高く、そのような方をターゲットにしたサイト構築の場合には、必須と言える機能だと思います。（それで充分かはきちんと考える必要がありますが。）
また、ボタン式と比べると、スライダーの方が調整しているという間隔を覚えやすく、丁度良いところで設定できる印象を受けました。また、ツマミの位置が現在の文字の大きさを表しているので、もっと大きくできるとか、今のサイズが普通くらいなどという情報が分かりやすいです。
オンライン上で色々な文章を読めるようになったといっても、書籍ならではの魅力は色々あります。 書籍の良い所の一つに、ぱらぱらとめくりながら読み進めていけるというものがありますが、bookreader.jsはそのような、1ページずつ読み進めていく感覚をJavaScriptで実現したライブラリです。
本をめくる感覚をよりリアルにFlashで表現したものも他にいくつかありますが、bookreader.jsでは、文章を横にスライドさせることによって、読み進める感覚を表現しています。また、キーボードによる操作や文字サイズの変更機能などがデフォルトで盛り込まれていて、完成度は高そうです。
このスクリプトを組み込んだ例としては、以下のサイトが紹介されています。
コンテンツによっては、より本に近い見せ方をした方が、表現力がアップするような場合もありますので、そんなときにはこのbookreader.jsを使ってみるのも手かもしれません。
