CodeZine(コードジン)

特集ページ一覧

「jQuery Mobile」を活用したスマートフォンサイト作成(前編)

「jQuery プラグイン」の利用(13)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/28 14:00
目次

ヘッダー部分の解説

 1.スマートフォン画面での表示方法を指定している部分から解説します。「viewport」はコンテンツを表示するピクセル幅を決める概念です。スマートフォンは画面解像度が機種によってまちまちで、viewportの指定をしないと、コンテンツが小さく表示されるなど見えづらくなることがあります。

 viewportを指定するにはmetaタグを用います。「meta name="viewport"」の後に「content="width=device-width"」という指定を行います。contentの中は「"名前=値;名前=値;~"」と指定していきます。この指定によりスマートフォンの画面解像度に応じて、コンテンツが同じピクセル幅にレンダリングされます。どんな画面解像度でも横スクロールなどすることなく、画面の中にコンテンツがおさまり、非常に見やすくなりますので、通常スマートフォンサイトでは、この設定値を指定します。また、「initial-scale=1」は拡大縮小の初期値の設定であり、初期表示時に拡大・縮小表示をしない場合は通常1を指定します。

 2.CSSの読み込みでは、jQuery Mobile標準のCSSの読み込みを行います。そして必ず3.jQueryの読み込みを行ってから、4.jQuery Mobileの読み込みを行います。

ボディ部分の解説

 jQuery Mobileでは、HTML5の「カスタムデータ属性」という機能を活用して決められたスタイルを適用するのが大きな特徴です。カスタムデータ属性とは、本来要素値であるデータをタグの中の属性として記述する仕組みです。jQuery Mobileは文字列「data-」で始まる属性名が確認されると、属性名に従ってさまざまなスタイルを適用することができます。5.ページの設定では「div data-role="page"」という記述でこのdiv要素はページであることを定義していて、決められたスタイルが自動的に適用されます。

 「data-theme="b"」は「テーマ」のカラーバリエーション定義「スウォッチ」を定義しています。jQuery MobileはさまざまなUIパーツのスタイルを一括定義する「テーマ」という機能があり、特に何も組み込まなくても標準のテーマが用意されています。標準のテーマには5つの「スウォッチ」というカラーバリエーションがあり、aからeまで色のパターンがあります。aは黒が基調、bはグレーとブルー基調、cはグレー基調、dは白基調、eは黄色基調となっています。a、c、dはほぼ単色ですが、bはコンポーネントをブルーで示すことで、コントラストが強調されます。また、eは黄色を用いているため比較的目立つ色使いです。

 6.ヘッダーの設定の「div data-role="header"」は、ヘッダーであることを表し、スマートフォンサイトでよく見られるヘッダーのスタイルを呼び出すことができます。divタグで囲んだ文字列をヘッダーに表示できます。

 7.ページ内容の設定「div data-role="content"」は、このページの中身であることを表します。

さまざまなコンポーネントを用いたスマートフォンサイトの作成

 次に、ヘッダーとフッダーの間のコンテンツ部分にさまざまなコンポーネントを用いたサイトを作成してみます。

図4 jQuery Mobile サンプル(2)画面
図4 jQuery Mobile サンプル(2)画面

 パソコンで見るとこうした形になります。

図5 パソコンで見たjQuery Mobile サンプル(2)画面
図5 パソコンで見たjQuery Mobile サンプル(2)画面

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5