- 会社・スタッフ紹介
- メディア掲載_Web Designing
- SmartphoneLab.2012年5月号
執筆：丸茂朋弘
SmartphoneLab.2012年5月号
jQuery Mobileでフォームを拡張する
スマートフォンは、フィーチャーフォン（一般的な携帯電話）に比べて、画面が大きく、サイトの閲覧がしやすい。しかし、タッチパネルを使っているスマートフォンではフォームへの入力がしにくく、使い勝手は決して良いとは言えない。昨年、正式版が公開されたjQuery Mobileは、このようなスマートフォンの特徴を認めた上で、スマートフォンでも入力がしやすいようにフォームを拡張する機能が搭載されている。
スマートフォンでも使いやすいフォームを作ろう。
タッチパネルを使っているスマートフォンでは、ディスプレイの中に入力用エリアと表示用エリアが共存するため、アンケートや問い合わせなどの入力フォームでは各エリアが陣地を取り合ってしまい、とても使いづらい。特にPCサイトでよく見かけるラジオボタンやチェックボックスなどはタップできる領域が狭いため、ミスタッチを招いたり、選択したつもりが反映されていなかったりと、ユーザーにストレスを与えてしまうことが起りがちだ。
jQuery Mobileの機能の一つである「フォームの拡張」は、簡単な記述で端末デフォルトのUIを入力がしやすいように補ってくれる。たとえば、ラジオボタンやチェックボックスは、ボタン化されタップできる範囲が広がり、ミスタッチが起こりにくいUIに拡張される。
また、ディスプレイの大きさや向きに合わせたスタイルを自動で適用したり、セレクトメニューの複数選択を可能にするなど、標準では備えていない機能までも実装できる。
jQuery Mobileの採用事例
一休.com
http://www.ikyu.com/sd/
宿泊予約サイト。jQuery Mobile拡張チェックボックスを使用している
Century21
http://m.century21.be/
ベルギーのCentury21のサイト。条件検索のページで、さまざまなフォームが使用されている
SECTION1 テキスト入力フィールドの拡張
フォームの中でもっとも頻繁に使われるのが、テキストの入力フィールドだ。氏名やメールアドレスの入力に用いられる一行入力フィールドと、問い合わせ内容・感想などの入力に用いられる複数行入力フィールドがある。jQuery Mobileで拡張すると、縦横どちらで持った時にも最適なレイアウトで表示されるように、ラベルと入力フィールドの配置が自動的に組み替わる仕様となる。
デフォルトの入力フィールド
入力フィールドは、通常では縦横どちらの持ち方でも同じレイアウトで表示される。そのため、リキッドレイアウトの場合はフィールド幅の設定に苦労することになる（01）。さらに、それぞれ十分な余白を確保しないと、各フィールドへのミスタッチを招いてしまう。
01デフォルトの入力フィールド
CSSで、高さ、幅、余白を細かく設定する必要がある。幅は計算して%指定する
jQuery Mobileによる拡張
jQuery Mobileを用いて入力フィールドを拡張すると、入力フィールドの幅は変わらずに、label要素が縦持ちではフィールドの上、横持ちではフィールドの左と自動的に組み替わる仕様になる（02）。また、フィールド間に自動的に余白が取られるため、ミスタッチしにくいレイアウトになる。
02jQuery Mobileの入力フィールド
CSS、JavaScriptが自動で設定され、縦横どちらでも最適化された見た目になる
HTMLの記述
jQuery Mobileによる入力フィールドの拡張は、非常に簡単だ。フレームワークの読み込みなどの基本的な設定の後、03のように、label要素とtype属性に入力フィールドの設定をしたinput要素をdiv要素で一まとまりにし、「data-role="fieldcontain"」という属性を追加するだけだ（01）。これでテキスト入力がしやすいフィールドが完成する（04）。
03HTMLの記述
一行でも複数行でも同じ設定方法で最適化できる
04jQuery Mobileの入力フィールドの完成
ラベル要素のテキストが多い場合も自動で折り返され、レイアウト崩れが起きないようになっている
HTML5で追加されたtype属性値で入力フィールドをもっと使いやすくしよう
HTML5では、「text」のほかにも入力フィールドとして利用できる値が追加されている。スマートフォンでは、それに対応することで、入力フィールドをアクティブにした時に最初に表示されるキーボードが最適化される。電話番号入力用キーボードが表示される「tel」、メールアドレス入力用に「@」ボタンが配置されたキーボードが表示される「email」といった値が用意されているので、ユーザーの手間を少しでも省くために、入力内容にあわせて適切なものを設定しよう。
「number」は数字や記号、「url」は「.」や「/」が入力しやすくなっている
SECTION2 ラジオボタン・チェックボックスの拡張
ラジオボタンやチェックボックスは、もともとパーツが小さいため、スマートフォンでの入力がスムーズにいかないことが多い。jQuery Mobileでは、これらをボタン化して問題を解決している。
デフォルトのラジオボタン・チェックボックス
デフォルトで用意されているスマートフォンのラジオボタン・チェックボックスは、PCと同じパーツを使っているため、タップできる領域が狭く、入力がしにくい。また、今のiPhoneは、label要素に対応していないため、テキスト部分がタップ領域に含まれず、ユーザビリティが非常に悪い（01）。
01デフォルトのラジオボタン・チェックボックス
タップ可能な領域は、かなり狭い。指の太い人だと、親指による片手入力は難しい
jQuery Mobileによる拡張
ラジオボタン・チェックボックスをjQuery Mobileで拡張すると、パーツがボタン化される。これにより、タップ領域が拡大され、ユーザビリティが格段に向上する。
また、「data-role="controlgroup"」を設定するとボタンがグループ化されるので、まとまりがわかりやすくなる（02）。
02jQuery Mobileのラジオボタン・チェックボックス
全体がディスプレイ幅いっぱいのボタンに変化する。横持ちにすると、さらに水平方向に拡大される
HTMLの記述
入力フィールドと同様に、こちらもシンプルだ（03）。グループ化するためにfieldset要素に「data-role="controlgroup"」を設定し、この中にラジオボタン・チェックボックスを記述していく（01）。legend要素で、このグループボタンのタイトルを付けることも可能だ（02）。 fieldset要素に「data-type="horizontal"」を追記すれば、水平にグループ化されたボタンに変更することもできる（04）。
03body要素の記述
fieldset要素は、div要素でも代用できる
04ラジオボタン・チェックボックスの横並びボタン
ラジオボタン（血液型）とチェックボックス（季節）で見た目の違いがないので、混乱を与えてしまう可能性もある
この他の拡張フォームは？
今回、紹介した以外にも、jQuery Mobileで拡張されるフォームがある。submitやresetなどのボタン要素は、ディスプレイに合わせて幅が調整されたり、ボタン内に「>」「✕」といったアイコンの埋め込みが可能になるといった拡張が行われる（05）。
HTML5で登場した「type="range"」に対応したスライダは、横に数値入力フィールドが設けられ、細かな値の設定ができるようになる（06）。
05jQuery Mobileの拡張ボタン
「data-inline="true"」を追記すると、文字数に合わせた幅になり、画面幅いっぱいには拡大されない
06jQuery Mobileの拡張スライダ
Webアプリや、HTMLのネイティブアプリ変換の際に利用価値が高いスライダ
SECTION3 セレクトメニューの拡張
セレクトメニューは、jQuery Mobileを使うことによって、複数選択やグループ化が可能になり、スライダスイッチとしても使えるようになるなど、拡張性が高いパーツである。用途にあわせて細かく使い分けよう。
デフォルトのセレクトメニュー
セレクトメニューは、デフォルトでは中身のoption要素の文字数に応じてメニューの幅が決まる。メニューが開いた時は、iPhoneはドラム形式、Androidはリスト形式で表示され、その中から一項目だけを選択できる。複数の項目は選択できない（01）。
01デフォルトのセレクトメニュー
デフォルトでは項目を一つ選択すると、メニューが自動的に閉じてしまうので、一項目しか選択できない
jQuery Mobileによる拡張
jQuery Mobileを使えば、02のような記述をすることで、セレクトメニューを大きく拡張できる（03）。
「data-native-menu="false"」を設定すると、通常のメニューの代わりにjQuery Mobile独自のメニューが表示される（01）。また、同時に「multiple="multiple"」を設定すると（02）、複数項目の選択が可能になる。複数項目を選択してメニューを閉じると、選択された項目数がカウントバブルとして表示される（04）。
02HTMLの記述
入力フィールドやラジオボタンに比べると多くの設定が必要だが、CSSやJavaScriptを一切書かなくていいので、通常に比べれば制作スピードを格段に早められる
03jQuery Mobileのセレクトメニュー
メニューは項目数が少なければオーバービューで、多ければページ遷移して表示される
label属性を付与したoptgroup要素でoption要素を括ると（03）、リスト項目をグループ化し、labelの値がグループ名として表示する。各option要素には、必ずvalue属性を持たせなくてはならない（04）。これは、value属性がないoption要素は自動的にプレースホルダ（セレクトメニューが閉じている状態で表示されるテキスト）として認識されてしまうためだ。
04選択項目数の表示
プレースホルダに表示しきれない項目も含めた数が、カウントバブルで表示される
フリックで操作可能なスイッチ
さらに、セレクトメニューには、別の用途での使用を想定した拡張もある。これは、option要素が二つの場合に、select要素に「data-role="slider"」を設定すると（05）、オン／オフを切り替えるような「スライドスイッチ」になるというものだ（05）。実際のスイッチに近い感覚で操作ができるので、ユーザビリティの高いパーツと言えるだろう（06）
05HTMLの記述
「data-role="slider"」を付加した場合、項目数が3つ以上になるとバグが発生するので気をつけよう
06jQuery Mobileによるセレクトメニューのスイッチ化
タップもしくはフリックで切り替えができる
