dfFlexiGridは、サイトのレイアウトや文章のフォントサイズなどを動的に変更する仕組みを提供するスクリプトです。
まずはデモを見てみてください。これは見てもらったほうが早いです。
にょきにょきとエフェクト付きで変化するのは見ていて楽しい・・・。なんとなく、ロボットの変形を思わせますね。
ツールとしてWebサービスを提供するような場合には、メニューを非表示にして、領域を確保したい場合などがあると思いますので、そんなときにいかがでしょうか？
Archive for the Category » 実践 «
Category: 実践
| Leave a Comment
日付の入力をサポートする仕組みとしては、カレンダー型のpickerがよく用いられますが、何時何分という時間の入力の際に使えるpickerがこのNoGray Time Pickerです。
NoGray Time Pickerは、アナログ時計型のPickerで、時計の短針、長身をドラッグすることにより、時間を指定することができます。午前・午後表示と、24時間の2タイプがあるようです。
日付の入力の際には、曜日や何週目かなども判断材料になることが多く、普段良く見るカレンダーから選ぶというのが有効です。一方、時間の場合には、日付に比べるとアナログ時計を見ながら指定できるメリットは少ないですが、「10:25」のように、フォーマットを指定して入力させるような場合には、代替手段として用意してあげるととっつきやすくなるのではないでしょうか。
※AMとPMの切り替えがもう少し直感的ならなお良いのですが･･･（時計の中のAM,PMをクリックすると切り替わります）。
Category: 実践
| Leave a Comment
ウェブページの中にPDFファイルへのリンクがある場合には、そのリンクがPDFへのリンクであることを明記しておきましょうということは良く言いますが、PDFに限らず、リンク先がhtmlでない場合には明記してあげたほうが親切です。
しかし、毎回"(PDF)"のような文字をリンクに付けるのは手間ですし、文字だと一見して判りづらかったり冗長になってしまうことがあります。
そこで、Iconize Textlinkの仕組みを使うと、リンク先のURLの拡張子から自動的にファイルの種類を特定し、それに合ったアイコンを付加することができます。
この仕組みを導入しておけば、毎回ファイルの種類を書くという面倒な作業が不要になる上に、書き忘れたり、書き方が毎回変わってしまったりということが無くなるのでサイト内で一貫性を保つことも可能になります。
Category: 実践
| Leave a Comment
JQuery Cycle Pluginは、複数の画像を切り替えて1つの領域に表示したい場合に、画像の切り替えエフェクトを表示するためのJQueryプラグインです。
最近では、Ajaxなどでページ遷移なく表示内容を切り替えるようなケースが多くなり、適切な切り替えエフェクトを表示しないと、変わったことに気づいてもらえなかったりするという問題も発生してしまいます。
複数から1つを選んで表示する方法としては、"<前へ 次へ>"のような形式のものもあれば、サムネイルから1つを選ぶ場合、スライドショーのように一定時間ごとに切り替える場合などもあると思いますが、JQuery Cycle Pluginはデモがとても充実していて、色々な場合の実装例を見ることができます。（デモ見ているだけでも楽しいです・・・）
エフェクトの出来も良いので、機会があれば使ってみたいです。
Category: 実践
| Leave a Comment
都道府県の入力と言えば、セレクトボックスで47都道府県の中から選ぶのが一般的です。自分の住所であれば、セレクトボックスのどこら辺に○○県があるかなんとなく意識できるので、慣れてしまえばさほど苦ではないですが、あまりなじみの無い県を選ぼうと思うと結構大変だったりします。
今回紹介するjsmapは、そんな都道府県の入力を、より直感的でユーザビリティの高い方法で提供するためのスクリプトです。
?
htmlの要素としてはテキストフィールドになっているのですが、入力欄にフォーカスすると簡易な地図が地方ごとに表示され、地図上で目的の都道府県をクリックして選択することにより、入力欄にその都道府県名が入力されます。
Category: 実践
| Leave a Comment
製品のシリアルナンバーや、郵便番号など、あらかじめ決まっている桁数の文字を連続で入力する場合に便利な「Autotab: jQuery auto-tabbing and filter plugin」の紹介です。
ユーザーに連続した数字や記号を入力させる場合には、ルールに基づいて固まりに分けて入力させると入力がスムーズになります。
そのような、データを固まりに分けてユーザーの記憶や理解を助ける手法のことをチャンキング（chunking）と言います。
入力する際にも「CDケースの裏に書いてあるシリアルナンバーをサイトの入力フォームに書き移す」などの際に短期記憶を使うので、この手法が有効です。
しかし、入力エリアを分けた場合のデメリットとしては、全て入力するための手間が増えるということが挙げられます。
通常の場合には、文字を入力した後に次に入力したい領域をクリックし、また文字を入力するというような作業になります。
少しPCに詳しい人であれば、タブキーを使うかもしれませんが、どちらにしても次の領域に移るのが面倒です。
Category: 実践
| Leave a Comment
PopBoxはブラウザ上で画面遷移することなく、リアルタイムに画像を拡大・縮小・変形・移動などを行うJavaScriptです。
利用するシチュエーションについては「画像やhtmlの内部ウインドウ実装:highslideJS」のような、画像の拡大表示くらいしか思いつきませんが、拡大・縮小されるエフェクトが分かりやすいため、気に入りました。
サンプルを見ているだけでもいろいろできて楽しいですよ。
以下のサイトに詳しい日本語の説明があります。
Category: 実践
| 6 Comments
Proto.IPSはテキスト入力欄(input=text)に選択肢を追加することができるJavaScriptウィジェットです。
単純に入力よりは選択のほうが楽ですし、どのようなものを書けばよいのかイメージが付くので、うまく使えばユーザビリティの向上につながると思います。
テキスト入力欄に選択肢をつけるという視点でも便利ですが、今までラジオボタンで入力させていたものをテキスト入力で代用することも考えられます。
よくある以下のような選択肢の場合、サッカー、バレー、バスケットボール以外にしたければ、ラジオボタンで「その他」を選び、右のテキスト入力欄に入力するということを行います。
このような場合に、システムで厳密に管理する必要がなく、「その他」が割合的に多くなりそうなものであれば、Proto.IPSのような仕組みを使って代用すると、シンプルに実現することが可能です。
?(2008/5/26追記) ただし、セレクトボックスのような見た目になっているため、自由に入力できることに気づきづらいなど、そのまま使うには問題も出てきそうです。UIの発想としてこんなのもある程度でとらえて貰えるとよいかと思います･･･。
Category: 実践
| Leave a Comment
ウェブサイトの中では、日付を入力させるシチュエーションって結構多いと思います。
1つの日付の入力であれば、カレンダータイプのデートピッカーが沢山公開されていて、それを利用すれば、わかりやすい入力方法を提供することが可能です。
ですが、日付の範囲を入力させたい場合はどうすればよいでしょう？
開始日と終了日にそれぞれカレンダーを付けるよりは、このsliding date-pickerを利用したほうが、利用者に分かりやすく、手間が少ないため、ユーザビリティが高くなると思います。
範囲指定の場合には使ってみてください。
Category: 実践
| Leave a Comment
画面全体を使って何かの作業を行うようなアプリケーションの場合、常に表示されるメニューを用意しておくと、その分使える領域が小さくなってしまい、不便なことがあります。
そうでなくても、例えば、メイン領域に項目が多い表を表示したい場合などには、メニュー部分が無ければもっと広く使えるのに･･･思うことが無いでしょうか？
そのような場合に、このSexy Sliding Javascript side bar menuを使うと、メニューを表示したり非表示にしたりエフェクト付きで切り替えることができます。
表示・非表示を切り替えるだけであれば、他の方法でもいくらでもできますが、このスクリプトの良い点は、隠れたり、表示されたりという動きがきちんと表現されているところと、ラベル部分がツマミのようになっていて、「引っ張り出せる」ことをアフォードしている点です。
Category: 実践
| One Comment
