Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。4まとめ参考資料サンプルサイトのスクリプトを以下に示します。<h3>Codezine</h3></div></div></body></html>7-1.ボタンコンポーネント設定では、スマートフォンサイトでよく見られる他のページへのリンクボタンを呼び出します。「data-role="button"」でリンクボタンのスタイルが適用されます。「data-theme="e"」といった形でページで設定したスウォッチとは別のスウォッチを設定することもできます。「data-corners="false"」を設定すると、リンクボタンの角丸処理がなくなり、長方形のボタンになります。何も設定しない既定値はtrueなので、上の「はい」のボタンは角丸処理のあるリンクボタンとなっています。7-2.リストコンポーネント設定では、これもスマートフォンサイトでよく見られるリスト表示をします。ulタグ内で「data-role="listview"」を設定するとリストのスタイルを呼び出せます。通常は画面横幅いっぱいに広がりますが、「data-inset="true"」を設定することで、余白と角丸処理の付いたリストになります(既定値はfalse)。7-3.フォームコンポーネント設定では、スマートフォンで操作しやすい入力フォームを呼び出します。for="flip-g"」でlabel要素を定義した部分を、明確に他の入力フォームと区別できるよう表示できるようにするものです。横幅が480ピクセル以上のときは、ラベルとフリップスイッチの部分が1行のレイアウトになりますが、480ピクセル未満の時には、図6のようにラベルとフリップスイッチの部分が2行のレイアウトになり、「性別:」の部分がフリップスイッチの上に来ます。ラベルとフリップスイッチの部分が2行レイアウトになった画面select要素で「data-role="slider"」を設定すると、スマートフォンサイトでよく見られるフリップスイッチを表示できます。ハンドル部分のスライドか選択肢部分のタップで値を切り替えることができます。「data-theme="d"」はハンドル部分のスウォッチを定義したもので、「data-track-theme="e"」は右側の選択肢部分のスウォッチを定義したものです。最初のoption要素である「女性」の方が右側に配置されます。8.フッターの設定では、divタグで「data-role="footer"」と設定し、フッターのスタイルを呼び出し、タグで囲んだ文字列を表示します。このようにごく簡単な記述によって、スマートフォンで見やすい形のサイトを作成することができます。「data-role」というカスタムデータ属性で、さまざまなコンポーネントを呼び出すのが特徴です。Mobileを使ってごく簡単なスマートフォン向けサイトを作成するところまでを取り上げました。簡単な記述で、スマートフォンに特化したUIのサイトが作成できることがお分かりいただけたのではないでしょうか。1.2.0/1.3.0で採用された機能をより詳しく紹介し、ページ遷移のある、より複雑なスマートフォンサイトを作成してみます。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。