メディア掲載_Web Designing

Web Designing 2013年5月号

執筆:丸茂朋弘 執筆:丸茂朋弘

SmartphoneLab.2012年5月号

jQuery Mobileでフォームを拡張する

スマートフォンは、フィーチャーフォン(一般的な携帯電話)に比べて、画面が大きく、サイトの閲覧がしやすい。しかし、タッチパネルを使っているスマートフォンではフォームへの入力がしにくく、使い勝手は決して良いとは言えない。昨年、正式版が公開されたjQuery Mobileは、このようなスマートフォンの特徴を認めた上で、スマートフォンでも入力がしやすいようにフォームを拡張する機能が搭載されている。

スマートフォンでも使いやすいフォームを作ろう。

タッチパネルを使っているスマートフォンでは、ディスプレイの中に入力用エリアと表示用エリアが共存するため、アンケートや問い合わせなどの入力フォームでは各エリアが陣地を取り合ってしまい、とても使いづらい。特にPCサイトでよく見かけるラジオボタンやチェックボックスなどはタップできる領域が狭いため、ミスタッチを招いたり、選択したつもりが反映されていなかったりと、ユーザーにストレスを与えてしまうことが起りがちだ。

jQuery Mobileの機能の一つである「フォームの拡張」は、簡単な記述で端末デフォルトのUIを入力がしやすいように補ってくれる。たとえば、ラジオボタンやチェックボックスは、ボタン化されタップできる範囲が広がり、ミスタッチが起こりにくいUIに拡張される。
また、ディスプレイの大きさや向きに合わせたスタイルを自動で適用したり、セレクトメニューの複数選択を可能にするなど、標準では備えていない機能までも実装できる。

jQuery Mobileの採用事例

jQuery Mobileの採用事例

一休.com
http://www.ikyu.com/sd/
宿泊予約サイト。jQuery Mobile拡張チェックボックスを使用している

jQuery Mobileの採用事例

Century21
http://m.century21.be/
ベルギーのCentury21のサイト。条件検索のページで、さまざまなフォームが使用されている

SECTION1 テキスト入力フィールドの拡張

SECTION1 テキスト入力フィールドの拡張

フォームの中でもっとも頻繁に使われるのが、テキストの入力フィールドだ。氏名やメールアドレスの入力に用いられる一行入力フィールドと、問い合わせ内容・感想などの入力に用いられる複数行入力フィールドがある。jQuery Mobileで拡張すると、縦横どちらで持った時にも最適なレイアウトで表示されるように、ラベルと入力フィールドの配置が自動的に組み替わる仕様となる。

デフォルトの入力フィールド

入力フィールドは、通常では縦横どちらの持ち方でも同じレイアウトで表示される。そのため、リキッドレイアウトの場合はフィールド幅の設定に苦労することになる(01)。さらに、それぞれ十分な余白を確保しないと、各フィールドへのミスタッチを招いてしまう。

01デフォルトの入力フィールド

01 デフォルトの入力フィールド

CSSで、高さ、幅、余白を細かく設定する必要がある。幅は計算して%指定する

jQuery Mobileによる拡張

jQuery Mobileを用いて入力フィールドを拡張すると、入力フィールドの幅は変わらずに、label要素が縦持ちではフィールドの上、横持ちではフィールドの左と自動的に組み替わる仕様になる(02)。また、フィールド間に自動的に余白が取られるため、ミスタッチしにくいレイアウトになる。

02jQuery Mobileの入力フィールド

02 jQuery Mobileの入力フィールド

CSS、JavaScriptが自動で設定され、縦横どちらでも最適化された見た目になる

HTMLの記述

jQuery Mobileによる入力フィールドの拡張は、非常に簡単だ。フレームワークの読み込みなどの基本的な設定の後、03のように、label要素とtype属性に入力フィールドの設定をしたinput要素をdiv要素で一まとまりにし、「data-role="fieldcontain"」という属性を追加するだけだ(01)。これでテキスト入力がしやすいフィールドが完成する(04)。

03HTMLの記述

03 HTMLの記述

一行でも複数行でも同じ設定方法で最適化できる

04jQuery Mobileの入力フィールドの完成

04 jQuery Mobileの入力フィールドの完成

ラベル要素のテキストが多い場合も自動で折り返され、レイアウト崩れが起きないようになっている

HTML5で追加されたtype属性値で入力フィールドをもっと使いやすくしよう

HTML5では、「text」のほかにも入力フィールドとして利用できる値が追加されている。スマートフォンでは、それに対応することで、入力フィールドをアクティブにした時に最初に表示されるキーボードが最適化される。電話番号入力用キーボードが表示される「tel」、メールアドレス入力用に「@」ボタンが配置されたキーボードが表示される「email」といった値が用意されているので、ユーザーの手間を少しでも省くために、入力内容にあわせて適切なものを設定しよう。

HTML5で追加されたtype属性値で入力フィールドをもっと使いやすくしよう

「number」は数字や記号、「url」は「.」や「/」が入力しやすくなっている

SECTION2 ラジオボタン・チェックボックスの拡張

SECTION2 ラジオボタン・チェックボックスの拡張

ラジオボタンやチェックボックスは、もともとパーツが小さいため、スマートフォンでの入力がスムーズにいかないことが多い。jQuery Mobileでは、これらをボタン化して問題を解決している。

デフォルトのラジオボタン・チェックボックス

デフォルトで用意されているスマートフォンのラジオボタン・チェックボックスは、PCと同じパーツを使っているため、タップできる領域が狭く、入力がしにくい。また、今のiPhoneは、label要素に対応していないため、テキスト部分がタップ領域に含まれず、ユーザビリティが非常に悪い(01)。

01デフォルトのラジオボタン・チェックボックス

01 デフォルトのラジオボタン・チェックボックス

タップ可能な領域は、かなり狭い。指の太い人だと、親指による片手入力は難しい

jQuery Mobileによる拡張

ラジオボタン・チェックボックスをjQuery Mobileで拡張すると、パーツがボタン化される。これにより、タップ領域が拡大され、ユーザビリティが格段に向上する。
また、「data-role="controlgroup"」を設定するとボタンがグループ化されるので、まとまりがわかりやすくなる(02)。

02jQuery Mobileのラジオボタン・チェックボックス

02 jQuery Mobileのラジオボタン・チェックボックス

全体がディスプレイ幅いっぱいのボタンに変化する。横持ちにすると、さらに水平方向に拡大される

HTMLの記述

入力フィールドと同様に、こちらもシンプルだ(03)。グループ化するためにfieldset要素に「data-role="controlgroup"」を設定し、この中にラジオボタン・チェックボックスを記述していく(01)。legend要素で、このグループボタンのタイトルを付けることも可能だ(02)。 fieldset要素に「data-type="horizontal"」を追記すれば、水平にグループ化されたボタンに変更することもできる(04)。

03body要素の記述

03 body要素の記述

fieldset要素は、div要素でも代用できる

04ラジオボタン・チェックボックスの横並びボタン

04 ラジオボタン・チェックボックスの横並びボタン

ラジオボタン(血液型)とチェックボックス(季節)で見た目の違いがないので、混乱を与えてしまう可能性もある

この他の拡張フォームは?

今回、紹介した以外にも、jQuery Mobileで拡張されるフォームがある。submitやresetなどのボタン要素は、ディスプレイに合わせて幅が調整されたり、ボタン内に「>」「✕」といったアイコンの埋め込みが可能になるといった拡張が行われる(05)。
HTML5で登場した「type="range"」に対応したスライダは、横に数値入力フィールドが設けられ、細かな値の設定ができるようになる(06)。

05jQuery Mobileの拡張ボタン

05 jQuery Mobileの拡張ボタン

「data-inline="true"」を追記すると、文字数に合わせた幅になり、画面幅いっぱいには拡大されない

06jQuery Mobileの拡張スライダ

06 jQuery Mobileの拡張スライダ

Webアプリや、HTMLのネイティブアプリ変換の際に利用価値が高いスライダ

SECTION3 セレクトメニューの拡張

SECTION3 セレクトメニューの拡張

セレクトメニューは、jQuery Mobileを使うことによって、複数選択やグループ化が可能になり、スライダスイッチとしても使えるようになるなど、拡張性が高いパーツである。用途にあわせて細かく使い分けよう。

デフォルトのセレクトメニュー

セレクトメニューは、デフォルトでは中身のoption要素の文字数に応じてメニューの幅が決まる。メニューが開いた時は、iPhoneはドラム形式、Androidはリスト形式で表示され、その中から一項目だけを選択できる。複数の項目は選択できない(01)。

01デフォルトのセレクトメニュー

01 デフォルトのセレクトメニュー

デフォルトでは項目を一つ選択すると、メニューが自動的に閉じてしまうので、一項目しか選択できない

jQuery Mobileによる拡張

jQuery Mobileを使えば、02のような記述をすることで、セレクトメニューを大きく拡張できる(03)。
「data-native-menu="false"」を設定すると、通常のメニューの代わりにjQuery Mobile独自のメニューが表示される(01)。また、同時に「multiple="multiple"」を設定すると(02)、複数項目の選択が可能になる。複数項目を選択してメニューを閉じると、選択された項目数がカウントバブルとして表示される(04)。

02HTMLの記述

02 HTMLの記述

入力フィールドやラジオボタンに比べると多くの設定が必要だが、CSSやJavaScriptを一切書かなくていいので、通常に比べれば制作スピードを格段に早められる

03jQuery Mobileのセレクトメニュー

03 jQuery Mobileのセレクトメニュー

メニューは項目数が少なければオーバービューで、多ければページ遷移して表示される

label属性を付与したoptgroup要素でoption要素を括ると(03)、リスト項目をグループ化し、labelの値がグループ名として表示する。各option要素には、必ずvalue属性を持たせなくてはならない(04)。これは、value属性がないoption要素は自動的にプレースホルダ(セレクトメニューが閉じている状態で表示されるテキスト)として認識されてしまうためだ。

04選択項目数の表示

04 選択項目数の表示

プレースホルダに表示しきれない項目も含めた数が、カウントバブルで表示される

フリックで操作可能なスイッチ

さらに、セレクトメニューには、別の用途での使用を想定した拡張もある。これは、option要素が二つの場合に、select要素に「data-role="slider"」を設定すると(05)、オン/オフを切り替えるような「スライドスイッチ」になるというものだ(05)。実際のスイッチに近い感覚で操作ができるので、ユーザビリティの高いパーツと言えるだろう(06

05HTMLの記述

05 HTMLの記述

「data-role="slider"」を付加した場合、項目数が3つ以上になるとバグが発生するので気をつけよう

06jQuery Mobileによるセレクトメニューのスイッチ化

06 jQuery Mobileによるセレクトメニューのスイッチ化

タップもしくはフリックで切り替えができる

お問い合わせはこちらからどうぞ