コーディングメソドロジー

第44回 jQuery MobileでSmartphone向けサイトを構築

jQuery Mobileとは、Smartphone構築のためのフレームワークの一つです。スライドショーやドロップダウンメニューなど、様々なプラグインがありますが、それらと同様にhtmlに読み込ませてからhtmlコーディングをすることで、簡易的にSmartphoneサイトを構築することができます。今回は基本的なページの作成のしかたをご紹介します。

外部ファイルを読み込む

外部ファイルを読み込む

まずは、jQuery Mobileを動作させるための外部ファイルを読み込みます。(01)
jQueryをベースとしたフレームワークなので、jQueryを読み込ませた後に、jquery.mobile-1.0.min.jsとjquery.mobile-1.0.min.cssを読み込ませます。

コンテンツ部分をコーディングする

コンテンツ部分をコーディングする

jQuery Mobileには、ページ作成のためのcssやjsがデフォルトで含まれているので、htmlコーディングのみでページを作成することが可能です。(02)
各タグに「data-role」や「data-theme」などの属性値を記述することで、ページ内でのレイアウトやカラーパターンを、また、「data-transition」属性値を記述することでページ遷移のアニメーションを決めることができます。

【コード解説】
*1

data-role="page"

「data-role」で、その要素の役割を指定しています。
値を「page」とすることで、その要素をページとして扱います。「<div data-role="page">」を複数記述することで、1ファイル内に複数のページを持たせることも可能になります。ページ遷移は、通常のhtmlでのアンカーリンクとなるので、同時にidも指定しておきます。

*2

data-theme="b"

カラーパターンを規定しています。a,b,c,d,eのいずれかを値に指定することでカラーを設定できます。

*3

data-role="navbar"

「data-role」を「navbar」に設定することで、ナビゲーションボタンを設置することができます。

*4

data-transition="slide"

ページ遷移のアニメーションを指定できます。
アニメーションには「slide(ページが横にスライド)」のほか、「slideup(ページが下から上にスライド)」「slidedown(ページが上から下にスライド)」「pop(ページが拡大しながら切り替わる)」「fade(フェードインで切り替わる)」などがあります。

デフォルトの状態でもSmartphoneライクなインターフェースを実現できるjQuery Mobileですが、htmlやcssの編集をすれば、レイアウト/デザインのカスタマイズも可能になります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム