第4回 jQuery Mobileによる問い合わせフォームの作成

jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。

＜画像＞sample01.jpg
作成するサンプル。jQuery Mobileを利用するとスマートフォンに最適化されたフォームを手軽に作成できる

フォームUIの課題とjQuery Mobileによる解決

　スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。

　以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。

＜画像＞02.jpg,03.png
iPhone（左）の標準フォームUIとAndroid（右）の標準フォームUI

　フォームUIの中でも、特にチェックボックスやラジオボタンはサイズが非常に小さく、タップ操作で正しく選択するのは困難です。しかもiPhoneの場合はlabel要素に対応していないので、label要素内のテキストをタップしてもチェックボックスやラジオボタンが選択されません（Androidはlabel要素に対応しています）。

　jQuery Mobileを利用することで、使いづらいブラウザー標準のフォームUIをスマートフォンに最適化された使いやすいフォームUIに変更できます。

フォームUIの基本

　jQuery Mobileのフォーム機能では、通常のHTMLと同じように、action属性とmethod属性を指定したform要素内にフォーム部品を記述していきます。


<form action="form.php" method="post">
（フォームの内容）
</form>

　フォーム部品は、data-role属性に「fieldcontain」を指定した要素で各パーツ（input要素やtextarea要素など）を包んで記述します。

　はじめに、お問い合わせフォームの「名前」からマークアップしてみましょう。「名前」は1行テキスト入力フォームですのでinput要素を使い、ラベル部分をlabel要素で記述します。

■サンプル1[HTML]


<div data-role="fieldcontain">
  <label for="name">名前</label>
  <input type="text" id="name">
</div>

　サンプル1を実行すると、jQuery Mobileで定義されているCSSによってフォーム部品が表示されます。

＜画像＞04.jpg

　このフォームは、端末の向きに応じてjQuery Mobileがレイアウトを自動的に調整してくれます。縦向き（portrait）のときはラベルの下にフォーム部品が表示され、横向き（landscape）のときはラベルの右にフォーム部品が表示さます。

05.jpg
端末の向きやサイズのよりフォームのレイアウトが変わる

【ワンポイント・メモ】
同一サイト内でのid名の重複に注意

　jQuery Mobileのフォームを利用するときに注意したいのが、label要素とフォーム部品とを関連付けるid名の扱いです。

　id名はもともと1つの文書内で1つの要素にしか付けられませんが、jQuery Mobileはページ管理にid属性を利用しているので、別のページであってもid名が重複していると誤動作を起こす可能性があります。jQuery Mobileでは同一サイト内で同じid名を使うことは推奨されていませんので、サイト全体でid名が重複しないように注意しましょう。

入力フォームの装飾と調整

　サンプル1でひとまず「名前」欄を表示できましたが、ページの見出し（h2要素）とフォームの間には不自然な余白があり、入力フォームの背景色がやや暗いので、デザインを少し調整しましょう。head要素内に次のようなCSSを追加します。

■サンプル2[HTML]


<div data-role="fieldcontain">
  <label for="name">名前</label>
  <input type="text" id="name">
</div>

■サンプル2[CSS]


/*入力フォームの背景を調整*/
textarea.ui-body-b,input.ui-body-b{
  background-color:white;
}
/*見出しとフォーム部品の間の余白を調整*/
.ui-field-contain:first-child{
  padding-top:0;
}

　ブラウザーで確認すると次のようになります。

＜画像＞06.jpg
CSSで入力フォームを調整した状態

複数行入力ボックスの最適化

　次に、「お問い合わせ内容」の項目をマークアップしましょう。「お問い合わせ内容」は複数行入力ボックスですので、textarea要素で記述します。

■サンプル3[HTML]


<div data-role="fieldcontain">
  <label for="comment">お問い合わせ内容</label>
  <textarea id="comment"></textarea>
</div>

＜画像＞07.jpg
jQuery Mobileで利用できる複数行入力ボックス

　この複数行入力ボックスは、入力したテキストの長さに応じて自動的にフォームの高さが変わります。

フリップスイッチを表示する

　続いて、jQuery Mobile独自のフォーム部品「フリップスイッチ」を使って「性別」の項目を作ります。フリップスイッチは2つの選択肢からどちらか一方を選択するUIです。select要素にdata-role属性「slider」を指定し、内側に2つのoption要素で項目を指定すると表示できます。

■サンプル4[HTML]


<div data-role="fieldcontain">
  <label for="gender">性別</label>
  <select name="gender" id="gender" data-role="slider">
    <option value="男性">男性</option>
    <option value="女性">女性</option>
  </select> 
</div>

　サンプル4をスマートフォンで表示すると、指でボタンをタップして項目を選択できます。

＜画像＞10.jpg
jQuery Mobileで利用できるフリップスイッチ

使いやすいチェックボックスの追加

　最後に残った「お問い合わせ種別」は、チェックボックスを使いましょう。チェックボタンはスマートフォンで非常に使いにくいフォーム部品の1つですが、jQuery Mobileを利用すると指で選択しやすい形状に最適化できます。

　チェックボックスは、type属性に「checkbox」を指定したinput要素で記述し、label要素でラベルと関連付けます。チェックボックス全体はdata-role属性に「controlgroup」を指定したfieldset要素で包み、fieldset要素の先頭にlegend要素で項目名（ここでは「お問い合わせ種別」）を記述します。

■サンプル5[HTML]


<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>お問い合わせ種別</legend> 
    <input type="checkbox" name="type1" id="type1" value="HP新規作成"> 
    <label for="type1">HP新規作成</label> 
    <input type="checkbox" name="type2" id="type2" value="HPリニューアル">
    <label for="type2">HPリニューアル</label> 
    <input type="checkbox" name="type3" id="type3" value="システム開発"> 
    <label for="type3">システム開発</label> 
    <input type="checkbox" name="type4" id="type4" value="コンサルティング"> 
    <label for="type4">コンサルティング</label>
  </fieldset>
</div>

＜画像＞14.jpg
最適化したチェックボックス

送信・キャンセルボタンの装飾

　最後に、フォームの送信・キャンセルボタンを作ってフォームを完成させましょう。jQuery Mobileではスマートフォンで操作しやすいボタンのUIが用意されており、以下のように記述するだけで表示できます。

■サンプル6[HTML]


<input type="button" value="キャンセル">
<input type="submit" value="送信">

サンプル6をスマートフォンで開くと、以下のように最適化されたボタンが表示されます。

＜画像＞19.jpg
jQuery Mobileにより最適化されたボタン

第2回で紹介したdata-theme属性を指定することでフォームのデザインテーマも変更できます（ただし、α4.1では不具合のためかデザインテーマが反映されません）。サンプル7はテーマ「b」を適用した状態です。

■サンプル7[HTML]


<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">

＜画像＞20.jpg
デザインテーマ「b」を適用させたボタン

　jQuery Mobileのボタンは通常、ページ幅いっぱいに表示されますが、data-inline属性に「true」を指定することで文字数にフィットしたボタンにもできます（サンプル8）。

■サンプル8[HTML]


<input type="button" value="キャンセル" data-theme="b" data-inline="true">
<input type="submit" value="送信" data-theme="b" data-inline="true">

＜画像＞21.jpg
文字数にフィットさせたボタン

　input要素にdata-icon属性を追加すると、それぞれのボタンにjQuery Mobileが用意したアイコンも表示できます。今回はサンプル9のように、キャンセルボタンに×アイコンを、送信ボタンに右矢印のアイコンを付けました。

■サンプル9[HTML]


<input type="button" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
<input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">

＜画像＞22.jpg
アイコンを追加したボタン

　以上で、お問い合わせページに必要なフォーム部品が揃いました。最後に今回紹介したフォーム部品をまとめて作ったページを確認しましょう。

■サンプル10[HTML]


<div data-role="page" id="contact" data-theme="b" data-back-btn-text="戻る">
  <div data-role="header">
    <h1>to-R</h1>
  </div>
  <div data-role="content">
    <h2 class="h1">お問い合わせ</h2>
    <form action="form.php" method="post">
      <div data-role="fieldcontain"> 
        <label for="name">名前</label>
        <input type="text" id="name">
      </div>
      <div data-role="fieldcontain"> 
        <label for="gender">性別</label> 
        <select name="gender" id="gender" data-role="slider"> 
          <option value="男性">男性</option>
          <option value="女性">女性</option>
        </select>
      </div>
      <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup"> 
          <legend>お問い合わせ種別</legend> 
          <input type="checkbox" name="type1" id="type1" /> 
          <label for="type1">HP新規作成</label> 
          <input type="checkbox" name="type2" id="type2" /> 
          <label for="type2">HPリニューアル</label> 
          <input type="checkbox" name="type2" id="type3" /> 
          <label for="type3">システム開発</label> 
          <input type="checkbox" name="type4" id="type4" /> 
          <label for="type4">コンサルティング</label> 
        </fieldset>
      </div>
      <div data-role="fieldcontain"> 
        <label for="textarea">お問い合わせ内容</label> 
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
      </div>
      <input type="submit" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
      <input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">
    </form>
  </div>
  <div data-role="footer">
    <h4>&copy; 2011 to-R</h4>
  </div>
</div>

　これまで見てきたように、jQueryではマークアップの規則さえ覚えてしまえばスマートフォンに最適化されたサイトを簡単に作成できます。次回は、サンプル作成で紹介したjQuery Mobileの機能と、まだ触れていないそのほかの機能をまとめて紹介します。


Comments